adds blockquote design-system

src/design-system/blockquote.css

@@ -0,0 +1,10 @@
+.dcx-blockquote {
+  margin: 0;
+  background-color: token('color-background-action-active-secondary');
+  border-radius: token('border-radius-action');
+  color: token('color-text-body');
+  font-family: token('font-family-body');
+  font-weight: token('font-weight-body');
+  font-size: token('font-size-body');
+  padding: token('spacing-y-action') token('spacing-x-action');
+}

src/design-system/index.css

@@ -1,6 +1,7 @@
 @import './base.css';
 @import './formselect.css';
 @import './button.css';
+@import './blockquote.css';
 
 @import './label.css';
 @import './list.css';

src/design-system/tokens.json

@@ -136,3 +136,4 @@
   "spacing-y-abbreviate": "0px",
   "spacing-x-abbreviate": "0px"
 }
+

stories/BlockQuote/ClassBased.stories.js

@@ -19,7 +19,6 @@ export const Basic = {
   args: {
     className: 'blockquote',
     text: 'This is the content of the blockquote.',
-    footer: 'This is the footer of the blockquote.'
+    footer: 'This is the footer of the blockquote.',
   },
 };
-

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

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

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

@@ -0,0 +1,64 @@
+import { Blockquote } from '../../../src/blockquote/Blockquote';
+// 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 is a theme that showcases how to customize the component so it can be used on dark backgrounds.
+ * If you copy paste this snippet inside your css file you'll get a material design style
+ */
+export default {
+  title: 'DCXLibrary/Typography/Blockquote/Design system/Dark',
+  component: Blockquote,
+  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-blockquote', 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: {
+    text: 'This is the content of the blockquote.',
+    footer: 'This is the footer of the blockquote.',
+  },
+};

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

@@ -0,0 +1,28 @@
+import { Blockquote } from '../../../src/blockquote/Blockquote';
+/**
+ * Here we display the component in its natural default state, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Blockquote/Design system/Default',
+  component: Blockquote,
+  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: {
+    className: 'dcx-blockquote',
+    text: 'This is blockquote text',
+    footer: 'This is footer text',
+  },
+};

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

@@ -0,0 +1,55 @@
+import { Blockquote } from '../../../src/blockquote/Blockquote';
+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 is a theme that 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/Blockquote/Design system/Material',
+  component: Blockquote,
+  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-blockquote', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    text: 'This is the content of the blockquote.',
+    footer: 'This is the footer of the blockquote',
+  },
+};

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

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

stories/BlockQuote/style.css

@@ -1,9 +1,9 @@
 .blockquote {
-    color:black;
-    margin: 0;
-    padding: 15px;
-    background: #eee;
-    borderRadius: 5px;
-    width: 500px;
-    border-radius: 3px;
+  color: black;
+  margin: 0;
+  padding: 15px;
+  background: #eee;
+  borderradius: 5px;
+  width: 500px;
+  border-radius: 3px;
 }

stories/themes/dark.theme.css

@@ -86,3 +86,7 @@
   --dcx-color-text-link-active: #db7a03;
   --dcx-color-text-link-hover: #db7a03;
 }
+
+.dcx-blockquote {
+  --dcx-color-text-body: white;
+}