Description list design system

src/design-system/description-list.css

@@ -0,0 +1,27 @@
+.dcx-description-list {
+  flex-wrap: wrap;
+  color: token('color-text-body');
+  font-family: token('font-family-body');
+  font-size: token('font-size-body');
+  font-weight: token('font-weight-body');
+  margin: 0;
+  padding: token('spacing-y-desc_list_box') token('spacing-x-desc_list_box');
+}
+
+.dcx-description-term {
+  color: token('color-text-paragraph');
+  font-family: token('font-family-paragraph');
+  font-size: token('font-size-paragraph');
+  font-weight: token('font-weight-paragraph');
+  margin: 0;
+  padding: token('spacing-y-desc_term_box') token('spacing-x-desc_term_box');
+}
+
+.dcx-description-detail {
+  color: token('color-text-body');
+  font-family: token('font-family-body');
+  font-size: token('font-size-body');
+  font-weight: token('font-weight-body');
+  margin: 0;
+  padding: token('spacing-y-desc_detail_box') token('spacing-x-desc_detail_box');
+}

src/design-system/index.css

@@ -5,6 +5,7 @@
 
 @import './label.css';
 @import './list.css';
+@import './description-list.css';
 @import './link.css';
 @import './paragraph.css';
 @import './insert-text.css';

src/design-system/tokens.json

@@ -145,5 +145,11 @@
   "spacing-y-formcontrol": "15px",
   "spacing-y-formcontrol-floating": "30px",
   "spacing-y-abbreviate": "0px",
-  "spacing-x-abbreviate": "0px"
+  "spacing-x-abbreviate": "0px",
+  "spacing-y-desc_list_box": "0px",
+  "spacing-x-desc_list_box": "0px",
+  "spacing-y-desc_term_box": "0px",
+  "spacing-x-desc_term_box": "0px",
+  "spacing-y-desc_detail_box": "4px",
+  "spacing-x-desc_detail_box": "6px"
 }

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

@@ -0,0 +1,67 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import { DescriptionList, Term, Detail } from '../../../src/descriptionList';
+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/DescriptionList/Design system/Accessible',
+  component: DescriptionList,
+  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: 'light',
+      values: [
+        { name: 'dark', value: '#333131' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-description-list', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  args: {
+    label: 'Description',
+    variant: 'primary',
+    children: (
+      <>
+        <Term className="myStyle">Coffee</Term>
+        <Detail className="myStyle">black hot drink</Detail>
+        <Term className="myStyle">Milk</Term>
+        <Detail className="myStyle">white cold drink</Detail>
+      </>
+    ),
+  },
+};
+

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

@@ -0,0 +1,69 @@
+import { List } from '../../../src/list/List';
+import { DescriptionList, Term, Detail } from '../../../src/descriptionList';
+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/DescriptionList/Design system/Dark',
+  component: List,
+  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-description-list', 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' },
+      ],
+    },
+  },
+  render: function () {
+    return (
+      <DescriptionList>
+        <Term className="myStyle">Coffee</Term>
+        <Detail className="myStyle">black hot drink</Detail>
+        <Term className="myStyle">Milk</Term>
+        <Detail className="myStyle">white cold drink</Detail>
+      </DescriptionList>
+    );
+  },
+};

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

@@ -0,0 +1,35 @@
+
+import { DescriptionList, Term, Detail } from '../../../src/descriptionList';
+
+/**
+ * Here we display the component in its natural abbreviate, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/DescriptionList/Design system/Default',
+  component: DescriptionList,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  name: 'Default',
+  render: function () {
+    return (
+      <DescriptionList>
+        <Term className="myStyle">Coffee</Term>
+        <Detail className="myStyle">black hot drink</Detail>
+        <Term className="myStyle">Milk</Term>
+        <Detail className="myStyle">white cold drink</Detail>
+      </DescriptionList>
+    );
+  },
+};

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

@@ -0,0 +1,70 @@
+import { List } from '../../../src/list/List';
+import { DescriptionList, Term, Detail } from '../../../src/descriptionList';
+import style from '!raw-loader!../../themes/dark.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+// import { ListItem } from '../../../src/list/ListItem';
+
+/**
+ * This a theme showcases how to customize the component so it can be used on dark backgrounds.
+ */
+export default {
+  title: 'DCXLibrary/Typography/DescriptionList/Design system/Material',
+  component: List,
+  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-description-list', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: function () {
+    return (
+      <DescriptionList>
+        <Term className="myStyle">Coffee</Term>
+        <Detail className="myStyle">black hot drink</Detail>
+        <Term className="myStyle">Milk</Term>
+        <Detail className="myStyle">white cold drink</Detail>
+      </DescriptionList>
+    );
+  },
+};

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

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/list.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { DescriptionList, Term, Detail } from '../../../src/descriptionList';
+
+export default {
+  title: 'DCXLibrary/Typography/DescriptionList/Design system',
+  component: DescriptionList,
+  decorators: [getStory => <TokensDecorator style={style}>{getStory()}</TokensDecorator>,],
+
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+};
+
+export const Playground = {
+  name: 'Playground',
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  render:function () {
+    return (
+      <DescriptionList>
+        <Term className="myStyle">Coffee</Term>
+        <Detail className="myStyle">black hot drink</Detail>
+        <Term className="myStyle">Milk</Term>
+        <Detail className="myStyle">white cold drink</Detail>
+      </DescriptionList>
+    );
+  },
+};

stories/themes/dark.theme.css

@@ -91,7 +91,6 @@
   --dcx-color-text-heading-level_6: white;
 }
 
-
 .dcx-code {
   --dcx-color-text-pre_body: white;
 }
@@ -109,4 +108,9 @@
 
 .dcx-blockquote {
   --dcx-color-text-body: white;
-}
+}
+
+.dcx-description-list {
+  --dcx-color-text-body: white;
+  --dcx-color-text-paragraph: white;
+}

stories/themes/material.theme.css

@@ -43,3 +43,7 @@
 .dcx-abbreviate {
   --dcx-border-radius-abbreviate: 8px;
 }
+
+.dcx-description-list {
+  --dcx-color-text-body: #00000099;
+}