WIDENARROW UI

Welcome to WideNarrowUI, a component library for use in InfoDesk's products.

Installation

npm install widenarrow-ui

Setup in your project

Import the baseline.scss at the top of you stylesheets to a) properly normalize and reset css and b) apply the WNUI baseline to your project, making sure every component is rendered as intended c) and get the required fonts.

@import "widenarrow-ui/styles/baseline.scss"

Start building!

Import the component(s) you wish to use!

import { Box, Grid, Heading, Paragraph } from 'widenarrow-ui';

(...)

return (
    <Grid container>
        <Grid xs={12} md={4}>
            <Box displayFlex>
                <Heading type="h1">WideNarrow UI is great!</Heading>
                <Paragraph>And just look at how easy it is to use.</Paragraph>
            </Box>
        <Grid>
    </Grid>
)

Development

Storybook

Components are documented, viewed and developed in Storybook Running storybook for development

npm run start

Build

The project is built and bundled using rollup.js Building the project

npm run build

Publish to npm

Make sure the version in package.json is bumped. Publishing should always be made from master branch.

npm login

You need login information for npm (contact a collaborator). Type in these credentials now.

npm publish