Merge pull request #352 from danskernesdigitalebibliotek/DDFFORM-9-by…

…line-dato-og-forfatter-e Refactor `article-header` CSS Following Strategy Shift
danskernesdigitalebibliotek · Nov 29, 2023 · e9eb638 · e9eb638
2 parents 090617b + cdce9a0
commit e9eb638
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;