diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ad19b1e6..6dd73c35 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -11,19 +11,6 @@ const preview: Preview = { date: /Date$/i, }, }, - backgrounds: { - default: "default-storybook-background", - values: [ - { - name: "default-storybook-background", - value: "#ffffff", - }, - { - name: "mykn-light", - value: "#ecf1ff", - }, - ], - }, layout: "fullscreen", }, }; diff --git a/package.json b/package.json index 978da506..459e2b17 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,6 @@ "dependencies": { "@floating-ui/react": "^0.26.6", "@heroicons/react": "^2.1.1", - "clsx": "^2.1.0", - "storybook-addon-react-router-v6": "^2.0.10" + "clsx": "^2.1.0" } } diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss index 01876947..f2f013d4 100644 --- a/src/components/breadcrumbs/breadcrumbs.scss +++ b/src/components/breadcrumbs/breadcrumbs.scss @@ -1,37 +1,35 @@ .mykn-breadcrumbs { display: flex; - &__separator { - color: var(--theme-color-primary-800); - margin-left: 4px; + &__list { + display: grid; + grid-auto-flow: column; + gap: var(--spacing-v-m); + list-style: none; } - & ol { - display: flex; - flex-wrap: wrap; - list-style: none; + &__item { + display: grid; + grid-auto-flow: column; + gap: var(--spacing-v-xs); + align-items: center; + color: var(--theme-shade-600); - a, - li { - font-size: var(--typography-font-size-body-xs); + &--last { + color: var(--theme-color-primary-800); } + } - li { - display: flex; - align-items: center; - margin-right: 8px; - color: var(--theme-shade-600); - - &:last-child { - margin-right: 0; - color: var(--theme-color-primary-800); - } + &__link { + cursor: pointer; + text-decoration: none; + color: inherit; + font-size: var(--typography-font-size-body-xs); + } - a { - cursor: pointer; - margin-right: 4px; - color: var(--theme-shade-600); - } - } + &__separator { + color: var(--theme-color-primary-800); + height: 20px; + width: 20px; } } diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx index 41e1b316..b0bd5542 100644 --- a/src/components/breadcrumbs/breadcrumbs.stories.tsx +++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx @@ -1,12 +1,19 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { withRouter } from "storybook-addon-react-router-v6"; +import React from "react"; +import { Page } from "../page"; import { Breadcrumbs } from "./breadcrumbs"; const meta = { - title: "Uncategorized/Breadcrumbs", + title: "Controls/Breadcrumbs", component: Breadcrumbs, - decorators: [withRouter], + decorators: [ + (Story) => ( + + + + ), + ], } satisfies Meta; export default meta; @@ -14,6 +21,19 @@ type Story = StoryObj; export const BreadcrumbsComponent: Story = { args: { - pathnames: ["...", "Zaaktype", "Zaaktype detail"], + pathItems: [ + { + label: "Home", + path: "/", + }, + { + label: "Breadcrumbs", + path: "/breadcrumbs", + }, + { + label: "Current page", + path: "/breadcrumbs/current", + }, + ], }, }; diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 3a455bff..ef119672 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -1,5 +1,5 @@ +import clsx from "clsx"; import React from "react"; -import { useLocation } from "react-router-dom"; import { Outline } from "../icon"; import { Toolbar, ToolbarProps } from "../toolbar"; @@ -8,48 +8,57 @@ import { Li } from "../typography/li"; import { Ol } from "../typography/ol"; import "./breadcrumbs.scss"; +export type BreadcrumbItem = { + /** The label of the item. */ + label: string; + + /** The path of the item. */ + path: string; +}; + export type BreadcrumbsProps = ToolbarProps & { - pathnames?: string[]; + /** The path */ + pathItems: BreadcrumbItem[]; + + /** Optional onClick handler, gets called when the item is clicked. */ + onClick?: (path: string) => void; }; /** * Breadcrumbs component - * @param pathnames the pathnames to display, if not provided it will be filled by `useLocation` + * @param pathItems the path items to display + * @param onClick the onClick handler that will be called when the item is clicked * @param props the Toolbar props * @constructor */ - export const Breadcrumbs: React.FC = ({ - pathnames, + pathItems, + onClick, ...props }) => { - const location = useLocation(); - const locationPathnames = location.pathname.split("/").filter((x) => x); - const locationPathnamesWithHome = - locationPathnames.length > 0 ? ["....", ...locationPathnames] : ["..."]; - - const _pathnames = pathnames ?? locationPathnamesWithHome; - return ( -
    - {_pathnames.map((value, index) => { - const last = index === _pathnames.length - 1; - const to = `/${_pathnames.slice(0, index + 1).join("/")}`; +
      + {pathItems.map((item, index) => { + const isLastItem = index === pathItems.length - 1; return ( -
    1. - {last ? ( - {value} - ) : ( - <> - {value} - - +
    2. + onClick?.(item.path)} + className="mykn-breadcrumbs__link" + > + {item.label} + + {!isLastItem && ( + )}
      3. ); diff --git a/src/components/typography/li/li.tsx b/src/components/typography/li/li.tsx index cd044ccc..8eb4f70a 100644 --- a/src/components/typography/li/li.tsx +++ b/src/components/typography/li/li.tsx @@ -1,20 +1,36 @@ import clsx from "clsx"; import React from "react"; -import { PProps } from "../p"; import "./li.scss"; -export type LiProps = PProps; +export type LiProps = React.PropsWithChildren< + { + /** The size of the text. */ + size?: "s" | "xs"; + + /** Additional class names to apply to the component */ + className?: string; + } & React.HTMLAttributes +>; /** * Li component * @param children * @param size + * @param className * @param props * @constructor */ -export const Li: React.FC = ({ children, size = "s", ...props }) => ( -
    3. +export const Li: React.FC = ({ + children, + size = "s", + className, + ...props +}) => ( +
    4. {children}
      5. ); diff --git a/src/components/typography/ol/ol.tsx b/src/components/typography/ol/ol.tsx index ac02de96..3d3b563d 100644 --- a/src/components/typography/ol/ol.tsx +++ b/src/components/typography/ol/ol.tsx @@ -4,17 +4,34 @@ import React from "react"; import { PProps } from "../p"; import "./ol.scss"; -export type OlProps = PProps; +export type OlProps = React.PropsWithChildren< + { + /** The size of the text. */ + size?: PProps["size"]; + + /** Additional class names to apply to the component */ + className?: string; + } & React.HTMLAttributes +>; /** * Ol component * @param children * @param size + * @param className * @param props * @constructor */ -export const Ol: React.FC = ({ children, size = "s", ...props }) => ( -
        +export const Ol: React.FC = ({ + children, + size = "s", + className, + ...props +}) => ( +
          {children}
        ); diff --git a/src/settings/tokens.css b/src/settings/tokens.css index 7c09fb05..06c60eed 100644 --- a/src/settings/tokens.css +++ b/src/settings/tokens.css @@ -41,6 +41,9 @@ --gutter-h-mobile: 12px; --gutter-v-mobile: 12px; + --spacing-h-xs: 4px; + --spacing-v-xs: 4px; + --spacing-h-s: 12px; --spacing-v-s: 6px;