effective-testing-for-styled-components-button-styles-with-theme

effective-testing-for-styled-components-button-styles-with-theme.js

// 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)}
`;