Merge pull request #78 from NHSDigital/feature/newTagComponent

NHS.UK 4 - Add New Tag Component

Author: Tomdango

.storybook/storybook.scss

@@ -1 +1,14 @@
 @import '../node_modules/nhsuk-frontend/dist/nhsuk.css';
+
+.tag-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  & > .nhsuk-tag {
+    margin-bottom: 10px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}

src/__tests__/index.test.ts

@@ -56,6 +56,7 @@ describe('Index', () => {
       'SkipLink',
       'SummaryList',
       'Table',
+      'Tag',
       'Textarea',
       'LedeText',
       'BodyText',

src/components/tag/Tag.tsx

@@ -0,0 +1,25 @@
+import React, { HTMLProps } from 'react';
+import classNames from 'classnames';
+
+interface TagProps extends HTMLProps<HTMLSpanElement> {
+  color?:
+    | 'white'
+    | 'grey'
+    | 'green'
+    | 'aqua-green'
+    | 'blue'
+    | 'purple'
+    | 'pink'
+    | 'red'
+    | 'orange'
+    | 'yellow';
+}
+
+const Tag: React.FC<TagProps> = ({ className, color, ...rest }) => (
+  <strong
+    className={classNames('nhsuk-tag', { [`nhsuk-tag--${color}`]: color }, className)}
+    {...rest}
+  />
+);
+
+export default Tag;

src/components/tag/__tests__/Tag.test.tsx

@@ -0,0 +1,34 @@
+import { shallow } from 'enzyme';
+import React, { ComponentProps } from 'react';
+import Tag from '../Tag';
+
+describe('Tag', () => {
+  it('matches snapshot', () => {
+    const wrapper = shallow(<Tag>Active</Tag>);
+
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find('strong').props().className).toBe('nhsuk-tag');
+
+    wrapper.unmount();
+  });
+
+  it.each<ComponentProps<typeof Tag>['color']>([
+    'white',
+    'grey',
+    'green',
+    'aqua-green',
+    'blue',
+    'purple',
+    'pink',
+    'red',
+    'orange',
+    'yellow',
+  ])('adds colour class %s ', colour => {
+    const wrapper = shallow(<Tag color={colour} />);
+
+    expect(wrapper.find('strong').props().className).toBe(`nhsuk-tag nhsuk-tag--${colour}`);
+
+    wrapper.unmount();
+  });
+});

src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag matches snapshot 1`] = `
+<strong
+  className="nhsuk-tag"
+>
+  Active
+</strong>
+`;

src/components/tag/index.ts

@@ -0,0 +1,3 @@
+import Tag from './Tag';
+
+export default Tag;

src/index.ts

@@ -48,6 +48,7 @@ export { default as Select } from './components/select';
 export { default as SkipLink } from './components/skip-link';
 export { default as SummaryList } from './components/summary-list';
 export { default as Table } from './components/table';
+export { default as Tag } from './components/tag';
 export { default as Textarea } from './components/textarea';
 export { LedeText, BodyText } from './components/typography';
 export { default as WarningCallout } from './components/warning-callout';

stories/Tag.stories.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import centered from '@storybook/addon-centered';
+import { Tag } from '../src';
+
+const stories = storiesOf('Tag', module);
+
+stories
+  .addDecorator(centered)
+  .add('Standard Tag', () => <Tag>Active</Tag>)
+  .add('All Colours', () => (
+    <div className="tag-wrapper">
+      <Tag color="white">Started</Tag>
+      <Tag color="grey">Not started</Tag>
+      <Tag color="green">New</Tag>
+      <Tag color="aqua-green">Active</Tag>
+      <Tag color="blue">Pending</Tag>
+      <Tag color="purple">Received</Tag>
+      <Tag color="pink">Sent</Tag>
+      <Tag color="red">Rejected</Tag>
+      <Tag color="orange">Declined</Tag>
+      <Tag color="yellow">Delayed</Tag>
+    </div>
+  ));