This article gives insight into component designs and how they can be extended.
Mercury components are built using React
Mercury UI components adhere to the Atomic
design methodology. This gives them a consistent look and feel, but also greatly facilitates reuse and extensibility. In short, the atomic design methodology organizes the components into three groups:
Atoms are the building blocks for other components. These are the low-level elements that are used across the molecules. Think of elements such as form fields, labels and components for displaying information like the product title and description.
Molecules group atoms together to realize a focused piece of functionality. An example of a molecule is the component that displays an individual product in the product list. This molecule uses atoms like the product title and description to display the product.
Organisms use molecules to implement a higher-level piece of functionality. Product molecules described above are used by the product lister organism to display a list of products.
Mercury components are designed to be as granular as possible. This reduces the chance that you will need to replace a complete component. Added to this, Mercury offers a client API to replace components.
Most of the time, components that need to be replaced will be on the molecular level. For example, in the product list, you might want to display additional fields, for which you can easily replace the product molecule. The molecules often don’t contain a lot of logic and group atoms together. The atoms are exposed through the API, so you can use these in your own molecules.