diff --git a/storybook/stories/components/AnimationCaret/AnimationCaret.stories.js b/storybook/stories/components/AnimationCaret/AnimationCaret.stories.js
index 6e783ea4..862cd685 100644
--- a/storybook/stories/components/AnimationCaret/AnimationCaret.stories.js
+++ b/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) => `
` 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) => `
+
+
+ Scroll down
+
+
+ ${Story()}
+
+
+ `,
+]
+LazyLoading.parameters = {
+ html: {
+ root: '#storyDecorator',
+ },
+}
diff --git a/storybook/stories/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js b/storybook/stories/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
index cb779d2a..f98c1cb6 100644
--- a/storybook/stories/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
+++ b/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.
-
- - 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.
-
`,
+ 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) => `
+
+
+ Scroll down
+
+
+ ${Story()}
+
+
+ `,
+]
+LazyLoading.parameters = {
+ html: {
+ root: '#storyDecorator',
+ },
+ docs: {
+ storyDescription:
+ "`BaseImagePlaceholder` is compatible with `BaseImage`'s lazy loading behavior.",
+ },
+}