From d4340aa4848e07330cfaef8c7fa03ff53bba2ca3 Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@tylersticka.com>
Date: Wed, 30 Jun 2021 14:20:48 -0700
Subject: [PATCH] Add small size of avatar

---
 .changeset/angry-wasps-sip.md            |  5 ++++
 src/components/avatar/avatar.scss        |  6 ++++-
 src/components/avatar/avatar.stories.mdx | 30 ++++++++++++++++++++++--
 src/tokens/size/sizing.js                |  1 +
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/angry-wasps-sip.md

diff --git a/.changeset/angry-wasps-sip.md b/.changeset/angry-wasps-sip.md
new file mode 100644
index 000000000..d3db4bbd9
--- /dev/null
+++ b/.changeset/angry-wasps-sip.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add small size modifier and design token to Avatar
diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss
index 15e1e7b23..8f675be36 100644
--- a/src/components/avatar/avatar.scss
+++ b/src/components/avatar/avatar.scss
@@ -36,9 +36,13 @@
 }
 
 /**
- * Full-width modifier
+ * Size modifiers
  */
 
+.c-avatar--small {
+  width: size.$square-avatar-small;
+}
+
 .c-avatar--full {
   width: size.$square-avatar-full;
 }
diff --git a/src/components/avatar/avatar.stories.mdx b/src/components/avatar/avatar.stories.mdx
index 8420b6ca2..4aed8af35 100644
--- a/src/components/avatar/avatar.stories.mdx
+++ b/src/components/avatar/avatar.stories.mdx
@@ -47,9 +47,35 @@ The size is fixed to the value of [our `sizes.$avatar-medium` token by default](
   </Story>
 </Canvas>
 
+## Small
+
+The `c-avatar--small` modifier sizes the avatar down to the value of our `sizes.$avatar-small` token. This may be useful when accompanying a single line of text or showing many avatars in a condensed space.
+
+<Canvas>
+  <Story
+    name="Small (Empty)"
+    args={{
+      size: 'small',
+    }}
+  >
+    {avatarStory.bind({})}
+  </Story>
+  <Story
+    name="Small (With Image)"
+    args={{
+      size: 'small',
+      src: demoImageSmall,
+      srcset: demoImageSrcset,
+      sizes: '38px',
+    }}
+  >
+    {avatarStory.bind({})}
+  </Story>
+</Canvas>
+
 ## Full Width
 
-The `c-avatar--full` modifier sizes the component to `100%` of its container.
+The `c-avatar--full` modifier sizes the component to `100%` of its container width.
 
 <Canvas>
   <Story
@@ -76,7 +102,7 @@ The `c-avatar--full` modifier sizes the component to `100%` of its container.
 - `src`: Value for the inner `img` element's `src` attribute. If omitted, no `img` will be output.
 - `srcset`: Value for the inner `img` element's `srcset` attribute.
 
-## See Also
+## See also…
 
 To display multiple avatars in a visual cluster, see [the Bunch object](/docs/objects-bunch--of-avatars).
 
diff --git a/src/tokens/size/sizing.js b/src/tokens/size/sizing.js
index 81ad3ef5e..8571ecf8d 100644
--- a/src/tokens/size/sizing.js
+++ b/src/tokens/size/sizing.js
@@ -32,6 +32,7 @@ module.exports = {
     },
     square: {
       avatar: {
+        small: { value: modularEm(3) },
         medium: { value: modularEm(5) },
         full: { value: '100%' },
       },