Bio layout object

.changeset/sweet-beds-search.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add the Bio layout object

src/objects/bio/bio.scss

@@ -0,0 +1,37 @@
+@use "../../compiled/tokens/scss/breakpoint";
+@use "../../compiled/tokens/scss/size";
+@use '../../mixins/fluid';
+
+.o-bio {
+  display: grid;
+  grid-template-areas:
+    'avatar'
+    'content'
+    'meta';
+  grid-template-rows: repeat(3, minmax(0, auto));
+  @include fluid.grid-gap(
+    breakpoint.$s,
+    breakpoint.$xl,
+    size.$spacing-gap-fluid-min,
+    size.$spacing-gap-fluid-max
+  );
+
+  @media (min-width: breakpoint.$l) {
+    grid-template-areas:
+      'avatar content content'
+      'meta content content';
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.o-bio__avatar {
+  grid-area: avatar;
+}
+
+.o-bio__content {
+  grid-area: content;
+}
+
+.o-bio__meta {
+  grid-area: meta;
+}

src/objects/bio/bio.stories.mdx

@@ -0,0 +1,38 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import defaultDemoSource from '!!raw-loader!./demo/demo.twig';
+import defaultDemo from './demo/demo.twig';
+
+<Meta title="Objects/Bio" />
+
+# Bio
+
+The Bio layout object can be used for extended biographical details that include an avatar, an extended text description and optional meta information.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      docs: {
+        source: {
+          code: defaultDemoSource,
+        },
+      },
+    }}
+  >
+    {defaultDemo}
+  </Story>
+</Canvas>
+
+## Template Properties
+
+- `avatar` (block): Block to add a bio avatar.
+- `content` (block): Block to add the main bio content.
+- `meta` (block): Optional block to add meta information (e.g. bio links).

src/objects/bio/bio.twig

@@ -0,0 +1,15 @@
+{% set _meta %}{% block meta %}{% endblock %}{% endset %}
+
+<div class="o-bio">
+  <div class="o-bio__content">
+    {% block content %}{% endblock %}
+  </div>
+  <div class="o-bio__avatar">
+    {% block avatar %}{% endblock %}
+  </div>
+  {% if _meta is not empty %}
+    <div class="o-bio__meta">
+      {{ _meta }}
+    </div>
+  {% endif %}
+</div>

src/objects/bio/demo/demo.twig

@@ -0,0 +1,31 @@
+{% embed '@cloudfour/objects/bio/bio.twig' only %}
+  {% block avatar %}
+    {% include '@cloudfour/components/avatar/avatar.twig' with {
+      size: 'full',
+      src: 'media/team-avatars/danielle.png'
+    } only %}
+  {% endblock %}
+  {% block content %}
+    {% embed '@cloudfour/objects/rhythm/rhythm.twig' only %}
+      {% block content %}
+        <header>
+          {% include '@cloudfour/components/heading/heading.twig' with {
+            content: 'Danielle Romo',
+            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>
+  {% endblock %}
+{% endembed %}