From f32d40dcee1b4a4c82df645439e07a8532d72208 Mon Sep 17 00:00:00 2001 From: "Zurico.Daniele_DEFRA" Date: Wed, 22 Nov 2023 12:23:03 +0000 Subject: [PATCH] feat: preformatted text --- src/design-system/index.css | 2 +- src/design-system/preformattedText.css | 7 +++ src/design-system/tokens.json | 2 +- .../design-system/AccessibleTheme.stories.js | 53 ++++++++++++++++ .../design-system/DarkTheme.stories.js | 63 +++++++++++++++++++ .../design-system/Default.stories.js | 27 ++++++++ .../design-system/MaterialTheme.stories.js | 55 ++++++++++++++++ .../design-system/Playground.stories.js | 24 +++++++ stories/themes/dark.theme.css | 5 ++ stories/themes/material.theme.css | 5 +- 10 files changed, 240 insertions(+), 3 deletions(-) create mode 100644 src/design-system/preformattedText.css create mode 100644 stories/PreformattedText/design-system/AccessibleTheme.stories.js create mode 100644 stories/PreformattedText/design-system/DarkTheme.stories.js create mode 100644 stories/PreformattedText/design-system/Default.stories.js create mode 100644 stories/PreformattedText/design-system/MaterialTheme.stories.js create mode 100644 stories/PreformattedText/design-system/Playground.stories.js diff --git a/src/design-system/index.css b/src/design-system/index.css index 4fdd3204..99c52fb4 100644 --- a/src/design-system/index.css +++ b/src/design-system/index.css @@ -12,4 +12,4 @@ @import './code-snippet.css'; @import './abbreviate.css'; @import './keyboard-input.css'; - +@import './preformattedText.css'; diff --git a/src/design-system/preformattedText.css b/src/design-system/preformattedText.css new file mode 100644 index 00000000..ef851f16 --- /dev/null +++ b/src/design-system/preformattedText.css @@ -0,0 +1,7 @@ +.dcx-pre { + color: token('color-text-pre_body'); + background-color: token('color-background-pre_box'); + font-size: token('font-size-pre_body'); + font-family: token('font-family-pre_body'); + font-weight: token('font-weight-pre_body'); +} \ No newline at end of file diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json index d4fa9c80..15467b65 100644 --- a/src/design-system/tokens.json +++ b/src/design-system/tokens.json @@ -119,7 +119,7 @@ "font-size-formcontrol_label": "16px", "font-size-highlight_body": "12px", "font-size-paragraph": "12px", - "font-size-pre_body": "12px", + "font-size-pre_body": "16px", "font-weight-body": "normal", "font-weight-formcontrol_label": "normal", "font-weight-highlight_body": "normal", diff --git a/stories/PreformattedText/design-system/AccessibleTheme.stories.js b/stories/PreformattedText/design-system/AccessibleTheme.stories.js new file mode 100644 index 00000000..6588aab5 --- /dev/null +++ b/stories/PreformattedText/design-system/AccessibleTheme.stories.js @@ -0,0 +1,53 @@ +import { PreformattedText } from '../../../src/preformattedText/PreformattedText'; +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/PreformattedText/Design system/Accessible', + component: PreformattedText, + 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: () => ( + + + + ), +}; + +export const Default = { + name: 'Default', + args: { + value: `Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and + line breaks.`, + }, +}; diff --git a/stories/PreformattedText/design-system/DarkTheme.stories.js b/stories/PreformattedText/design-system/DarkTheme.stories.js new file mode 100644 index 00000000..93ee070d --- /dev/null +++ b/stories/PreformattedText/design-system/DarkTheme.stories.js @@ -0,0 +1,63 @@ +import { PreformattedText } from '../../../src/preformattedText/PreformattedText'; +// 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/PreformattedText/Design system/Dark', + component: PreformattedText, + 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: () => ( + + + + ), +}; + +export const Default = { + name: 'Default', + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#282c34' }, + { name: 'light', value: '#fff' }, + ], + }, + }, + args: { + value: `Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and +line breaks.`, + }, +}; diff --git a/stories/PreformattedText/design-system/Default.stories.js b/stories/PreformattedText/design-system/Default.stories.js new file mode 100644 index 00000000..3df33478 --- /dev/null +++ b/stories/PreformattedText/design-system/Default.stories.js @@ -0,0 +1,27 @@ +import { PreformattedText } from '../../../src/preformattedText/PreformattedText'; +/** + * Here we display the component in its natural preformattedText, importing only the base Design System styles. + */ +export default { + title: 'DCXLibrary/Typography/PreformattedText/Design system/Default', + component: PreformattedText, + 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: `Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and +line breaks.`, + }, +}; diff --git a/stories/PreformattedText/design-system/MaterialTheme.stories.js b/stories/PreformattedText/design-system/MaterialTheme.stories.js new file mode 100644 index 00000000..dde014ad --- /dev/null +++ b/stories/PreformattedText/design-system/MaterialTheme.stories.js @@ -0,0 +1,55 @@ +import { PreformattedText } from '../../../src/preformattedText/PreformattedText'; +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/PreformattedText/Design system/Material', + component: PreformattedText, + 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: () => ( + + + + ), +}; + +export const Default = { + name: 'Default', + args: { + value: `Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and +line breaks.`, + }, +}; diff --git a/stories/PreformattedText/design-system/Playground.stories.js b/stories/PreformattedText/design-system/Playground.stories.js new file mode 100644 index 00000000..86e7a38e --- /dev/null +++ b/stories/PreformattedText/design-system/Playground.stories.js @@ -0,0 +1,24 @@ +/* eslint-disable import/no-webpack-loader-syntax */ +import style from '!raw-loader!../../../dist/design-system/preformattedText.css'; +import TokensDecorator from '../../../core/storybook/TokensDecorator'; +import { PreformattedText } from '../../../src/preformattedText/PreformattedText'; + +export default { + title: 'DCXLibrary/Typography/PreformattedText/Design system', + component: PreformattedText, + decorators: [ + getStory => {getStory()}, + ], + parameters: { + options: { showPanel: true }, + actions: { disable: true }, + }, +}; + +export const Playground = { + name: 'Playground', + args: { + value: `Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and +line breaks.`, + }, +}; diff --git a/stories/themes/dark.theme.css b/stories/themes/dark.theme.css index 7093d3c3..538e4eed 100644 --- a/stories/themes/dark.theme.css +++ b/stories/themes/dark.theme.css @@ -59,6 +59,11 @@ --dcx-color-text-body: white; } +.dcx-pre { + --dcx-color-text-pre_body: white; + --dcx-color-background-pre_box: transparent; +} + .dcx-insert-text { --dcx-color-text-body: white; } diff --git a/stories/themes/material.theme.css b/stories/themes/material.theme.css index c114154e..b546a6b8 100644 --- a/stories/themes/material.theme.css +++ b/stories/themes/material.theme.css @@ -20,7 +20,10 @@ --dcx-color-marker: rgba(0, 0, 0, 0.6); } +.dcx-pre { + --dcx-color-text-pre_body: rgba(0, 0, 0, 0.6); +} .dcx-abbreviate { --dcx-border-radius-abbreviate: 8px; -} \ No newline at end of file +}