Fixes to Media Link and Hype Group dimension issues (#2171)

* Fix Media Link width issue

* Fix Hype Group image size issue

Author: tylersticka

.changeset/cyan-terms-sip.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Prevent Media Links from breaking out of Grid or Flex containers

.changeset/quiet-seahorses-marry.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Hype Group object images with smaller dimensions than their container will no longer appear awkwardly cropped

src/components/media-link/media-link.scss

@@ -11,8 +11,8 @@
 /// 2. This allows the link to position a pseudo element relative to this
 ///    container for the largest possible click area.
 .c-media-link {
-  inline-size: max-content; // 1
-  max-inline-size: 100%; // 1
+  inline-size: 100%; // 1
+  max-inline-size: max-content; // 1
   position: relative; // 2
 }
 

src/objects/hype-group/demo/single.twig

@@ -8,15 +8,26 @@
       } only %}
     {% endblock %}
     {% block object %}
-      <img src="{{example_object_img_src}}" alt="Example object image" width="960" height="960">
+      <img src="{{example_object_img_src}}"
+        alt="Example object image"
+        width="{{example_object_img_size}}"
+        height="{{example_object_img_size}}">
     {% endblock %}
     {% block content %}
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla nulla, vestibulum vel pharetra ut, suscipit sit amet orci. Aliquam interdum tristique tincidunt.</p>
-      {% if example_paragraphs > 1 %}
+      {% if example_paragraphs > 2 %}
         <p>Nunc pellentesque eu purus vel aliquet. Vestibulum sed nulla tellus. Sed sed ante varius, facilisis dui in, lacinia dui. Sed convallis aliquam dolor, sit amet pretium nibh dignissim quis.</p>
       {% endif %}
-      {% if example_paragraphs > 2 %}
-        <p>Donec sit amet odio eget eros cursus pellentesque et in justo. Aliquam vel tristique diam. Donec vehicula dolor vitae turpis condimentum fermentum sit amet et est.</p>
+      {% if example_paragraphs > 1 %}
+        {% include '@cloudfour/components/media-link/media-link.twig' with {
+          "href": "https://cloudfour.com/thinks/performance-is-an-issue-of-equity/",
+          "label": "Cloud Four partner Megan Notarte explains why performance is an issue of equity",
+          "action_class": "u-text-small",
+          "avatar": "/media/megan.png",
+          "avatar_width": 88,
+          "avatar_height": 88,
+          "icon": "arrow-right"
+        } only %}
       {% endif %}
     {% endblock %}
   {% endembed %}

src/objects/hype-group/hype-group.scss

@@ -213,7 +213,17 @@
     position: absolute;
   }
 
+  /// Make sure child elements fill the container (even if they're smaller)
+
+  > *,
+  > picture > img {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
   /// Prevents non-square images from stretching to fit the square container.
+  /// This is limited to `img` because `object-fit` can have some weird effects
+  /// on `video` or `iframe` elements.
 
   > img,
   > picture > img {

src/objects/hype-group/hype-group.stories.mdx

@@ -38,6 +38,7 @@ const defaultArgs = {
   object_shape: 'circle',
   example_paragraphs: 2,
   example_object_img_src: '/media/feature-ozzie-wide.jpg',
+  example_object_img_size: 480,
 };
 
 <Meta
@@ -54,6 +55,7 @@ const defaultArgs = {
     intro_class: { type: 'string' },
     content_class: { type: 'string' },
     example_object_img_src: { type: 'string' },
+    example_object_img_size: { type: 'number' },
     example_paragraphs: {
       type: 'number',
       control: {