From d0b26d581ea0c662a787b715efb453635dba9805 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 8 May 2020 13:00:27 +0200
Subject: [PATCH 1/4] #261 update heading styles, add BEM modifier

---
 src/atoms/heading/Heading.html           |  1 +
 src/atoms/heading/Heading.scss           | 45 +++++++++++++++++-------
 src/atoms/heading/Heading.selectors.json |  6 ++++
 src/atoms/heading/Heading.stories.js     | 14 +++++++-
 4 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 src/atoms/heading/Heading.selectors.json

diff --git a/src/atoms/heading/Heading.html b/src/atoms/heading/Heading.html
index ad27d835a..4331d3983 100644
--- 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
index 4c4b4c156..236cb861a 100644
--- 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
new file mode 100644
index 000000000..f62af84b9
--- /dev/null
+++ 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
index 6555ae35a..10522fb70 100644
--- 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>

From e80c3dfb6f2666f07da1c38ae15ce558f36a57f8 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 22 May 2020 13:36:55 +0200
Subject: [PATCH 2/4] #261 add story for each heading, update text transform
 and margin var

---
 src/atoms/heading/Heading.scss       |   4 +-
 src/atoms/heading/Heading.stories.js | 139 ++++++++++++++++++++++++++-
 2 files changed, 139 insertions(+), 4 deletions(-)

diff --git a/src/atoms/heading/Heading.scss b/src/atoms/heading/Heading.scss
index 236cb861a..c64147be2 100644
--- a/src/atoms/heading/Heading.scss
+++ b/src/atoms/heading/Heading.scss
@@ -1,12 +1,12 @@
 @import '../../../assets/styles/_globals.scss';
 
-$headings-margin                          : 0 0 0.5em 0 !default;
+$headings-margin                          : 0 0 $spacer--medium 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;
+$headings-text-transform                  : none !default;
 
 $heading-font-size--first-level\@screen-m : $font-size-super-extra-large !default;
 $heading-font-size--first-level           : $font-size-extra-large !default;
diff --git a/src/atoms/heading/Heading.stories.js b/src/atoms/heading/Heading.stories.js
index 10522fb70..681d194c8 100644
--- a/src/atoms/heading/Heading.stories.js
+++ b/src/atoms/heading/Heading.stories.js
@@ -17,7 +17,7 @@ const levels = [1, 2, 3, 4, 5, 6]
 
 storiesOf('Atoms/Heading', module)
   .addParameters({ info })
-  .add('Default', () => ({
+  .add('First', () => ({
     components: { AHeading },
     props: {
       levelKnobs: {
@@ -34,7 +34,142 @@ storiesOf('Atoms/Heading', module)
       }
     },
     template: `
-      <a-heading 
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Second', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 2)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 2')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Third', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 3)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 3')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Fourth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 4)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 4')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Fifth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 5)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 5')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Sixth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 6)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 6')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
         :level="levelKnobs"
         :tag="tagKnobs"
         :class="classKnob"

From 44dd044051e57ea52b7f19582367474908f36e26 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Fri, 5 Jun 2020 09:20:19 +0200
Subject: [PATCH 3/4] #261 simplify heading styles

---
 src/atoms/heading/Heading.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/atoms/heading/Heading.scss b/src/atoms/heading/Heading.scss
index c64147be2..a0aed4d02 100644
--- a/src/atoms/heading/Heading.scss
+++ b/src/atoms/heading/Heading.scss
@@ -8,11 +8,8 @@ $headings-line-height                     : $font-line-height !default;
 $headings-color                           : $color-primary !default;
 $headings-text-transform                  : none !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;
@@ -28,26 +25,14 @@ $heading-font-size--sixth-level           : $font-size-medium !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 {

From 608516e782fc1d6682dffc96af491b4b961d5332 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 5 Jun 2020 11:21:35 +0200
Subject: [PATCH 4/4] 261 align variables

---
 src/atoms/heading/Heading.scss | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/atoms/heading/Heading.scss b/src/atoms/heading/Heading.scss
index a0aed4d02..c9c09903e 100644
--- a/src/atoms/heading/Heading.scss
+++ b/src/atoms/heading/Heading.scss
@@ -1,19 +1,19 @@
 @import '../../../assets/styles/_globals.scss';
 
-$headings-margin                          : 0 0 $spacer--medium 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                  : none !default;
-
-$heading-font-size--first-level           : $font-size-extra-large !default;
-$heading-font-size--second-level          : $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;
+$headings-margin                : 0 0 $spacer--medium 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        : none !default;
+
+$heading-font-size--first-level : $font-size-extra-large !default;
+$heading-font-size--second-level: $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;