From e8b71644e7204dee5e355c16bd2787d0bee3db74 Mon Sep 17 00:00:00 2001 From: Mark Teekman <128050096+markacato@users.noreply.github.com> Date: Wed, 15 May 2024 17:09:16 +0200 Subject: [PATCH] feat: add breadcrumbs nav (#20) Tokens don't work ATM --------- Co-authored-by: Mark Teekman --- .../config/ParametersArgsDecorator.tsx | 5 +- .../src/css-breadcrumb-nav.stories.tsx | 86 ++++++++++++++ .../src/documentation/breadcrumb-nav.md | 3 + .../utrecht/breadcrumb-nav.tokens.json | 112 ++++++++++++++++++ 4 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/src/css-breadcrumb-nav.stories.tsx create mode 100644 packages/storybook/src/documentation/breadcrumb-nav.md create mode 100644 proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json diff --git a/packages/storybook/config/ParametersArgsDecorator.tsx b/packages/storybook/config/ParametersArgsDecorator.tsx index 6b07f59e..f9c077e2 100644 --- a/packages/storybook/config/ParametersArgsDecorator.tsx +++ b/packages/storybook/config/ParametersArgsDecorator.tsx @@ -1,11 +1,14 @@ import type { Decorator } from '@storybook/react'; +import { Document } from '@utrecht/component-library-react/dist/css-module'; export const ParametersArgsDecorator: Decorator = (Story, context) => { context.parameters['args'] = context.args; return (
- + + +
); }; diff --git a/packages/storybook/src/css-breadcrumb-nav.stories.tsx b/packages/storybook/src/css-breadcrumb-nav.stories.tsx new file mode 100644 index 00000000..2485fd47 --- /dev/null +++ b/packages/storybook/src/css-breadcrumb-nav.stories.tsx @@ -0,0 +1,86 @@ +/* @license CC0-1.0 */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { + BreadcrumbNav, + BreadcrumbNavLink, + BreadcrumbNavSeparator, +} from '@utrecht/component-library-react/dist/css-module'; +import readme from './documentation/breadcrumb-nav.md?raw'; + +const meta = { + title: 'CSS Component/Breadcrumb navigation', + id: 'css-utrecht-breadcrumb-nav', + component: BreadcrumbNav, + argTypes: { + children: { + name: 'Content', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: '', + }, + tags: ['autodocs'], + parameters: { + bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbreadcrumb-nav', + design: { + type: 'figma', + url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/?node-id=501-18760', + }, + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Breadcrumb navigation', + args: { + children: [ + + Home + , + + + + + , + + Parkeren in Tilburg + , + + + + + , + + Product aanvragen + , + ], + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/ZWSC4gCrOXRUR9UX3aoZ8x/Gemeente-Rotterdam-Design-System?type=design&node-id=507-20062&mode=design&t=yvzUSkFQYQmWSHsQ-4', + }, + }, +}; diff --git a/packages/storybook/src/documentation/breadcrumb-nav.md b/packages/storybook/src/documentation/breadcrumb-nav.md new file mode 100644 index 00000000..92f60c5d --- /dev/null +++ b/packages/storybook/src/documentation/breadcrumb-nav.md @@ -0,0 +1,3 @@ +# Breadcrumb navigation + +The breadcrumb nav component is used to show the user's current location within a website or application. It is a secondary navigation scheme that allows the user to see where the current page is in relation to the hierarchy of the website or application. diff --git a/proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json b/proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json new file mode 100644 index 00000000..33a7a7f7 --- /dev/null +++ b/proprietary/design-tokens/src/components/utrecht/breadcrumb-nav.tokens.json @@ -0,0 +1,112 @@ +{ + "utrecht": { + "breadcrumb": { + "line-height": { + "value": "{tilburg.document.line-height}", + "type": "lineHeights" + }, + "font-size": { + "value": "{tilburg.document.font-size}", + "type": "fontSizes" + }, + "link": { + "icon": { + "size": { + "type": "sizing", + "value": "{tilburg.icon.functional.size}" + }, + "margin-inline": { + "value": "{tilburg.space.text.beetle}", + "type": "spacing" + } + }, + "padding-block-end": { + "value": "{tilburg.space.block.snail}", + "type": "spacing" + }, + "padding-block-start": { + "value": "{tilburg.space.block.snail}", + "type": "spacing" + }, + "padding-inline-end": { + "value": "0px", + "type": "spacing" + }, + "padding-inline-start": { + "value": "0px", + "type": "spacing" + }, + "color": { + "type": "color", + "value": "{tilburg.interaction.color}" + }, + "active": { + "color": { + "type": "color", + "value": "{tilburg.interaction.active.color}" + }, + "text-decoration": { + "value": "none", + "type": "textDecoration" + } + }, + "focus": { + "background-color": { + "type": "color", + "value": "{tilburg.focus.background-color}" + }, + "color": { + "type": "color", + "value": "{tilburg.focus.color}" + }, + "text-decoration": { + "value": "none", + "type": "textDecoration" + } + }, + "hover": { + "color": { + "type": "color", + "value": "{tilburg.interaction.hover.color}" + }, + "text-decoration": { + "value": "none", + "type": "textDecoration" + } + }, + "current": { + "color": { + "type": "color", + "value": "{tilburg.document.subtle.color}" + } + }, + "text-decoration": { + "value": "underline", + "type": "textDecoration" + } + }, + "divider": { + "size": { + "type": "sizing", + "value": "{tilburg.size.2xs}" + }, + "color": { + "value": "{tilburg.document.subtle.color}", + "type": "color" + } + }, + "margin-inline": { + "value": "{tilburg.space.inline.beetle}", + "type": "spacing" + }, + "font-family": { + "value": "{tilburg.document.font-family}", + "type": "fontFamilies" + }, + "font-weight": { + "value": "{tilburg.document.font-weight}", + "type": "fontWeights" + } + } + } +}