@mojotech/mojo-ui

MojoTech UI

A set of styled React components for MojoTech.com user interfaces.

Usage

Mojo-UI is available as an npm module. Install the ui lib and peer dependencies

# with yarn
yarn add @mojotech/mojo-ui @emotion/core @emotion/styled emotion-theming onno-react

# with npm
npm install @mojotech/mojo-ui @emotion/core @emotion/styled emotion-theming onno-react

When using make sure to wrap all the components in the <ThemeDecorator /> component. This component provides the theme styles for the components, as well as adds MojoTech fonts and CSS reset.

Example:

import * as React from 'react'
import { ThemeDecorator, Section, Text } from '@mojotech/mojo-ui'

const Page: React.FunctionComponent = () => (
  <ThemeDecorator>
    <Section>
      <Text as="h1" fontSize={5}>Build Better.</Text>
    </Section>
  </ThemeDecorator>
)

Development

Upon cloning the repo and installing the dependencies run npm start to start the storybook dev server. Run npm run build-storybook to build a static version of the storybook to the storybook-static folder. Run npm build to compile the library into the dist folder.

Components

The components in this library are built using emotion, and onno. Emotion itself handles the styling of the components and onno provides the ability to use style props.

Theme

The core of the entire ui library is the theme file. The theme allows us to create a cohesive system of style values that are used across all components. The theme keys correspond to the render functions in onno. The array index of the property set in the theme is what onno looks for when applying the style.

Style Props

To style the components we use style props. For example:

<Box marginBottom={2} />

This would render out the Box component with a marginBottom that corresponds with the array index of 2 in the spaces key in the theme. The style props that are allowed to be used for each component are dictated by the render functions that each component uses. You can use your own non-theme values within the style props, but this should be only use sparingly as a means to preserve uniformity. For an extensive list of which css properties correspond to which render function visit the onno docs.

Responsive Values

The breakpoints for the components are set via the theme. For example:

breakpoints: [0, 600, 1200]

This would set three min-width breakpoints. One at 0px, 600px, and 1200px. To create responsive styles within a component you would use this syntax

<Box marginBottom={[0, 1, 2]} />

This would set the marginBottom within each breakpoint at the corresponding index.