#261 add story for each heading, update text transform and margin var

SnowdogApps · May 22, 2020 · e80c3df · e80c3df
1 parent d0b26d5
commit e80c3df
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 4 deletions.
diff --git 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
@@ -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"