LUI - Linz User Interface!

Lui the happy UI worm!

Lui is a collection of generic UI components that adhere to Linz's new digital style guide, lead by STEP.

It aims to solve the problem of consistent UI across Step and hopefully benefit all Linz, while giving squads a bunch of base elements they can start using out of the box.

Aim to make each component generic, extendable and assessable.

All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper over the CSS is part of this project.

There is lots to do in this project, often things will be left until there is demand. Please join the Slack channel #lui-discussions.

Heavy inspiration is taken from https://github.com/GOVTNZ/govtnz-design-system

Layouts

Included in this CSS is a layout system based of the NZ Govt UI package which is based off https://flexboxgrid.com/. Except there is a g- prepended to all class names

How to consume

Storybook as documentation

Where it says import { x } from "./src" that means you put import { x } from @philals/lui in the app you are building.

To view the React component library please see the sections below on running Storybook.

CSS and HTML as documentation

Please see the static HTML files for documentation on how to use CSS. First you'll need to build the CSS:

./compile-sass.sh

Plain CSS

Once the Lui's CSS is hosted on a CDN it is able to be consumed. Please contribute if you want to use it.

CSS is also available as a file by building following the instruction above.

TODO: Host CSS on CDN TODO: Host static docs somewhere TODO: Automated pipeline (GitHub actions?)

ReactJS

npm install --save @philals/lui

This is the temp home of Lui until we build a proper automated pipeline.

TODO: A permanent home for NPM module TODO: Host the Storybook as documentation on how to implement the React components.

How to contribute

This project uses TSDX as a build system. This hides a lot of the painful stuff about publishing a module. See readme-tsdx for the TSDX docs.

Here's a quick lot of commands to get you going quickly:

npm install
npm run storybook

This will bring up Storybook which will show you how to use the components and write your own:

Run tests:

npm run test

Jump into #lui-discussions if you have any ideas and send a PR. Please check out the issues on this repo.

Tips and Trick

When you creat a new scss class, import it inside the base.scss in order to use it