From 14bd2fabe88e7fd1d4bb7c4c8825b33ceb411dc2 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Thu, 23 Nov 2023 11:23:39 +0100
Subject: [PATCH] Refactor `RoxButton` into separate components `RowButtons`
 and `RowButton`.

DDFFORM-3
---
 base.scss                                     |  1 +
 .../Buttons/row-button/RowButton.stories.tsx  | 14 ++------
 .../Library/Buttons/row-button/RowButton.tsx  | 30 +++++-----------
 .../Buttons/row-button/RowButtons.stories.tsx | 35 +++++++++++++++++++
 .../Library/Buttons/row-button/RowButtons.tsx | 19 ++++++++++
 .../Buttons/row-button/row-button.scss        |  5 ---
 .../Buttons/row-button/row-buttons.scss       |  4 +++
 .../Library/article-header/ArticleHeader.tsx  |  4 +--
 8 files changed, 71 insertions(+), 41 deletions(-)
 create mode 100644 src/stories/Library/Buttons/row-button/RowButtons.stories.tsx
 create mode 100644 src/stories/Library/Buttons/row-button/RowButtons.tsx
 create mode 100644 src/stories/Library/Buttons/row-button/row-buttons.scss

diff --git a/base.scss b/base.scss
index f7dba7f23..c47333cc2 100644
--- a/base.scss
+++ b/base.scss
@@ -98,6 +98,7 @@
 @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
diff --git a/src/stories/Library/Buttons/row-button/RowButton.stories.tsx b/src/stories/Library/Buttons/row-button/RowButton.stories.tsx
index f22c17ac7..792c79d45 100644
--- a/src/stories/Library/Buttons/row-button/RowButton.stories.tsx
+++ b/src/stories/Library/Buttons/row-button/RowButton.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: RowButton,
   decorators: [withDesign],
   argTypes: {
-    labels: {
-      defaultValue: ["Netmedier"],
+    label: {
+      defaultValue: "Netmedier",
     },
   },
   parameters: {
@@ -25,13 +25,3 @@ const Template: ComponentStory<typeof 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"],
-};
diff --git a/src/stories/Library/Buttons/row-button/RowButton.tsx b/src/stories/Library/Buttons/row-button/RowButton.tsx
index da2701cf8..4f2d6806e 100644
--- a/src/stories/Library/Buttons/row-button/RowButton.tsx
+++ b/src/stories/Library/Buttons/row-button/RowButton.tsx
@@ -1,30 +1,16 @@
-import clsx from "clsx";
 import { FC } from "react";
 
 type RowButtonProps = {
-  labels: string[];
-  className?: string;
+  label: 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>
+const RowButton: FC<RowButtonProps> = ({ label }) => (
+  <button
+    className="row-button text-tags row-button__text capitalize-all"
+    type="button"
+  >
+    {label}
+  </button>
 );
 
 export default RowButton;
diff --git a/src/stories/Library/Buttons/row-button/RowButtons.stories.tsx b/src/stories/Library/Buttons/row-button/RowButtons.stories.tsx
new file mode 100644
index 000000000..d4e9168a6
--- /dev/null
+++ b/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"],
+};
diff --git a/src/stories/Library/Buttons/row-button/RowButtons.tsx b/src/stories/Library/Buttons/row-button/RowButtons.tsx
new file mode 100644
index 000000000..a54372f8b
--- /dev/null
+++ b/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;
diff --git a/src/stories/Library/Buttons/row-button/row-button.scss b/src/stories/Library/Buttons/row-button/row-button.scss
index 2a1acf188..916be7242 100644
--- a/src/stories/Library/Buttons/row-button/row-button.scss
+++ b/src/stories/Library/Buttons/row-button/row-button.scss
@@ -1,8 +1,3 @@
-.row-buttons {
-  display: flex;
-  flex-direction: row;
-}
-
 .row-button {
   height: 40px;
   background-color: $c-global-secondary;
diff --git a/src/stories/Library/Buttons/row-button/row-buttons.scss b/src/stories/Library/Buttons/row-button/row-buttons.scss
new file mode 100644
index 000000000..528b02311
--- /dev/null
+++ b/src/stories/Library/Buttons/row-button/row-buttons.scss
@@ -0,0 +1,4 @@
+.row-buttons {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/stories/Library/article-header/ArticleHeader.tsx b/src/stories/Library/article-header/ArticleHeader.tsx
index e029087b3..04a0a63a6 100644
--- a/src/stories/Library/article-header/ArticleHeader.tsx
+++ b/src/stories/Library/article-header/ArticleHeader.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import RowButton from "../Buttons/row-button/RowButton";
+import RowButtons from "../Buttons/row-button/RowButtons";
 import ArrowLink from "../links/arrow-link/ArrowLink";
 
 type ArticleHeaderProps = {
@@ -29,7 +29,7 @@ const ArticleHeader: FC<ArticleHeaderProps> = ({
         </a>
         <span className="article-header__date">{date}</span>
       </p>
-      <RowButton labels={["Netmedier", "Licenser", "This is hiddden"]} />
+      <RowButtons labels={["Netmedier", "Licenser", "This is hiddden"]} />
     </header>
   );
 };