Elements - connectivedx/Unslated GitHub Wiki

Elements are anything from an atoms to organisms, and can be found under src/elements/*. All atoms, molecules, organisms and templates elements come with the following file pattern:

  • [element].jsx = Main JSX file use for element rendering
  • [element].css = Main CSS file to style our element's baseline styles and possible style variants
  • [element].examples.jsx = File to house all element's examples that is visible from the styleguide.
  • [element].test.jsx = File to house all element's unit tests to capture any broken use cases.
  • [element].container.js = File to house any supporting client side JS your element may need (optional).

container.js files

_Note: container.js files are used to keep the React library out of the bundled assets.js. container.js files are installed from the src/scripts.js file using the Utils.initComponent() method. _

If your end project happens to be a full react application, container.js files might not be needed for your and writing supporting JS within the main .JSX file of your elements might be best.

There are two ways to create new elements in Unslated.

  • Dev GUI
  • Command line

Create from DEV GUI

If you happen to be already running a dev instance, you can simply open up the main navigation and find a create button. This button will prompt a dialog to fill out and create a new element. First specify what atomic level you wish your element to live (atom, molecule, organism, modifier, template, page), give it a name (Please note naming format must be pascal case) and decide if element will need a supporting Container.js file.

Create from Command Line

At the root of the Unslated checkout, you can study the package.json -> scripts section to see all the available baseline scripts used for element scaffolding. To create a new element from command line, open a new terminal window to the root of Unslated checkout and run:

npm run new:[atomic level] [element name]
or
yarn new:[atomic level] [element name]

[atomic level] = atom, molecule, organism, modifier, template, page [element name] = The name which you wish to give this new element. (Please note naming format must be pascal case)