@nib-components/content-icon v2.3.8

Setting up your component

Delete this section after you've setup the component

Before the component is accepted into the DLS:

1. Github: Create the repository under your own username/organisation

When the component is accepted into the DLS:

1. Github: Transfer ownership of the repository to frontend
2. BuildKite: Create a New Pipeline
3. BuildKite: Enter the following settings:

• Name: content-icon
• Git Repository: git@git.nib.com.au:frontend/content-icon.git

4. BuildKite: Remove the default Step and add a Read steps from repository step

• And add cd deploy && bundle install && bundle update sceptre sceptre-dotnet sceptre-app && bundle exec sceptre-app pipeline upload to the Commands to run textbox
• And add os=linux to the Agent Targeting Rules textbox

5. BuildKite: Create Pipeline and follow the instructions to add the webhook to GithubEnterprise
6. BuildKite: Go to Settings

• Check Build pull requests from third-party forked repositories and click Save Github Enterprise Settings
• Copy the Markdown badge from Settings and past it below.

7. Github: Edit the readme to remove these steps and kick off a New build
8. Github: Protect the master branch

• Go to Settings > Branches
• Choose the master branch
• Check Protect this branch
• Check Require status checks to pass before merging
• Check Include administrators and Require branches to be up to date before merging
• Check all Status checks found in the last week for this repository

@nib-components/content-icon

A content-icon component.

Installation

npm install --save @nib-components/content-icon

ImageIcon Usage

import ImageIcon, {DlsIcon, iconBuilder} from '@nib-components/content-icon';

const iconTypes = {
  imageIcon: ImageIcon,
  dlsIcon: DlsIcon
};

const Icon = iconBuilder(iconTypes);

const iconElement = icon && (
  <Icon {...iconProps} iconTypes={iconTypes}/>
);

ImageIcon Properties

image

An object that contains a url string.

Required. An object.

type

The icon type. This should be derived from the Contentful entry type. It will be picked up by the default mapper and is used as the key for the iconTypes map.

Required. A string.

DlsIcon Properties

name

The name of the icon. This is specific to nib and nib icons.

Required. A string.

rotate

A string value containing the rotate value. One of '0', '90', '180', '270', '360'.

Optional. A string. Defaults to 0.

size

A string value containing the size value. One of 'xs', 'sm', 'md', 'lg', 'xl'.

Optional. A string. Defaults to sm.

color

A string value containing the color value.

Optional. A string. Defaults to #fff.

type

The icon type. This should be derived from the Contentful entry type. It will be picked up by the default mapper and is used as the key for the iconTypes map.

Required. A string.

Note

ImageIcon and DlsIcon can be imported from @nib-components/content-icon. Any other custom icon components can also be added to the iconTypes map.

Change log

1.0.0

Initial release.

Contributing

You can edit the files in ./src, whilst running npm run watch. This will compile for the ./dist folder.

Contentful

The iconBuilder, ImageIcon, DlsIcon and mappings for an ImageIcon or DlsIcon can be imported from @nib-components/content-icon -

import ImageIcon, {DlsIcon, iconBuilder, imageIconMapping, dlsIconMapping} from @nib-components/content-icon;

For the ImageIcon component to render using the imageIconMapping an Image Icon entry should be added to the relevant Contentful space with the following entries -

For the DlsIcon component to render using the dlsIconMapping a Dls Icon entry should be added to the relevant Contentful space with the following entries -