Examples - connectivedx/Unslated GitHub Wiki

Each atomic elements created comes with an .example.jsx file (pages & tools don't have examples and are the exception). Example files allow developers to express all possible use cases and style/children variants of an element.

import Element from './Element';
import docs from '!!docgen-loader?htmlDescription!./{{name}}';

export default [{
  docs,
  examples: [
    {
      name: 'Default styling',
      description: '',
      component: (
        <Element>Lorem ipsum</Element>
      )
    }
  ]
}];

We first import our element, and then pass our element to the docgen loader and create a new docs variable. From here we simply export our docs and examples object. The examples object allows you to build out an array of object to support multiple examples per element.

• name = Allows developers the opportunity to give each example a unique title naming.
• description = Allows developers to include additional details or descriptions per example.
• component = The actual usage of our imported element within a multi-line return.
• options = Example options to support better visual control over each example's pallet areas -- padding (string::1rem default) = Define how much padding an example pallet ought to have. -- background (string::build/guide/assets/example_bg.png default) = Change or turn off example pallet background image. -- brightness (float::1.0 default) = Define a brightness of an example pallet background. 0.0 = black 1.0 full brightness.

Instead of trying to juggle element use cases across many files, try focusing on crafting all your example use cases within your element example file, and then use the Utils.getExample(String::Example file, int::Example number) method to extend your examples out to other areas as needed.

import Element from 'atomic level/element/element.example';

const page = () => (
  <div>
    Utils.getExample(Element, 0); // This get's Element's example 0
  </div>
);

page.options = {
  navless: true,
  headless: true
};

export default page;