Vocabulary

The vocabulary is based on concepts taken from Atomic Design. All the chemistry related nomenclature is taken from there, so please read that article if you want to know more about the specific meaning of the terms. After comparing the terms in Atomic Design with the ones described below, you might wonder why we use slightly different meanings for the same terms: the reason is that some concepts from Atomic Design do not have a one-to-one mapping with the concepts that we use.

• Component: A component is an Atom level piece of UI that is implemented as a single React component or a set of tightly knit React components meant to be used together. Examples:

  • Simple component: Button
  • Complex component: Alert

• Composition: A set of Components that play well (Molecule level UI). Unlike a Component, a Composition is not implemented as a single or multiple part component: instead, it might be encoded in CSS so that position those components next to each other will result in special margins being applied that make the components play well together. Examples:

  • Text label and text

• Template: An Organism level UI implemented as a single React component that can be wrapped by a Wrapper component that sets the context for the Template (for example, by rendering it as a Dialog). Examples:

  • Explanation template