Add small size of avatar

.changeset/angry-wasps-sip.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add small size modifier and design token to Avatar

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;
 }

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).
 

src/tokens/size/sizing.js

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