Feature/label

.storybook/preview.js

@@ -1,46 +1,90 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 import '../stories/govUkStyle.css';
 import '../stories/liveEdit/style.css';
-import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
 
 export const parameters = {
   options: {
     storySort: {
-      order: ['DCXLibrary',
+      order: [
+        'DCXLibrary',
         [
           'Introduction',
           'Utils',
-          'Form', [
-            'Autocomplete', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Button', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'CharacterCount', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Checkbox', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'CheckboxGroup', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'RadioGroup', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Input', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'InputMasked', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Select', ['Documentation', 'Live', 'Without style','Class based', 'Design system', [
-              'Playground', 'Default', 'Accessible','Dark','Material','Floating'
-            ]],
-            'MultiSelect', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Date', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'MultiUpload', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Progress', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Range', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Toggle', ['Documentation', 'Live', 'Without style', 'Class based'],
-            'Tooltip', ['Documentation', 'Live', 'Class based'],
-
+          'Form',
+          [
+            'Autocomplete',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Button',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CharacterCount',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Checkbox',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CheckboxGroup',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'RadioGroup',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Input',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'InputMasked',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Select',
+            [
+              'Documentation',
+              'Live',
+              'Without style',
+              'Class based',
+              'Design system',
+              [
+                'Playground',
+                'Default',
+                'Accessible',
+                'Dark',
+                'Material',
+                'Floating',
+              ],
+            ],
+            'MultiSelect',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Date',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'MultiUpload',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Progress',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Range',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Toggle',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Tooltip',
+            ['Documentation', 'Live', 'Class based'],
           ],
-          'CopyToClipboard', ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Details', ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Tabs', ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Table', ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Typography', [
-            'Heading',['Documentation', 'Live', 'Without style', 'Class based']
+          'CopyToClipboard',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Details',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Tabs',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Table',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
+          'Typography',
+          [
+            'Heading',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Label',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
-          'Changelog'
-        ]
-      ]
+          'Changelog',
+        ],
+      ],
     },
   },
   //with this custom configuration we removed the <Controls/> (the properties table) from the page. By default it sits between Primary and Stories
@@ -66,13 +110,17 @@ export const decorators = [
     console.log('storyTitle:', storyTitle);
     if (storyTitle && context.title !== storyTitle) {
       document.location.reload();
-      console.log('first')
-    } else if (storyId && context.id !== storyId && context.title !== storyTitle) {
+      console.log('first');
+    } else if (
+      storyId &&
+      context.id !== storyId &&
+      context.title !== storyTitle
+    ) {
       document.location.reload();
-      console.log('second')
+      console.log('second');
     }
     storyId = context.id;
     storyTitle = context.title;
     return storyFn();
-  }
+  },
 ];

example/src/components/LabelDemo.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Label } from '@capgeminiuk/dcx-react-library';
+
+export const LabelDemo = () => {
+  return (
+    <>
+      <h1>Demo of Label</h1>
+      <Label value="text" />
+    </>
+  );
+};

example/src/components/index.ts

@@ -17,4 +17,5 @@ export { TableDemo } from './TableDemo';
 export { TooltipDemo } from './TooltipDemo';
 export { DetailsDemo } from './DetailsDemo';
 export { CharacterCountDemo } from './CharacterCountDemo';
+export { LabelDemo } from './LabelDemo';
 export * from './library-candidates';

example/src/index.tsx

@@ -27,6 +27,7 @@ import './global-styles.scss';
 import { Login } from './pages/Login';
 import { Home } from './pages/HomePage';
 import { Register } from './pages/Register';
