alanbsmith

// src/blocks/Card/index.js

import styled from 'styled-components';

import Header from './Header';
import Image from './Image';
import Text from './Text';
import Title from './Title';

const Card = styled.div`

alanbsmith

// SomeComponent.js

import Card from './blocks/Card';

...
<Card>
  <Card.Header>
    <Card.Image
      alt=”bob-ross-headshot”
      src=”www.example.com/bob-ross.jpg”

alanbsmith

├ src/
├── blocks/
| ├── Card/
| | ├── Header.js // <- Element
| | ├── Image.js  // <- Element
| | ├── Text.js   // <- Element
| | ├── Title.js  // <- Element
| | └── index.js  // <- Block
├── elements/
| ├── A.js        // <- Element

alanbsmith

// lib/elements/A/index.js

import styled from 'styled-components';
...
const A = styled.a`
  color: #263238;
  text-decoration: none;
  transition: color 0.2s ease;
  &:hover {
    color: #0097a7;

alanbsmith

const modifierConfig = {
  darkGreyText: ({ theme }) => `
    color: ${theme.colors.base.text};
  `,

  midGreyText: ({ theme }) => `
    color: ${theme.colors.base.textLight};
  `,
  
  uppercase: () => `

alanbsmith

<A
  href="https://example.com"
  modifiers={['darkGreyText', 'uppercase']}
/>

alanbsmith

import Card from './blocks/Card';
import CardHeader from './blocks/Card/Header';
import CardImage from './blocks/Card/Image';
import CardText from './blocks/Card/Text';
import CardTitle from './blocks/Card/Title';

alanbsmith

import Card from './blocks/Card';

alanbsmith

$ git clone [email protected]:alanbsmith/jest-snapshot-example.git
$ cd jest-snapshot-example
$ yarn install

alanbsmith

$ yarn lint:js
$ yarn lint:js:watch