Fix Bio object design inconsistencies (#1747)

Author: gerardo-rodriguez

.changeset/funny-actors-approve.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix Bio object design inconsistencies per prototype designs

src/mixins/_fluid.scss

@@ -43,6 +43,11 @@
 /// Generate a fluid `clamp` function. Unlike `fluid-calc`, this will prevent
 /// the value from going below `$min` or above `$max`.
 ///
+/// The fluid-clamp is a more predictable clamp over the native CSS clamp. It will
+/// return predictable values between the $min and $max values between the
+/// $min-width and $max-width breakpoints. In other words, you get a size relative
+/// to the viewport width but between the $min and $max values. Very neat!
+///
 /// @param {Number} $min - The minimum amount.
 /// @param {Number} $max - The maximum amount.
 /// @param {Number} $min-width [breakpoint.$s] - The minimum viewport width in ems.

src/objects/bio/bio.scss

@@ -1,10 +1,11 @@
 @use '../../compiled/tokens/scss/breakpoint';
 @use '../../compiled/tokens/scss/size';
 @use '../../mixins/fluid';
+@use '../../mixins/ms';
 
 .o-bio {
   display: grid;
-  grid-gap: fluid.fluid-clamp(
+  gap: fluid.fluid-clamp(
     size.$spacing-gap-fluid-min,
     size.$spacing-gap-fluid-max,
     breakpoint.$s,
@@ -14,18 +15,25 @@
     'avatar'
     'content'
     'meta';
-  grid-template-rows: repeat(3, minmax(0, auto));
 
   @media (min-width: breakpoint.$l) {
     grid-template-areas:
       'avatar content content'
       'meta content content';
     grid-template-columns: repeat(3, 1fr);
+    row-gap: ms.step(0);
   }
 }
 
 .o-bio__avatar {
   grid-area: avatar;
+  inline-size: 100%;
+  margin: 0 auto;
+  max-inline-size: size.$square-avatar-large;
+  @media (min-width: breakpoint.$l) {
+    font-size: ms.step(1);
+    inline-size: 100%;
+  }
 }
 
 .o-bio__content {
@@ -34,4 +42,7 @@
 
 .o-bio__meta {
   grid-area: meta;
+  @media (min-width: breakpoint.$l) {
+    text-align: center;
+  }
 }

src/objects/bio/bio.twig

@@ -1,9 +1,14 @@
 {% set _meta %}{% block meta %}{% endblock %}{% endset %}
+{% set _bio_content %}{% block content %}{% endblock %}{% endset %}
 
 <div class="o-bio">
-  <div class="o-bio__content">
-    {% block content %}{% endblock %}
-  </div>
+  {% embed '@cloudfour/objects/container/container.twig' with {
+    class: 'o-bio__content o-container--prose'
+  } %}
+    {% block content %}
+      {{_bio_content}}
+    {% endblock %}
+  {% endembed %}
   <div class="o-bio__avatar">
     {% block avatar %}{% endblock %}
   </div>

src/objects/bio/demo/demo.twig

@@ -11,21 +11,23 @@
         <header>
           {% include '@cloudfour/components/heading/heading.twig' with {
             content: 'Danielle Romo',
+            subheading: 'Front-end Designer',
             level: 1
           } only %}
-          <p>Front-end Designer</p>
         </header>
         <p>Danielle is a front-end designer passionate about all things creative including design, art, and music. She began her career as a graphic designer and draws on her visual design skills to create engaging experiences for the web. She hasn't stopped learning since taking her first web design class and continues to develop her coding skills one web page at a time.</p>
         <p>Outside of work, you can find her drawing, listening to true crime podcasts, or hiking the beautiful Pacific Northwest.</p>
       {% endblock %}
     {% endembed %}
   {% endblock %}
   {% block meta %}
-    <ul>
-      <li><a href="#">Website link</a></li>
-      <li><a href="#">Website link</a></li>
-      <li><a href="#">Social media link</a></li>
-      <li><a href="#">Social media link</a></li>
-    </ul>
+    {% embed '@cloudfour/objects/list/list.twig' %}
+      {% block content %}
+        <li><a href="#">Website link</a></li>
+        <li><a href="#">Website link</a></li>
+        <li><a href="#">Social media link</a></li>
+        <li><a href="#">Social media link</a></li>
+      {% endblock %}
+    {% endembed %}
   {% endblock %}
 {% endembed %}

src/tokens/size/sizing.js

@@ -40,6 +40,7 @@ module.exports = {
       avatar: {
         small: { value: modularEm(3) },
         medium: { value: modularEm(5) },
+        large: { value: modularEm(11) },
         full: { value: '100%' },
       },
       control: {