Merge pull request #2484 from boltdesignsystem/feature/DS-232-Update-…

…Headline-Numbered-variation-purple-option DS-232 Update headline numbered variation "purple" option
boltdesignsystem · May 11, 2022 · 2f48cf4 · 2f48cf4
2 parents 78c0f7d + 90944a8
commit 2f48cf4
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 51 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/headline/40-headline-numbered.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/headline/40-headline-numbered.twig
@@ -20,13 +20,13 @@
 } only %}
 
 {% set withoutColorExample %}{% verbatim %}{% include '@bolt-components-headline/headline.twig' with {
-  text: 'Example numbered headline (w/o numberColor)',
-  numberText: 7,
+  text: 'Example numbered headline (w/o number_color)',
+  number_text: 7,
 } only %}{% endverbatim %}{% endset %}
 
 {% include '@bolt-components-headline/headline.twig' with {
-  text: 'Example numbered headline (w/o numberColor)',
-  numberText: 7,
+  text: 'Example numbered headline (w/o number_color)',
+  number_text: 7,
 } only %}
 
 {% include '@bolt-components-code-snippet/code-snippet.twig' with {
@@ -35,15 +35,15 @@
 } %}
 
 {% set withColorExample %}{% verbatim %}{% include '@bolt-components-headline/headline.twig' with {
-  text: 'Example numbered headline (w/ numberColor)',
-  numberText: 42,
-  numberColor: 'orange'
+  text: 'Example numbered headline (w/ number_color)',
+  number_text: 42,
+  number_color: 'orange'
 } only %}{% endverbatim %}{% endset %}
 
 {% include '@bolt-components-headline/headline.twig' with {
-  text: 'Example numbered headline (w/ numberColor)',
-  numberText: 42,
-  numberColor: 'orange'
+  text: 'Example numbered headline (w/ number_color)',
+  number_text: 42,
+  number_color: 'orange'
 } only %}
 
 {% include '@bolt-components-code-snippet/code-snippet.twig' with {
@@ -69,23 +69,23 @@
     {% include '@bolt-components-headline/headline.twig' with {
       size: 'xxlarge',
       text: 'Single-digit',
-      numberText: 7,
+      number_text: 7,
     } only %}
   {% endcell %}
 
   {% cell 'u-bolt-width-12/12 u-bolt-width-4/12@small' %}
     {% include '@bolt-components-headline/headline.twig' with {
       size: 'xxlarge',
       text: 'Double-digit',
-      numberText: 42,
+      number_text: 42,
     } only %}
   {% endcell %}
 
   {% cell 'u-bolt-width-12/12 u-bolt-width-4/12@small' %}
     {% include '@bolt-components-headline/headline.twig' with {
       size: 'xxlarge',
       text: 'Triple-digit',
-      numberText: 123,
+      number_text: 123,
     } only %}
   {% endcell %}
 {% endgrid %}
@@ -102,7 +102,7 @@
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xxlarge',
   text: 'Numbered Headline With Left Icon',
-  numberText: 1,
+  number_text: 1,
   icon: {
     name: 'arrow-left',
     position: 'before'
@@ -112,7 +112,7 @@
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xxlarge',
   text: 'Numbered Headline With Right Icons',
-  numberText: 2,
+  number_text: 2,
   icon: {
     name: 'chevron-right',
     position: 'after'
@@ -133,21 +133,21 @@
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xlarge',
   text: 'Numbered Headline - Left',
-  numberText: 1,
+  number_text: 1,
   align: 'left'
 } only %}
 
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xlarge',
   text: 'Numbered Headline - Center',
-  numberText: 2,
+  number_text: 2,
   align: 'center'
 } only %}
 
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xlarge',
   text: 'Numbered Headline - Right',
-  numberText: 3,
+  number_text: 3,
   align: 'right'
 } only %}
 
@@ -156,27 +156,27 @@
 <bolt-stack>
   {% include '@bolt-components-headline/eyebrow.twig' with {
     text: 'Numbered Eyebrow',
-    numberText: 4,
+    number_text: 4,
   } only %}
 </bolt-stack>
 <bolt-stack>
   {% include '@bolt-components-headline/headline.twig' with {
     size: 'xxxlarge',
     text: 'Numbered Headline (xxxlarge)',
-    numberText: 1,
+    number_text: 1,
   } only %}
 </bolt-stack>
 <bolt-stack>
   {% include '@bolt-components-headline/subheadline.twig' with {
     size: 'xxlarge',
     text: 'Numbered Subheadline (xxlarge)',
-    numberText: 2,
+    number_text: 2,
   } only %}
 </bolt-stack>
 <bolt-stack>
   {% include '@bolt-components-headline/text.twig' with {
     text: 'Numbered Text',
-    numberText: 3,
+    number_text: 3,
   } only %}
 </bolt-stack>
 
