From 4c20cd840a1401575be84cfce55febc46c82e349 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 12 Jul 2021 15:39:33 -0700 Subject: [PATCH 1/9] Add font weight modifier --- src/components/heading/demo/weight.twig | 11 +++++++++++ src/components/heading/heading.scss | 11 +++++++++++ src/components/heading/heading.stories.mdx | 23 ++++++++++++++++++++++ src/components/heading/heading.twig | 16 ++++++++++----- 4 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 src/components/heading/demo/weight.twig diff --git a/src/components/heading/demo/weight.twig b/src/components/heading/demo/weight.twig new file mode 100644 index 000000000..bcae763a2 --- /dev/null +++ b/src/components/heading/demo/weight.twig @@ -0,0 +1,11 @@ +{% embed '@cloudfour/objects/rhythm/rhythm.twig' with { + class: 'o-rhythm--condensed' +} only %} + {% block content %} + {% include '@cloudfour/components/heading/heading.twig' with { + level: 1, + weight: 'light', + content: 'c-heading--weight-' ~ 'light' + } only %} + {% endblock %} +{% endembed %} diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 0ad5bc22c..7ca2d5f34 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -61,6 +61,17 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16); } } +/** + * Weight modifier + * + * The default font weight for headings is set to 700. This modifier will + * change that to a lighter weight of 300. + */ + +.c-heading--weight-light { + font-weight: 300; +} + /** * If `c-heading` is applied to a containing element, this class must be applied * to the inner heading to avoid unintended font sizes. diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index 54496bcaa..c4b3ae846 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -1,5 +1,6 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import levelsDemo from './demo/levels.twig'; +import weightDemo from './demo/weight.twig'; import permalinksDemo from './demo/permalinks.twig'; @@ -50,6 +51,28 @@ You can control the appearance of a `c-heading` component by including a `c-head +## Weight Modifier + +There are some instances where the heading weight is lighter than the default `700`, this modifier will set the font weight to `300`. + + + + {weightDemo} + + + ## Permalinks The `c-heading` class may include a permalink using [a technique from Marcy Sutton ](http://codepen.io/marcysutton/pen/rLKvgZ). Three elements are required: diff --git a/src/components/heading/heading.twig b/src/components/heading/heading.twig index 3a87303ca..ff4e876a0 100644 --- a/src/components/heading/heading.twig +++ b/src/components/heading/heading.twig @@ -20,15 +20,21 @@ Build the class name based on the level. #} -{% set _level_class = 'c-heading' %} +{% set _heading_class = 'c-heading' %} +{% set _heading_class_prefix = 'c-heading' %} {% if level is not empty %} {% set _level_modifier = ('level-' ~ level)|replace({ '--': '-n' }) %} - {% set _level_class = _level_class ~ ' ' ~ _level_class ~ '--' ~ _level_modifier %} + {% set _heading_class = _heading_class ~ ' ' ~ _heading_class_prefix ~ '--' ~ _level_modifier %} +{% endif %} + +{% if weight is not empty %} + {% set _weight_modifier = ('weight-' ~ weight) %} + {% set _heading_class = _heading_class ~ ' ' ~ _heading_class_prefix ~ '--' ~ _weight_modifier %} {% endif %} {% if class %} - {% set _level_class = _level_class ~ ' ' ~ class %} + {% set _heading_class = _heading_class ~ ' ' ~ class %} {% endif %} {# @@ -59,7 +65,7 @@ #} {% if permalink and permalink_id %} -
+
{% include '@cloudfour/components/icon/icon.twig' with { name: 'link', @@ -72,7 +78,7 @@
{% else %} - <{{ tag_name }} class="{{ _level_class }}"> + <{{ tag_name }} class="{{ _heading_class }}"> {{ _content }} {% endif %} From e29c5c1726fa579281c48685c0b093beec653aa1 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 12 Jul 2021 16:02:39 -0700 Subject: [PATCH 2/9] Add changeset --- .changeset/tricky-nails-kick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-nails-kick.md diff --git a/.changeset/tricky-nails-kick.md b/.changeset/tricky-nails-kick.md new file mode 100644 index 000000000..5b337c988 --- /dev/null +++ b/.changeset/tricky-nails-kick.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add font weight modifier to heading component From 710cfb31c453f5e605eae3bfb07887080e954307 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 12 Jul 2021 18:27:53 -0700 Subject: [PATCH 3/9] Use design tokens, remove rhythm component from twig file --- src/components/heading/demo/weight.twig | 18 +++++++----------- src/components/heading/heading.scss | 8 +++++--- src/components/heading/heading.stories.mdx | 4 ++-- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/heading/demo/weight.twig b/src/components/heading/demo/weight.twig index bcae763a2..dff0210c9 100644 --- a/src/components/heading/demo/weight.twig +++ b/src/components/heading/demo/weight.twig @@ -1,11 +1,7 @@ -{% embed '@cloudfour/objects/rhythm/rhythm.twig' with { - class: 'o-rhythm--condensed' -} only %} - {% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: 1, - weight: 'light', - content: 'c-heading--weight-' ~ 'light' - } only %} - {% endblock %} -{% endembed %} +{% block content %} + {% include '@cloudfour/components/heading/heading.twig' with { + level: 1, + weight: 'light', + content: 'c-heading--light' + } only %} +{% endblock %} diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 7ca2d5f34..474b5a3d0 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -4,6 +4,7 @@ @use "../../compiled/tokens/scss/opacity"; @use "../../compiled/tokens/scss/size"; @use "../../compiled/tokens/scss/transition"; +@use "../../compiled/tokens/scss/font-weight"; @use '../../mixins/focus'; @use '../../mixins/headings'; @use '../../mixins/ms'; @@ -64,12 +65,13 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16); /** * Weight modifier * - * The default font weight for headings is set to 700. This modifier will - * change that to a lighter weight of 300. + * The default font weight for headings is set to font-weight.$bold. + * This modifier will change that to a lighter weight + * of font-weight.$light. */ .c-heading--weight-light { - font-weight: 300; + font-weight: font-weight.$light; } /** diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index c4b3ae846..e9ce8eacc 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -53,7 +53,7 @@ You can control the appearance of a `c-heading` component by including a `c-head ## Weight Modifier -There are some instances where the heading weight is lighter than the default `700`, this modifier will set the font weight to `300`. +There are some instances where the heading weight is lighter than the default `font-weight.$bold`, this modifier will set the font weight to `font-weight.$light`. Date: Mon, 12 Jul 2021 18:28:36 -0700 Subject: [PATCH 4/9] Update .changeset/tricky-nails-kick.md Co-authored-by: Tyler Sticka --- .changeset/tricky-nails-kick.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tricky-nails-kick.md b/.changeset/tricky-nails-kick.md index 5b337c988..907235df5 100644 --- a/.changeset/tricky-nails-kick.md +++ b/.changeset/tricky-nails-kick.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Add font weight modifier to heading component +Add light weight modifier to Heading component From 4e7521791e5ac739800a8efcd24b5ec67cb2995b Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 13 Jul 2021 10:17:57 -0700 Subject: [PATCH 5/9] Simplify code --- src/components/heading/demo/weight.twig | 7 ------- src/components/heading/heading.scss | 9 +++++---- src/components/heading/heading.stories.mdx | 21 ++++++++------------- src/components/heading/heading.twig | 4 ++-- 4 files changed, 15 insertions(+), 26 deletions(-) delete mode 100644 src/components/heading/demo/weight.twig diff --git a/src/components/heading/demo/weight.twig b/src/components/heading/demo/weight.twig deleted file mode 100644 index dff0210c9..000000000 --- a/src/components/heading/demo/weight.twig +++ /dev/null @@ -1,7 +0,0 @@ -{% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: 1, - weight: 'light', - content: 'c-heading--light' - } only %} -{% endblock %} diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 474b5a3d0..ef48d6caf 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -65,12 +65,13 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16); /** * Weight modifier * - * The default font weight for headings is set to font-weight.$bold. - * This modifier will change that to a lighter weight - * of font-weight.$light. + * The default font weight for headings is normally defined by heading level. + * This modifier will change the heading to font-weight.$light. We do this + * so we can do enforce a visual hierarchy without sacrificing the importance + * of headings and not drowning out other content. */ -.c-heading--weight-light { +.c-heading--light { font-weight: font-weight.$light; } diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index e9ce8eacc..259f60586 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -1,6 +1,6 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import levelsDemo from './demo/levels.twig'; -import weightDemo from './demo/weight.twig'; +import template from './heading.twig'; import permalinksDemo from './demo/permalinks.twig'; @@ -53,23 +53,18 @@ You can control the appearance of a `c-heading` component by including a `c-head ## Weight Modifier -There are some instances where the heading weight is lighter than the default `font-weight.$bold`, this modifier will set the font weight to `font-weight.$light`. +The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this so we can do enforce a visual hierarchy without sacrificing the importance of headings and not drowning out other content. - {weightDemo} + {(args) => template(args)} diff --git a/src/components/heading/heading.twig b/src/components/heading/heading.twig index ff4e876a0..1fee37fdb 100644 --- a/src/components/heading/heading.twig +++ b/src/components/heading/heading.twig @@ -29,8 +29,8 @@ {% endif %} {% if weight is not empty %} - {% set _weight_modifier = ('weight-' ~ weight) %} - {% set _heading_class = _heading_class ~ ' ' ~ _heading_class_prefix ~ '--' ~ _weight_modifier %} + {% set _weight_modifier = 'c-heading--light' %} + {% set _heading_class = _heading_class ~ ' ' ~ _weight_modifier %} {% endif %} {% if class %} From 004cea683f6b33c1559160fb72694c13a10accd5 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 13 Jul 2021 10:33:02 -0700 Subject: [PATCH 6/9] Fix typo --- src/components/heading/heading.scss | 2 +- src/components/heading/heading.stories.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index ef48d6caf..6c91f9847 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -67,7 +67,7 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16); * * The default font weight for headings is normally defined by heading level. * This modifier will change the heading to font-weight.$light. We do this - * so we can do enforce a visual hierarchy without sacrificing the importance + * so we can enforce a visual hierarchy without sacrificing the importance * of headings and not drowning out other content. */ diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index 259f60586..3ffaa9fba 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -53,7 +53,7 @@ You can control the appearance of a `c-heading` component by including a `c-head ## Weight Modifier -The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this so we can do enforce a visual hierarchy without sacrificing the importance of headings and not drowning out other content. +The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this so we can enforce a visual hierarchy without sacrificing the importance of headings and not drowning out other content. Date: Tue, 13 Jul 2021 10:50:02 -0700 Subject: [PATCH 7/9] Change title in story --- src/components/heading/heading.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index 3ffaa9fba..5e9118400 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -51,7 +51,7 @@ You can control the appearance of a `c-heading` component by including a `c-head -## Weight Modifier +## Light Weight Modifier The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this so we can enforce a visual hierarchy without sacrificing the importance of headings and not drowning out other content. From 92ed6f218e81f4585101465bf507b6850b6e8981 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 13 Jul 2021 13:24:35 -0700 Subject: [PATCH 8/9] Change sentence structure and heading class prefix --- src/components/heading/heading.scss | 5 ++--- src/components/heading/heading.stories.mdx | 2 +- src/components/heading/heading.twig | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 6c91f9847..61cdff73f 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -66,9 +66,8 @@ $max-width-permalink-shift: math.div($min-width-permalink-shift * 16 - 1, 16); * Weight modifier * * The default font weight for headings is normally defined by heading level. - * This modifier will change the heading to font-weight.$light. We do this - * so we can enforce a visual hierarchy without sacrificing the importance - * of headings and not drowning out other content. + * This modifier will change the heading to font-weight.$light. We do this to + * maintain the importance of headings without drowning out other content. */ .c-heading--light { diff --git a/src/components/heading/heading.stories.mdx b/src/components/heading/heading.stories.mdx index 5e9118400..05de59fe4 100644 --- a/src/components/heading/heading.stories.mdx +++ b/src/components/heading/heading.stories.mdx @@ -53,7 +53,7 @@ You can control the appearance of a `c-heading` component by including a `c-head ## Light Weight Modifier -The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this so we can enforce a visual hierarchy without sacrificing the importance of headings and not drowning out other content. +The default font weight for headings is normally defined by heading level. This modifier will change the heading to `font-weight.$light`. We do this to maintain the importance of headings without drowning out other content. Date: Tue, 13 Jul 2021 15:04:03 -0700 Subject: [PATCH 9/9] Remove weight modifier --- src/components/heading/heading.twig | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/heading/heading.twig b/src/components/heading/heading.twig index 537e101d2..f7af6865d 100644 --- a/src/components/heading/heading.twig +++ b/src/components/heading/heading.twig @@ -29,8 +29,7 @@ {% endif %} {% if weight is not empty %} - {% set _weight_modifier = 'c-heading--light' %} - {% set _heading_class = _heading_class_prefix ~ '--' ~ weight %} + {% set _heading_class = _heading_class ~ ' ' ~ _heading_class_prefix ~ '--' ~ weight %} {% endif %} {% if class %}