Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // lib/blocks/Button/__tests__/index.js
- const modifierConfig = {
- primary: ({ theme }) => `
- background-color: ${theme.colors.primary};
- `,
- secondary: ({ theme }) => `
- background-color: ${theme.colors.secondary};
- `,
- disabled: () => `
- opacity: 50%;
- pointer-events: none;
- `,
- };
- const Button = styled.button`
- background-color: ${props => props.theme.colors.chrome500};
- border-radius: 2px;
- border: solid 1px transparent;
- color: ${props => props.theme.colors.chrome000};
- cursor: pointer;
- font-size: 1rem;
- padding: 0.5rem 1.5rem;
- outline: none;
- transition: all 200ms ease;
- &:hover,
- &:focus {
- background-color: ${props => lighten(0.05, props.theme.colors.chrome500)};
- box-shadow: 0 8px 8px 0 ${props => rgba(props.theme.colors.chrome600, 0.4)};
- }
- ${applyStyleModifiers(modifierConfig)}
- `;
Add Comment
Please, Sign In to add comment