#261 update heading styles, add BEM modifier

SnowdogApps · May 8, 2020 · d0b26d5 · d0b26d5
1 parent 06b7849
commit d0b26d5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 13 deletions.
diff --git a/src/atoms/heading/Heading.html b/src/atoms/heading/Heading.html
@@ -4,5 +4,6 @@
     [`a-heading a-heading--${levelClassName}-level`]: level
   }"
 >
+  <!-- @slot Slot for heading content -->
   <slot />
 </component>
diff --git a/src/atoms/heading/Heading.scss b/src/atoms/heading/Heading.scss
@@ -1,17 +1,22 @@
 @import '../../../assets/styles/_globals.scss';
 
-$headings-margin                : 0 0 0.5em 0 !default;
-$headings-font-family           : $font-family-base !default;
-$headings-font-weight           : 700 !default;
-$headings-line-height           : $font-line-height !default;
-$headings-color                 : $color-secondary !default;
-$headings-text-transform        : none !default;
-$heading-font-size--first-level : 18px !default;
-$heading-font-size--second-level: 18px !default;
-$heading-font-size--third-level : 14px !default;
-$heading-font-size--fourth-level: 14px !default;
-$heading-font-size--fifth-level : 12px !default;
-$heading-font-size--sixth-level : 12px !default;
+$headings-margin                          : 0 0 0.5em 0 !default;
+$headings-font-family                     : $font-family-secondary !default;
+$headings-font-family--secondary          : $font-family-base !default;
+$headings-font-weight                     : $font-weight-medium !default;
+$headings-line-height                     : $font-line-height !default;
+$headings-color                           : $color-primary !default;
+$headings-text-transform                  : uppercase !default;
+
+$heading-font-size--first-level\@screen-m : $font-size-super-extra-large !default;
+$heading-font-size--first-level           : $font-size-extra-large !default;
+$heading-font-size--second-level\@screen-m: $font-size-extra-large !default;
+$heading-font-size--second-level          : $font-size-large !default;
+$heading-font-size--third-level\@screen-m : $font-size-large !default;
+$heading-font-size--third-level           : $font-size-medium !default;
+$heading-font-size--fourth-level          : $font-size-medium !default;
+$heading-font-size--fifth-level           : $font-size-medium !default;
+$heading-font-size--sixth-level           : $font-size-medium !default;
 
 .a-heading {
   margin: $headings-margin;
@@ -23,14 +28,26 @@ $heading-font-size--sixth-level : 12px !default;
 
   &--first-level {
     font-size: $heading-font-size--first-level;
+
+    @include mq($screen-m) {
+      font-size: $heading-font-size--first-level\@screen-m;
+    }
   }
 
   &--second-level {
     font-size: $heading-font-size--second-level;
+
+    @include mq($screen-m) {
+      font-size: $heading-font-size--second-level\@screen-m;
+    }
   }
 
   &--third-level {
     font-size: $heading-font-size--third-level;
+
+    @include mq($screen-m) {
+      font-size: $heading-font-size--third-level\@screen-m;
+    }
   }
 
   &--fourth-level {
@@ -44,4 +61,8 @@ $heading-font-size--sixth-level : 12px !default;
   &--sixth-level {
     font-size: $heading-font-size--sixth-level;
   }
+
+  &--font-secondary {
+    font-family: $headings-font-family--secondary;
+  }
 }
diff --git a/src/atoms/heading/Heading.selectors.json b/src/atoms/heading/Heading.selectors.json
@@ -0,0 +1,6 @@
+[
+  {
+    "name": ".a-heading--font-secondary",
+    "description": "Selector for applying secondary styles"
+  }
+]
diff --git a/src/atoms/heading/Heading.stories.js b/src/atoms/heading/Heading.stories.js
@@ -3,7 +3,15 @@ import { storiesOf } from '@storybook/vue'
 import AHeading from './Heading.vue'
 import { select, text } from '@storybook/addon-knobs'
 
-const info = 'Check **Knobs** tab to edit component properties dynamically, All HTML six levels of headings are available.'
+import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
+import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import selectorsConfig from './Heading.selectors.json'
+
+const info = `
+  <p>Check <b>Knobs</b> tab to edit component properties dynamically. All HTML six levels of headings are available.</p><br>
+  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
+`
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
 const levels = [1, 2, 3, 4, 5, 6]
 
@@ -20,12 +28,16 @@ storiesOf('Atoms/Heading', module)
       },
       textKnobs: {
         default: text('Text', 'Heading level 1')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
       }
     },
     template: `
       <a-heading 
         :level="levelKnobs"
         :tag="tagKnobs"
+        :class="classKnob"
       >
         {{ textKnobs }}
       </a-heading>