Merge pull request #363 from danskernesdigitalebibliotek/release/2023…

…-49-0

Release 2023.49.0

base.scss

@@ -96,6 +96,10 @@
 @import "./src/stories/Library/multiselect/multiselect";
 @import "./src/stories/Library/input-with-dropdown/input-with-dropdown";
 @import "./src/stories/Library/button-box/button-box";
+@import "./src/stories/Library/links/arrow-link/arrow-link";
+@import "./src/stories/Library/Buttons/row-button/row-button";
+@import "./src/stories/Library/Buttons/row-button/row-buttons";
+@import "./src/stories/Library/article-header/article-header";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -110,6 +114,7 @@
 @import "./src/stories/Blocks/status-userprofile/status-userprofile";
 @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
 @import "./src/stories/Blocks/advanced-search/advanced-search";
+@import "./src/stories/Blocks/article/article";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/article/Article.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Article from "./Article";
+
+export default {
+  title: "Blocks / Article",
+  component: Article,
+  decorators: [withDesign],
+  argTypes: {
+    title: {
+      defaultValue: "Jesper Stein vinder Læsernes Bogpris for Rampen’",
+    },
+    subtitle: {
+      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.",
+    },
+    author: {
+      defaultValue: "Lene Kuhlmann Frandsen",
+    },
+    date: {
+      defaultValue: "08. April 21",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477%3A39048&mode=dev",
+    },
+  },
+} as ComponentMeta<typeof Article>;
+
+const Template: ComponentStory<typeof Article> = (args) => (
+  <Article {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Blocks/article/Article.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import ArticleHeader from "../../Library/article-header/ArticleHeader";
+
+type ArticleProps = {
+  title: string;
+  subtitle: string;
+  author: string;
+  date: string;
+};
+
+const Article: FC<ArticleProps> = ({ title, subtitle, author, date }) => {
+  return (
+    <article className="article">
+      <ArticleHeader
+        title={title}
+        subtitle={subtitle}
+        author={author}
+        date={date}
+      />
+    </article>
+  );
+};
+
+export default Article;

src/stories/Blocks/article/article.scss

@@ -0,0 +1,3 @@
+.article {
+  background-color: $c-global-primary;
+}

src/stories/Library/Buttons/row-button/RowButton.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import RowButton from "./RowButton";
+
+export default {
+  title: "Library / Buttons / RowButton",
+  component: RowButton,
+  decorators: [withDesign],
+  argTypes: {
+    label: {
+      defaultValue: "Netmedier",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7880%3A59070&mode=dev",
+    },
+    layout: "centered",
+  },
+} as ComponentMeta<typeof RowButton>;
+
+const Template: ComponentStory<typeof RowButton> = (args) => (
+  <RowButton {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Library/Buttons/row-button/RowButton.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+
+type RowButtonProps = {
+  label: string;
+};
+
+const RowButton: FC<RowButtonProps> = ({ label }) => (
+  <button
+    className="row-button text-tags row-button__text capitalize-all"
+    type="button"
+  >
+    {label}
+  </button>
+);
+
+export default RowButton;

src/stories/Library/Buttons/row-button/RowButtons.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import RowButtons from "./RowButtons";
+
+export default {
+  title: "Library / Buttons / RowButtons",
+  component: RowButtons,
+  decorators: [withDesign],
+  argTypes: {
+    labels: {
+      defaultValue: ["Netmedier"],
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7880%3A59070&mode=dev",
+    },
+    layout: "centered",
+  },
+} as ComponentMeta<typeof RowButtons>;
+
+const Template: ComponentStory<typeof RowButtons> = (args) => (
+  <RowButtons {...args} />
+);
+
+export const TwoButtons = Template.bind({});
+TwoButtons.args = {
+  labels: ["Netmedier", "Licenser"],
+};
+
+export const ThreeAndMoreButtons = Template.bind({});
+ThreeAndMoreButtons.args = {
+  labels: ["Netmedier", "Licenser", "This is hiddden"],
+};

src/stories/Library/Buttons/row-button/RowButtons.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { FC } from "react";
+import RowButton from "./RowButton";
+
+type RowButtonProps = {
+  labels: string[];
+  className?: string;
+};
+
+const RowButtons: FC<RowButtonProps> = ({ labels, className }) => (
+  <div className={clsx("row-buttons", className)}>
+    {labels.slice(0, 2).map((label) => (
+      <RowButton label={label} />
+    ))}
+    {labels.length > 2 && <RowButton label="..." />}
+  </div>
+);
+
+export default RowButtons;

src/stories/Library/Buttons/row-button/row-button.scss

@@ -0,0 +1,15 @@
+.row-button {
+  height: 40px;
+  background-color: $c-global-secondary;
+  padding: 9px $s-md;
+  display: flex;
+  align-items: center;
+
+  & + .row-button {
+    margin-left: $s-sm;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}

src/stories/Library/Buttons/row-button/row-buttons.scss

@@ -0,0 +1,4 @@
+.row-buttons {
+  display: flex;
+  flex-direction: row;
+}

src/stories/Library/article-header/ArticleHeader.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+import RowButtons from "../Buttons/row-button/RowButtons";
+import ArrowLink from "../links/arrow-link/ArrowLink";
+
+type ArticleHeaderProps = {
+  title: string;
+  subtitle: string;
+  author: string;
+  date: string;
+};
+
+const ArticleHeader: FC<ArticleHeaderProps> = ({
+  title,
+  subtitle,
+  author,
+  date,
+}) => {
+  return (
+    <header className="article-header">
+      <ArrowLink label="Go back" className="article-header__back-link" />
+      <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>
+        <time className="article-header__date">{date}</time>
+      </p>
+      <RowButtons labels={["Netmedier", "Licenser", "This is hiddden"]} />
+    </header>
+  );
+};
+
+export default ArticleHeader;

src/stories/Library/article-header/article-header.scss

@@ -0,0 +1,50 @@
+.article-header {
+  display: grid;
+  gap: $s-xl;
+  padding: $s-4xl $s-xl;
+  position: relative;
+
+  @include breakpoint-s {
+    padding: $s-4xl $s-7xl;
+  }
+}
+
+.article-header__back-link {
+  position: absolute;
+  left: $s-md;
+  top: $s-sm;
+
+  @include breakpoint-s {
+    left: $s-2xl;
+    top: $s-lg;
+  }
+}
+
+.article-header__title {
+  @extend %text-header-h1;
+}
+
+.article-header__subtitle {
+  @extend %text-subtitle;
+}
+
+.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;
+}

src/stories/Library/links/arrow-link/ArrowLink.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import ArrowLink from "./ArrowLink";
+
+export default {
+  title: "Library / Links / ArrowLink",
+  component: ArrowLink,
+  decorators: [withDesign],
+  argTypes: {
+    label: {
+      defaultValue: "Go back",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477%3A39098&mode=dev",
+    },
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ArrowLink>;
+
+const Template: ComponentStory<typeof ArrowLink> = (args) => (
+  <ArrowLink {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Library/links/arrow-link/ArrowLink.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import { ReactComponent as ArrowSmallLeft } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-left.svg";
+
+type ArrowLinkProps = {
+  label: string;
+  className: string;
+};
+
+const ArrowLink: React.FC<ArrowLinkProps> = ({ label, className }) => {
+  return (
+    <a
+      href="/"
+      className={clsx("arrow arrow__hover--left-small arrow-link", className)}
+    >
+      <div className="text-links arrow-link__text">{label}</div>
+      <ArrowSmallLeft />
+    </a>
+  );
+};
+
+export default ArrowLink;

src/stories/Library/links/arrow-link/arrow-link.scss

@@ -0,0 +1,7 @@
+.arrow-link {
+  display: block;
+  text-decoration: none;
+  &__text {
+    margin-bottom: -5px;
+  }
+}

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%;

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;