Fix Storybook for Tag Component

Author: Tomdango

stories/CareCard.stories.tsx

@@ -9,9 +9,7 @@ export const NonUrgent = () => (
         <li>you're not sure it's chickenpox</li>
         <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
         <li>
-          your child is
-          {' '}
-          <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
+          your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
         </li>
         <li>you're concerned about your child or they get worse</li>
       </ul>
@@ -50,8 +48,8 @@ export const Immediate = () => (
         <li>also started with shortness of breath, sweating and feeling or being sick</li>
       </ul>
       <p>
-        You could be having a heart attack. Call 999 immediately as you need immediate treatment
-        in hospital.
+        You could be having a heart attack. Call 999 immediately as you need immediate treatment in
+        hospital.
       </p>
     </CareCard.Content>
   </CareCard>
@@ -65,9 +63,7 @@ export const WithoutVisuallyHiddenText = () => (
         <li>you're not sure it's chickenpox</li>
         <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
         <li>
-          your child is
-          {' '}
-          <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
+          your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
         </li>
         <li>you're concerned about your child or they get worse</li>
       </ul>
@@ -87,9 +83,7 @@ export const WithCustomVisuallyHiddenText = () => (
         <li>you're not sure it's chickenpox</li>
         <li>the skin around the blisters is red, hot or painful (signs of infection)</li>
         <li>
-          your child is
-          {' '}
-          <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
+          your child is <a href="https://www.nhs.uk/conditions/dehydration">dehydrated</a>
         </li>
         <li>you're concerned about your child or they get worse</li>
       </ul>
@@ -101,7 +95,6 @@ export const WithCustomVisuallyHiddenText = () => (
   </CareCard>
 );
 
-
 export default {
   title: 'Components/CareCard',
   component: CareCard,

stories/Tag.stories.tsx

@@ -1,25 +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);
+export const StandardTag = () => <Tag>Active</Tag>;
 
-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>
-  ));
+export const AllColours = () => (
+  <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>
+);
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+};