@@ -188,8 +188,8 @@
       {% include '@bolt-components-headline/headline.twig' with {
         size: size,
         text: 'Numbered Headline (' ~ size ~ ')',
-        numberText: loop.index,
-        numberColor: 'navy',
+        number_text: loop.index,
+        number_color: 'navy',
       } only %}
     </bolt-stack>
   {% endif %}
@@ -199,22 +199,22 @@
 
 {% include '@bolt-components-headline/headline.twig' with {
   size: 'xxlarge',
-  text: 'numberColor',
+  text: 'number_color',
   tag: 'h2',
 } only %}
 
 <p>
-  By setting the <code>numberColor</code> prop to <code>navy</code>, <code>purple</code>, <code>teal</code>, or <code>orange</code>, you can choose the background color of the Headline Number.
+  By setting the <code>number_color</code> prop to <code>navy</code>, <code>violet</code>, <code>teal</code>, or <code>orange</code>, you can choose the background color of the Headline Number.
 </p>
 
 {% grid 'o-bolt-grid--medium o-bolt-grid--matrix' %}
-  {% for color in schema.properties.numberColor.enum %}
+  {% for color in schema.properties.number_color.enum %}
     {% cell 'u-bolt-width-12/12 u-bolt-width-6/12@small' %}
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
         text: 'Numbered Headline w/ Number',
-        numberText: loop.index,
-        numberColor: color
+        number_text: loop.index,
+        number_color: color
       } only %}
     {% endcell %}
   {% endfor %}
@@ -225,8 +225,8 @@
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
         text: 'Numbered Headline w/ Letter',
-        numberText: letter,
-        numberColor: schema.properties.numberColor.enum[loop.index0]
+        number_text: letter,
+        number_color: schema.properties.number_color.enum[loop.index0]
       } only %}
     {% endcell %}
   {% endfor %}
@@ -243,16 +243,16 @@
 } only %}
 
 <p>
-  If you don't specify a <code>numberColor</code>, the current theme's colors will be used instead.
+  If you don't specify a <code>number_color</code>, the current theme's colors will be used instead.
 </p>
 
 {% grid 'o-bolt-grid--full' %}
   {% cell 'u-bolt-width-12/12 u-bolt-width-6/12@small' %}
     <div class="t-bolt-xlight u-bolt-padding-top-small u-bolt-padding-bottom-small u-bolt-padding-left-small u-bolt-padding-right-small">
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
-        text: 'Without numberColor',
-        numberText: 1,
+        text: 'Without number_color',
+        number_text: 1,
       } only %}
     </div>
   {% endcell %}
@@ -261,8 +261,8 @@
     <div class="t-bolt-light u-bolt-padding-top-small u-bolt-padding-bottom-small u-bolt-padding-left-small u-bolt-padding-right-small">
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
-        text: 'Without numberColor',
-        numberText: 2,
+        text: 'Without number_color',
+        number_text: 2,
       } only %}
     </div>
   {% endcell %}
@@ -271,8 +271,8 @@
     <div class="t-bolt-dark u-bolt-padding-top-small u-bolt-padding-bottom-small u-bolt-padding-left-small u-bolt-padding-right-small">
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
-        text: 'Without numberColor',
-        numberText: 3,
+        text: 'Without number_color',
+        number_text: 3,
       } only %}
     </div>
   {% endcell %}
@@ -281,8 +281,8 @@
     <div class="t-bolt-xdark u-bolt-padding-top-small u-bolt-padding-bottom-small u-bolt-padding-left-small u-bolt-padding-right-small">
       {% include '@bolt-components-headline/headline.twig' with {
         size: 'xxlarge',
-        text: 'Without numberColor',
-        numberText: 4,
+        text: 'Without number_color',
+        number_text: 4,
       } only %}
     </div>
   {% endcell %}

diff --git a/...-archive/academy/05-pages/t2-inner-pages/challenge-details/acd-challenge-detail-page.twig b/...-archive/academy/05-pages/t2-inner-pages/challenge-details/acd-challenge-detail-page.twig
@@ -7,8 +7,8 @@
     tag: "h2",
     size: "xxlarge",
     text: "Scenario",
