fix: Refactor docs

modules/react/avatar/stories/stories.tsx

@@ -61,13 +61,13 @@ storiesOf('Components/Indicators/Avatar', module)
   .add('Non-Square Image', () => (
     <div className="story">
       <h3>Original Rectangle Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/200" />
+      <img alt="" src="https://i.imgur.com/f3FZv3H.jpeg" />
       <h3>Using Object Fit on a Rectangle Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
+      <Avatar as="div" size={200} url="https://i.imgur.com/f3FZv3H.jpeg" objectFit="contain" />
       <h3>Original Square Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/450" />
+      <img alt="" src="https://i.imgur.com/himSfZn.jpeg" height={200} width={200} />
       <h3>Using a Square Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
+      <Avatar as="div" size={200} url="https://i.imgur.com/himSfZn.jpeg" />
     </div>
   ))
   .add('Lazy Loading', () => (

modules/react/icon/stories/Assets.stories.mdx → modules/react/icon/stories/IconsList.stories.mdx

@@ -1,16 +1,11 @@
-import {SystemIconList} from './examples/IconList';
-import {AppletIconList} from './examples/AppletIconList';
-import {AccentIconList} from './examples/AccentIconList.tsx';
-import {Overview} from './examples/Overview';
-import {Images} from './examples/Image';
+import {SystemIconList} from './examples/IconsList/IconList';
+import {AppletIconList} from './examples/IconsList/AppletIconList';
+import {AccentIconList} from './examples/IconsList/AccentIconList';
+import {Overview} from './examples/Overview'
 
-<Meta title="Assets/Icons" />
+<Meta title="Images and Icons/Icons List" />
 
-# Assets
-
-foo bar Assets are graphics which help communicate meaning or highlight areas of interaction to our
-users. These may be presented individually or as part of a group with related information in
-components and patterns.
+## Overview
 
 <ExampleCodeBlock code={Overview} />
 
@@ -34,7 +29,3 @@ System Icons are symbols used to convey simple actions and functions, they are t
 encountered in products and help communicate metaphors at a glance.
 
 <ExampleCodeBlock code={SystemIconList} />
-
-## Images
-
-<ExampleCodeBlock code={Images} />

modules/react/icon/stories/Image.stories.mdx

@@ -0,0 +1,8 @@
+
+import {Basic} from './examples/Image/Basic';
+
+<Meta title="Images and Icons/Image" />
+
+## Images
+
+<ExampleCodeBlock code={Basic} />

modules/react/icon/stories/examples/AccentIconList.tsx → modules/react/icon/stories/examples/IconsList/AccentIconList.tsx

@@ -18,6 +18,8 @@ const styleOverrides = {
   }),
   iconGroupContainer: createStyles({
     flexWrap: 'wrap',
+    maxHeight: 300,
+    overflowY: 'scroll',
   }),
   individualIconContainer: createStyles({
     alignItems: 'center',

modules/react/icon/stories/examples/AppletIconList.tsx → modules/react/icon/stories/examples/IconsList/AppletIconList.tsx

@@ -18,6 +18,8 @@ const styleOverrides = {
   }),
   iconGroupContainer: createStyles({
     flexWrap: 'wrap',
+    maxHeight: 300,
+    overflowY: 'scroll',
   }),
   individualIconContainer: createStyles({
     alignItems: 'center',

modules/react/icon/stories/examples/IconList.tsx → modules/react/icon/stories/examples/IconsList/IconList.tsx

@@ -18,6 +18,8 @@ const styleOverrides = {
   }),
   firstChildContainer: createStyles({
     flexWrap: 'wrap',
+    maxHeight: 300,
+    overflowY: 'scroll',
   }),
   secondChildContainer: createStyles({
     alignItems: 'center',

modules/react/icon/stories/examples/Image/Basic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Image} from '@workday/canvas-kit-react/icon';
+
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    maxHeight: 300,
+  }),
+};
+
+export const Basic = () => {
+  return (
+    <Flex cs={styleOverrides.parentContainer}>
+      <Image height={200} src="https://i.imgur.com/f3FZv3H.jpeg" style={{objectFit: 'cover'}} />
+    </Flex>
+  );
+};

modules/react/icon/stories/stories.tsx

@@ -19,7 +19,7 @@ const graphicExample: CanvasGraphic = {
   tags: [],
 };
 
-storiesOf('Tokens/Icon', module)
+storiesOf('Images and Icons/Icon', module)
   .addParameters({component: AccentIcon})
   .addParameters({ReadmePath: 'react/icon'})
   .add('Accent Icon', () => (
@@ -41,7 +41,7 @@ storiesOf('Tokens/Icon', module)
     </div>
   ));
 
-storiesOf('Tokens/Icon', module)
+storiesOf('Images and Icons/Icon', module)
   .addParameters({component: AppletIcon})
   .add('Applet Icon', () => (
     <div className="story">
@@ -53,7 +53,7 @@ storiesOf('Tokens/Icon', module)
     </div>
   ));
 
-storiesOf('Tokens/Icon', module)
+storiesOf('Images and Icons/Icon', module)
   .addParameters({component: SystemIcon})
   .add('System Icon', () => (
     <div className="story">
@@ -103,7 +103,7 @@ storiesOf('Tokens/Icon', module)
     </div>
   ));
 
-storiesOf('Tokens/Icon', module)
+storiesOf('Images and Icons/Icon', module)
   .addParameters({component: Graphic})
   .add('Graphic', () => (
     <div className="story">