diff --git a/.changeset/tricky-nails-kick.md b/.changeset/tricky-nails-kick.md new file mode 100644 index 000000000..907235df5 --- /dev/null +++ b/.changeset/tricky-nails-kick.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add light weight modifier to Heading component diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 0ad5bc22c..61cdff73f 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'; @@ -61,6 +62,18 @@ $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 to + * maintain the importance of headings without drowning out other content. + */ + +.c-heading--light { + font-weight: font-weight.$light; +} + /** * 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..05de59fe4 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 template from './heading.twig'; import permalinksDemo from './demo/permalinks.twig'; @@ -50,6 +51,23 @@ 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 to maintain the importance of headings without drowning out other content. + + + + {(args) => template(args)} + + + ## 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..f7af6865d 100644 --- a/src/components/heading/heading.twig +++ b/src/components/heading/heading.twig @@ -20,15 +20,20 @@ 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 _heading_class = _heading_class ~ ' ' ~ _heading_class_prefix ~ '--' ~ weight %} {% endif %} {% if class %} - {% set _level_class = _level_class ~ ' ' ~ class %} + {% set _heading_class = _heading_class ~ ' ' ~ class %} {% endif %} {# @@ -59,7 +64,7 @@ #} {% if permalink and permalink_id %} -
+
{% include '@cloudfour/components/icon/icon.twig' with { name: 'link', @@ -72,7 +77,7 @@
{% else %} - <{{ tag_name }} class="{{ _level_class }}"> + <{{ tag_name }} class="{{ _heading_class }}"> {{ _content }} {% endif %}