From d0e0b61f9bf515daefc7cebf5de2440cbfe462af Mon Sep 17 00:00:00 2001
From: Justyna <jgieracka@divante.pl>
Date: Tue, 7 Jul 2020 12:18:35 +0200
Subject: [PATCH 1/3] wip: classes added

---
 .../styles/components/atoms/SfHeading.scss    | 88 ++++++++++---------
 .../components/atoms/SfHeading/SfHeading.vue  |  9 +-
 2 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/packages/shared/styles/components/atoms/SfHeading.scss b/packages/shared/styles/components/atoms/SfHeading.scss
index b0998fda43..d79c8c5dcb 100644
--- a/packages/shared/styles/components/atoms/SfHeading.scss
+++ b/packages/shared/styles/components/atoms/SfHeading.scss
@@ -1,55 +1,57 @@
 @import "../../helpers";
 .sf-heading {
   box-sizing: border-box;
-  padding: var(--heading-padding, 0 0 var(--spacer-xs) 0);
+  // padding: var(--heading-padding, 0 0 var(--spacer-xs) 0);
   text-align: var(--heading-text-align, center);
   &__title {
     margin: var(--heading-title-margin, 0);
-    color: var(--heading-title-color, var(--c-text));
-    @include font(
-      --heading-title-font,
-      var(--font-semibold),
-      var(--h1-font-size),
-      1.6,
-      var(--font-family-secondary)
-    );
-    &--h2 {
-      font-size: var(--heading-title-font-size, var(--h2-font-size));
-      font-weight: var(--heading-title-font-weight, var(--font-normal));
-    }
-    &--h3 {
-      font-size: var(--heading-title-font-size, var(--h3-font-size));
-      font-weight: var(--heading-title-font-weight, var(--font-medium));
-    }
-    &--h4 {
-      font-size: var(--heading-title-font-size, var(--h4-font-size));
-      font-weight: var(--heading-title-font-weight, var(--font-normal));
-    }
-    &--h5 {
-      font-size: var(--heading-title-font-size, var(--h5-font-size));
-      font-weight: var(--heading-title-font-weight, var(--font-bold));
-    }
-    &--h6 {
-      font-size: var(--heading-title-font-size, var(--h6-font-size));
-      font-weight: var(--heading-title-font-weight, var(--font-normal));
-    }
+    // color: var(--heading-title-color, var(--c-text));
+    // @include font(
+    //   --heading-title-font,
+    //   var(--font-semibold),
+    //   var(--h1-font-size),
+    //   1.6,
+    //   var(--font-family-secondary)
+    // );
+    // &--h2 {
+    //   font-size: var(--heading-title-font-size, var(--h2-font-size));
+    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
+    // }
+    // &--h3 {
+    //   font-size: var(--heading-title-font-size, var(--h3-font-size));
+    //   font-weight: var(--heading-title-font-weight, var(--font-medium));
+    // }
+    // &--h4 {
+    //   font-size: var(--heading-title-font-size, var(--h4-font-size));
+    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
+    // }
+    // &--h5 {
+    //   font-size: var(--heading-title-font-size, var(--h5-font-size));
+    //   font-weight: var(--heading-title-font-weight, var(--font-bold));
+    // }
+    // &--h6 {
+    //   font-size: var(--heading-title-font-size, var(--h6-font-size));
+    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
+    // }
   }
   &__subtitle {
-    margin: var(--heading-subtitle-margin);
-    color: var(--heading-subtitle-color, var(--c-text));
-    @include font(
-      --heading-subtitle-font,
-      var(--font-light),
-      var(--font-xs),
-      1.6,
-      var(--font-family-secondary)
-    );
-  }
-  @include for-desktop {
-    --heading-padding: 0;
-    --heading-border: 0;
-    --heading-text-align: center;
+    font-weight: var(--font-light);
+    line-height: 1.6;
+  //   margin: var(--heading-subtitle-margin);
+  //   color: var(--heading-subtitle-color, var(--c-text));
+  //   @include font(
+  //     --heading-subtitle-font,
+  //     var(--font-light),
+  //     var(--font-xs),
+  //     1.6,
+  //     var(--font-family-secondary)
+  //   );
   }
+  // @include for-desktop {
+  //   --heading-padding: 0;
+  //   --heading-border: 0;
+  //   --heading-text-align: center;
+  // }
   &--underline {
     @include border(--heading-border, 0 0 1px 0, solid, var(--c-light));
   }
diff --git a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
index 6bfb15ab4a..1b77e1a461 100644
--- a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
+++ b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
@@ -1,10 +1,10 @@
 <template>
-  <header class="sf-heading">
+  <header class="sf-heading pdbxs--s">
     <!--@slot Heading title. Slot content will replace default <h> tag-->
     <slot name="title" v-bind="{ title }">
       <component
         :is="`h${level}`"
-        class="sf-heading__title"
+        class="sf-heading__title h2"
         :class="level > 1 && `sf-heading__title--h${level}`"
       >
         {{ title }}
@@ -12,7 +12,10 @@
     </slot>
     <!--@slot Heading subtitle. Slot content will replace default <div> tag-->
     <slot name="subtitle" v-bind="{ subtitle }">
-      <div v-if="hasSubtitle" class="sf-heading__subtitle">
+      <div
+        v-if="hasSubtitle"
+        class="sf-heading__subtitle font-secondary txt-sx"
+      >
         {{ subtitle }}
       </div>
     </slot>

From bc2c6172eb370e849918689bb80e288a679610bd Mon Sep 17 00:00:00 2001
From: Justyna <jgieracka@divante.pl>
Date: Wed, 8 Jul 2020 12:22:51 +0200
Subject: [PATCH 2/3] refactor: classes added

---
 .../styles/components/atoms/SfHeading.scss    | 45 +------------------
 .../components/atoms/SfHeading/SfHeading.vue  |  4 +-
 2 files changed, 3 insertions(+), 46 deletions(-)

diff --git a/packages/shared/styles/components/atoms/SfHeading.scss b/packages/shared/styles/components/atoms/SfHeading.scss
index d79c8c5dcb..2139fa966a 100644
--- a/packages/shared/styles/components/atoms/SfHeading.scss
+++ b/packages/shared/styles/components/atoms/SfHeading.scss
@@ -1,57 +1,14 @@
 @import "../../helpers";
 .sf-heading {
   box-sizing: border-box;
-  // padding: var(--heading-padding, 0 0 var(--spacer-xs) 0);
   text-align: var(--heading-text-align, center);
   &__title {
     margin: var(--heading-title-margin, 0);
-    // color: var(--heading-title-color, var(--c-text));
-    // @include font(
-    //   --heading-title-font,
-    //   var(--font-semibold),
-    //   var(--h1-font-size),
-    //   1.6,
-    //   var(--font-family-secondary)
-    // );
-    // &--h2 {
-    //   font-size: var(--heading-title-font-size, var(--h2-font-size));
-    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
-    // }
-    // &--h3 {
-    //   font-size: var(--heading-title-font-size, var(--h3-font-size));
-    //   font-weight: var(--heading-title-font-weight, var(--font-medium));
-    // }
-    // &--h4 {
-    //   font-size: var(--heading-title-font-size, var(--h4-font-size));
-    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
-    // }
-    // &--h5 {
-    //   font-size: var(--heading-title-font-size, var(--h5-font-size));
-    //   font-weight: var(--heading-title-font-weight, var(--font-bold));
-    // }
-    // &--h6 {
-    //   font-size: var(--heading-title-font-size, var(--h6-font-size));
-    //   font-weight: var(--heading-title-font-weight, var(--font-normal));
-    // }
+    font-weight:  var(--font-normal);
   }
   &__subtitle {
     font-weight: var(--font-light);
-    line-height: 1.6;
-  //   margin: var(--heading-subtitle-margin);
-  //   color: var(--heading-subtitle-color, var(--c-text));
-  //   @include font(
-  //     --heading-subtitle-font,
-  //     var(--font-light),
-  //     var(--font-xs),
-  //     1.6,
-  //     var(--font-family-secondary)
-  //   );
   }
-  // @include for-desktop {
-  //   --heading-padding: 0;
-  //   --heading-border: 0;
-  //   --heading-text-align: center;
-  // }
   &--underline {
     @include border(--heading-border, 0 0 1px 0, solid, var(--c-light));
   }
diff --git a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
index 1b77e1a461..fe20f5e300 100644
--- a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
+++ b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
@@ -4,7 +4,7 @@
     <slot name="title" v-bind="{ title }">
       <component
         :is="`h${level}`"
-        class="sf-heading__title h2"
+        class="sf-heading__title h1"
         :class="level > 1 && `sf-heading__title--h${level}`"
       >
         {{ title }}
@@ -14,7 +14,7 @@
     <slot name="subtitle" v-bind="{ subtitle }">
       <div
         v-if="hasSubtitle"
-        class="sf-heading__subtitle font-secondary txt-sx"
+        class="sf-heading__subtitle font-secondary txt-xs"
       >
         {{ subtitle }}
       </div>

From bcc316d43b4f8640b8e4a47137632fc237cf5dcf Mon Sep 17 00:00:00 2001
From: Justyna <jgieracka@divante.pl>
Date: Wed, 8 Jul 2020 12:26:42 +0200
Subject: [PATCH 3/3] refactor: classes added

---
 packages/vue/src/components/atoms/SfHeading/SfHeading.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
index fe20f5e300..e789c2a929 100644
--- a/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
+++ b/packages/vue/src/components/atoms/SfHeading/SfHeading.vue
@@ -14,7 +14,7 @@
     <slot name="subtitle" v-bind="{ subtitle }">
       <div
         v-if="hasSubtitle"
-        class="sf-heading__subtitle font-secondary txt-xs"
+        class="sf-heading__subtitle font-secondary txt-xs pt"
       >
         {{ subtitle }}
       </div>