ⓘ All components defined within this styleguide are categorized following the atomic design pattern by Brad Frost.
Components are always defined as one of these
Since the goal is to make a healthy mix between functional components and keeping our code DRY when defining components, some components will share code but still be defined as separate components.
Sometimes a component has a similar technical logic, but an entirely different functional meaning. For example: an alert box and a CTA could look the same, but they’re to separate components that can be used elsewhere on the page.
When you bump into a situation like that, do this:
But hey! shouldn’t variants be defined into the same comonent?
Good point… We’re making the distinction between functional and technical variants. Functional variants should be defined as a real/visible variant for your component. Technical variants just share code and can therefore be separate components.
Two components - alert and CTA should both be displayed as a box with a background color, title, description and (optional) button. They look the same visually, but have other functional purposes.
Folder structure:
31-molecules
├──
│ └── CTA
│ └── cta.html.twig
│ └── cta.config.js
│ └── alert
│ └── alert.html.twig
│ └── alert.config.js
└── box.html.twig
└── box.config.js
└── _box.scss
cta.html.twig
{% include '@box' with _self.context %}
cta.config.js
module.exports = {
title: 'CTA',
status: 'alpha',
context: {
title: "Call to action",
description: "Click the button below and find out what happens.",
href: "https://gph.to/2BpmIKC",
link: "Click me",
icon: "link"
},
};