4.x - Create callout component

[bspeare]

As a UIDS user, I can insert a callout component into the body of my text area

Original issue description

I don't think we want to call this a pullquote since they are meant to duplicate content from the body: https://component.gallery/components/quote/#pull-quotes. I could see us developing a pullquote variant of the blockquote that is a larger font size in the future. I see this as essentially an inline text area box where all WYSIWG styles can be used, the most important aspect of the callout is the container padding, the width sizing, and the left/right alignment within body copy. Callouts and asides examples: - https://designsystem.ontario.ca/components/detail/callouts-asides.html - https://github.com/uiowa/uids/issues/9 Styles - All styles are set based on container classes (no BEM elements, just modifiers) Size (width) - sm - md - lg Alignment - left align callout - right align callout Additional style options - Borders - Background - Maybe a general sizing increase or decrease of all elements inside the callout to set visual contrast against the body copy.

Updates that need to be made to our inline sizing solution

• [x] Single image in column.
  • We have determined this to be a content error, and an edge case that our previous system lacked in covering.
• [x] Add <figure> example and refactor accordingly.
• [x] Add image example and refactor accordingly.
• [x] Add video example and refactor accordingly.

Details of current issues

## Single image in WYSIWYG: - Currently, when there is only one item in the column, it does not span the full width, as it is trying to size to the desired width with the WYSIWYG. For example, there is only one thing in a WYSIWYG, an image, and it is sized small. Example: ## Potential solution: The following addition to the stylesheet will allow these styles to inherit the previous sizing before the container queries, but it is likely this is not a complete solution. ```@supports (contain: inline-size) { *[class*="inline--size-"] { width: 100%; &:only-child { width: inherit; margin: 0; } } } ``` We should have a discussion on how we want to style `:only-child` images. ## View mode styling: Currently, there are issues with the SNV2 view modes being sized in the column containers. These do serve a certain purpose in the sense that they can have a static size at lower image sizes, but additionally they are not covered under our current styling scheme. Here are some examples: Small view mode: Large view mode: Small - no crop: ## Potential solution: Write custom styles to specifically handle these view modes ### Or Write an update hook to remove these view modes from SNV2&3 and have a conversation on what the path forward is for updating them. ## Figure inline sizing: - Currently, when a caption is displayed with an image, the two are wrapped in a `

`. This breaks the styles for inline sizing. Example: ## Potential solution: Re-define how the images are styled in uids, keeping figures in consideration. Then, propagate necessary changes to uids_base.

[GaryRidgway]

Next steps from Alan and Sean:

• Redefine styles in terms of "Narrow first"
• Define the container breakpoints at which size behavior changes.
• Define size behaviors for each breakpoint range