feat(styles): create blockquote component

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.
+    class="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} />

packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts

@@ -16,9 +16,12 @@ 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(
+        ${['white', 'dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
+            <div
+              data-color-scheme="${bg}"
+              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.',

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: {

packages/styles/index.html

@@ -29,8 +29,6 @@ <h1>Styles package playground</h1>
       <option value="internal">Post internal</option>
     </select>
     <hr />
-
     <!-- Place your component markup here -->
-    <button class="btn btn-primary">Primary button</button>
   </body>
 </html>

packages/styles/src/components/_index.scss

@@ -6,6 +6,7 @@
 @use 'avatar';
 @use 'badge';
 @use 'breadcrumb';
+@use 'blockquote';
 @use 'button';
 @use 'button-group';
 @use 'card';

packages/styles/src/components/blockquote.scss

@@ -0,0 +1,38 @@
+@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;
+  }
+}
+
+figcaption.blockquote-footer {
+  margin-top: tokens.get('post-blockquote-gap-inline');
+
+  cite {
+    font-style: normal;
+  }
+}