Refactor RoxButton into separate components RowButtons and `RowBu…

…tton`.

DDFFORM-3

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

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"],
-};

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;

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

@@ -1,8 +1,3 @@
-.row-buttons {
-  display: flex;
-  flex-direction: row;
-}
-
 .row-button {
   height: 40px;
   background-color: $c-global-secondary;

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

@@ -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>
   );
 };