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;