Converted Tag to a React Component

Author: Tomdango

src/__tests__/index.test.ts

@@ -2,6 +2,6 @@ import * as index from '../index';
 
 describe('Index', () => {
   it('contains all expected elements', () => {
-    expect(Object.keys(index)).toEqual(['SubNavigation']);
+    expect(Object.keys(index)).toEqual(['SubNavigation', 'Tag']);
   });
 });

src/all.scss

@@ -4,5 +4,5 @@
 // SubNavigation Component
 @import './components/sub-navigation/SubNavigation';
 
-// Tag Styling
-@import './styles/tag';
+// Tag Component
+@import './components/tag/Tag';

src/components.scss

@@ -1,5 +1,5 @@
 // SubNavigation Component
 @import './components/sub-navigation/SubNavigation';
 
-// Tag Styling
-@import './styles/tag';
+// Tag Component
+@import './components/tag/Tag';

src/styles/_tag.scss src/components/tag/_Tag.scss

@@ -1,5 +1,4 @@
-@import 'variables';
-@import 'core';
+@import '../../styles/variables';
 
 /* ==========================================================================
    #TAG

src/index.ts

@@ -1,3 +1,2 @@
-// Remove the next line once there is a second export.
-// eslint-disable-next-line import/prefer-default-export
 export { default as SubNavigation } from './components/sub-navigation';
+export { default as Tag } from './components/tag';

stories/Tag.stories.tsx

@@ -1,34 +1,33 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { Tag } from '../src';
 
 const stories = storiesOf('Tags', module);
 
-stories.add('Basic', () => {
-  return (
+stories
+  .add('Basic', () => (
     <div className="tag-demo">
-      <span className="nhsuk-tag">Standard</span>
-      <span className="nhsuk-tag">Done</span>
-      <span className="nhsuk-tag nhsuk-tag--white"> Started </span>
-      <span className="nhsuk-tag nhsuk-tag--grey"> Not Started </span>
-      <span className="nhsuk-tag nhsuk-tag--blue"> Ready to submit </span>
-      <span className="nhsuk-tag nhsuk-tag--red"> FP69 </span>
-      <span className="nhsuk-tag nhsuk-tag--orange"> Ceased - no cervix </span>
+      <Tag>Standard</Tag>
+      <Tag>Done</Tag>
+      <Tag color="white">Started</Tag>
+      <Tag color="grey">Not Started</Tag>
+      <Tag color="blue">Ready to submit</Tag>
+      <Tag color="red">FP69</Tag>
+      <Tag color="orange">Ceased - no cervix</Tag>
     </div>
-  );
-}).add('Colours', () => {
-  return (
+  ))
+  .add('Colours', () => (
     <div className="tag-demo">
-      <span className="nhsuk-tag">Standard</span>
-      <span className="nhsuk-tag nhsuk-tag--white"> Started </span>
-      <span className="nhsuk-tag nhsuk-tag--grey"> Not Started </span>
-      <span className="nhsuk-tag nhsuk-tag--green"> New </span>
-      <span className="nhsuk-tag nhsuk-tag--aqua-green"> Active </span>
-      <span className="nhsuk-tag nhsuk-tag--blue"> Pending </span>
-      <span className="nhsuk-tag nhsuk-tag--purple"> Received </span>
-      <span className="nhsuk-tag nhsuk-tag--pink"> Sent </span>
-      <span className="nhsuk-tag nhsuk-tag--red"> Rejected </span>
-      <span className="nhsuk-tag nhsuk-tag--orange"> Declined </span>
-      <span className="nhsuk-tag nhsuk-tag--yellow"> Delayed </span>
+      <Tag>Standard</Tag>
+      <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>
-  );
-});
+  ));