From 44b306468990aab172262cad659ecdcd01459bb1 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Thu, 13 Apr 2023 13:51:31 +0200 Subject: [PATCH] feat: aside and figure options for blockquote --- .changeset/shy-books-sell.md | 29 +++ components/blockquote/README.md | 6 +- components/blockquote/src/_mixin.scss | 37 +++- components/blockquote/src/html/_mixin.scss | 2 +- components/blockquote/src/index.scss | 20 +- .../src/stories/attribution.stories.mdx | 32 --- .../src/stories/default.stories.mdx | 30 --- .../src/stories/distanced.stories.mdx | 32 --- .../src/stories/language.stories.mdx | 39 ---- .../blockquote/src/stories/readme.stories.mdx | 8 - .../blockquote/src/stories/tokens.stories.mdx | 16 -- components/blockquote/src/story-template.jsx | 71 +++++-- components/blockquote/src/tokens.json | 90 ++++++++- components/toptask-link/src/tokens.json | 12 -- .../src/Blockquote.test.tsx | 170 ++++++++++++++++ .../src/Blockquote.tsx | 65 +++++- .../storybook-css/src/Blockquote.stories.tsx | 191 ++++++++++++++++++ .../component/utrecht/blockquote.tokens.json | 2 +- 18 files changed, 639 insertions(+), 213 deletions(-) create mode 100644 .changeset/shy-books-sell.md delete mode 100644 components/blockquote/src/stories/attribution.stories.mdx delete mode 100644 components/blockquote/src/stories/default.stories.mdx delete mode 100644 components/blockquote/src/stories/distanced.stories.mdx delete mode 100644 components/blockquote/src/stories/language.stories.mdx delete mode 100644 components/blockquote/src/stories/readme.stories.mdx delete mode 100644 components/blockquote/src/stories/tokens.stories.mdx create mode 100644 packages/storybook-css/src/Blockquote.stories.tsx diff --git a/.changeset/shy-books-sell.md b/.changeset/shy-books-sell.md new file mode 100644 index 00000000000..516c17e470a --- /dev/null +++ b/.changeset/shy-books-sell.md @@ -0,0 +1,29 @@ +--- +"@utrecht/blockquote-css": minor +--- + +Introduce the following class names and mixins: + +- `utrecht-blockquote__caption` (renamed from: `utrecht-blockquote__attribution`) +- `utrecht-blockquote__quote` (renamed from: `utrecht-blockquote__content`) + +The following class names mixins are now deprecated: + +- `utrecht-blockquote__attribution` +- `utrecht-blockquote__content` + +Renamed the following design tokens (but the old ones) + +- `utrecht.blockquote.attribution.color` to `utrecht.blockquote.caption.color` +- `utrecht.blockquote.attribution.font-size` to `utrecht.blockquote.caption.font-size` +- `utrecht.blockquote.content.color` to `utrecht.blockquote.quote.color` +- `utrecht.blockquote.content.font-size` to `utrecht.blockquote.quote.font-size` + +Deprecated the following design tokens: + +- `utrecht.blockquote.attribution.color` +- `utrecht.blockquote.attribution.font-size` +- `utrecht.blockquote.content.color` +- `utrecht.blockquote.content.font size` + +The deprecated design tokens, class names and mixins still work for now, but migrate as soon as possible! diff --git a/components/blockquote/README.md b/components/blockquote/README.md index d332cf45298..70da4a4fd20 100644 --- a/components/blockquote/README.md +++ b/components/blockquote/README.md @@ -8,13 +8,13 @@ Quotes worden gebruikt om uitspraken te accentueren. De quote bestaat uit een ui - **blockquote**: van het [HTML element `
`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element). MDN noemt het ["Block Quotation element"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote), misschien zou dat nog wel beter zijn dan "Blockquote". - **content**: experimentele naam. -- **attribution**: verwijzing naar de bron van het citaat. Experimentele naam. +- **caption**: extra informatie over het citaat, zoals een verwijzing naar de bron. Genoemd naar het HTML element `figcaption`. ## Class names - `utrecht-blockquote`: container element. -- `utrecht-blockquote__content`: gedeelte waar het citaat word genoemd. -- `utrecht-blockquote__attribution`: gedeelte waar de bron van het citaat word genoemd. +- `utrecht-blockquote__quote`: gedeelte waar het citaat word genoemd. +- `utrecht-blockquote__caption`: gedeelte waar de bron van het citaat word genoemd. - `utrecht-blockquote--distanced`: modifier om afstand te creëren tot omliggende tekst. ## Design tokens diff --git a/components/blockquote/src/_mixin.scss b/components/blockquote/src/_mixin.scss index 332f169574d..42659ad22c9 100644 --- a/components/blockquote/src/_mixin.scss +++ b/components/blockquote/src/_mixin.scss @@ -4,6 +4,8 @@ */ @mixin utrecht-blockquote { + /* Setting `margin-inline-start` is necessary for overriding the default stylesheet of `
` and `
`. + * Setting `margin-inline-end` is necessary for overriding the default stylesheet of `
` */ background-color: var(--utrecht-blockquote-background-color); border-color: var(--utrecht-blockquote-border-color); border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, 0); @@ -23,12 +25,21 @@ padding-inline-start: var(--utrecht-blockquote-padding-inline-start); } -@mixin utrecht-blockquote__attribution { - color: var(--utrecht-blockquote-attribution-color, inherit); - font-size: var(--utrecht-blockquote-attribution-font-size, inherit); +@mixin utrecht-blockquote__caption { + color: var(--utrecht-blockquote-caption-color, inherit); + font-size: var(--utrecht-blockquote-caption-font-size, inherit); } -@mixin utrecht-blockquote__content { +@mixin utrecht-blockquote__figure { + /* `
` is an optional semantic container, the CSS needs to reset the default stylesheet of `
` */ + + margin-block-end: 0; + margin-block-start: 0; + margin-inline-end: 0; + margin-inline-start: 0; +} + +@mixin utrecht-blockquote__quote { --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit); --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit); @@ -39,3 +50,21 @@ @mixin utrecht-blockquote--distanced { --utrecht-space-around: 1; } + +/** + * Temporarily keep the old name for backwards compatibility. + * + * @deprecated + */ +@mixin utrecht-blockquote__attribution { + @include utrecht-blockquote__caption; +} + +/** + * Temporarily keep the old name for backwards compatibility. + * + * @deprecated + */ +@mixin utrecht-blockquote__content { + @include utrecht-blockquote__quote; +} diff --git a/components/blockquote/src/html/_mixin.scss b/components/blockquote/src/html/_mixin.scss index 0a965858b4b..c7a0992021d 100644 --- a/components/blockquote/src/html/_mixin.scss +++ b/components/blockquote/src/html/_mixin.scss @@ -8,7 +8,7 @@ @mixin utrecht-html-blockquote { blockquote { @include utrecht-blockquote; - @include utrecht-blockquote__content; + @include utrecht-blockquote__quote; @include utrecht-blockquote--distanced; } } diff --git a/components/blockquote/src/index.scss b/components/blockquote/src/index.scss index 8dd05594ab6..5542b7fc46a 100644 --- a/components/blockquote/src/index.scss +++ b/components/blockquote/src/index.scss @@ -9,14 +9,26 @@ @include utrecht-blockquote; } -.utrecht-blockquote__attribution { - @include utrecht-blockquote__attribution; +/* `utrecht-blockquote__attribution` is deprecated */ +.utrecht-blockquote__attribution, +.utrecht-blockquote__caption { + @include utrecht-blockquote__caption; } -.utrecht-blockquote__content { - @include utrecht-blockquote__content; +.utrecht-blockquote__figure { + @include utrecht-blockquote__figure; +} + +/* `utrecht-blockquote__content` is deprecated */ +.utrecht-blockquote__content, +.utrecht-blockquote__quote { + @include utrecht-blockquote__quote; } .utrecht-blockquote--distanced { @include utrecht-blockquote--distanced; } + +.utrecht-blockquote--html-blockquote { + @include utrecht-blockquote__quote; +} diff --git a/components/blockquote/src/stories/attribution.stories.mdx b/components/blockquote/src/stories/attribution.stories.mdx deleted file mode 100644 index b94b2862e2b..00000000000 --- a/components/blockquote/src/stories/attribution.stories.mdx +++ /dev/null @@ -1,32 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Canvas, Meta, Story } from "@storybook/blocks"; -import { Blockquote } from "../story-template"; -import "../index.scss"; - - - -# Blockquote with attribution - -Styling via the `.utrecht-blockquote`, `.utrecht-blockquote__content` and `.utrecht-blockquote__attribution` class names: - - - - {Blockquote.bind({})} - - diff --git a/components/blockquote/src/stories/default.stories.mdx b/components/blockquote/src/stories/default.stories.mdx deleted file mode 100644 index cf9673bafa3..00000000000 --- a/components/blockquote/src/stories/default.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -{/* @license CC0-1.0 */} - -import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks"; -import { argTypes, Blockquote, defaultArgs, exampleArgs } from "../story-template"; -import "../index.scss"; - - - -# Blockquote - -Styling via the `.utrecht-blockquote` and `.utrecht-blockquote__content` class names: - - - - {Blockquote.bind({})} - - - - diff --git a/components/blockquote/src/stories/distanced.stories.mdx b/components/blockquote/src/stories/distanced.stories.mdx deleted file mode 100644 index 0e675ed2a31..00000000000 --- a/components/blockquote/src/stories/distanced.stories.mdx +++ /dev/null @@ -1,32 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Canvas, Meta, Story } from "@storybook/blocks"; -import { Blockquote } from "../story-template"; -import "../index.scss"; - - - -# Blockquote distanced - -Styling via the `.utrecht-blockquote--distanced` class name: - - - - {Blockquote.bind({})} - - diff --git a/components/blockquote/src/stories/language.stories.mdx b/components/blockquote/src/stories/language.stories.mdx deleted file mode 100644 index 5fcada17016..00000000000 --- a/components/blockquote/src/stories/language.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Canvas, Meta, Story } from "@storybook/blocks"; -import { Paragraph } from "../../../paragraph/src/story-template"; -import { Blockquote } from "../story-template"; - - ( -
- Zoals René Descartes ooit schreef: - {Story()} -
- ), - ]} - parameters={{ - status: { - type: "WORK IN PROGRESS", - }, - chromatic: { disableSnapshot: true }, - }} -/> - -# Blockquote in another language - - - - {Blockquote.bind({})} - - diff --git a/components/blockquote/src/stories/readme.stories.mdx b/components/blockquote/src/stories/readme.stories.mdx deleted file mode 100644 index 083a9c28dea..00000000000 --- a/components/blockquote/src/stories/readme.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Markdown, Meta } from "@storybook/blocks"; -import document from "../../README.md"; - - - -{document} diff --git a/components/blockquote/src/stories/tokens.stories.mdx b/components/blockquote/src/stories/tokens.stories.mdx deleted file mode 100644 index 6c3113a73fa..00000000000 --- a/components/blockquote/src/stories/tokens.stories.mdx +++ /dev/null @@ -1,16 +0,0 @@ -{/* @license CC0-1.0 */} - -import { Meta } from "@storybook/blocks"; -import { ComponentTokensSection } from "../../../../documentation/components/ComponentTokensSection"; -import tokens from "../../../../proprietary/design-tokens/dist/index.json"; -import tokensDefinition from "../../src/tokens.json"; - - - -# Blockquote Design Tokens - - diff --git a/components/blockquote/src/story-template.jsx b/components/blockquote/src/story-template.jsx index 56fdf08528d..fe37ee1edf7 100644 --- a/components/blockquote/src/story-template.jsx +++ b/components/blockquote/src/story-template.jsx @@ -9,17 +9,21 @@ import React from 'react'; import { Paragraph } from '../../paragraph/src/story-template'; export const argTypes = { + aside: { + description: 'Aside', + control: { type: 'boolean' }, + }, textContent: { description: 'Content of the quote', control: 'text', }, - attribution: { - description: 'Attribution of the quote', + caption: { + description: 'Caption of the quote', control: 'text', }, - distanced: { - description: 'Distance the element from adjacent content', - control: 'boolean', + figure: { + description: 'Figure', + control: { type: 'boolean' }, }, lang: { description: 'Language of the quoted text', @@ -28,9 +32,10 @@ export const argTypes = { }; export const defaultArgs = { + aside: false, + figure: false, textContent: '', - attribution: '', - distanced: false, + caption: '', lang: '', }; export const exampleArgs = { @@ -38,20 +43,46 @@ export const exampleArgs = { }; export const Blockquote = ({ + aside = defaultArgs.aside, + children, + figure = defaultArgs.figure, textContent = defaultArgs.textContent, - attribution = defaultArgs.attribution, - distanced = defaultArgs.distanced, + caption = defaultArgs.caption, lang = defaultArgs.lang, -}) => ( -
-
- {textContent} - {attribution &&
{attribution}
} -
-
-); +}) => { + const quote = children || (textContent ? {textContent} : null); + + const captionElement = caption ?
{caption}
: null; + + const blockquoteAttrs = { lang }; + + return aside && (figure || captionElement) ? ( + + ) : aside ? ( + + ) : figure || captionElement ? ( +
+
+ {quote} +
+ {captionElement} +
+ ) : ( +
+ {quote} +
+ ); +}; export default Blockquote; diff --git a/components/blockquote/src/tokens.json b/components/blockquote/src/tokens.json index 748174ea234..e23eab3faab 100644 --- a/components/blockquote/src/tokens.json +++ b/components/blockquote/src/tokens.json @@ -11,6 +11,36 @@ }, "type": "color" }, + "border-inline-start-width": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "borderWidth" + }, + "border-color": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "color" + }, + "border-radius": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "borderRadius" + }, "color": { "$extensions": { "nl.nldesignsystem.css.property": { @@ -138,7 +168,9 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.figma.supports-token": true + "nl.nldesignsystem.figma.supports-token": true, + "nl.nldesignsystem.deprecated": true, + "nl.nldesignsystem.redirect": "utrecht.blockquote.caption.color" }, "type": "color" }, @@ -148,7 +180,9 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.figma.supports-token": true + "nl.nldesignsystem.figma.supports-token": true, + "nl.nldesignsystem.deprecated": true, + "nl.nldesignsystem.redirect": "utrecht.blockquote.caption.font-size" }, "type": "fontSizes" } @@ -160,7 +194,55 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.figma.supports-token": true + "nl.nldesignsystem.figma.supports-token": true, + "nl.nldesignsystem.deprecated": true, + "nl.nldesignsystem.redirect": "utrecht.blockquote.quote.color" + }, + "type": "color" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": true, + "nl.nldesignsystem.deprecated": true, + "nl.nldesignsystem.redirect": "utrecht.blockquote.quote.font-size" + }, + "type": "fontSizes" + } + }, + "caption": { + "color": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "color" + }, + "font-size": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false + }, + "type": "fontSizes" + } + }, + "quote": { + "color": { + "$extensions": { + "nl.nldesignsystem.css.property": { + "syntax": "", + "inherits": true + }, + "nl.nldesignsystem.figma.supports-token": false }, "type": "color" }, @@ -170,7 +252,7 @@ "syntax": "", "inherits": true }, - "nl.nldesignsystem.figma.supports-token": true + "nl.nldesignsystem.figma.supports-token": false }, "type": "fontSizes" } diff --git a/components/toptask-link/src/tokens.json b/components/toptask-link/src/tokens.json index 098615b94e1..9f2a4fdb22c 100644 --- a/components/toptask-link/src/tokens.json +++ b/components/toptask-link/src/tokens.json @@ -11,18 +11,6 @@ }, "type": "color" }, - "border-color": { - "css": { - "syntax": "", - "inherits": true - } - }, - "border-inline-start-width": { - "css": { - "syntax": "", - "inherits": true - } - }, "color": { "$extensions": { "nl.nldesignsystem.css.property": { diff --git a/packages/component-library-react/src/Blockquote.test.tsx b/packages/component-library-react/src/Blockquote.test.tsx index f07b75d42e2..941cb9f2966 100644 --- a/packages/component-library-react/src/Blockquote.test.tsx +++ b/packages/component-library-react/src/Blockquote.test.tsx @@ -113,6 +113,176 @@ describe('Blockquote', () => { }); }); + it('can have the source URL in a cite attribute of the blockquote element', () => { + const url = 'https://example.com/'; + + const { container } = render( +
+

+ This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. +

+
, + ); + + const blockquote = container.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + + if (blockquote) { + expect(blockquote).toHaveAttribute('cite', url); + } + }); + + describe('with a caption', () => { + it('contains the blockquote inside a figure element', () => { + const { container } = render(
); + + const figure = container.querySelector('figure'); + + expect(figure).toBeInTheDocument(); + + if (figure) { + const blockquote = figure.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + } + }); + + it('contains the caption inside a figcaption element', () => { + const caption = 'example.com'; + const { container } = render(
); + + const figure = container.querySelector('figure'); + + expect(figure).toBeInTheDocument(); + + if (figure) { + const figcaption = figure.querySelector('figcaption'); + + expect(figcaption).toBeInTheDocument(); + expect(figcaption).toHaveTextContent(caption); + } + }); + }); + + describe('in aside', () => { + it('contains the blockquote inside the aside element', () => { + const { container } = render(
); + + const aside = container.querySelector('aside'); + + expect(aside).toBeInTheDocument(); + + if (aside) { + const blockquote = aside.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + } + }); + + it('can have the source URL in a cite attribute of the blockquote element', () => { + const url = 'https://example.com/'; + + const { container } = render( +
+

+ This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. +

+
, + ); + + const blockquote = container.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + + if (blockquote) { + expect(blockquote).toHaveAttribute('cite', url); + } + }); + }); + + describe('in figure', () => { + it('contains the blockquote inside the aside element', () => { + const { container } = render(
); + + const figure = container.querySelector('figure'); + + expect(figure).toBeInTheDocument(); + + if (figure) { + const blockquote = figure.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + } + }); + + it('can have the source URL in a cite attribute of the blockquote element', () => { + const url = 'https://example.com/'; + + const { container } = render( +
+

+ This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. +

+
, + ); + + const blockquote = container.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + + if (blockquote) { + expect(blockquote).toHaveAttribute('cite', url); + } + }); + }); + + describe('in figure and aside', () => { + it('contains the blockquote inside the aside element, inside the figure element', () => { + const { container } = render(
); + + const figure = container.querySelector('figure'); + + expect(figure).toBeInTheDocument(); + + if (figure) { + const aside = container.querySelector('aside'); + + expect(aside).toBeInTheDocument(); + + if (aside) { + const blockquote = aside.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + } + } + }); + + it('can have the source URL in a cite attribute of the blockquote element', () => { + const url = 'https://example.com/'; + + const { container } = render( +
+

+ This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. +

+
, + ); + + const blockquote = container.querySelector('blockquote'); + + expect(blockquote).toBeInTheDocument(); + + if (blockquote) { + expect(blockquote).toHaveAttribute('cite', url); + } + }); + }); + it('supports ForwardRef in React', () => { const ref = createRef(); diff --git a/packages/component-library-react/src/Blockquote.tsx b/packages/component-library-react/src/Blockquote.tsx index 8b9e688436e..7fd34180dd0 100644 --- a/packages/component-library-react/src/Blockquote.tsx +++ b/packages/component-library-react/src/Blockquote.tsx @@ -7,19 +7,70 @@ import clsx from 'clsx'; import { BlockquoteHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react'; export interface BlockquoteProps extends BlockquoteHTMLAttributes { + aside?: boolean; + /** @deprected Replace `attribution` with `caption`. */ attribution?: ReactNode; + caption?: ReactNode; + figure?: boolean; } export const Blockquote = forwardRef( ( - { children, className, attribution, ...restProps }: PropsWithChildren, + { + aside, + attribution, + className, + children, + cite, + figure, + caption, + lang, + ...restProps + }: PropsWithChildren, ref: ForwardedRef, - ) => ( -
- {children} - {attribution &&
{attribution}
} -
- ), + ) => { + const quote = children; + + const captionElement = + caption || attribution ? ( +
{caption || attribution}
+ ) : null; + + const blockquoteAttrs = { cite, lang }; + + return aside && (figure || captionElement) ? ( + + ) : aside ? ( + + ) : figure || captionElement ? ( +
+
+ {quote} +
+ {captionElement} +
+ ) : ( +
+ {quote} +
+ ); + }, ); Blockquote.displayName = 'Blockquote'; diff --git a/packages/storybook-css/src/Blockquote.stories.tsx b/packages/storybook-css/src/Blockquote.stories.tsx new file mode 100644 index 00000000000..9148efd8813 --- /dev/null +++ b/packages/storybook-css/src/Blockquote.stories.tsx @@ -0,0 +1,191 @@ +/* eslint-disable react/no-unescaped-entities */ +import { Meta, StoryObj } from '@storybook/react'; +import readme from '@utrecht/blockquote-css/README.md?raw'; +import tokensDefinition from '@utrecht/blockquote-css/src/tokens.json'; +import { Blockquote, Paragraph } from '@utrecht/component-library-react'; +import tokens from '@utrecht/design-tokens/dist/index.json'; +import React from 'react'; +import { designTokenStory } from './design-token-story'; + +const meta = { + title: 'CSS Component/Blockquote', + id: 'css-blockquote', + component: Blockquote, + args: { + children: '', + }, + argTypes: { + aside: { + description: 'Aside', + control: { type: 'boolean' }, + }, + textContent: { + description: 'Content of the quote', + control: 'text', + }, + caption: { + description: 'Caption of the quote', + control: 'text', + }, + cite: { + description: 'URL source of the quotation', + control: 'text', + }, + figure: { + description: 'Figure', + control: { type: 'boolean' }, + }, + lang: { + description: 'Language of the quoted text', + control: 'text', + }, + }, + parameters: { + bugs: 'https://github.com/nl-design-system/utrecht/issues?q=is%3Aissue+is%3Aopen+label%3Acomponent%2Fblockquote', + tokensPrefix: 'utrecht-blockquote', + status: { + type: 'WORK IN PROGRESS', + }, + tokens, + tokensDefinition, + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: 'The Quick Brown Fox Jumps Over The Lazy Dog', + }, +}; + +export const Caption: Story = { + args: { + caption: 'L. Ipsum', + children: The Quick Brown Fox Jumps Over The Lazy Dog, + }, + name: 'Caption', +}; + +export const Aside: Story = { + args: { + aside: true, + children: '“Het was liefde op het eerste gezicht!”', + }, + name: 'Aside', + parameters: { + docs: { + description: `Gebruik _aside_ wanneer de quote niet een essentiëel onderdeel is van de tekst. Een "pull quote" is een goed voorbeeld: wanneer een uitspraak uit een artikel als illustratie wordt uitvergroot om de aandacht te trekken. De quote is dan niet essentiëel, omdat de tekst ook al in het artikel staat. + +Als je dit type quote markeert als _aside_, dan kan het voorkomen dat het in "Reader mode" getoond wordt, of kan het helpen papier te besparen door de quote te verbergen bij het printen van de pagina. + +Als de pull quote een caption heeft zoals de naam van de persoon, dan moet je _aside_ combineren met _figure_ en _figcaption_.`, + }, + }, +}; + +export const Figure: Story = { + args: { + figure: true, + children: The Quick Brown Fox Jumps Over The Lazy Dog, + }, + name: 'Figure', +}; + +export const FigureAside: Story = { + args: { + aside: true, + figure: true, + caption: '– Narcissus', + children: “Het was liefde op het eerste gezicht!”, + }, + name: 'Figure and aside', + parameters: { + docs: { + description: `Gebruik _aside_ en _figure_ tegelijk voor bijvoorbeeld een _pull quote_ met een caption: dat is een illustratie die niet essentiëel is voor het artikel.`, + }, + }, +}; + +export const AsideCaption: Story = { + args: { + aside: true, + caption: 'L. Ipsum', + children: 'The Quick Brown Fox Jumps Over The Lazy Dog', + }, + name: 'Aside and caption', +}; + +export const CaptionMultipleLines: Story = { + args: { + figure: true, + lang: 'en-US', + caption: ( + + Fast as You Can, op het album{' '} + + When the pawn hits the conflicts he thinks like a king +
+ What he knows throws the blows when he goes to the fight +
+ And he'll win the whole thing 'fore he enters the ring +
+ There's no body to batter when your mind is your might +
+ So when you go solo, you hold your own hand +
+ And remember that depth is the greatest of heights +
+ And if you know where you stand, then you know where to land +
+ And if you fall it won't matter, cuz you'll know that you're right + {' '} + van Fiona Apple (1999) + + ), + children: ( + + Sometimes my mind don't shake and shift +
+ But most of the time, it does + + ), + }, + name: 'Caption of multiple lines of text', +}; + +export const CiteURL: Story = { + args: { + cite: 'https://example.com/', + children: ( + + This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. + + ), + }, + name: 'URL source of the quotation', +}; + +export const CiteURLCaption: Story = { + args: { + caption: 'example.com', + cite: 'https://example.com/', + children: ( + + This domain is for use in illustrative examples in documents. You may use this domain in literature without + prior coordination or asking for permission. + + ), + }, + name: 'URL source of the quotation (when blockquote is not top element)', +}; + +export const DesignTokens = designTokenStory(meta); diff --git a/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json b/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json index 3e8ee4f672b..4a3b7f02882 100644 --- a/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json +++ b/proprietary/design-tokens/src/component/utrecht/blockquote.tokens.json @@ -12,7 +12,7 @@ "margin-block-start": { "value": "1.6em" }, "margin-block-end": { "value": "1.6em" }, "font-size": {}, - "attribution": { + "caption": { "color": {}, "font-size": { "value": "0.75rem" } },