Merge branch 'main' into feature/5-remove-ie-support

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

@@ -4,11 +4,9 @@ export const BaseImageTemplate = ({
   alt,
   width,
   height,
-  loading,
   imageClass,
   objectFitClass,
 }) => {
-  if (!loading) loading = 'lazy'
   return `<div>
   <img
     class="BaseImage ${imageClass} ${objectFitClass} lazyload"
@@ -17,7 +15,7 @@ export const BaseImageTemplate = ({
     alt="${alt}"
     width="${width}"
     height="${height}"
-    loading="${loading}"
+    loading="lazy"
   />
 </div>`
 }

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

@@ -4,8 +4,25 @@ 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 },
+    },
     objectFitClass: {
       type: 'string',
+      description:
+        'Use TailwindCSS object fit classes to specify how the image will scale within `BaseImagePlaceholder`',
       control: {
         type: 'select',
         options: [
@@ -20,22 +37,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.',
       },
     },
   },
@@ -47,9 +58,28 @@ export const BaseImageData = {
   alt: 'Alt text for image',
   width: '800',
   height: '400',
-  loading: 'lazy',
   imageClass: '',
   objectFitClass: 'object-contain',
 }
 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.",
+  },
+}