SUL UI

SUL UI is designed to provide a solid foundation for websites and applications. With a primary goal to standardize components across projects.

SUL UI is an extension of theme-ui and is based on a theme specification.

Core Principles:

• Each component is simple and intuitive
• Each component is 100% tested
• Each component is responsive
• Each component is well defined with design, ux and development documentation

Install

npm install @sul/ui

Usage

SUL UI is designed to be simple. Each component is built to work in isolation and self-supporting.

Quick Start

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider, Button } from '@sul/ui'

import theme from './theme'

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>Hello World</Button>
  </ThemeProvider>
)

ReactDOM.render(<App />, document.querySelector('#app'))

To provide the theme in context, wrap your application with the ThemeProvider component and pass in a custom theme object.

The theme object follows the system-ui theme specification.

// example theme.js
export default {
  fonts: {
    body:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

Component Status

Current version: Pre-release 1.0.0-alpha.1

SUL UI is a living, breathing system that will grow with our needs. Here you'll find the ongoing status of our system. Stable signifies the component is ready to be used in a production environment. Experimental components, designs and other resources are presented for testing and feedback. They're not intended for production use.

Elements

Provide basic building blocks. These are typically low-level presentational components.

| Component | Stable | Experimental | | ----------- | -------- | ------------ | | AspectRatio | ✓ | - | | Button | ✓ | - | | Divider | ✓ | - | | Form | ✓ | - | | Heading | ✓ | - | | Icon | ✓ | - | | Image | ✓ | - | | Link | ✓ | - | | Text | ✓ | - |

Layout

Provide or manipulate structure in some way.

| Component | Stable | Experimental | | --------- | -------- | ------------ | | Article | ✓ | - | | Box | ✓ | - | | Card | ✓ | - | | Container | ✓ | - | | Flex | ✓ | - | | Grid | ✓ | - | | Section | ✓ | - |

Modules

Modules are lower-level functional utilities or components. Typically these are extended and used in presentational level components.

| Component | Stable | Experimental | | --------- | -------- | ------------ | | Layer | ✓ | - | | Popover | - | ✓ |

Patterns

Provide advanced layout and additional functionality. These components are typically more opinionated on structure.

| Component | Stable | Experimental | | --------- | -------- | ------------ | | Copyright | ✓ | - | | MailTo | ✓ | - | | Modal | ✓ | - |

Utilities

| Utility | Stable | Experimental | | -------- | -------- | ------------ | | keyboard | ✓ | - |

Tag Descriptions

| Tag | Name | Definition | | --------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | ✓ | Ready | The component is design and dev ready | | ⚠ | Under Review | Indicates that a component’s design, code, or usage is being re-examined or created. | | X | Deprecated | Deprecated components have either been completely replaced by new components or are no longer being supported in the component library. | | (New) | | This component is brand new to SUL UI | | (Updated) | | Applied only to existing components after they have been under review, tweaked, and re-released to the design system. |

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Please read CHANGELOG.md for detailed changes to this project.

Authors

• Andrew Smith - Initial work - Stiff Upper Lip

License

This project is licensed under the MIT License - see the LICENSE.md file for details.