From dcf21c881cef4d943395c6c99a15b596e8610be6 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 23 Aug 2021 16:39:00 -0700 Subject: [PATCH 1/8] Rough-draft for Text utilities --- src/utilities/text/demo/nowrap.twig | 6 +++++ src/utilities/text/demo/styles.scss | 14 ++++++++++++ src/utilities/text/text.scss | 9 ++++++++ src/utilities/text/text.stories.mdx | 35 +++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+) create mode 100644 src/utilities/text/demo/nowrap.twig create mode 100644 src/utilities/text/demo/styles.scss create mode 100644 src/utilities/text/text.scss create mode 100644 src/utilities/text/text.stories.mdx diff --git a/src/utilities/text/demo/nowrap.twig b/src/utilities/text/demo/nowrap.twig new file mode 100644 index 000000000..647e52a3c --- /dev/null +++ b/src/utilities/text/demo/nowrap.twig @@ -0,0 +1,6 @@ +
+

This is some text to show how it works: some-long-text.

+
+
+

This is some text to show how it works: some-long-text.

+
diff --git a/src/utilities/text/demo/styles.scss b/src/utilities/text/demo/styles.scss new file mode 100644 index 000000000..3cf76975c --- /dev/null +++ b/src/utilities/text/demo/styles.scss @@ -0,0 +1,14 @@ +@use "../../../compiled/tokens/scss/color"; +@use "../../../compiled/tokens/scss/size"; +@use '../../../mixins/ms'; + +.demoWrapper { + margin: ms.step(-1); + padding-right: 50%; +} + +.content { + background: color.$text-light-emphasis; + border: size.$edge-medium solid color.$base-gray; + padding: ms.step(-1); +} diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss new file mode 100644 index 000000000..325f031e8 --- /dev/null +++ b/src/utilities/text/text.scss @@ -0,0 +1,9 @@ +@use "../../compiled/tokens/scss/color"; + +.u-textNoWrap { + white-space: nowrap !important; +} + +.u-textColorBrandPrimary { + color: color.$brand-primary !important; +} diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx new file mode 100644 index 000000000..6f32746b7 --- /dev/null +++ b/src/utilities/text/text.stories.mdx @@ -0,0 +1,35 @@ +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'; +import './demo/styles.scss'; + + + +# Text + +Utilities for controlling text properties. + +## White-space nowrap + +- `u-textNoWrap` + +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. + + + + {(args) => noWrapDemo(args)} + + From 0cee0dd6e4e9b08f8dd2f817f5d5ed4aa7da2d55 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Mon, 23 Aug 2021 16:46:16 -0700 Subject: [PATCH 2/8] Add primary brand text color utility --- src/utilities/text/demo/color.twig | 1 + src/utilities/text/text.stories.mdx | 25 +++++++++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 src/utilities/text/demo/color.twig diff --git a/src/utilities/text/demo/color.twig b/src/utilities/text/demo/color.twig new file mode 100644 index 000000000..f688d22f9 --- /dev/null +++ b/src/utilities/text/demo/color.twig @@ -0,0 +1 @@ +

This show an example text that has the utility class applied.

diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx index 6f32746b7..040739a9b 100644 --- a/src/utilities/text/text.stories.mdx +++ b/src/utilities/text/text.stories.mdx @@ -9,6 +9,16 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; // 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'; import './demo/styles.scss'; @@ -33,3 +43,18 @@ Notice in the second example how the `some-long-text` text doesn't wrap. {(args) => noWrapDemo(args)} + +## Primary brand text color + +- `u-textColorBrandPrimary` + +Utility that changes the text color to the primary brand color. + + + + {(args) => colorDemo(args)} + + From 6f96649d5f90f0b165be2d7a88d346efd155cacc Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Tue, 24 Aug 2021 11:44:40 -0700 Subject: [PATCH 3/8] Add changeset --- .changeset/old-trees-compare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/old-trees-compare.md diff --git a/.changeset/old-trees-compare.md b/.changeset/old-trees-compare.md new file mode 100644 index 000000000..067be8dc1 --- /dev/null +++ b/.changeset/old-trees-compare.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add CSS text utility classes From f212546f4bd90e75d2c745d07d74d9de80ff1598 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 10:11:27 -0700 Subject: [PATCH 4/8] Switch to kebab-case --- src/utilities/text/demo/color.twig | 2 +- src/utilities/text/demo/nowrap.twig | 2 +- src/utilities/text/text.scss | 4 ++-- src/utilities/text/text.stories.mdx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utilities/text/demo/color.twig b/src/utilities/text/demo/color.twig index f688d22f9..0d551d3f3 100644 --- a/src/utilities/text/demo/color.twig +++ b/src/utilities/text/demo/color.twig @@ -1 +1 @@ -

