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] #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"