@nulogy/components

Component library for the Nulogy Design System - http://nulogy.design

Usage no npm install needed!

<script type="module">
  import nulogyComponents from 'https://cdn.skypack.dev/@nulogy/components';
</script>

README

@nulogy/components

npm (scoped) Build PRs Welcome

Built with React, components make it easy to create interfaces that conform to the principles of the Nulogy Design System.

📦 Installation

1. Add the package

Peer dependencies

@nulogy/components relies on React, ReactDOM and Styled Components. You will need to add these to your projects dependencies if they are not there already.

To add Styled Components: yarn add styled-components@^5.0.0

Please check that you are using versions that match the peerDependencies listed in the components/package.json.

2. Add fonts

Add IBM Plex Sans and IBM Plex Mono to your application, however you prefer to load assets. An example using Google Fonts is shown below.

<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" />

If your application supports Simplified Chinese, you'll also need to load Noto Sans SC.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet" />

Note that loading fonts from Google API is just an example and not the most performant way to load fonts for your application. You'll most likely want to include the font's inside your existing asset pipeline.

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>;

✨ Usage

🌎 Localization

A locale prop can be passed to <NDSProvider /> to change the language of aria-labels and strings inside our components. See the Localization Guide for the full list of supported languages and their codes.

⚠️ Testing components

  • See the Testing Guide for information on how to test NDS components inside of your application.

🎨 UI Kit

Designers can use NDS in Sketch by downloading the UI Kit. See the Designers' Getting Started Guide for more detail.

📚 Documentation

Component documentation and usage guides are stored in the github.com/nulogy/nulogy.design repository.

🙌 Contributing

Please see Contributing.MD if you work at Nulogy and would like to contribute.

💬 Questions

📦 Related Packages

The design-system is a collection of related packages. If you're looking for more packages, see below.

Package Description
@nulogy/css CSS components and utility classes for adding new styles to non-React applications CSS on NPM
@nulogy/icons A selection of Material Icon svgs used by Nulogy applications Icons on NPM
@nulogy/tokens Design language styles (e.g colours, type, spacing, shadows, etc.) Tokens on NPM