Styling

Styling components

Origami components

Components which provide markup and logic for existing Origami components do not need to provide any styles and should instead provide instructions for installing the Origami package in their readme. These components should expect the required class names to be made available globally by the consuming application.

To include Origami styles in a component's Storybook demos use the dependencies option in your component's Storybook configuration.

Component-specific styles

For components which are not a part of Origami, x-dash provides the tools to author and bundle styles alongside the JavaScript package. Styles can be written using Sass and it is strongly encouraged to follow the Origami SCSS syntax standard which in short means:

• Always import Origami dependencies in silent mode and integrate via mixins
• Use BEM naming conventions to properly scope your styles
• Never modify selectors from another component's namespace
• Do not use ID selectors, :not(), and avoid %extends
• Use ARIA role attribute selectors where appropriate

CSS files should be stored in src directory, adjacent to the component that will use them and follow the same naming convention. For example, if you have a button component then you may have two files; Button.jsx and Button.css.

If your component's styles might be useful outside of the FT.com ecosystem, you should speak to the Origami team about creating an Origami component.

Please note: referencing classes and toggling them based on properties can become unwieldy so the classnames or classcat packages can help avoid some of the formatting hassle.

Manifest

To instruct the x-dash tools where to output styles and provide a hint to consumers where to import styles from, add a style property to the component's package manifest. This is the path to the bundled CSS output.