refactor(components): rewrite Heading component

* remove `alignment` and `withMargin` props (consumer should handle
that)
* move styles to Sass placeholders to avoid repeats with headings
coming from WordPress
* refactor some other components that depend on Heading to avoid ESlint
errors

5 files changed, 69 insertions, 85 deletions

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 7729e84..76fdbd6 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,5 +1,6 @@
 @forward "./placeholders/animations";
 @forward "./placeholders/buttons";
 @forward "./placeholders/clearfix";
+@forward "./placeholders/headings";
 @forward "./placeholders/layout";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_headings.scss b/src/styles/abstracts/placeholders/_headings.scss
new file mode 100644
index 0000000..a836c74
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_headings.scss
@@ -0,0 +1,54 @@
+@use "../functions" as fun;
+
+%heading {
+  margin: 0;
+  color: var(--color-primary-dark);
+  font-family: var(--font-family-secondary);
+  font-weight: 500;
+  letter-spacing: 0.01ex;
+}
+
+%h1 {
+  @extend %heading;
+
+  font-size: var(--font-size-3xl);
+}
+
+%h2 {
+  @extend %heading;
+
+  padding-bottom: fun.convert-px(3);
+  background: linear-gradient(
+      to top,
+      var(--color-primary-dark) 0.3rem,
+      transparent 0.3rem
+    )
+    0 0 / 3rem 100% no-repeat;
+  font-size: var(--font-size-2xl);
+  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+}
+
+%h3 {
+  @extend %heading;
+
+  font-size: var(--font-size-xl);
+}
+
+%h4 {
+  @extend %heading;
+
+  font-size: var(--font-size-lg);
+}
+
+%h5 {
+  @extend %heading;
+
+  font-size: var(--font-size-md);
+  font-weight: 600;
+}
+
+%h6 {
+  @extend %heading;
+
+  font-size: var(--font-size-md);
+}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index dc958c4..11b506f 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,61 +1,5 @@
 @use "../abstracts/functions" as fun;
 
-h1 {
-  font-size: var(--font-size-3xl);
-}
-
-h2 {
-  padding-bottom: fun.convert-px(3);
-  background: linear-gradient(
-      to top,
-      var(--color-primary-dark) 0.3rem,
-      transparent 0.3rem
-    )
-    0 0 / 3rem 100% no-repeat;
-  font-size: var(--font-size-2xl);
-  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
-}
-
-h3 {
-  font-size: var(--font-size-xl);
-}
-
-h4 {
-  font-size: var(--font-size-lg);
-}
-
-h5 {
-  font-size: var(--font-size-md);
-  font-weight: 600;
-}
-
-h6 {
-  font-size: var(--font-size-md);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--color-primary-dark);
-  font-family: var(--font-family-secondary);
-  font-weight: 500;
-  letter-spacing: 0.01ex;
-  margin: 0 0 var(--spacing-sm);
-
-  * + {
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: var(--spacing-md);
-    }
-  }
-}
-
 p {
   font-size: var(--font-size-md);
   margin: 0 0 var(--spacing-sm);
@@ -132,7 +76,9 @@ a {
   color: var(--color-primary);
   text-decoration-thickness: 0.15em;
   text-underline-offset: 20%;
-  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
+  transition:
+    all 0.3s linear 0s,
+    text-decoration 0.18s ease-in-out 0s;
 
   &:hover {
     color: var(--color-primary-light);
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index 48aed79..088718f 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -1,5 +1,6 @@
 @use "../abstracts/functions" as fun;
 @use "../abstracts/mixins" as mix;
+@use "partials/article-headings";
 @use "partials/article-links";
 @use "partials/article-lists";
 @use "partials/article-media";
@@ -18,6 +19,7 @@
 
 .body {
   :global {
+    @include article-headings.styles;
     @include article-links.styles;
     @include article-lists.styles;
     @include article-media.styles;
diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss
index dfeceb7..7a273e4 100644
--- a/src/styles/pages/partials/_article-headings.scss
+++ b/src/styles/pages/partials/_article-headings.scss
@@ -1,42 +1,28 @@
-@use "../../abstracts/functions" as fun;
+@use "../../abstracts/placeholders";
 
 @mixin styles {
   h1 {
-    font-size: var(--font-size-3xl);
-    font-weight: 500;
+    @extend %h1;
   }
 
   h2 {
-    padding-bottom: fun.convert-px(3);
-    background: linear-gradient(
-        to top,
-        var(--color-primary-dark) 0.3rem,
-        transparent 0.3rem
-      )
-      0 0 / 3rem 100% no-repeat;
-    font-size: var(--font-size-2xl);
-    font-weight: 500;
-    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+    @extend %h2;
   }
 
   h3 {
-    font-size: var(--font-size-xl);
-    font-weight: 500;
+    @extend %h3;
   }
 
   h4 {
-    font-size: var(--font-size-lg);
-    font-weight: 500;
+    @extend %h4;
   }
 
   h5 {
-    font-size: var(--font-size-md);
-    font-weight: 600;
+    @extend %h5;
   }
 
   h6 {
-    font-size: var(--font-size-md);
-    font-weight: 500;
+    @extend %h6;
   }
 
   h1,
@@ -45,13 +31,8 @@
   h4,
   h5,
   h6 {
-    color: var(--color-primary-dark);
-    font-family: var(--font-family-secondary);
-    letter-spacing: 0.01ex;
-    margin: 0 0 var(--spacing-sm);
-
-    & + & {
-      margin-top: var(--spacing-md);
+    &:not(:first-child) {
+      margin-block: var(--spacing-sm);
     }
   }
 }