KeyboardInput Component

.storybook/preview.js

@@ -83,6 +83,10 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Link',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'InsertText',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'KeyboardInput',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
           'Changelog',
         ],
@@ -97,7 +101,7 @@ export const parameters = {
         <Subtitle />
         <Description />
         <Primary />
-        <Stories includePrimary={false}/>
+        <Stories includePrimary={false} />
       </>
     ),
   },

example/src/components/KeyboardInputDemo.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KeyboardInput } from '@capgeminiuk/dcx-react-library';
+
+export const KeyboardInputDemo = () => {
+  return (
+    <>
+      <h1>Demo of KeyboardInput</h1>
+      <KeyboardInput>ctrl + p</KeyboardInput>
+    </>
+  );
+};

example/src/index.tsx

@@ -31,6 +31,7 @@ import { Register } from './pages/Register';
 import { InsertTextDemo } from './components/InsertTextDemo';
 
 import { LabelDemo } from './components/LabelDemo';
+import { KeyboardInputDemo } from './components/KeyboardInputDemo';
 const App = () => (
   <div>
     <BrowserRouter>
@@ -60,6 +61,7 @@ const App = () => (
         <Route path="/insertText" element={<InsertTextDemo />} />
         <Route path="/link" element={<LinkDemo />} />
         <Route path="/label" element={<LabelDemo />} />
+        <Route path="/keyBoard" element={<KeyboardInputDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

src/index.ts

@@ -22,3 +22,4 @@ export * from './label';
 export * from './characterCount';
 export * from './insertText';
 export * from './link';
+export * from './keyBoard';

src/keyBoard/KeyboardInput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { classNames } from '../common';
+
+export type KeyboardInputProps = {
+  /**
+   * Specify a custom class name to be applied to the KeyboardInput
+   */
+  className?: string;
+  /**
+   * Value specified by the user
+   */
+  children: React.ReactNode;
+  /**
+   * It will pass an id to the KeyboardInput element
+   */
+  id?: string;
+  /**
+   * Additional props/attributes
+   */
+  props?: React.HTMLAttributes<HTMLElement>;
+};
+
+export const KeyboardInput = ({
+  children,
+  className,
+  id,
+  props,
+}: KeyboardInputProps) => {
+  const classes = classNames(['dcx-keyboard-Input', className]);
+
+  // Return a kbd element with the dynamic class name and any additional props passed to the component
+  return (
+    <kbd className={classes} id={id} {...props}>
+      {children}
+    </kbd>
+  );
+};

src/keyBoard/__test__/KeyboardInput.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { KeyboardInput } from '../KeyboardInput';
+
+describe('KeyboardInput', () => {
+  it('should render', () => {
+    render(
+      <KeyboardInput
+        className="additional classes"
+        children="text"
+        id="user-defined-id"
+      />
+    );
+    expect(screen.getByText('text')).toBeInTheDocument();
+  });
+
+  it('should have the class dcx-keyboard-Input if the user does not specify any additional class', () => {
+    render(<KeyboardInput children="ctrl+p" id="user-defined-id" />);
+    expect(screen.getByText('ctrl+p')).toHaveClass('dcx-keyboard-Input');
+  });
+
+  it('should have the class dcx-keyboard-Input and the user based class if the user specifies any additional class', () => {
+    render(
+      <KeyboardInput
+        children="ctrl+p"
+        id="user-defined-id"
+        className="my-custom-class"
+      />
+    );
+    expect(screen.getByText('ctrl+p')).toHaveClass('dcx-keyboard-Input');
+    expect(screen.getByText('ctrl+p')).toHaveClass('my-custom-class');
+  });
+
+  it('should be able to pass some extra properties', () => {
+    const { container } = render(
+      <KeyboardInput
+        children="ctrl+p"
+        id="user-defined-id"
+        props={{ style: { color: 'red' } }}
+      />
+    );
+    const keyboadInputElement =
+      container.getElementsByClassName('dcx-keyboard-Input');
+    const style = window.getComputedStyle(keyboadInputElement[0]);
+    expect(style.color).toBe('red');
+  });
+
+  it('should be able to pass an id', () => {
+    const { container } = render(
+      <KeyboardInput children="ctrl+p" id="user_defined_id" />
+    );
+    expect(container.firstChild).toHaveAttribute('id', 'user_defined_id');
+  });
+});

src/keyBoard/index.tsx

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

stories/InsertText/ClassBased.stories.js

@@ -1,5 +1,8 @@
 import { InsertText } from '../../src/insertText/InsertText';
-
+/**
+ * In this section we're using the InsertText component passing the relative className.
+ * Feel free to use your own css to style the formInput as you prefer.
+ */
 export default {
   title: 'DCXLibrary/Typography/InsertText/Class based',
   component: InsertText,
@@ -14,7 +17,8 @@ export default {
 export const Basic = {
   name: 'Basic',
   args: {
-    value: 'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+    value:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
     className: 'govuk-inset-text',
   },
 };

stories/InsertText/Live.stories.js

@@ -2,7 +2,7 @@ import { InsertText } from '../../src/insertText/InsertText';
 import InsertTextLive from '../liveEdit/InsertTextLive';
 
 export default {
-  title: 'DCXLibrary/Typography/InsertText/live',
+  title: 'DCXLibrary/Typography/InsertText/Live',
   component: InsertText,
 
   parameters: {

stories/KeyBoard/ClassBased.stories.js

@@ -0,0 +1,23 @@
+import { KeyboardInput } from '../../src/keyBoard/KeyboardInput';
+/**
+ * In this section we're using the KeyboardInput component passing the relative className.  
+ * Feel free to use your own css to style the KeyboardInput as you prefer.  
+ */
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Class based',
+  component: KeyboardInput,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  name: 'Basic',
+  args: {
+    children: 'ctrl+p',
+    className: 'kbd',
+  },
+};

stories/KeyBoard/Documentation.mdx

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

stories/KeyBoard/Live.stories.js

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

stories/KeyBoard/UnStyled.stories.js

@@ -0,0 +1,17 @@
+import { KeyboardInput } from '../../src/keyBoard/KeyboardInput';
+
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Without style',
+  component: KeyboardInput,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+};
+
+export const Unstyled = {
+  args: {
+    children: 'ctrl+p',
+  },
+};

stories/Link/Documentation.mdx

@@ -14,7 +14,12 @@ When you import the Link component without providing any className or style asso
 A more complex example with all the possible properties is:
 
 ```js
-<Link value="Google" to={link} props={{ target: '_blank' }} />
+<Link
+  value="Google"
+  to={link}
+  className="myClass"
+  props={{ target: '_blank' }}
+/>
 ```
 
 Below a list of all the available properties:

stories/govUkStyle.css

@@ -49,6 +49,20 @@
   margin-top: 0;
   margin-bottom: 0;
 }
+.kbd {
+  background-color: #eee;
+  border-radius: 3px;
+  border: 1px solid #b4b4b4;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: #333;
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
 
 @supports (font-variant-numeric: tabular-nums) {
   .govuk-character-count__message {

stories/liveEdit/KeyboardInputLive.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { KeyboardInput } from '../../src/keyBoard/KeyboardInput';
+
+const KeyboardInputDemo = `
+function KeyboardInputDemo() {
+
+  return (
+    <KeyboardInput id="user-defined-id" props={{}} className="">ctrl + p</KeyboardInput>
+  )
+}
+`.trim();
+
+const KeyboardInputLive = () => {
+  const scope = { KeyboardInput };
+  return (
+    <LiveProvider code={KeyboardInputDemo} 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 KeyboardInputLive;