@nulogy/components

@nulogy/components

Built with React, compononents make it easy to create interfaces that conform to the principles of the Nulogy Design System. Components are styled-components written using styled-system. This makes it possible to write CSS directly in JS and pass props based on our design constraints.

Installation

yarn add @nulogy/components

Usage

1. Add fonts

Add IBM Plex Sans and IBM Plex Mono to your application

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">

2. Wrap your appliction in our theme provider

Wrap your application in the NDSProvider component to access Nulogy's theme values and add typographic defaults.

import React from 'react'
import { NDSProvider } from '@nulogy/components'

class App extends React.Component {
  render() {
    return (
      <NDSProvider>
        // your application 
      </NDSProvider>
    )
  }
}

3. Import desired components

import { Button } from '@nulogy/components'

const SomeView = () => (
  <Button>Click me</Button>
)

Please see the documentation for instructions on how best to use each component.

Changelog

0.20.0 (2020-01-20)

Features

• add option to pass locale to all date components (#509) (0322866)
• Add showTimes prop to DateRange which displays time pickers next to the date pickers (#508) (3f9f8e9)
• added a print icon (#513) (77726a0)
• NDS-1258 feat: add TimeRange component (#507) (1199e35)