Merge pull request #75 from miljodir/MALIN-636-designsystem-tabs-som-…

…chips Chips tabs
miljodir · Jan 17, 2024 · be1cbc7 · be1cbc7
2 parents ef65327 + a6a0eed
commit be1cbc7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 4 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/tabs/MdTabTitle.tsx b/packages/react/src/tabs/MdTabTitle.tsx
@@ -1,12 +1,16 @@
 import classnames from 'classnames';
 import React from 'react';
+import MdInputChip from '../chips/MdInputChip';
+import type { ReactNode } from 'react';
 
 export interface MdTabTitleProps {
   title: string;
   index: number;
   disabled?: boolean;
   selectedTab: number;
   setSelectedTab: (_index: number) => void;
+  chips?: boolean;
+  chipsPrefixIcon?: ReactNode;
 }
 
 const MdTabTitle: React.FunctionComponent<MdTabTitleProps> = ({
@@ -15,12 +19,31 @@ const MdTabTitle: React.FunctionComponent<MdTabTitleProps> = ({
   disabled = false,
   selectedTab,
   setSelectedTab,
+  chips,
+  chipsPrefixIcon,
 }: MdTabTitleProps) => {
   const classNames = classnames('md-tabs-button', {
     'md-tabs-button--selected': selectedTab === index,
     'md-tabs-button--disabled': !!disabled,
   });
 
+  if (chips) {
+    return (
+      <li>
+        <MdInputChip
+          hideCloseIcon
+          label={title}
+          disabled={disabled}
+          active={selectedTab === index}
+          onClick={() => {
+            return !disabled && setSelectedTab(index);
+          }}
+          prefixIcon={selectedTab === index && chipsPrefixIcon}
+        />
+      </li>
+    );
+  }
+
   return (
     <li>
       <button

diff --git a/packages/react/src/tabs/MdTabs.tsx b/packages/react/src/tabs/MdTabs.tsx
@@ -1,14 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState } from 'react';
 import MdTabTitle from './MdTabTitle';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 export interface MdTabsProps {
   children: ReactElement[];
   initialTab?: number;
+  chips?: boolean;
+  chipsPrefixIcon?: ReactNode;
 }
 
-const MdTabs: React.FunctionComponent<MdTabsProps> = ({ children, initialTab = 0 }: MdTabsProps) => {
+const MdTabs: React.FunctionComponent<MdTabsProps> = ({
+  children,
+  initialTab = 0,
+  chips = false,
+  chipsPrefixIcon = false,
+}: MdTabsProps) => {
   const [selectedTab, setSelectedTab] = useState(initialTab);
 
   const tabs = children instanceof Array ? children : [children];
@@ -25,6 +32,8 @@ const MdTabs: React.FunctionComponent<MdTabsProps> = ({ children, initialTab = 0
               disabled={item.props.disabled}
               selectedTab={selectedTab}
               setSelectedTab={setSelectedTab}
+              chips={chips}
+              chipsPrefixIcon={chipsPrefixIcon}
             />
           );
         })}

diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx
@@ -1,6 +1,7 @@
 import { Title, Subtitle, Description, Markdown, Controls, Primary } from '@storybook/addon-docs';
 import React from 'react';
 import Readme from '../packages/css/src/tabs/README.md';
+import MdCheckIcon from '../packages/react/src/icons/MdCheckIcon';
 import MdTab from '../packages/react/src/tabs/MdTab';
 import MdTabs from '../packages/react/src/tabs/MdTabs';
 import type { Args } from '@storybook/react';
@@ -53,12 +54,39 @@ export default {
       },
       control: { type: 'number' },
     },
+    chips: {
+      type: { name: 'boolean' },
+      description: 'Use chips instead of buttons for the tab titles.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: {
+          summary: 'boolean',
+        },
+      },
+      control: { type: 'boolean' },
+    },
+    chipsPrefixIcon: {
+      type: { name: 'ReactNode' },
+      description:
+        'Prefix icon to apply before chip label if active. Will render a 16px x 16px container with icon passed.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: {
+          summary: 'DomElement | image | ReactNode',
+        },
+      },
+      control: { type: 'boolean' },
+    },
   },
 };
 
 const Template = (args: Args) => {
   return (
-    <MdTabs initialTab={args.initialTab}>
+    <MdTabs
+      initialTab={args.initialTab}
+      chips={args.chips}
+      chipsPrefixIcon={args.chipsPrefixIcon ? <MdCheckIcon /> : null}
+    >
       <MdTab title="Tab 1">
         <div style={{ fontSize: '20px', marginBottom: '.5em' }}>This is the first tab</div>
         <div>
@@ -83,4 +111,6 @@ export const Tabs = Template.bind({});
 Tabs.args = {
   disabled: false,
   initialTab: 0,
+  chips: false,
+  chipsPrefixIcon: false,
 };