feat(styles): create blockquote component (#3882)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Nov 21, 2024 · de229aa · de229aa
1 parent bd1de28
commit de229aa
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 7 deletions.
diff --git a/.changeset/twenty-items-drum.md 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
@@ -15,7 +15,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 <div className="lead">
   For quoting blocks of content from another source within your document. Wrap `
   <blockquote
-    className="blockquote">` around any HTML as the quote.
+    className="blockquote">` along with a `<q>` around any HTML as the quote.
 </div>
 
 <Canvas sourceState="shown" of={BlockquoteStories.Default} />
@@ -24,7 +24,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <Controls of={BlockquoteStories.Default} />
 </div>
 
-<StylesPackageImport components={["blockquote"]} />
+<StylesPackageImport components={['blockquote']} />
 
 ## 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
+
 <code>&lt;q&gt;</code> tag.
 
 <Canvas of={BlockquoteStories.Nested} />
diff --git 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`
       <div class="d-flex flex-wrap align-items-start gap-16">
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
+        ${[
+          { scheme: 'light', bg: 'white' },
+          { scheme: 'dark', bg: 'dark' },
+        ].map(
+          ({ scheme, bg }) => html`
+            <div
+              data-color-scheme="${scheme}"
+              class="bg-${bg} d-flex flex-wrap align-items-start gap-16 p-16"
+            >
               ${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
@@ -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
@@ -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
@@ -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;
+  }
+}