fix(blockquote): fix center alignment, enforce blockquote font size a…

…nd update Style docs (#2112)

* fix(blockquote): override potential `max-width` for quote content

* chore(blockquote): add changeset

* fix(blockquote): use logical properties

* fix(blockquote): update quote and author spacing

* docs(blockquote): update maximum width size

With direction from Marionne

* feat(blockquote): limit width to 752px per docs

* docs(blockquote): remove "Image of" at start of alt text

* docs(blockquote): remove a11y note about `aria-label`

* fix(blockquote): use standard media query size

* docs(blockquote): re-add content to sizes table

* docs(blockquote): fix and update themable tokens link on Style page

* fix(blockquote): increase/correct slotted content `font-size`

* fix(blockquote): use tag selector in CSS for quote

* fix(blockquote): target `p` tag for blockquote specifically

* fix(blockquote): use standard media query size

* chore(blockquote): upgrade changeset to minor

.changeset/thick-flowers-beam.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-blockquote>`: fix center alignment, blockquote font size and update Style docs

elements/rh-blockquote/docs/00-overview.md

@@ -5,6 +5,5 @@
 - When you need to break up large portions of text
 
 <div id="overview-image-description" class="visually-hidden">
-  Image of a blockquote including a quote icon, quotation text, and citation 
-  text
+  A blockquote including a quote icon, quotation text, and citation text
 </div>

elements/rh-blockquote/docs/10-style.md

@@ -31,29 +31,29 @@ also include the following optional elements:
 ## Sizes
 
 <uxdot-example width-adjustment="872px">
-  <img alt="Image of two blockquotes, default size on the left and large size on the right"
+  <img alt="Two blockquotes, default size on the left and large size on the right"
        src="../blockquote-style-sizes.png"
        width="872"
        height="350">
 </uxdot-example>
 
 <rh-table>
 
-| Size              | Element               | Current value |
-|-------------------|-----------------------|---------------|
-| Default           | Text size - quotation | 20px, 1.25rem |
-| Default           | 30 (1.5)              |               |
-| Large             | 28px, 1.75rem         |               |
-| Large             | 36.4 (1.3)            |               |
-| Default and Large | 14px, 0.875rem        |               |
-| Default and Large | 21 (1.5)              |               |
+| Size              | Element                 | Current value  |
+|-------------------|-------------------------|----------------|
+| Default           | Text size - quotation   | 20px, 1.25rem  |
+| Default           | Line height - quotation | 30 (1.5)       |
+| Large             | Text size - quotation   | 28px, 1.75rem  |
+| Large             | Line height - quotation | 36.4 (1.3)     |
+| Default and Large | Text size - citation    | 14px, 0.875rem |
+| Default and Large | Line height - citation  | 21 (1.5)       |
 
 </rh-table>
 
 ## Theme
 
 A blockquote is available on both light and dark backgrounds, and uses [themable
-tokens][/theming/color-palettes] to respond to it's color context.
+tokens](/theming/customizing/) to respond to it's color context.
 
 <rh-table>
 
@@ -68,7 +68,7 @@ tokens][/theming/color-palettes] to respond to it's color context.
 ### Light theme
 
 <uxdot-example width-adjustment="589px">
-  <img alt="Image of a light theme blockquote, red quote icon, black quotation text, and dark gray citation text"
+  <img alt="A light theme blockquote, red quote icon, black quotation text, and dark gray citation text"
        src="../blockquote-theme-light.png"
        width="589"
        height="177">
@@ -77,7 +77,7 @@ tokens][/theming/color-palettes] to respond to it's color context.
 ### Dark theme
 
 <uxdot-example color-palette="darkest" width-adjustment="589px">
-  <img alt="Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text"
+  <img alt="A dark theme blockquote, red quote icon, white quotation text, and light gray citation text"
        src="../blockquote-theme-dark.png"
        width="589"
        height="177">
@@ -86,14 +86,14 @@ tokens][/theming/color-palettes] to respond to it's color context.
 ### Emphasis border
 
 <uxdot-example width-adjustment="872px">
-  <img alt="Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right"
+  <img alt="Two blockquotes, a red emphasis border on the left and a black emphasis border on the right"
        src="../blockquote-emphasis-theme-light.png"
        width="872"
        height="260">
 </uxdot-example>
 
 <uxdot-example color-palette="darkest" width-adjustment="872px">
-  <img alt="Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right"
+  <img alt="Two blockquotes, a red emphasis border on the left and a black emphasis border on the right"
        src="../blockquote-emphasis-theme-dark.png"
        width="872"
        height="260">
@@ -111,14 +111,14 @@ tokens][/theming/color-palettes] to respond to it's color context.
 ### Title and heading text
 
 <uxdot-example width-adjustment="872px">
-  <img alt="Image of two blockquotes, both with red title text and black header text"
+  <img alt="Two blockquotes, both with red title text and black header text"
        src="../blockquote-title-heading-theme-light.png"
        width="872"
        height="356">
 </uxdot-example>
 
 <uxdot-example color-palette="darkest" width-adjustment="872px">
-  <img alt="Image of two blockquotes, both with red title text and white header text"
+  <img alt="Two blockquotes, both with red title text and white header text"
        src="../blockquote-title-heading-theme-dark.png"
        width="872"
        height="356">
@@ -138,7 +138,7 @@ tokens][/theming/color-palettes] to respond to it's color context.
 The base elements in both sizes are stacked and left aligned by default, but they can be vertically centered if necessary.
 
 <uxdot-example width-adjustment="872px">
-  <img alt="Image of four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall"
+  <img alt="Four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall"
        src="../blockquote-configuration.png"
        width="872"
        height="615">
@@ -150,7 +150,7 @@ A blockquote was designed to be read from top to bottom. If certain optional ele
 
 <figure>
   <uxdot-example width-adjustment="872px">
-    <img alt="Image of a blockquote with numbers 1 - 4 on the right side going from top to bottom"
+    <img alt="A blockquote with numbers 1 - 4 on the right side going from top to bottom"
          src="../blockquote-configuration.png" 
          width="872"
          height="615">
@@ -172,7 +172,7 @@ Citation text has specific styles applied to it.
 
 <uxdot-example width-adjustment="349px">
   <img src="../blockquote-configuration-citation.png"
-       alt="Image of three citation text examples"
+       alt="Three citation text examples"
        width="349"
        height="181">
 </uxdot-example>
@@ -194,7 +194,7 @@ Space values are the same in both sizes and on all breakpoints.
 
 <uxdot-example width-adjustment="872px">
   <img src="../blockquote-space.png"
-       alt="Image of four blockquotes with spacing values in between"
+       alt="Four blockquotes with spacing values in between"
        width="872"
        height="642">
 </uxdot-example>