Add default avatar, clean up some design stories (#1393)

Author: tylersticka

.changeset/quick-pears-fix.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add default avatar asset

src/assets/illustrations/avatar-default.svg

@@ -1,16 +1,14 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
-// Importing a `.svg` directly, results in a failed build and importing
-// the `.svg.twig` file causes linting errors (since they are not tracked).
-// Therefore, we must track a twig file to satisfy CI.
-import brandLogo from './demo/logo.twig';
+import logoSrc from '../assets/brand/logo.svg';
 
 <Meta title="Design/Brand" />
 
-# Logo
+# Brand
 
-Cloud Four logo in SVG format. The logo fill color can be modified via the CSS
-`color` property.
+These elements are used to signify Cloud Four projects.
+
+## Logo
 
 <Canvas>
-  <Story name="Logo">{brandLogo}</Story>
+  <Story name="Logo">{`<img src="${logoSrc}" alt="Cloud Four">`}</Story>
 </Canvas>

src/design/brand.stories.mdx

@@ -1,5 +1,6 @@
-
-{% embed '@cloudfour/objects/deck/deck.twig' %}
+{% embed '@cloudfour/objects/deck/deck.twig' with {
+  class: 'o-deck--2-column@l'
+} %}
   {% block content %}
     <figure>
       {% include '@cloudfour/assets/illustrations/fallback/fallback_paintbrush.svg.twig' %}

src/design/demo/fallback_images.twig …design/demo/fallback-feature-images.twigsrc/design/demo/fallback_images.twig renamed to src/design/demo/fallback-feature-images.twig src/design/demo/fallback_images.twig renamed to src/design/demo/fallback-feature-images.twig

@@ -1,12 +1,12 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
-// Importing a `.svg` directly, results in a failed build and importing
-// the `.svg.twig` file causes linting errors (since they are not tracked).
-// Therefore, we must track a twig file to satisfy CI.
-import fallbackImage from '../demo/fallback_images.twig';
+import fallbackFeatureImages from './demo/fallback-feature-images.twig';
+import avatarDefaultSrc from '../assets/illustrations/avatar-default.svg';
 
-<Meta title="Design/Fallback Images" />
+<Meta title="Design/Illustrations" />
 
-# Fallback Images
+# Illustrations
+
+## Fallback feature images
 
 Article summaries appear more interesting and cohesive when they have an image, but sometimes an article does not have an obvious image, and not every author is an illustrator. These fallback images can be used in place of an original illustration.
 
@@ -17,7 +17,13 @@ This design also leaves room to add more categories if desired. Ideally, the ico
 The captions below each fallback image aren't set in stone, more so just ideas that these designs could be used for.
 
 <Canvas>
-  <Story name="Fallback Images" args={{ class: 'o-deck--2-column@l' }}>
-    {fallbackImage}
-  </Story>
+  <Story name="Feature images">{() => fallbackFeatureImages()}</Story>
+</Canvas>
+
+## Default avatar
+
+This asset may be used in place of a specific user avatar. To differentiate multiple fallback avatars, consider swapping its fill colors for [others in our palette](/docs/design-colors--page).
+
+<Canvas>
+  <Story name="Default avatar">{`<img src="${avatarDefaultSrc}" alt="Default avatar">`}</Story>
 </Canvas>