feat(styles): create blockquote component

packages/styles/index.html

@@ -29,8 +29,40 @@ <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>
+    <blockquote class="blockquote" lang="de">
+      <q
+        >Lorem ipsum dolor sit amet <q>consectetur adipiscing elit</q>. Integer posuere erat a ante.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</q
+      >
+
+      <figcaption class="blockquote-footer">
+        Author
+        <cite>Source</cite>
+      </figcaption>
+    </blockquote>
+
+    <blockquote class="blockquote" lang="en">
+      <q
+        >Lorem ipsum dolor sit amet <q>consectetur adipiscing elit</q>. Integer posuere erat a ante.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</q
+      >
+      <figcaption class="blockquote-footer">
+        Author
+        <cite>Source</cite>
+      </figcaption>
+    </blockquote>
+
+    <blockquote class="blockquote" lang="fr">
+      <q
+        >Lorem ipsum dolor sit amet <q>consectetur adipiscing elit</q>. Integer posuere erat a ante.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</q
+      >
+
+      <figcaption class="blockquote-footer">
+        Author
+        <cite>Source</cite>
+      </figcaption>
+    </blockquote>
   </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,34 @@
+@use '../tokens/components';
+@use '../functions/tokens';
+@use './../placeholders/blockquote' as blockquote-ph;
+
+tokens.$default-map: components.$post-quote;
+
+.blockquote {
+  font-size: tokens.get('post-quote-font-size');
+  font-weight: tokens.get('post-quote-font-weight');
+  margin: tokens.get('post-quote-margin-block') tokens.get('post-quote-margin-inline');
+  padding: 0 tokens.get('post-quote-padding-inline-end') 0
+    tokens.get('post-quote-padding-inline-start');
+  border-inline-start: tokens.get('post-quote-border-width-left') solid
+    tokens.get('post-quote-border-left-color');
+}
+
+figure:has(.blockquote) {
+  margin: tokens.get('post-quote-margin-block') tokens.get('post-quote-margin-inline');
+  padding: 0 tokens.get('post-quote-padding-inline-end') 0
+    tokens.get('post-quote-padding-inline-start');
+  border-inline-start: tokens.get('post-quote-border-width-left') solid
+    tokens.get('post-quote-border-left-color');
+
+  .blockquote {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+}
+
+.blockquote-footer {
+  @extend %body;
+  margin-top: tokens.get('post-quote-gap-inline');
+}

packages/styles/src/placeholders/_blockquote.scss

@@ -0,0 +1,15 @@
+@use '../tokens/components';
+@use '../tokens/elements';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-lead;
+
+%lead {
+  font-size: tokens.get('post-lead-font-size');
+  font-weight: tokens.get('post-lead-font-weight');
+}
+
+%body {
+  font-size: tokens.get('post-body-font-size', elements.$post-body);
+  font-weight: tokens.get('post-body-font-weight', elements.$post-body);
+}

packages/styles/src/placeholders/_index.scss

@@ -4,3 +4,4 @@
 @use './color';
 @use './dropdown';
 @use './text';
+@use './blockquote';

packages/styles/tests/components/blockquote.test.scss

@@ -0,0 +1,7 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'tests/jest';
+@use 'src/components/blockquote';
+
+// Check if component forwards options
+@include jest.true(map.has-key(meta.module-variables('blockquote'), 'font-base-path'));