In our company we are using Atomic Design for our design system (made with React and with Styled Components as our styling solution), in order to break down our UI into atoms, molecules and organisms
I have a doubt regarding when an atom should be classified as an atom or if it should be inside its parent domain.
You can see an example of this type of composition in this Material UI Card example (which does not use atomic design, but you can get the idea anyway).
So, imagine the following example, you have a Card Atom (since it's only a wrapper that returns a styled HTML tag with children):
const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>
There are also defined some children to go along with the Card
, such as CardHeader
, CardBody
and CardFooter
, all of them optional styled wrappers and they are passed as children if necessary.
So, which would be the right approach in this example?
CardHeader
, CardBody
and CardFooter
should be classified as atoms, outside the Card
domain (meaning it's folder)-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
CardHeader
, CardBody
and CardFooter
should be placed inside the Card
domain since they are not reusable (meaning they are designed to be used only with the Card
atom), and should be exported there alongside Card
, so the only atom in this example would be Card
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
Simple answer: The Latter.
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
As you said, CardHeader
, CardBody
are not reusable outside of Card
domain. Therefore, it will not make sense to put these sub-components on the same level as a Card. Pro Tip: You can encapsulate these sub-components so they are exported under Card. E.g. Card.Header
, Card.Body
etc to make things more obvious.
Another point that may help you: in my projects, I do not assume Card to be an atom, but a molecule. Atoms are the building blocks. A Card is a collection of smaller building blocks like Text, Images and Buttons. Hence, it makes more sense as a molecule.