Code snippet - design system

src/design-system/code-snippet.css

@@ -0,0 +1,10 @@
+.dcx-code {
+    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');
+    background: token('color-background-pre_box');
+    padding: token('spacing-pre_box');
+  }
+
+

src/design-system/highlight.css

@@ -1,6 +1,6 @@
 .dcx-highlight {
   color: token('color-text-highlight_body');
-  background: token('color-background-highlight_body');;
+  background: token('color-background-highlight_body');
   font-size: token('font-size-highlight_body');
   font-family: token('font-family-highlight_body');
   font-weight: token('font-weight-highlight_body');

src/design-system/index.css

@@ -9,5 +9,7 @@
 @import './insert-text.css';
 @import './heading.css';
 @import './highlight.css';
+@import './code-snippet.css';
 @import './abbreviate.css';
 @import './keyboard-input.css';
+

src/design-system/tokens.json

@@ -41,6 +41,7 @@
   "color-background-formcontrol_label": "transparent",
   "color-background-formcontrol_label-floating": "white",
   "color-background-highlight_body": "yellow",
+  "color-background-pre_box": "transparent",
   "color-chevron-formcontrol": "#000",
   "color-chevron-formcontrol-filled": "#000",
   "color-chevron-formcontrol-floating": "#000",
@@ -90,15 +91,15 @@
   "color-text-link-hover": "#14558d",
   "color-text-link-visited": "#14558d",
   "color-text-paragraph": "black",
-  "color-text-pre_body": "#000",
+  "color-text-pre_body": "black",
   "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-family-pre_body": "monospace",
   "font-formcontrol-line-height": "20px",
   "font-formcontrol-size": "16px",
   "font-formcontrol-size-floating": "16px",
@@ -124,6 +125,7 @@
   "font-weight-highlight_body": "normal",
   "font-weight-paragraph": "bold",
   "font-weight-pre_body": "normal",
+  "spacing-pre_box": "6px",
   "spacing-x-action": "8px",
   "spacing-x-action_label": "6px",
   "spacing-x-formcontrol": "15px",

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

@@ -0,0 +1,53 @@
+import { CodeSnippet } from '../../../src/codesnippet/CodeSnippet';
+/* 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/CodeSnippet/Design system/Accessible',
+  component: CodeSnippet,
+  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-code', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: 'This is the content of the code snippet.',
+  },
+};

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

@@ -0,0 +1,62 @@
+import { CodeSnippet } from '../../../src/codesnippet/CodeSnippet';
+// 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/CodeSnippet/Design system/Dark',
+  component: CodeSnippet,
+  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-code', 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: {
+    value: 'This is the content of the code snippet.',
+  },
+};

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

@@ -0,0 +1,27 @@
+import { CodeSnippet } from '../../../src/codesnippet/CodeSnippet';
+/**
+* Here we display the code snippet, importing only the base Design System styles.
+*/
+export default {
+  title:'DCXLibrary/Typography/CodeSnippet/Design system/Default',
+  component: CodeSnippet,
+  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: {
+    value: 'This is the content of the code snippet.',
+  },
+};
+

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

@@ -0,0 +1,54 @@
+import { CodeSnippet } from '../../../src/codesnippet/CodeSnippet';
+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/CodeSnippet/Design system/Material',
+  component: CodeSnippet,
+  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-code', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: 'This is the content of the code snippet.',
+  },
+};

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

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/code-snippet.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { CodeSnippet } from '../../../src/codesnippet/CodeSnippet';
+
+export default {
+  title: 'DCXLibrary/Typography/CodeSnippet/Design system',
+  component: CodeSnippet,
+  decorators: [
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  }
+};
+
+export const Default = {  
+  name: 'Playground',
+  args: {
+    value: 'This is the content of the code snippet.',
+  },
+};

stories/themes/dark.theme.css

@@ -76,6 +76,11 @@
   --dcx-color-text-heading-level_6: white;
 }
 
+
+.dcx-code {
+  --dcx-color-text-pre_body: white;
+}
+
 .dcx-abbreviate {
   --dcx-color-background-highlight_body: #666;
 }