Update Hype Group breakpoint (#2173)

Author: tylersticka

.changeset/flat-bulldogs-worry.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Slight change to Hype Group breakpoints to better support the intended amount of content

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

@@ -18,6 +18,9 @@
       {% 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 > 3 %}
+        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris turpis justo, condimentum pharetra urna aliquet, vehicula mattis neque.</p>
+      {% endif %}
       {% if example_paragraphs > 1 %}
         {% include '@cloudfour/components/media-link/media-link.twig' with {
           "href": "https://cloudfour.com/thinks/performance-is-an-issue-of-equity/",

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

@@ -5,6 +5,10 @@
 @use '../../mixins/theme';
 @use 'sass:color' as sasscolor;
 
+/// There's one breakpoint that's just a bit off from what we need for the
+/// typical amount of content we have.
+$breakpoint-wide: breakpoint.$m + 5em;
+
 /// Vary image outline colors based on theme. This is the only real style that
 /// IMO stretches the definition of "object" a bit, but it's a nice way to
 /// support different sorts of image content.
@@ -35,7 +39,7 @@
   /// Above a certain breakpoint, we switch to using Grid for layout. We can't
   /// do this from the beginning since the smallest layouts use floats.
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $breakpoint-wide) {
     column-gap: spacing.$fluid-gap;
     display: grid;
     grid-template-areas:
@@ -63,7 +67,7 @@
 /// the object left at smaller viewports would greatly disrupt the reading line.
 
 .o-hype-group--reverse {
-  @media (width >= breakpoint.$m) {
+  @media (width >= $breakpoint-wide) {
     grid-template-areas:
       'object .'
       'object intro'
@@ -110,7 +114,7 @@
   /// 2. We subtract a bit of gap space so the visual object does not appear to
   ///    be taking up _more_ space than the content (they should appear equal).
 
-  @media (width < breakpoint.$m) {
+  @media (width < $breakpoint-wide) {
     aspect-ratio: 2/3; // 1
     float: right;
     inline-size: calc(50% - #{size.$spacing-gap-inline-small}); // 2
@@ -182,7 +186,7 @@
   ///    over the wrong edges depending on the `--reverse` modifier and the
   ///    length of adjacent content.
 
-  @media (width >= breakpoint.$m) {
+  @media (width >= $breakpoint-wide) {
     block-size: 100cqmax; // 1
     inset-block-start: 50%; // 2
     position: absolute; // 2

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

@@ -1,7 +1,15 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import singleDemo from './demo/single.twig';
 import multipleDemo from './demo/multiple.twig';
+const defaultArgs = {
+  content_class: 'o-rhythm',
+  object_shape: 'circle',
+  example_paragraphs: 3,
+  example_object_img_src: '/media/feature-ozzie-wide.jpg',
+  example_object_img_size: 480,
+};
 const demoStory = (args, multiple) => {
+  args = { ...defaultArgs, ...args };
   if (args.object_shape === 'square') {
     delete args.object_shape;
   }
@@ -33,13 +41,6 @@ const singleTransformSource = (_src, storyContext) => {
   {% endblock %}
 {% endembed %}`;
 };
-const defaultArgs = {
-  content_class: 'o-rhythm',
-  object_shape: 'circle',
-  example_paragraphs: 2,
-  example_object_img_src: '/media/feature-ozzie-wide.jpg',
-  example_object_img_size: 480,
-};
 
 <Meta
   title="Objects/Hype Group"
@@ -61,7 +62,7 @@ const defaultArgs = {
       control: {
         type: 'range',
         min: 1,
-        max: 3,
+        max: 4,
         step: 1,
       },
     },