From cdce9a0497ac50d8cd836a6f18ea6f3b95b0a575 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 28 Nov 2023 11:23:45 +0100
Subject: [PATCH] Refactor `article-header` CSS Following Strategy Shift

In alignment with our recent team decision, this commit moves away from utility classes towards an extended use of BEM classes.

Additionally, the markup has been revised to improve semantic structure.
---
 .../Blocks/article/Article.stories.tsx        |  3 --
 src/stories/Blocks/article/Article.tsx        | 10 +---
 .../Library/article-header/ArticleHeader.tsx  | 16 +++---
 .../article-header/article-header.scss        | 54 +++++++++++--------
 src/stories/Library/links/links.scss          |  3 ++
 .../Library/typography/typography.scss        |  2 +
 6 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/stories/Blocks/article/Article.stories.tsx b/src/stories/Blocks/article/Article.stories.tsx
index bb0be293d..e0a539e45 100644
--- a/src/stories/Blocks/article/Article.stories.tsx
+++ b/src/stories/Blocks/article/Article.stories.tsx
@@ -14,9 +14,6 @@ export default {
       defaultValue:
         "Jesper Stein har begået en hudløst ærlig og tankevækkende skildring af en skilsmisseramt familie. En selvbiografisk roman, som har ramt læserne  i hjertet.",
     },
-    library: {
-      defaultValue: "Af biblioteksformidler på Hovedbiblioteket",
-    },
     author: {
       defaultValue: "Lene Kuhlmann Frandsen",
     },
diff --git a/src/stories/Blocks/article/Article.tsx b/src/stories/Blocks/article/Article.tsx
index 3836fae3d..1229b12a2 100644
--- a/src/stories/Blocks/article/Article.tsx
+++ b/src/stories/Blocks/article/Article.tsx
@@ -4,25 +4,17 @@ import ArticleHeader from "../../Library/article-header/ArticleHeader";
 type ArticleProps = {
   title: string;
   subtitle: string;
-  library: string;
   author: string;
   date: string;
 };
 
-const Article: FC<ArticleProps> = ({
-  title,
-  subtitle,
-  library,
-  author,
-  date,
-}) => {
+const Article: FC<ArticleProps> = ({ title, subtitle, author, date }) => {
   return (
     <article className="article">
       <ArticleHeader
         title={title}
         subtitle={subtitle}
         author={author}
-        library={library}
         date={date}
       />
     </article>
diff --git a/src/stories/Library/article-header/ArticleHeader.tsx b/src/stories/Library/article-header/ArticleHeader.tsx
index 04a0a63a6..9604e4095 100644
--- a/src/stories/Library/article-header/ArticleHeader.tsx
+++ b/src/stories/Library/article-header/ArticleHeader.tsx
@@ -5,7 +5,6 @@ import ArrowLink from "../links/arrow-link/ArrowLink";
 type ArticleHeaderProps = {
   title: string;
   subtitle: string;
-  library: string;
   author: string;
   date: string;
 };
@@ -13,21 +12,20 @@ type ArticleHeaderProps = {
 const ArticleHeader: FC<ArticleHeaderProps> = ({
   title,
   subtitle,
-  library,
   author,
   date,
 }) => {
   return (
     <header className="article-header">
       <ArrowLink label="Go back" className="article-header__back-link" />
-      <h1 className="text-header-h1 article-header__title">{title}</h1>
-      <p className="text-subtitle article-header__subtitle">{subtitle}</p>
-      <p className="article-header__info text-body-small-regular">
-        <span>{library}</span>
-        <a href="/">
-          <span className="link-tag text-body-small-regular">{author}</span>
+      <h1 className="article-header__title">{title}</h1>
+      <p className="article-header__subtitle">{subtitle}</p>
+      <p className="article-header__info">
+        Af
+        <a href="/" className="article-header__author">
+          {author}
         </a>
-        <span className="article-header__date">{date}</span>
+        <time className="article-header__date">{date}</time>
       </p>
       <RowButtons labels={["Netmedier", "Licenser", "This is hiddden"]} />
     </header>
diff --git a/src/stories/Library/article-header/article-header.scss b/src/stories/Library/article-header/article-header.scss
index e4f791b4d..30660f990 100644
--- a/src/stories/Library/article-header/article-header.scss
+++ b/src/stories/Library/article-header/article-header.scss
@@ -7,32 +7,44 @@
   @include breakpoint-s {
     padding: $s-4xl $s-7xl;
   }
+}
 
-  &__back-link {
-    position: absolute;
-    left: $s-md;
-    top: $s-sm;
+.article-header__back-link {
+  position: absolute;
+  left: $s-md;
+  top: $s-sm;
 
-    @include breakpoint-s {
-      left: $s-2xl;
-      top: $s-lg;
-    }
+  @include breakpoint-s {
+    left: $s-2xl;
+    top: $s-lg;
   }
+}
 
-  &__title,
-  &__subtitle {
-    @include breakpoint-s {
-      max-width: 897px;
-    }
-  }
+.article-header__title {
+  @extend %text-header-h1;
+}
 
-  &__info {
-    display: flex;
-    align-items: baseline;
-    gap: $s-xs;
-  }
+.article-header__subtitle {
+  @extend %text-subtitle;
+}
 
-  &__date {
-    margin-left: $s-xs;
+.article-header__title,
+.article-header__subtitle {
+  @include breakpoint-s {
+    max-width: 897px;
   }
 }
+
+.article-header__info {
+  @extend %text-body-small-regular;
+}
+
+.article-header__author {
+  @extend %link-tag;
+  @extend %text-body-small-regular;
+  margin-left: $s-xs;
+}
+
+.article-header__date {
+  margin-left: $s-sm;
+}
diff --git a/src/stories/Library/links/links.scss b/src/stories/Library/links/links.scss
index ab648d330..6adf20761 100644
--- a/src/stories/Library/links/links.scss
+++ b/src/stories/Library/links/links.scss
@@ -1,6 +1,7 @@
 /* BEM plugin does not support interpolation */
 /* stylelint-disable plugin/stylelint-bem-namics */
 @mixin link($className) {
+  %#{$className},
   .#{$className} {
     text-decoration: none;
     color: $c-text-primary-black;
@@ -10,6 +11,7 @@
     @extend %text-body-medium-regular-placeholder;
   }
   // Hide arrow
+  %#{$className}::after,
   .#{$className}::after {
     display: block;
     content: "";
@@ -20,6 +22,7 @@
     padding-bottom: 2px;
   }
   // Show arrow on hover
+  %#{$className}:hover::after,
   .#{$className}:hover::after {
     transform: scaleX(0);
     transform-origin: 100% 0%;
diff --git a/src/stories/Library/typography/typography.scss b/src/stories/Library/typography/typography.scss
index 2e46e81d9..deb4e5ff5 100644
--- a/src/stories/Library/typography/typography.scss
+++ b/src/stories/Library/typography/typography.scss
@@ -63,6 +63,7 @@
 }
 
 // styleName: Desktop/H1;
+%text-header-h1,
 .text-header-h1 {
   font-family: Lora, serif;
   font-style: normal;
@@ -164,6 +165,7 @@
 }
 
 //styleName: Desktop/Subtitle;
+%text-subtitle,
 .text-subtitle {
   font-family: "Noto Sans JP", sans-serif;
   font-style: normal;