feat: aside and figure options for blockquote

.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!

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 `<blockquote>`](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

components/blockquote/src/_mixin.scss

@@ -4,6 +4,8 @@
  */
 
 @mixin utrecht-blockquote {
+  /* Setting `margin-inline-start` is necessary for overriding the default stylesheet of `<blockquote>` and `<figure>`.
+   * Setting `margin-inline-end` is necessary for overriding the default stylesheet of `<figure>` */
   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 {
+  /* `<figure>` is an optional semantic container, the CSS needs to reset the default stylesheet of `<figure>` */
+
+  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;
+}

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;
   }
 }

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;
+}