Add CSS and stories for Article, ArticleHeader, ArrowButton, `R…

…owButton`

base.scss

@@ -96,6 +96,9 @@
 @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/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 +113,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,39 @@
+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.",
+    },
+    library: {
+      defaultValue: "Af biblioteksformidler på Hovedbiblioteket",
+    },
+    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,32 @@
+import { FC } from "react";
+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,
+}) => {
+  return (
+    <article className="article">
+      <ArticleHeader
+        title={title}
+        subtitle={subtitle}
+        author={author}
+        library={library}
+        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,37 @@
+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: {
+    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 RowButton>;
+
+const Template: ComponentStory<typeof RowButton> = (args) => (
+  <RowButton {...args} />
+);
+
+export const Default = Template.bind({});
+
+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/RowButton.tsx

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

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

@@ -0,0 +1,20 @@
+.row-buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+.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/article-header/ArticleHeader.tsx

@@ -0,0 +1,37 @@
+import { FC } from "react";
+import RowButton from "../Buttons/row-button/RowButton";
+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>
+        </a>
+        <span className="article-header__info__date">{date}</span>
+      </p>
+      <RowButton labels={["Netmedier", "Licenser", "This is hiddden"]} />
+    </header>
+  );
+};
+
+export default ArticleHeader;

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

@@ -0,0 +1,38 @@
+.article-header {
+  display: grid;
+  gap: $s-xl;
+  padding: $s-4xl $s-xl;
+  position: relative;
+
+  @include breakpoint-s {
+    padding: $s-4xl $s-7xl;
+  }
+
+  &__back-link {
+    position: absolute;
+    left: $s-md;
+    top: $s-sm;
+
+    @include breakpoint-s {
+      left: $s-2xl;
+      top: $s-lg;
+    }
+  }
+
+  &__title,
+  &__subtitle {
+    @include breakpoint-s {
+      max-width: 897px;
+    }
+  }
+
+  &__info {
+    display: flex;
+    align-items: baseline;
+    gap: $s-xs;
+
+    &__date {
+      margin-left: $s-xs;
+    }
+  }
+}

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;
+  }
+}