Updating docs for BaseImage and BaseImagePlaceholder

storybook/stories/components/AnimationCaret/AnimationCaret.stories.js

@@ -20,9 +20,6 @@ export default {
   },
   parameters: {
     viewMode: 'docs',
-    html: {
-      root: '#storyDecorator', // omit decorators from html output
-    },
     docs: {
       description: {
         component:
@@ -40,3 +37,8 @@ Inline.args = { text: 'Longer text to demonstrate text wrap', inline: true }
 Inline.decorators = [
   (Story) => `<div id="storyDecorator" class="w-64">${Story()}</div>`,
 ]
+Inline.parameters = {
+  html: {
+    root: '#storyDecorator',
+  },
+}

storybook/stories/components/BaseImage/BaseImage.stories.js

@@ -4,8 +4,35 @@ export default {
   title: 'Components/Base/BaseImage',
   excludeStories: /.*Data$/,
   argTypes: {
+    src: {
+      type: { name: 'string', required: true },
+    },
+    srcset: {
+      type: 'string',
+    },
+    alt: {
+      type: { name: 'string', required: true },
+    },
+    width: {
+      type: { name: 'number', required: true },
+    },
+    height: {
+      type: { name: 'number', required: true },
+    },
+    loading: {
+      type: 'string',
+      control: {
+        type: 'select',
+        options: ['lazy', 'eager'],
+      },
+      table: {
+        defaultValue: { summary: 'lazy' },
+      },
+    },
     objectFitClass: {
       type: 'string',
+      description:
+        'Use TailwindCSS object fit classes to specify how the image will scale within `BaseImagePlaceholder`',
       control: {
         type: 'select',
         options: [
@@ -20,22 +47,16 @@ export default {
         defaultValue: { summary: 'object-contain' },
       },
     },
-    loading: {
+    imageClass: {
       type: 'string',
-      control: {
-        type: 'select',
-        options: ['lazy', 'eager'],
-      },
-      table: {
-        defaultValue: { summary: 'lazy' },
-      },
+      description: 'Apply any CSS class directly to the image element',
     },
   },
   parameters: {
     docs: {
       description: {
         component:
-          'The BaseImage component is a simple `<img />` tag used to embed an image with object-fit classes and lazy loading properties.',
+          'The BaseImage component is a simple `<img />` tag wrapped in a `<div>` and is used to render an image with object-fit classes and lazy loading properties.',
       },
     },
   },
@@ -53,3 +74,23 @@ export const BaseImageData = {
 }
 export const Default = BaseImageTemplate.bind({})
 Default.args = BaseImageData
+
+export const LazyLoading = BaseImageTemplate.bind({})
+LazyLoading.args = BaseImageData
+LazyLoading.decorators = [
+  (Story) => `
+  <div class="max-w-full">
+    <div style="height:2500px">
+      Scroll down
+    </div>
+    <div id="storyDecorator">
+      ${Story()}
+    </div>
+  </div>
+  `,
+]
+LazyLoading.parameters = {
+  html: {
+    root: '#storyDecorator',
+  },
+}

storybook/stories/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js

@@ -5,6 +5,8 @@ export default {
   argTypes: {
     aspectRatio: {
       type: 'string',
+      description:
+        'Aspect ratio CSS class. View dropdown to see all options. More classes can be added in `/src/scss/_aspect-ratios.scss`',
       control: {
         type: 'select',
         options: [
@@ -32,6 +34,7 @@ export default {
     },
     theme: {
       type: 'string',
+      description: 'Theme color for the placeholder background.',
       control: {
         type: 'select',
         options: ['light-theme', 'dark-theme', 'transparent-theme'],
@@ -42,9 +45,12 @@ export default {
     },
     noLogo: {
       type: 'boolean',
+      description: 'If a JPL logo should appear when there is no image',
     },
     objectFitClass: {
       type: 'string',
+      description:
+        "Apply a TailwindCSS object fit class to `BaseImage` to specify how the image will scale within the placeholder's aspect ratio.",
       control: {
         type: 'select',
         options: [
@@ -63,13 +69,17 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The \`BaseImagePlaceholder\` component is designed to appear as a temporary stand-in to be replaced by an actual image.<br>
-          <ul>
-          <li>expects to contain an image as a child element in its primary slot</li>
-          <li>provides a lazy-loading block for the image to load into</li>
-          <li>can be used to maintain an aspect ratio</li>
-          <li>compatible with TailwindCSS classes, e.g. \`.rounded-lg\` to have round edges around the image. Think of it like a frame to put an image within.</li>
-          </ul>`,
+        component: `The \`BaseImagePlaceholder\` component is designed to appear as a temporary stand-in to be replaced by an actual image.
+
+- expects to contain an image as a child element in its primary slot
+- provides a lazy-loading block for the image to load into
+- can be used to maintain an aspect ratio
+- compatible with TailwindCSS classes, e.g. \`.rounded-lg\` to have round edges around the image. Think of it like a frame to put an image within.
+
+## Accessibility notes
+
+BaseImagePlaceholder is a presentational element consisting of a single \`div\` with a background image (JPL Logo), without semantic meaning, it simply prevents page load becoming janky by setting a 'placeholder' for the images that are yet to be loaded with loading="lazy" or LazySizes fallback. As such it should not need to meet color contrast requirements.
+          `,
       },
     },
   },
@@ -85,3 +95,28 @@ NoImage.args = {
   noLogo: false,
   noImage: true,
 }
+export const LazyLoading = BaseImagePlaceholderTemplate.bind({})
+LazyLoading.args = {
+  noLogo: false,
+}
+LazyLoading.decorators = [
+  (Story) => `
+  <div class="max-w-full">
+    <div style="height:2500px">
+      Scroll down
+    </div>
+    <div id="storyDecorator">
+      ${Story()}
+    </div>
+  </div>
+  `,
+]
+LazyLoading.parameters = {
+  html: {
+    root: '#storyDecorator',
+  },
+  docs: {
+    storyDescription:
+      "`BaseImagePlaceholder` is compatible with `BaseImage`'s lazy loading behavior.",
+  },
+}