diff --git a/packages/storybook/src/css-utrecht-link.stories.tsx b/packages/storybook/src/css-utrecht-link.stories.tsx new file mode 100644 index 00000000..ec034417 --- /dev/null +++ b/packages/storybook/src/css-utrecht-link.stories.tsx @@ -0,0 +1,98 @@ +/* @license CC0-1.0 */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-module'; +import readme from './documentation/link.md?raw'; + +const meta = { + title: 'CSS Component/Link', + id: 'css-utrecht-link', + component: Link, + argTypes: { + children: { + name: 'Content', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: '', + }, + tags: ['autodocs'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=153-1056&t=nrvRAztL0ecku9kp-0', + }, + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Link', + args: { + children: 'Website van Tilburg', + href: '#', + }, +}; +export const LinkInParagraph: Story = { + name: 'Link in paragraph', + args: { + children: 'website van Tilburg', + href: '#', + }, + decorators: [ + (Story) => ( + + Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige + cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld + tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap. + + ), + ], +}; + +export const LinkInLeadParagraph: Story = { + name: 'Link in lead paragraph', + args: { + children: 'Website van Tilburg', + href: '#', + }, + decorators: [ + (Story) => ( + + Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige + cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld + tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap. + + ), + ], +}; + +export const LinkInSmallPrint: Story = { + name: 'Link in small print', + args: { + children: 'Website van Tilburg', + href: '#', + }, + decorators: [ + (Story) => ( + + Tilburg, gelegen in het zuiden van Nederland, is een bruisende stad met een rijke geschiedenis en een levendige + cultuur. Bekijk de {Story()}. Ooit bekend als een centrum van de textielindustrie, heeft Tilburg zich ontwikkeld + tot een moderne en dynamische stad met een bloeiende economie en een levendige gemeenschap. + + ), + ], +}; diff --git a/packages/storybook/src/documentation/link.md b/packages/storybook/src/documentation/link.md new file mode 100644 index 00000000..9c7f6a41 --- /dev/null +++ b/packages/storybook/src/documentation/link.md @@ -0,0 +1,3 @@ +# Link + +This is the link component. diff --git a/proprietary/design-tokens/src/components/utrecht/link.tokens.json b/proprietary/design-tokens/src/components/utrecht/link.tokens.json new file mode 100644 index 00000000..b53b1ae5 --- /dev/null +++ b/proprietary/design-tokens/src/components/utrecht/link.tokens.json @@ -0,0 +1,100 @@ +{ + "utrecht": { + "link": { + "line-height": { + "value": "{tilburg.document.line-height}", + "type": "lineHeights" + }, + "color": { + "type": "color", + "value": "{tilburg.interaction.color}" + }, + "text-decoration-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" + }, + "text-decoration-thickness": { + "value": "auto", + "type": "other" + } + }, + "hover": { + "color": { + "type": "color", + "value": "{tilburg.interaction.hover.color}" + }, + "text-decoration": { + "value": "none", + "type": "textDecoration" + }, + "text-decoration-thickness": { + "value": "auto", + "type": "other" + } + }, + "visited": { + "color": { + "type": "color", + "value": "{tilburg.interaction.color}" + } + }, + "text-decoration": { + "value": "underline", + "type": "textDecoration" + }, + "icon": { + "size": { + "type": "sizing", + "value": "{tilburg.icon.functional.size}" + }, + "margin-inline": { + "value": "{tilburg.space.text.beetle}", + "type": "spacing" + } + }, + "font-size": { + "value": "{tilburg.document.font-size}", + "type": "fontSizes" + }, + "font-family": { + "value": "{tilburg.document.font-family}", + "type": "fontFamilies" + }, + "text-decoration-thickness": { + "value": "auto", + "type": "other" + }, + "text-underline-offset": { + "value": "auto", + "type": "other" + }, + "font-weight": { + "value": "{tilburg.document.font-weight}", + "type": "fontWeights" + } + } + } +}