✨ #19 - feat: Implemented the Tabs component

src/components/button/button.tsx

@@ -6,6 +6,7 @@ import "./button.scss";
 type BaseButtonProps = {
   square?: boolean;
   variant?: "primary" | "outline" | "transparent";
+  className?: string;
 };
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
@@ -17,17 +18,24 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 /**
  * Button component
  * @param variant
+ * @param square
+ * @param className
  * @param props
  * @constructor
  */
 export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
-  ({ square = false, variant = "primary", ...props }, ref) => {
+  ({ square = false, variant = "primary", className, ...props }, ref) => {
     return (
       <button
         ref={ref as LegacyRef<HTMLButtonElement>}
-        className={clsx("mykn-button", `mykn-button--variant-${variant}`, {
-          "mykn-button--square": square,
-        })}
+        className={clsx(
+          "mykn-button",
+          `mykn-button--variant-${variant}`,
+          {
+            "mykn-button--square": square,
+          },
+          className,
+        )}
         {...props}
       >
         {props.children}

src/components/index.ts

@@ -10,5 +10,6 @@ export * from "./logo";
 export * from "./navbar";
 export * from "./page";
 export * from "./paginator";
+export * from "./tabs";
 export * from "./toolbar";
 export * from "./typography";

src/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from "./tabs";

src/components/tabs/tabs.scss

@@ -0,0 +1,49 @@
+@use "../../settings/constants";
+
+.mykn-tabs {
+  &__buttons {
+    background-color: var(--theme-shade-50);
+    border: 1px solid var(--theme-shade-100);
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    gap: 17px;
+    padding: 6px 40px;
+    border-radius: var(--border-radus-s);
+    flex-wrap: wrap;
+  }
+
+  &__button {
+    &--active {
+      background-color: var(--theme-color-primary-100);
+      color: var(--theme-color-primary-800);
+    }
+  }
+
+  .mykn-button {
+    &--variant-transparent {
+      &:hover {
+        background-color: var(--theme-color-primary-100);
+        color: var(--theme-color-primary-800);
+      }
+    }
+  }
+
+  .mykn-p {
+    color: var(--theme-shade-200);
+  }
+
+  &__content {
+    margin-top: 16px;
+  }
+
+  @media screen and (max-width: constants.$breakpoint-desktop) {
+    &__buttons {
+      justify-content: center;
+    }
+
+    .mykn-p {
+      display: none;
+    }
+  }
+}

src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { Card } from "../card";
+import { Page } from "../page";
+import { Tabs } from "./tabs";
+
+const meta = {
+  title: "Controls/Tabs",
+  component: Tabs,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs: Story = {
+  args: {
+    tabs: [
+      {
+        label: "Structuur",
+        content: <span>Content for tab one</span>,
+      },
+      { label: "Basis", content: "Tab 2 content" },
+      { label: "Statussen", content: "Tab 3 content" },
+      { label: "Documenten", content: "Tab 4 content" },
+      { label: "Rollen", content: "Tab 5 content" },
+      { label: "Eigenschappen", content: "Tab 6 content" },
+    ],
+  },
+};
+
+export const TabsComponent: Story = {
+  ...defaultArgs,
+};
+
+export const TabsComponentInCard: Story = {
+  ...defaultArgs,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Card>
+          <Story />
+        </Card>
+      </Page>
+    ),
+  ],
+};

src/components/tabs/tabs.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import React, { useState } from "react";
+
+import { Button } from "../button";
+import { Toolbar, ToolbarProps } from "../toolbar";
+import { P } from "../typography";
+import "./tabs.scss";
+
+export type TabProps = {
+  label: string;
+  content: React.ReactNode;
+};
+
+export type TabsProps = React.PropsWithChildren<
+  {
+    tabs: TabProps[];
+    onTabChange?: (activeTabIndex: number) => void;
+  } & ToolbarProps
+>;
+
+/**
+ * A tabs component meant to allow for cycling through different content sections. Allows for passing custom react nodes as content for each tab.
+ * @param tabs
+ * @param onTabChange
+ * @param props
+ * @constructor
+ */
+export const Tabs: React.FC<TabsProps> = ({
+  onTabChange,
+  tabs,
+  className,
+  ...props
+}) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleTabClick = (index: number) => {
+    setActiveTab(index);
+    onTabChange && onTabChange(index);
+  };
+
+  return (
+    <Toolbar className={clsx("mykn-tabs", className)} {...props}>
+      <div className="mykn-tabs__buttons">
+        {tabs.map((tab, index) => (
+          <React.Fragment key={index}>
+            <Button
+              variant="transparent"
+              className={clsx("mykn-tabs__button", {
+                "mykn-tabs__button--active": activeTab === index,
+              })}
+              onClick={() => handleTabClick(index)}
+            >
+              {tab.label}
+            </Button>
+            {index < tabs.length - 1 && <P>|</P>}
+          </React.Fragment>
+        ))}
+      </div>
+      <div className="mykn-tabs__content">{tabs[activeTab].content}</div>
+    </Toolbar>
+  );
+};

src/settings/tokens.css

@@ -11,6 +11,7 @@
   --theme-color-primary-600: #8d75e6;
   --theme-color-primary-400: #bdb0ed;
   --theme-color-primary-200: #ecf1ff;
+  --theme-color-primary-100: #f2eeff;
 
   --theme-color-tertiary-800: #0f172a;
   --theme-color-tertiary-700: #1e293b;
@@ -19,9 +20,13 @@
 
   --theme-shade-1000: #000;
   --theme-shade-900: #272727;
+  --theme-shade-800: #4b4b4b;
   --theme-shade-700: #545454;
   --theme-shade-400: #b3b3b3;
   --theme-shade-300: #eaeaea;
+  --theme-shade-200: #e6e6e6;
+  --theme-shade-100: #f1f1f1;
+  --theme-shade-50: #fcfcfc;
   --theme-shade-0: #fff;
 
   --theme-color-success-body: #0b4f00;
@@ -33,6 +38,7 @@
   /* SPACING */
   --border-radus-l: 12px;
   --border-radus-m: 6px;
+  --border-radus-s: 4px;
 
   --gutter-h-desktop: 12px;
   --gutter-v-desktop: 24px;