This show an example text that has the utility class applied.

+

This show an example text that has the utility class applied.

diff --git a/src/utilities/text/demo/nowrap.twig b/src/utilities/text/demo/nowrap.twig index 647e52a3c..fa2e31e07 100644 --- a/src/utilities/text/demo/nowrap.twig +++ b/src/utilities/text/demo/nowrap.twig @@ -2,5 +2,5 @@

This is some text to show how it works: some-long-text.

-

This is some text to show how it works: some-long-text.

+

This is some text to show how it works: some-long-text.

diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss index 325f031e8..5936d9d6b 100644 --- a/src/utilities/text/text.scss +++ b/src/utilities/text/text.scss @@ -1,9 +1,9 @@ @use "../../compiled/tokens/scss/color"; -.u-textNoWrap { +.u-text-no-wrap { white-space: nowrap !important; } -.u-textColorBrandPrimary { +.u-text-color-brand-primary { color: color.$brand-primary !important; } diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx index 040739a9b..5452a5b56 100644 --- a/src/utilities/text/text.stories.mdx +++ b/src/utilities/text/text.stories.mdx @@ -29,7 +29,7 @@ Utilities for controlling text properties. ## White-space nowrap -- `u-textNoWrap` +- `u-text-no-wrap` Utility for controlling the white-space wrapping of text, applies `white-space: nowrap`. @@ -46,7 +46,7 @@ Notice in the second example how the `some-long-text` text doesn't wrap. ## Primary brand text color -- `u-textColorBrandPrimary` +- `u-text-color-brand-primary` Utility that changes the text color to the primary brand color. From 8199151d41f271bc577477b425634d4b84dba583 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 10:58:17 -0700 Subject: [PATCH 5/8] Don't forget theming + make it better --- src/utilities/text/demo/color.twig | 9 ++++++++- src/utilities/text/demo/nowrap.twig | 24 ++++++++++++++++++------ src/utilities/text/demo/styles.scss | 2 -- src/utilities/text/text.scss | 4 ++-- src/utilities/text/text.stories.mdx | 4 ++-- 5 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/utilities/text/demo/color.twig b/src/utilities/text/demo/color.twig index 0d551d3f3..91ef51051 100644 --- a/src/utilities/text/demo/color.twig +++ b/src/utilities/text/demo/color.twig @@ -1 +1,8 @@ -

This show an example text that has the utility class applied.

+{% embed '@cloudfour/objects/container/container.twig' with { + class: 'o-container--pad' +} only %} + {% block content %} +

This is default text.

+

This is text that has the utility class applied.

+ {% endblock %} +{% endembed %} diff --git a/src/utilities/text/demo/nowrap.twig b/src/utilities/text/demo/nowrap.twig index fa2e31e07..63a96901b 100644 --- a/src/utilities/text/demo/nowrap.twig +++ b/src/utilities/text/demo/nowrap.twig @@ -1,6 +1,18 @@ -
-

This is some text to show how it works: some-long-text.

-
-
-

This is some text to show how it works: some-long-text.

-
+{% embed '@cloudfour/objects/container/container.twig' with { + class: 'o-container--pad' +} only %} + {% block content %} +
+

This is some text to show how it works: some-long-text.

+
+ {% endblock %} +{% endembed %} +{% embed '@cloudfour/objects/container/container.twig' with { + class: 'o-container--pad' +} only %} + {% block content %} +
+

This is some text to show how it works: some-long-text.

+
+ {% endblock %} +{% endembed %} diff --git a/src/utilities/text/demo/styles.scss b/src/utilities/text/demo/styles.scss index 3cf76975c..59ea4b0aa 100644 --- a/src/utilities/text/demo/styles.scss +++ b/src/utilities/text/demo/styles.scss @@ -3,12 +3,10 @@ @use '../../../mixins/ms'; .demoWrapper { - margin: ms.step(-1); padding-right: 50%; } .content { - background: color.$text-light-emphasis; border: size.$edge-medium solid color.$base-gray; padding: ms.step(-1); } diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss index 5936d9d6b..fd12397b1 100644 --- a/src/utilities/text/text.scss +++ b/src/utilities/text/text.scss @@ -4,6 +4,6 @@ white-space: nowrap !important; } -.u-text-color-brand-primary { - color: color.$brand-primary !important; +.u-text-color-action { + color: var(--theme-color-text-action) !important; } diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx index 5452a5b56..c8df558ac 100644 --- a/src/utilities/text/text.stories.mdx +++ b/src/utilities/text/text.stories.mdx @@ -44,9 +44,9 @@ Notice in the second example how the `some-long-text` text doesn't wrap. -## Primary brand text color +## Action color text -- `u-text-color-brand-primary` +- `u-text-color-action` Utility that changes the text color to the primary brand color. From 226a8bbd9e49e47c0ee55f85856ccb1da1f43246 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 11:07:32 -0700 Subject: [PATCH 6/8] Remove 'color' from CSS class name --- src/utilities/text/demo/color.twig | 2 +- src/utilities/text/text.scss | 2 +- src/utilities/text/text.stories.mdx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utilities/text/demo/color.twig b/src/utilities/text/demo/color.twig index 91ef51051..cf19ccdd6 100644 --- a/src/utilities/text/demo/color.twig +++ b/src/utilities/text/demo/color.twig @@ -3,6 +3,6 @@ } only %} {% block content %}

This is default text.

-

This is text that has the utility class applied.

+

This is text that has the utility class applied.

{% endblock %} {% endembed %} diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss index fd12397b1..51fe17cda 100644 --- a/src/utilities/text/text.scss +++ b/src/utilities/text/text.scss @@ -4,6 +4,6 @@ white-space: nowrap !important; } -.u-text-color-action { +.u-text-action { color: var(--theme-color-text-action) !important; } diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx index c8df558ac..79f1c8550 100644 --- a/src/utilities/text/text.stories.mdx +++ b/src/utilities/text/text.stories.mdx @@ -44,15 +44,15 @@ Notice in the second example how the `some-long-text` text doesn't wrap. -## Action color text +## Action text -- `u-text-color-action` +- `u-text-action` -Utility that changes the text color to the primary brand color. +Utility that changes the text color to the "action" text color. {(args) => colorDemo(args)} From 74e41acb0231b23f5a9fde1295c6f73c5897eeb6 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 11:24:50 -0700 Subject: [PATCH 7/8] PR feedback --- src/utilities/text/demo/nowrap.twig | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/utilities/text/demo/nowrap.twig b/src/utilities/text/demo/nowrap.twig index 63a96901b..052473e4b 100644 --- a/src/utilities/text/demo/nowrap.twig +++ b/src/utilities/text/demo/nowrap.twig @@ -3,7 +3,8 @@ } only %} {% block content %}
-

This is some text to show how it works: some-long-text.

+

This text will wrap: The quick brown +fox jumps over the lazy dog.

{% endblock %} {% endembed %} @@ -12,7 +13,8 @@ } only %} {% block content %}
-

