@ethereansos/interfaces-ui NPM

Ethos UI

This package holds the design system and the complex components and widgets.

It should grow with all the components needed by the application.

Components

The available sample components are:

ConnectWidget

Styling

All the components are styled with postcss-modules.

Let's take the Button component as an example.

The stylesheet is in the button.modules.scss SASS file. The name of all stylesheet files needs to be COMPONENT.modules.scss, where COMPONENT is the name of the component. Every stylesheet should have a .root selector for the component, for example:

.root {
  font-size: 15px;
  font-weight: bold;

  &.primary {
    background-color: $color-primary;
  }

  &.secondary {
    background-color: $color-secondary;
  }
}

To use this stylesheet, you need to import it and reference it as follows:

import classNames from 'classnames'
import style from './button.module.scss'

const Button = ({ text, onClick, variant, className }) => (
  <button className={classNames(style['root'], style[variant], className)}>
    Hello!
  </button>
)

To reference a stylesheet class from the component use style[CLASS]. The postcss-modules build will convert it into a class named 'dfo-ds_COMPONENT_CLASS, as defined in the rollup.config.js file. So, for our button component, the name will be dfo-ds_button_root.

The classNames function imported by the classnames module converts the arguments into a string of space-separated classes. The arguments can be of different types: see the module documentation for more information.