From de229aac83fd7dc7d149f1438a37d205f5cb08c7 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com> Date: Thu, 21 Nov 2024 20:14:19 +0200 Subject: [PATCH] feat(styles): create blockquote component (#3882) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/twenty-items-drum.md | 6 +++ .../components/blockquote/blockquote.docs.mdx | 5 +- .../blockquote/blockquote.snapshot.stories.ts | 12 +++-- .../blockquote/blockquote.stories.ts | 4 +- packages/styles/src/components/_index.scss | 1 + .../styles/src/components/blockquote.scss | 46 +++++++++++++++++++ 6 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 .changeset/twenty-items-drum.md create mode 100644 packages/styles/src/components/blockquote.scss diff --git a/.changeset/twenty-items-drum.md b/.changeset/twenty-items-drum.md new file mode 100644 index 0000000000..8541010598 --- /dev/null +++ b/.changeset/twenty-items-drum.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Updated the blockquote styles to match the new Post design. diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx index 4e14e45b63..36118a18b5 100644 --- a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx +++ b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx @@ -15,7 +15,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. + className="blockquote">` along with a `` around any HTML as the quote.
@@ -24,7 +24,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx'; - + ## Concrete Examples of Application @@ -33,6 +33,7 @@ The following examples show the different characteristics of the component. Thes ### Nested To add simple quote characters around any nested text within your blockquote, you can wrap it with a + <q> tag. diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts index a327f0df89..c4828fcb8a 100644 --- a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts @@ -16,9 +16,15 @@ export const Blockquote: Story = { render: (_args: Args, context: StoryContext) => { return html`
- ${['bg-white', 'bg-dark'].map( - bg => html` -
+ ${[ + { scheme: 'light', bg: 'white' }, + { scheme: 'dark', bg: 'dark' }, + ].map( + ({ scheme, bg }) => html` +
${bombArgs({ text: [ 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts index 1495405491..5e4aaa430e 100644 --- a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts +++ b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts @@ -17,7 +17,7 @@ const meta: MetaComponent = { args: { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.', language: 'en', - caption: false, + caption: true, captionAuthor: 'Author', captionSource: 'Source', }, @@ -34,7 +34,7 @@ const meta: MetaComponent = { }, language: { name: 'Language', - description: 'The documents language.', + description: "The document's language.", control: { type: 'radio', labels: { diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss index 20fd7f3141..81ccb0ce44 100644 --- a/packages/styles/src/components/_index.scss +++ b/packages/styles/src/components/_index.scss @@ -6,6 +6,7 @@ @use 'badge'; @use 'banner'; @use 'breadcrumb'; +@use 'blockquote'; @use 'button'; @use 'button-group'; @use 'card'; diff --git a/packages/styles/src/components/blockquote.scss b/packages/styles/src/components/blockquote.scss new file mode 100644 index 0000000000..4067c84246 --- /dev/null +++ b/packages/styles/src/components/blockquote.scss @@ -0,0 +1,46 @@ +@use '../tokens/components'; +@use '../functions/tokens'; + +tokens.$default-map: components.$post-blockquote; + +.blockquote { + font-size: tokens.get('post-blockquote-font-size'); + font-weight: tokens.get('post-blockquote-font-weight'); + margin: tokens.get('post-blockquote-margin-block') tokens.get('post-blockquote-margin-inline'); + padding: 0 tokens.get('post-blockquote-padding-inline-end') 0 + tokens.get('post-blockquote-padding-inline-start'); + border-inline-start: tokens.get('post-blockquote-border-width-left') + tokens.get('post-blockquote-border-left-style') tokens.get('post-blockquote-border-left-color'); +} + +figure:has(.blockquote) { + margin: tokens.get('post-blockquote-margin-block') tokens.get('post-blockquote-margin-inline'); + padding: 0 tokens.get('post-blockquote-padding-inline-end') 0 + tokens.get('post-blockquote-padding-inline-start'); + border-inline-start: tokens.get('post-blockquote-border-width-left') + tokens.get('post-blockquote-border-left-style') tokens.get('post-blockquote-border-left-color'); + + .blockquote { + margin: 0; + padding: 0; + border-width: 0; + border-style: none; + border-color: transparent; + + q { + quotes: '\00ab' '\00bb' '\2039' '\203A'; + + &:lang(en) { + quotes: '\0022' '\0022' '\0027' '\0027'; + } + } + } +} + +figcaption.blockquote-footer { + margin-top: tokens.get('post-blockquote-gap-inline'); + + cite { + font-style: inherit; + } +}