nc-designs v0.0.89

nc-designs

See a list of available components here.

Getting started with the NPM package

Prerequisites

The components in this package are styled using Tailwind CSS. As such your project will also need to use Tailwind CSS to receive the stylings applied.

Install Steps

npm i nc-designs

You will need to merge your current tailwind config object with the config from within the package.

The function mergeTailwindConfig will take your current tailwind config object as its only argument. You will also need to ensure the receiving repo is able to access the exported tailwind config object by adding the path to your content array, as seen in the example below.

// tailwind.config.js

const { mergeTailwindConfig } = require('nc-designs');

module.exports = mergeTailwindConfig({
  content: ['./node_modules/nc-designs/lib/index.esm.js'],
});

Example usage

Each component will need to be accessed via the main exported object upon being imported. Once imported you will be able to hover over the component to see some documentation including the properties and respective types for the props to be passed in.

Available Components

Typography

Try to use these inbuilt typography components where possible as font families and sizes have been predetermined.

• BoldText
• ButtonContent
• Code
• IconText
• Link
• Paragraph
• PillText
• PrimaryTitle
• SecondaryTitle
• TertiaryTitle

Atoms

• Button1
• Button2
• Button3
• Button4
• Button5
• Tag
• Toggle

• ChallengeIcon
• DownArrowIcon
• Icon
• LabIcon
• LockedIcon
• NumberIcon
• PercentageIcon
• PlayIcon
• ReadingIcon
• SlackIcon
• SummaryIcon
• TickIcon
• UnlockedIcon
• UpArrowIcon

• SearchInput
• SingleLineInput
• TextArea

• Aside
• Comment
• DashedUnderline
• ErrorMessage
• InlineCodeSnippet
• Pill
• Signpost
• Tab
• Timer
• TitleAndDetails
• ToolTip

Molecules

• InputWithTitle
• LabelledOptionSet
• MiniForm
• NavBar
• NavigationMenu
• TabBar1

Using Storybook

We use Storybook to allow us to develop and test our components in isolation. This allows us to test our components in a variety of different states without worrying about other components.

Getting started with Storybook

To get started, run the following command:

npm run storybook

Adding a new story

If you are creating a new atom, you will want to also create a story for the atom. Within the src/atoms/your-atom directory, create a file named your-atom.stories.tsx. This file will contain the stories for your atom.

For a simple template, you can copy the following:

import { ComponentMeta, ComponentStory } from '@storybook/react';
import YourAtom from './your-atom';

export default {
  title: 'Atoms/YourAtom',
  component: YourAtom,
} as ComponentMeta<typeof YourAtom>;

const Template: ComponentStory<typeof YourAtom> = (args) => {
  return <YourAtom {...args} />;
};

export const Main = Template.bind({});

Main.args = {
  prop: true,
};

Testing with Dark Mode

To enable the Dark Mode functionality within Storybook, you can click on the Half Moon icon in the top right of the Storybook window. This will change your component if you have any dark: prefixes within your Tailwind styles.

You can also change the background colour within Storybook by clicking on the Painting icon (looks like a Canvas, but it's not the link that reads 'Canvas'), and clicking either lightModeNC or darkModeNC.

Testing with High Contrast mode

There are two ways to enable High Contrast styles within Storybook.

Google Chrome Browser

Firstly, head to your DevTools and hold CMD + Shift + P

This will open a search bar of features; search for Rendering then click it.

You are now able to see a new tab come up, this has multiple different cool features you are able to use to change the way webpages are rendered. In this case, we want to scroll to Emulate CSS media feature prefers-contrast.

We want to change this option to prefers-contrast: more, or No Emulation to disable it.

System Preferences

There are ways to do this on your operating system, and you can find how at these following links:

• Windows
• MacOS
• Linux/Ubuntu

Accessibility

When you run npm run storybook and it is running on localhost:6006, you can use the Accessibility tab to check for any accessibility issues. This will check for any accessibility issues, and tell you if there is anything wrong.

There are three tabs:

• Violations
• Passes
• Incomplete

Atomic Design

We use Atomic Design to structure our components. This allows us to create components in a way that is easy to understand, and allows us to reuse components across the project. We have a few rules that we follow when creating components:

Within this repository, try to avoid creating Organisms. These are components that are made up of multiple Atoms, Molecules, and Organisms. These are best suited to be created within the project that you are working on.

In this repository, we have:

Atoms

Atoms are the smallest components that we can create. These are the building blocks of our design system. These are the most basic components that we can create, and should be used to create Molecules and Organisms.

Typography

This is a folder full of components that are used to create text and anything typography based (links, titles, etc...)

These will handle anything such as dynamic font sizing, dark mode handling etc.

Icons

We have a folder full of icons that we can use within our components. These are all SVGs, and are exported as React components. To use an icon, you can import it into your component, and use it like so:

import { Icon } from '@nc-designs/icons';

const MyComponent = () => {
  return <Icon name="icon-name" />;
};

Updating the package on NPM

Ensure that any new components have been added to the library file at src/index.ts.

We have made an npm package which is hosted online, and enables us to use the design system in other projects. To update the package, you will need to run the following command:

npm version patch

This will increment the version number of the package, and now we need to push the new 'tags' to the remote repository. To do this, run the following command:

git push --tags

This will start a pipeline which tests the package, and if it passes, it will be published to NPM.

Once the pipeline has passed you will see the following in the terminal where n is the version number:

 * [new tag]         v0.0.n -> v0.0.n

Be aware that the new version will not be available on npm immediately - it typically takes about 5 minutes for the new package version to go live but it can take anything up to 24 hours.