This is some text to show how it works: some-long-text.

+

This text will not wrap: The quick brown +fox jumps over the lazy dog.

{% endblock %} {% endembed %} From ecf238c991a26d0247d2805a46d589d5cbcf60ff Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 25 Aug 2021 11:28:51 -0700 Subject: [PATCH 8/8] More PR feedback --- src/utilities/text/demo/nowrap.twig | 12 ++++++++---- src/utilities/text/demo/styles.scss | 12 ------------ src/utilities/text/text.stories.mdx | 1 - 3 files changed, 8 insertions(+), 17 deletions(-) delete mode 100644 src/utilities/text/demo/styles.scss diff --git a/src/utilities/text/demo/nowrap.twig b/src/utilities/text/demo/nowrap.twig index 052473e4b..7e3877183 100644 --- a/src/utilities/text/demo/nowrap.twig +++ b/src/utilities/text/demo/nowrap.twig @@ -2,9 +2,11 @@ class: 'o-container--pad' } only %} {% block content %} -
-

This text will wrap: The quick brown +

+
+

This text will wrap: The quick brown fox jumps over the lazy dog.

+
{% endblock %} {% endembed %} @@ -12,9 +14,11 @@ fox jumps over the lazy dog.

class: 'o-container--pad' } only %} {% block content %} -
-

This text will not wrap: The quick brown +

+
+

This text will not wrap: The quick brown fox jumps over the lazy dog.

+
{% endblock %} {% endembed %} diff --git a/src/utilities/text/demo/styles.scss b/src/utilities/text/demo/styles.scss deleted file mode 100644 index 59ea4b0aa..000000000 --- a/src/utilities/text/demo/styles.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use "../../../compiled/tokens/scss/color"; -@use "../../../compiled/tokens/scss/size"; -@use '../../../mixins/ms'; - -.demoWrapper { - padding-right: 50%; -} - -.content { - border: size.$edge-medium solid color.$base-gray; - padding: ms.step(-1); -} diff --git a/src/utilities/text/text.stories.mdx b/src/utilities/text/text.stories.mdx index 79f1c8550..50f84e886 100644 --- a/src/utilities/text/text.stories.mdx +++ b/src/utilities/text/text.stories.mdx @@ -19,7 +19,6 @@ import noWrapDemo from './demo/nowrap.twig'; // eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax import colorDemoSource from '!!raw-loader!./demo/color.twig'; import colorDemo from './demo/color.twig'; -import './demo/styles.scss';