Feature/ds keyboard input

src/design-system/index.css

@@ -7,4 +7,5 @@
 @import './paragraph.css';
 @import './insert-text.css';
 @import './heading.css';
-@import './highlight.css';
+@import './highlight.css';
+@import './keyboard-input.css';

src/design-system/keyboard-input.css

@@ -0,0 +1,6 @@
+.dcx-keyboard-Input {
+  color: token('color-text-pre_body');
+  font-size: token('font-size-pre_body');
+  font-family: token('font-family-pre_body');
+  font-weight: token('font-weight-pre_body');
+}

src/design-system/tokens.json

@@ -85,13 +85,15 @@
   "color-text-heading-level_6": "#000",
   "color-text-highlight_body": "black",
   "color-text-paragraph": "black",
+  "color-text-pre_body":  "#000",
   "font-action-line-height": "20px",
   "font-action-size": "16px",
   "font-action_label-line-height": "20px",
   "font-action_label-size": "16px",
   "font-family-body": "Arial, Helvetica, sans-serif",
   "font-family-highlight_body": "Arial, Helvetica, sans-serif",
   "font-family-paragraph": "Arial, Helvetica, sans-serif",
+  "font-family-pre_body": "Arial, Helvetica, sans-serif",
   "font-formcontrol-line-height": "20px",
   "font-formcontrol-size": "16px",
   "font-formcontrol-size-floating": "16px",
@@ -111,10 +113,12 @@
   "font-size-formcontrol_label": "16px",
   "font-size-highlight_body": "12px",
   "font-size-paragraph": "12px",
+  "font-size-pre_body": "12px",
   "font-weight-body": "normal",
   "font-weight-formcontrol_label": "normal",
   "font-weight-highlight_body": "normal",
   "font-weight-paragraph": "bold",
+  "font-weight-pre_body": "normal",
   "spacing-x-action": "8px",
   "spacing-x-action_label": "6px",
   "spacing-x-formcontrol": "15px",

stories/KeyBoard/design-system/AccessibleTheme.stories.js

@@ -0,0 +1,50 @@
+import { KeyboardInput } from '../../../src/keyBoard/KeyboardInput';
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../themes/accessible.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+* This a theme aimed at easing the vizualization of the different elements of the component in order to improve the experience for people that have visual impairments.
+*/
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Design system/Accessible',
+  component: KeyboardInput,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/accessible.theme.css');
+      return getStory();
+    }
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs']
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider code={StorybookUtils.getThemeCode('dcx-keyboard-Input', style)} disabled={true} language="css">
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  )
+
+};
+
+export const Default = {  
+  name: 'Default',
+  args: {
+    children: 'ctrl+p',
+  },
+};

stories/KeyBoard/design-system/DarkTheme.stories.js

@@ -0,0 +1,60 @@
+import { KeyboardInput } from '../../../src/keyBoard/KeyboardInput';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/dark.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+* This a theme showcases how to customize the component so it can be used on dark backgrounds.
+*/
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Design system/Dark',
+  component:  KeyboardInput,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/dark.theme.css');
+      return getStory();
+    }
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs']
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider code={StorybookUtils.getThemeCode('dcx-keyboard-Input', style)} disabled={true} language="css">
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  )
+};
+
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  args: {
+    children: 'ctrl+p',
+  },
+};
+

stories/KeyBoard/design-system/Default.stories.js

@@ -0,0 +1,27 @@
+import { KeyboardInput } from '../../../src/keyBoard/KeyboardInput';
+/**
+* Here we display the keyboard input, importing only the base Design System styles.
+*/
+export default {
+  title:'DCXLibrary/Typography/KeyboardInput/Design system/Default',
+  component: KeyboardInput,
+  decorators:[
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    }
+  ],
+  parameters:{
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'] 
+};
+
+export const Default = {  
+  name: 'Default',
+  args: {
+    children: 'ctrl+p',
+  },
+};
+

stories/KeyBoard/design-system/MaterialTheme.stories.js

@@ -0,0 +1,51 @@
+import { KeyboardInput } from '../../../src/keyBoard/KeyboardInput';
+import { LiveProvider, LiveEditor } from 'react-live';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/material.theme.css';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases an appearance similar to Material UI can be achieved.  
+ * If you copy paste this snippet inside your css file you'll get a material design style
+*/
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Design system/Material',
+  component: KeyboardInput,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/material.theme.css');
+      return getStory();
+    }
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs']
+};
+
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider code={StorybookUtils.getThemeCode('dcx-keyboard-Input', style)} disabled={true} language="css">
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  )
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    children: 'ctrl+p',
+  },
+};

stories/KeyBoard/design-system/Playground.stories.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/keyboard-input.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { KeyboardInput } from '../../../src/keyBoard/KeyboardInput';
+
+export default {
+  title: 'DCXLibrary/Typography/KeyboardInput/Design system',
+  component: KeyboardInput,
+  decorators: [
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  }
+};
+
+export const Default = {  
+  name: 'Playground',
+  args: {
+    children: 'ctrl+p',
+  },
+};

stories/themes/dark.theme.css

@@ -63,6 +63,10 @@
   --dcx-color-text-body: white;
 }
 
+.dcx-keyboard-Input {
+  --dcx-color-text-pre_body: white;
+}
+
 .dcx-heading {
   --dcx-color-text-heading-level_1: white;
   --dcx-color-text-heading-level_2: white;