+import { LabelDemo } from './components/LabelDemo';
 const App = () => (
   <div>
     <BrowserRouter>
@@ -53,6 +54,7 @@ const App = () => (
         <Route path="/tooltipDemo" element={<TooltipDemo />} />
         <Route path="/details" element={<DetailsDemo />} />
         <Route path="/characterCount" element={<CharacterCountDemo />} />
+        <Route path="/label" element={<LabelDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

src/index.ts

@@ -18,4 +18,5 @@ export * from './copyToClipboard';
 export * from './table';
 export * from './details';
 export * from './common/utils/classNames';
+export * from './label';
 export * from './characterCount';

src/label/Label.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { classNames } from '../common';
+
+type labelProps = {
+  /**
+   * A CSS class for styling label
+   */
+  className?: string;
+  /**
+   * define the value of the label
+   */
+  value: string;
+  /**
+   * it will pass an id to the label element
+   */
+  id?: string;
+  /**
+   * Additional props/attributes
+   */
+  props?: React.HtmlHTMLAttributes<HTMLLabelElement>;
+};
+
+export const Label = ({ className, value, id, props }: labelProps) => (
+  <label className={classNames(['dcx-label', className])} id={id} {...props}>
+    {value}
+  </label>
+);

src/label/__test__/Label.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Label } from '../Label';
+
+describe('Label', () => {
+  it('should render', () => {
+    render(
+      <Label className="additional classes" value="text" id="user-defined-id" />
+    );
+    expect(screen.getByText('text')).toBeInTheDocument();
+  });
+
+  it('should render with the dcx-label className when no className Provided', () => {
+    const { container } = render(<Label value="text" />);
+    expect(container.querySelector('.dcx-label')).toBeInTheDocument();
+  });
+
+  it('should be able to render the dcx-label and the user specific className', () => {
+    const { container } = render(<Label value="text" className="styleOne" />);
+    expect(container.querySelector('.dcx-label')).toBeInTheDocument();
+    expect(container.querySelector('.styleOne')).toBeInTheDocument();
+  });
+
+  it('should be able to pass an id', () => {
+    const { container } = render(<Label value="text" id="my_id" />);
+    expect(container.firstChild).toHaveAttribute('id', 'my_id');
+  });
+
+  it('should be able to pass some extra properties', () => {
+    const { container } = render(
+      <Label value="text" props={{ style: { color: 'red' } }} />
+    );
+    const labelElement = container.getElementsByClassName('dcx-label');
+    const style = window.getComputedStyle(labelElement[0]);
+    expect(style.color).toBe('red');
+  });
+});

src/label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label';

stories/Label/ClassBased.stories.js

@@ -0,0 +1,24 @@
+import { Label } from '../../src/label/Label';
+
+/**
+ * In this section we're using the Label component providing the **GovUk style** passing the relative className.
+ * Feel free to use your own css to style the formInput as you prefer.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Label/Class based',
+  component: Label,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  name: 'Basic',
+  args: {
+    value: 'text',
+    className: 'govuk-label',
+  },
+};

stories/Label/Documentation.mdx

@@ -0,0 +1,27 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as LabelStories from './UnStyled.stories';
+
+<Meta title="DCXLibrary/Typography/Label/Documentation" />
+
+# Label
+
+A Label component ready to use in your form.  
+Label is UI/UX agnostic so you need to provide your style to have the look and feel you prefer.  
+When you import the label component without providing any className or style associated will looks as following:
+
+<Canvas of={LabelStories.Unstyled} />
+
+A more complex example with all the possible properties is:
+
+```js
+<Label
+  className="additional classes"
+  value="text"
+  id="user-defined-id"
+  props={{ style: { color: red } }}
+/>
+```
+
+Below a list of all the available properties:
+
+<ArgTypes of={LabelStories} />

stories/Label/Live.stories.js

@@ -0,0 +1,23 @@
+import { Label } from '../../src/label/Label';
+import LabelLive from '../liveEdit/LabelLive';
+
+export default {
+  title: 'DCXLibrary/Typography/Label/Live',
+  component: Label,
+
+  parameters: {
+    options: {
+      showPanel: false,
+    },
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  },
+};
+
+export const Live = {
+  render: () => <LabelLive />,
+};

stories/Label/UnStyled.stories.js

@@ -0,0 +1,17 @@
+import { Label } from '../../src/label/Label';
+
+export default {
+  title: 'DCXLibrary/Typography/Label/Without style',
+  component: Label,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+};
+
+export const Unstyled = {
+  args: {
+    value: 'text',
+  },
+};

stories/liveEdit/LabelLive.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { Label } from '../../src/label/Label';
+
+const LabelDemo = `
+function LabelDemo() {
+
+  return (
+    <Label
+      className="additional classes" value="text" id="user-defined-id" props={{}}
+    />
+  )
+}
+`.trim();
+
+const LabelLive = () => {
+  const scope = { Label };
+  return (
+    <LiveProvider code={LabelDemo} scope={scope}>
+      <div className="container">
+        <LiveEditor className="liveEditor" aria-label="editor" />
+        <LivePreview className="livePreview" aria-label="preview" />
+      </div>
+      <LiveError className="liveError" aria-label="error" />
+    </LiveProvider>
+  );
+};
+
+export default LabelLive;