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

2 files changed, 55 insertions, 0 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);
+}