-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ #19 - feat: Implemented the Tabs component
- Loading branch information
Showing
9 changed files
with
257 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./tabs"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| @use "../../settings/constants"; | ||
|
|
||
| .mykn-tabs { | ||
| &__tablist { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: center; | ||
| gap: var(--spacing-v-l); | ||
| box-sizing: border-box; | ||
| border: 1px solid var(--theme-shade-100); | ||
| border-radius: var(--border-radus-s); | ||
| background-color: var(--theme-shade-50); | ||
| padding: var(--spacing-h-m) var(--spacing-v-xxxl); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .mykn-p { | ||
| color: var(--theme-shade-200); | ||
| user-select: none; | ||
| } | ||
|
|
||
| &__content { | ||
| margin-top: var(--spacing-h-l); | ||
| } | ||
|
|
||
| @media screen and (max-width: constants.$breakpoint-desktop) { | ||
| &__tablist { | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .mykn-p { | ||
| display: none; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
| import React from "react"; | ||
|
|
||
| import { Card } from "../card"; | ||
| import { Page } from "../page"; | ||
| import { Tab, Tabs } from "./tabs"; | ||
|
|
||
| const meta: Meta<typeof Tabs> = { | ||
| title: "Controls/Tabs", | ||
| component: Tabs, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <Page> | ||
| <Story /> | ||
| </Page> | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const TabsComponent: StoryObj<typeof meta> = { | ||
| render: (args) => ( | ||
| <Tabs {...args}> | ||
| <Tab label="Structuur">Content for tab one</Tab> | ||
| <Tab label="Basis">Tab 2 content</Tab> | ||
| <Tab label="Statussen">Tab 3 content</Tab> | ||
| <Tab label="Documenten">Tab 4 content</Tab> | ||
| <Tab label="Rollen">Tab 5 content</Tab> | ||
| <Tab label="Eigenschappen">Tab 6 content</Tab> | ||
| </Tabs> | ||
| ), | ||
| }; | ||
|
|
||
| export const ExplicitId: StoryObj<typeof meta> = { | ||
| render: (args) => ( | ||
| <Tabs {...args}> | ||
| <Tab id="structuur" label="Structuur"> | ||
| Content for tab one | ||
| </Tab> | ||
| <Tab id="informatie" label="Basis informatie"> | ||
| Tab 2 content | ||
| </Tab> | ||
| <Tab id="statussen" label="Statussen"> | ||
| Tab 3 content | ||
| </Tab> | ||
| <Tab id="documenten" label="Documenten"> | ||
| Tab 4 content | ||
| </Tab> | ||
| <Tab id="rollen" label="Rollen"> | ||
| Tab 5 content | ||
| </Tab> | ||
| <Tab id="eigenschappen" label="Eigenschappen"> | ||
| Tab 6 content | ||
| </Tab> | ||
| </Tabs> | ||
| ), | ||
| }; | ||
|
|
||
| export const TabsComponentInCard: StoryObj<typeof meta> = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <Card> | ||
| <Story /> | ||
| </Card> | ||
| ), | ||
| ], | ||
| render: (args) => ( | ||
| <Tabs {...args}> | ||
| <Tab label="Structuur">Content for tab one</Tab> | ||
| <Tab label="Basis">Tab 2 content</Tab> | ||
| <Tab label="Statussen">Tab 3 content</Tab> | ||
| <Tab label="Documenten">Tab 4 content</Tab> | ||
| <Tab label="Rollen">Tab 5 content</Tab> | ||
| <Tab label="Eigenschappen">Tab 6 content</Tab> | ||
| </Tabs> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import clsx from "clsx"; | ||
| import React, { Children, ReactElement, isValidElement, useState } from "react"; | ||
|
|
||
| import { slugify } from "../../lib/format/string"; | ||
| import { Button } from "../button"; | ||
| import { P } from "../typography"; | ||
| import "./tabs.scss"; | ||
|
|
||
| export type TabsProps = React.PropsWithChildren<{ | ||
| onTabChange?: (activeTabIndex: number) => void; | ||
| }>; | ||
|
|
||
| /** | ||
| * 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, | ||
| children, | ||
| ...props | ||
| }) => { | ||
| const [activeTab, setActiveTab] = useState(0); | ||
|
|
||
| const handleTabClick = (index: number) => { | ||
| setActiveTab(index); | ||
| if (onTabChange) { | ||
| onTabChange(index); | ||
| } | ||
| }; | ||
|
|
||
| const tabs = Children.toArray(children).filter( | ||
| (child) => isValidElement(child) && child.type === Tab, | ||
| ) as ReactElement[]; | ||
|
|
||
| return ( | ||
| <div className={clsx("mykn-tabs")} {...props}> | ||
| <nav className="mykn-tabs__tablist" role="tablist"> | ||
| {tabs.map((tab, index) => ( | ||
| <React.Fragment key={tab.props.id || slugify(tab.props.label)}> | ||
| <Button | ||
| active={activeTab === index} | ||
| id={`tab-${tab.props.id || slugify(tab.props.label)}`} | ||
| role="tab" | ||
| variant="transparent" | ||
| aria-controls={`tab-content-${tab.props.id || slugify(tab.props.label)}`} | ||
| aria-selected={activeTab === index ? "true" : "false"} | ||
| onClick={() => handleTabClick(index)} | ||
| > | ||
| {tab.props.label} | ||
| </Button> | ||
| {index < tabs.length - 1 && <P aria-hidden="true">|</P>} | ||
| </React.Fragment> | ||
| ))} | ||
| </nav> | ||
| {tabs.map((tab, index) => ( | ||
| <div | ||
| key={tab.props.id} | ||
| id={`tab-content-${tab.props.id || slugify(tab.props.label)}`} | ||
| role="tabpanel" | ||
| aria-labelledby={`tab-${tab.props.id || slugify(tab.props.label)}`} | ||
| hidden={activeTab !== index} | ||
| className="mykn-tabs__content" | ||
| > | ||
| {tab.props.children} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export type TabProps = React.PropsWithChildren<{ | ||
| label: string; | ||
| id?: string; | ||
| }>; | ||
|
|
||
| /** | ||
| * A tab component meant to be used as a child of the Tabs component. It is used to define the label and content of a tab. | ||
| * @param label - The label of the tab | ||
| * @param id - The id of the tab | ||
| * @param children - The content of the tab | ||
| */ | ||
| export const Tab: React.FC<TabProps> = ({ children }) => { | ||
| // Just a placeholder, as actual rendering does not happen here | ||
| return <>{children}</>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /** | ||
| * Converts "Some object name" to "some-object-name". | ||
| * @param input | ||
| */ | ||
| export const slugify = (input: string): string => { | ||
| return input | ||
| .toLowerCase() // Convert to lowercase | ||
| .replace(/\s+/g, "-") // Replace spaces with hyphens | ||
| .replace(/[^\w-]+/g, "") // Remove non-word characters (excluding hyphens) | ||
| .replace(/--+/g, "-") // Replace multiple hyphens with a single hyphen | ||
| .replace(/^-+|-+$/g, ""); // Remove leading and trailing hyphens | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters