Improve themes toolbar, add text flow toolbar

.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,72 @@ 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',
+          right: '.t-light',
         },
         {
           value: 't-dark',
           title: 'Dark',
+          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',
+        },
+      ],
+    },
+  },
+  textFlow: {
+    name: 'Text flow',
+    toolbar: {
+      icon: 'redirect',
+      showName: true,
+      items: [
+        {
+          value: null,
+          title: 'Default text flow',
         },
+        ...textFlowItems,
       ],
     },
   },
 };
 
-export const decorators = [withTheme];
+export const decorators = [withTheme, withTextFlow];

.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();
+};

.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);
   }
 };
 

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;
-    }
-  }
-}

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):
-
-<Canvas>
-  <Story
-    name="Logical Properties"
-    args={{ ...defaultArgs, name: 'space' }}
-    argTypes={{
-      ...defaultArgTypes,
-      name: {
-        options: ['space', 'pad'],
-        type: { name: 'string' },
-        control: { type: 'inline-radio' },
-      },
-    }}
-  >
-    {(args) => logicalPropertiesDemo(args)}
-  </Story>
-</Canvas>
-
 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: