From 9ffc5fff6caabefb56ad2ea39d191eb3e72bdc5c Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 19 Nov 2021 10:16:07 -0800 Subject: [PATCH 1/4] Add text flow decorator and toolbar --- .storybook/preview.js | 39 ++++++++++++++++++++- .storybook/text-flow-decorator.js | 57 +++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 .storybook/text-flow-decorator.js diff --git a/.storybook/preview.js b/.storybook/preview.js index 14d3fcbd0..b6ca986cd 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,6 +3,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light'; import twig from 'react-syntax-highlighter/dist/esm/languages/prism/twig'; import { withTheme } from './theme-decorator'; +import { withTextFlow } from './text-flow-decorator'; import tokens from '../src/compiled/tokens/js/tokens'; import 'focus-visible'; import '../src/index-with-dependencies.scss'; @@ -78,26 +79,62 @@ export const parameters = { }, }; +const directions = ['ltr', 'rtl']; +const writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; +const textFlowItems = directions + .map((direction) => + writingModes.map((writingMode) => { + return { + value: JSON.stringify({ direction, writingMode }), + title: writingMode, + left: direction, + }; + }) + ) + .flat(); + export const globalTypes = { theme: { name: 'Theme', description: 'Global theme for components', toolbar: { icon: 'paintbrush', + showName: true, items: [ { // 'null' value supports a "no value selected" state, if 'undefined' // there are sometimes missing 'key' errors in console value: null, title: 'No theme', + right: '(default)', + }, + { + value: 't-light', + title: 'Light', + icon: 'circlehollow', }, { value: 't-dark', title: 'Dark', + icon: 'circle', + }, + ], + }, + }, + textFlow: { + name: 'Text flow', + toolbar: { + icon: 'globe', + showName: true, + items: [ + { + value: null, + title: 'Default text flow', }, + ...textFlowItems, ], }, }, }; -export const decorators = [withTheme]; +export const decorators = [withTheme, withTextFlow]; diff --git a/.storybook/text-flow-decorator.js b/.storybook/text-flow-decorator.js new file mode 100644 index 000000000..5c66ae9a5 --- /dev/null +++ b/.storybook/text-flow-decorator.js @@ -0,0 +1,57 @@ +import { useEffect } from '@storybook/client-api'; + +const setTextFlow = (element, { direction, writingMode } = {}) => { + if (!element || !element.style) { + return; + } + + if (direction && direction !== 'inherit') { + element.style.setProperty('direction', direction); + } else { + element.style.removeProperty('direction'); + } + + if (writingMode && writingMode !== 'inherit') { + element.style.setProperty('writing-mode', writingMode); + } else { + element.style.removeProperty('writing-mode'); + } +}; + +/** + * Sets text direction and writing-mode for stories to test logical property + * usage. + * + * This unfortunately does not work with non-inline stories in Docs view due to + * some open Storybook issues, specifically + * {@link https://github.com/storybookjs/storybook/issues/14477|#14477} and + * {@link https://github.com/storybookjs/storybook/issues/13444|#13444}. + * + * @param {function} story + * @param {object} context + * @returns {*} Result of story function. + */ +export const withTextFlow = (story, context) => { + let textFlow = context.parameters.textFlow || + context.globals.textFlow || { + direction: 'inherit', + writingMode: 'inherit', + }; + + if (typeof textFlow === 'string') { + textFlow = JSON.parse(textFlow); + } + + if (context.viewMode === 'story') { + useEffect(() => { + setTextFlow(document.body, textFlow); + }); + } else if (context.viewMode === 'docs') { + useEffect(() => { + setTextFlow(document.body); + setTextFlow(document.querySelector(`#story--${context.id}`), textFlow); + }); + } + + return story(); +}; From 5b8f82eb8fafc4c2f79769068b31808802e4f2dd Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 19 Nov 2021 15:31:33 -0800 Subject: [PATCH 2/4] Better text flow icon --- .storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index b6ca986cd..fa51a993b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -124,7 +124,7 @@ export const globalTypes = { textFlow: { name: 'Text flow', toolbar: { - icon: 'globe', + icon: 'redirect', showName: true, items: [ { From dc0d6686ae4836f09be6eda6ac27936569e19243 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 19 Nov 2021 15:31:44 -0800 Subject: [PATCH 3/4] Simplify spacing example --- .../spacing/demo/logical-properties.twig | 27 ------------------- src/utilities/spacing/demo/styles.scss | 21 --------------- src/utilities/spacing/spacing.stories.mdx | 22 ++------------- 3 files changed, 2 insertions(+), 68 deletions(-) delete mode 100644 src/utilities/spacing/demo/logical-properties.twig diff --git a/src/utilities/spacing/demo/logical-properties.twig b/src/utilities/spacing/demo/logical-properties.twig deleted file mode 100644 index 7e926f1ae..000000000 --- a/src/utilities/spacing/demo/logical-properties.twig +++ /dev/null @@ -1,27 +0,0 @@ -{% set directions = ['ltr', 'rtl'] %} -{% set writing_modes = ['horizontal-tb', 'vertical-lr', 'vertical-rl'] %} -{% if step < 0 %} - {% set step = 'n' ~ step|abs %} -{% endif %} - -
- {% for writing_mode in writing_modes %} - {% for direction in directions %} - {% set class = 'u-' ~ name ~ '-block-start-' ~ step ~ ' u-' ~ name ~ '-inline-start-' ~ step %} - {% set style = 'direction: ' ~ direction ~ '; writing-mode: ' ~ writing_mode ~ ';' %} - {% if name == 'pad' %} -
-
- {{direction}}, {{writing_mode}} -
-
- {% else %} -
-
- {{direction}}, {{writing_mode}} -
-
- {% endif %} - {% endfor %} - {% endfor %} -
diff --git a/src/utilities/spacing/demo/styles.scss b/src/utilities/spacing/demo/styles.scss index 8d04716ef..05feda2d4 100644 --- a/src/utilities/spacing/demo/styles.scss +++ b/src/utilities/spacing/demo/styles.scss @@ -3,7 +3,6 @@ @use '../../../compiled/tokens/scss/size'; @use '../../../mixins/ms'; -.demo-u-space-logical-properties, .demo-u-space-directions { div { border-radius: size.$border-radius-medium; @@ -21,7 +20,6 @@ } } -.demo-u-pad-logical-properties, .demo-u-pad-directions { [class*='u-pad'] { background: color.$base-gray-light; @@ -55,22 +53,3 @@ padding: ms.step(-1); } } - -.demo-u-pad-logical-properties, -.demo-u-space-logical-properties { - display: grid; - grid-gap: ms.step(1); - grid-template-columns: repeat(2, 1fr); - - @media (min-width: breakpoint.$s) { - grid-template-columns: repeat(4, 1fr); - } - - > :nth-child(-n + 2) { - grid-column: span 2; - - @media (min-width: breakpoint.$s) { - grid-column: span 4; - } - } -} diff --git a/src/utilities/spacing/spacing.stories.mdx b/src/utilities/spacing/spacing.stories.mdx index 222e8276e..36c066569 100644 --- a/src/utilities/spacing/spacing.stories.mdx +++ b/src/utilities/spacing/spacing.stories.mdx @@ -1,5 +1,4 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs'; -import logicalPropertiesDemo from './demo/logical-properties.twig'; import directionsDemo from './demo/directions.twig'; import responsiveDemo from './demo/responsive.twig'; import './demo/styles.scss'; @@ -32,25 +31,6 @@ Spacing utilities exist for these use cases. All of our utilities use [logical properties](https://www.w3.org/TR/css-logical-1/) instead of specific directions [in supported browsers](https://caniuse.com/#feat=css-logical-props) to simplify potential localization projects. -Observe how the direction of the same utility classes change depending on the page's [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) and [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode): - - - - {(args) => logicalPropertiesDemo(args)} - - - The following table maps the traditional physical property for `direction: ltr` and `writing-mode: horizontal-tb` to its equivalent logical property: | Physical Property | Logical Property | @@ -60,6 +40,8 @@ The following table maps the traditional physical property for `direction: ltr` | `left` | `inline-start` | | `right` | `inline-end` | +You can observe how utilities respond to various `direction` and `writing-mode` values by selecting a different "Text flow" in this project's toolbar. + ## Padding The following utilities pad the _inside_ of the element: From 23befa42c8ba7d5fabc30aaefb94241766b5b353 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 19 Nov 2021 16:36:33 -0800 Subject: [PATCH 4/4] Support all themes --- .storybook/preview.js | 14 ++++++++++++-- .storybook/theme-decorator.js | 3 ++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index fa51a993b..b991cbe37 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -111,12 +111,22 @@ export const globalTypes = { { value: 't-light', title: 'Light', - icon: 'circlehollow', + right: '.t-light', }, { value: 't-dark', title: 'Dark', - icon: 'circle', + right: '.t-dark', + }, + { + value: 't-light,t-alternate', + title: 'Light Alt', + right: '.t-light.t-alternate', + }, + { + value: 't-dark,t-alternate', + title: 'Dark Alt', + right: '.t-dark.t-alternate', }, ], }, diff --git a/.storybook/theme-decorator.js b/.storybook/theme-decorator.js index cdda41871..fb584a052 100644 --- a/.storybook/theme-decorator.js +++ b/.storybook/theme-decorator.js @@ -23,7 +23,8 @@ const updateTheme = (element, theme) => { } if (theme) { - element.classList.add(theme); + const newThemes = theme.split(','); + element.classList.add(...newThemes); } };