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.
danskernesdigitalebibliotek · Nov 28, 2023 · cdce9a0 · cdce9a0
1 parent 090617b
commit cdce9a0
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 42 deletions.
diff --git 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
@@ -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
@@ -5,29 +5,27 @@ import ArrowLink from "../links/arrow-link/ArrowLink";
 type ArticleHeaderProps = {
   title: string;
   subtitle: string;
-  library: string;
   author: string;
   date: string;
 };
 
 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
@@ -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
@@ -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
@@ -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;