-    numberText: 1,
-    numberColor: "orange"
+    number_text: 1,
+    number_color: "orange"
   } only %}
 
   {% include "@bolt-components-headline/text.twig" with {

diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/headline/headline-numbered.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/headline/headline-numbered.twig
@@ -0,0 +1,21 @@
+{% set schema = bolt.data.components['@bolt-components-headline'].schema %}
+
+<h2>New prop <code>number_text</code> usage.</h2>
+{% for item in schema.properties.number_color.enum %}
+  {% include '@bolt-components-headline/headline.twig' with {
+    size: 'xxlarge',
+    text: 'Numbered Headline',
+    number_text: loop.index,
+  } only %}
+{% endfor %}
+
+<h2>New prop <code>number_color</code> usage.</h2>
+<p>Note that the new color violet - <code>var(--bolt-color-violet)</code> replaced color purple - <code>var(--bolt-color-berry)</code>.</p>
+{% for item in schema.properties.number_color.enum %}
+  {% include '@bolt-components-headline/headline.twig' with {
+    size: 'xxlarge',
+    text: 'Numbered Headline, ' ~ 'color ' ~ item ~ ' <code>var(--bolt-color-'~ item ~')</code>',
+    number_color: item,
+    number_text: range('A','Z')[loop.index0],
+  } only %}
+{% endfor %}
diff --git a/packages/components/bolt-headline/headline.schema.js b/packages/components/bolt-headline/headline.schema.js
@@ -5,6 +5,16 @@ module.exports = {
   $schema: 'http://json-schema.org/draft-04/schema#',
   title: 'Headline',
   type: 'object',
+  not: {
+    anyOf: [
+      {
+        required: ['numberText'],
+      },
+      {
+        required: ['numberColor'],
+      },
+    ],
+  },
   required: ['text'],
   properties: {
     text: {
@@ -84,16 +94,24 @@ module.exports = {
       type: 'boolean',
       description: 'Adds quoted styling to text.',
     },
-    numberText: {
+    number_text: {
       description:
         'Text that displays in a small circle to the left of the main Headline text. Providing content will trigger the bullet to appear.',
       type: ['string', 'number'],
     },
-    numberColor: {
+    number_color: {
       description:
         'The optional background color of the Headline bullet. Uses inherited theme colors if unspecified.',
       type: 'string',
-      enum: ['teal', 'navy', 'orange', 'purple'],
+      enum: ['teal', 'navy', 'orange', 'violet'],
+    },
+    numberText: {
+      title: 'DEPRECATED',
+      description: 'Use number_text instead.',
+    },
+    numberColor: {
+      title: 'DEPRECATED',
+      description: 'Use number_color instead.',
     },
   },
 };
diff --git a/packages/components/bolt-headline/src/_headline.numbered.scss b/packages/components/bolt-headline/src/_headline.numbered.scss
@@ -25,12 +25,16 @@
       background-color: var(--bolt-color-navy-light);
     }
 
-    &--berry,
-    &--purple {
+    &--berry {
       color: var(--bolt-color-white);
       background-color: var(--bolt-color-berry);
     }
 
+    &--violet {
+      color: var(--bolt-color-white);
+      background-color: var(--bolt-color-violet);
+    }
+
     &--teal {
       color: var(--bolt-color-white);
       background-color: var(--bolt-color-teal);

diff --git a/packages/components/bolt-headline/src/_typography.twig b/packages/components/bolt-headline/src/_typography.twig
@@ -4,6 +4,16 @@
   {{ validate_data_schema(schema, _self) | raw }}
 {% endif %}
 
+{# DEPRECATED.  Use the property `number_text` instead of `numberText`. #}
+{% if numberText %}
+  {% set number_text = numberText %}
+{% endif %}
+
+{# DEPRECATED.  Use the property `number_color` instead of `numberColor`. #}
+{% if numberColor %}
+  {% set number_color = numberColor %}
+{% endif %}
+
 {% set types = ['headline', 'subheadline', 'eyebrow', 'text'] %} {# Pre-defined types #}
 {% set tags = schema.properties.tag.enum %}
 {% set weights = schema.properties.weight.enum %}
@@ -68,7 +78,7 @@
 
 {% set classes = [
   baseClass,
-  numberText ? baseClass ~ '--' ~ 'bulleted' : '',
+  number_text ? baseClass ~ '--' ~ 'bulleted' : '',
   quoted ? baseClass ~ '--' ~ 'quoted' : '',
   weight in weights ? baseClass ~ '--' ~ weight : '',
   align in alignments and align != null ? baseClass ~ '--' ~ align : '',
@@ -98,10 +108,10 @@
 {% set hasIcon = iconBefore or iconAfter ? true : false %}
 
 <{{ tag }} {{ attributes.addClass(classes) }}>{% apply spaceless %}
-  {% if numberText %}
+  {% if number_text %}
     <span class="c-bolt-headline__bullet c-bolt-headline__bullet--size-{{ numberSize }}">
-      <span class="c-bolt-headline__bullet-inner {{ numberColor ? 'c-bolt-headline__bullet-inner--' ~ numberColor : ''}}">
-        <span class="c-bolt-headline__bullet-text">{{ numberText }}</span>
+      <span class="c-bolt-headline__bullet-inner {{ number_color ? 'c-bolt-headline__bullet-inner--' ~ number_color : ''}}">
+        <span class="c-bolt-headline__bullet-text">{{ number_text }}</span>
       </span>
     </span>
   {% endif %}