Add font weight modifier (#1394)

* Add font weight modifier * Add changeset * Use design tokens, remove rhythm component from twig file * Update .changeset/tricky-nails-kick.md Co-authored-by: Tyler Sticka <[email protected]> * Simplify code * Fix typo * Change title in story * Change sentence structure and heading class prefix * Remove weight modifier Co-authored-by: Tyler Sticka <[email protected]>
cloudfour · Jul 13, 2021 · 17a7a17 · 17a7a17
1 parent 96e412c
commit 17a7a17
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/.changeset/tricky-nails-kick.md 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
@@ -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
@@ -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';
 
 <Meta title="Components/Heading" />
@@ -50,6 +51,23 @@ You can control the appearance of a `c-heading` component by including a `c-head
   </Story>
 </Canvas>
 
+## 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.
+
+<Canvas>
+  <Story
+    name="Light weight"
+    args={{
+      level: 1,
+      weight: 'light',
+      content: 'c-heading--light',
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
 ## 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
@@ -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 %}
-  <div class="{{ _level_class }}">
+  <div class="{{ _heading_class }}">
     <a class="c-heading__permalink" href="#{{ permalink_id }}">
       {% include '@cloudfour/components/icon/icon.twig' with {
         name: 'link',
@@ -72,7 +77,7 @@
     </{{ tag_name }}>
   </div>
 {% else %}
-  <{{ tag_name }} class="{{ _level_class }}">
+  <{{ tag_name }} class="{{ _heading_class }}">
     {{ _content }}
   </{{ tag_name }}>
 {% endif %}