CSS text utility classes

.changeset/old-trees-compare.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add CSS text utility classes

src/utilities/text/demo/color.twig

@@ -0,0 +1,8 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--pad'
+} only %}
+  {% block content %}
+    <p>This is default text.</p>
+    <p class="u-text-action">This is text that has the utility class applied.</p>
+  {% endblock %}
+{% endembed %}

src/utilities/text/demo/nowrap.twig

@@ -0,0 +1,24 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--pad'
+} only %}
+  {% block content %}
+    <div style="padding-right: 50%">
+      <div class="u-pad-n1" style="border: 2px solid">
+        <p>This text will wrap: <strong>The quick brown
+fox jumps over the lazy dog.</strong></p>
+      </div>
+    </div>
+  {% endblock %}
+{% endembed %}
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--pad'
+} only %}
+  {% block content %}
+    <div style="padding-right: 50%">
+      <div class="u-pad-n1" style="border: 2px solid">
+        <p>This text will not wrap: <strong class="u-text-no-wrap">The quick brown
+fox jumps over the lazy dog.</strong></p>
+      </div>
+    </div>
+  {% endblock %}
+{% endembed %}

src/utilities/text/text.scss

@@ -0,0 +1,9 @@
+@use "../../compiled/tokens/scss/color";
+
+.u-text-no-wrap {
+  white-space: nowrap !important;
+}
+
+.u-text-action {
+  color: var(--theme-color-text-action) !important;
+}

src/utilities/text/text.stories.mdx

@@ -0,0 +1,59 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import noWrapDemoSource from '!!raw-loader!./demo/nowrap.twig';
+import noWrapDemo from './demo/nowrap.twig';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import colorDemoSource from '!!raw-loader!./demo/color.twig';
+import colorDemo from './demo/color.twig';
+
+<Meta title="Utilities/Text" />
+
+# Text
+
+Utilities for controlling text properties.
+
+## White-space nowrap
+
+- `u-text-no-wrap`
+
+Utility for controlling the white-space wrapping of text, applies `white-space: nowrap`.
+
+Notice in the second example how the `some-long-text` text doesn't wrap.
+
+<Canvas>
+  <Story
+    name="White-space nowrap"
+    parameters={{ docs: { source: { code: noWrapDemoSource } } }}
+  >
+    {(args) => noWrapDemo(args)}
+  </Story>
+</Canvas>
+
+## Action text
+
+- `u-text-action`
+
+Utility that changes the text color to the "action" text color.
+
+<Canvas>
+  <Story
+    name="Action text"
+    parameters={{ docs: { source: { code: colorDemoSource } } }}
+  >
+    {(args) => colorDemo(args)}
+  </Story>
+</Canvas>