feat(image-with-caption): support responsive image (#4312)

### Related Ticket(s) Refs #4300. ### Description Adds support for `<dds-image-item>` as child elements of `<dds-image-with-caption>`. To do that, adds support for `<slot>` as the child element of `<dds-image>`. The story of `<dds-image-with-caption>` is updated to demonsrate this new feature. ### Changelog **New** - Support for `<dds-image-item>` as child elements of `<dds-image-with-caption>`.
carbon-design-system · Oct 28, 2020 · 77026be · 77026be
1 parent 597356a
commit 77026be
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 22 deletions.
diff --git a/...eb-components/src/components/image-with-caption/__stories__/image-with-caption.stories.ts b/...eb-components/src/components/image-with-caption/__stories__/image-with-caption.stories.ts
@@ -8,21 +8,43 @@
  */
 
 import { html } from 'lit-element';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../image-with-caption';
 import readme from './README.stories.mdx';
 
+const images = {
+  '2:1': 'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+  '16:9': 'https://dummyimage.com/672x378/ee5396/161616&text=16:9',
+};
+
+const srcsets = {
+  'https://dummyimage.com/672x336/ee5396/161616&text=2:1': [
+    'https://dummyimage.com/320x160/ee5396/161616&text=2:1',
+    'https://dummyimage.com/400x200/ee5396/161616&text=2:1',
+    'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+  ],
+  'https://dummyimage.com/672x378/ee5396/161616&text=16:9': [
+    'https://dummyimage.com/320x180/ee5396/161616&text=16:9',
+    'https://dummyimage.com/400x225/ee5396/161616&text=16:9',
+    'https://dummyimage.com/672x378/ee5396/161616&text=16:9',
+  ],
+};
+
 export const Default = ({ parameters }) => {
   const { alt, defaultSrc, heading, copy, lightbox } = parameters?.props?.['dds-image-with-caption'] ?? {};
+  // TODO: See if we can fix unwanted `&` to `&amp` conversion upon changing the select knob
+  const srcset = srcsets[defaultSrc?.replace(/&amp;/, '&')];
   return html`
-    <dds-image-with-caption
-      alt="${alt}"
-      default-src="${defaultSrc}"
-      heading="${heading}"
-      copy="${copy}"
-      ?lightbox="${lightbox}"
-    ></dds-image-with-caption>
+    <dds-image-with-caption alt="${alt}" default-src="${defaultSrc}" heading="${heading}" copy="${copy}" ?lightbox="${lightbox}">
+      ${!srcset
+        ? undefined
+        : html`
+            <dds-image-item media="(min-width: 672px)" srcset="${srcset[2]}"> </dds-image-item>
+            <dds-image-item media="(min-width: 400px)" srcset="${srcset[1]}"> </dds-image-item>
+            <dds-image-item media="(min-width: 320px)" srcset="${srcset[0]}"> </dds-image-item>
+          `}
+    </dds-image-with-caption>
   `;
 };
 
@@ -32,11 +54,16 @@ export default {
     ...readme.parameters,
     knobs: {
       'dds-image-with-caption': ({ groupId }) => ({
-        alt: textNullable('Alt text', 'Image alt text', groupId),
-        defaultSrc: textNullable('Default image', 'https://dummyimage.com/672x336/ee5396/161616&text=2x1', groupId),
-        lightbox: boolean('Lightbox', true, groupId),
-        copy: textNullable('Copy', 'Lorem ipsum dolor sit amet', groupId),
-        heading: textNullable('Heading', 'This is a heading', groupId),
+        alt: textNullable('Alt text (alt)', 'Image alt text', groupId),
+        defaultSrc: select(
+          'Default image (default-src)',
+          images,
+          'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+          groupId
+        ),
+        lightbox: boolean('Lightbox (lightbox)', true, groupId),
+        copy: textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet', groupId),
+        heading: textNullable('Heading (heading)', 'This is a heading', groupId),
       }),
     },
   },

diff --git a/...ges/web-components/src/components/image-with-caption/__tests__/image-with-caption.test.ts b/...ges/web-components/src/components/image-with-caption/__tests__/image-with-caption.test.ts
@@ -31,7 +31,7 @@ describe('dds-image-with-caption', function() {
     it('should render with various attributes', async function() {
       render(
         template({
-          defaultSrc: 'https://dummyimage.com/672x336/ee5396/161616&text=2x1',
+          defaultSrc: 'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
           alt: 'Image alt text',
           copy: 'Lorem ipsum dolor sit amet',
           heading: 'This is a heading',

diff --git a/packages/web-components/src/components/image-with-caption/image-with-caption.ts b/packages/web-components/src/components/image-with-caption/image-with-caption.ts
@@ -111,14 +111,14 @@ class DDSImageWithCaption extends ModalRenderMixin(LitElement) {
       ${this.lightbox
         ? html`
             <button class="${prefix}--image-with-caption__image" @click="${this._handleClick}">
-              <dds-image alt="${this.alt}" default-src="${this.defaultSrc}"></dds-image>
+              <dds-image alt="${this.alt}" default-src="${this.defaultSrc}"><slot></slot></dds-image>
               <div class="${prefix}--image-with-caption__zoom-button">
                 ${ZoomIn20()}
               </div>
             </button>
           `
         : html`
-            <dds-image default-src="${this.defaultSrc}"></dds-image>
+            <dds-image default-src="${this.defaultSrc}"><slot></slot></dds-image>
           `}
       <p class="${prefix}--image__caption">
         ${this.heading}

diff --git a/packages/web-components/src/components/image/__stories__/image.stories.ts b/packages/web-components/src/components/image/__stories__/image.stories.ts
@@ -8,18 +8,43 @@
  */
 
 import { html } from 'lit-element';
+import { select } from '@storybook/addon-knobs';
 import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../image';
 import readme from './README.stories.mdx';
 
+const images = {
+  '2:1': 'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+  '16:9': 'https://dummyimage.com/672x378/ee5396/161616&text=16:9',
+};
+
+const srcsets = {
+  'https://dummyimage.com/672x336/ee5396/161616&text=2:1': [
+    'https://dummyimage.com/320x160/ee5396/161616&text=2:1',
+    'https://dummyimage.com/400x200/ee5396/161616&text=2:1',
+    'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+  ],
+  'https://dummyimage.com/672x378/ee5396/161616&text=16:9': [
+    'https://dummyimage.com/320x180/ee5396/161616&text=16:9',
+    'https://dummyimage.com/400x225/ee5396/161616&text=16:9',
+    'https://dummyimage.com/672x378/ee5396/161616&text=16:9',
+  ],
+};
+
 export const Default = ({ parameters }) => {
   const { alt, defaultSrc } = parameters?.props?.['dds-image'] ?? {};
+  // TODO: See if we can fix unwanted `&` to `&amp` conversion upon changing the select knob
+  const srcset = srcsets[defaultSrc?.replace(/&amp;/, '&')];
   return html`
     <dds-image alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}">
-      <dds-image-item media="(min-width: 672px)" srcset=${defaultSrc}></dds-image-item>
-      <dds-image-item media="(min-width: 400px)" srcset=${defaultSrc}></dds-image-item>
-      <dds-image-item media="(min-width: 320px)" srcset=${defaultSrc}></dds-image-item>
+      ${!srcset
+        ? undefined
+        : html`
+            <dds-image-item media="(min-width: 672px)" srcset="${srcset[2]}"> </dds-image-item>
+            <dds-image-item media="(min-width: 400px)" srcset="${srcset[1]}"> </dds-image-item>
+            <dds-image-item media="(min-width: 320px)" srcset="${srcset[0]}"> </dds-image-item>
+          `}
     </dds-image>
   `;
 };
@@ -43,7 +68,12 @@ export default {
     knobs: {
       'dds-image': ({ groupId }) => ({
         alt: textNullable('Alt text', 'Image alt text', groupId),
-        defaultSrc: textNullable('Default image', 'https://dummyimage.com/672x336/ee5396/161616&text=2x1', groupId),
+        defaultSrc: select(
+          'Default image (default-src)',
+          images,
+          'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
+          groupId
+        ),
       }),
     },
   },

diff --git a/packages/web-components/src/components/image/__tests__/image.test.ts b/packages/web-components/src/components/image/__tests__/image.test.ts
@@ -31,7 +31,7 @@ describe('dds-image', function() {
     it('should render with various attributes', async function() {
       render(
         template({
-          defaultSrc: 'https://dummyimage.com/672x336/ee5396/161616&text=2x1',
+          defaultSrc: 'https://dummyimage.com/672x336/ee5396/161616&text=2:1',
           alt: 'Image alt text',
         }),
         document.body

diff --git a/packages/web-components/src/components/image/image.ts b/packages/web-components/src/components/image/image.ts
@@ -37,6 +37,15 @@ class DDSImage extends LitElement {
     const { selectorItem } = this.constructor as typeof DDSImage;
     this._images = (target as HTMLSlotElement)
       .assignedNodes()
+      // Supports `<dds-image><slot></slot></dds-image>` rendered in shadow DOM
+      .reduce((acc, node) => {
+        if ((node as Element).tagName === 'SLOT') {
+          acc.push(...(node as HTMLSlotElement).assignedNodes());
+        } else {
+          acc.push(node);
+        }
+        return acc;
+      }, [] as Node[])
       .filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element).matches(selectorItem)) as HTMLElement[];
   }
 

diff --git a/packages/web-components/tests/snapshots/dds-image-with-caption.md b/packages/web-components/tests/snapshots/dds-image-with-caption.md
@@ -6,6 +6,8 @@
 
 ```
 <dds-image default-src="undefined">
+  <slot>
+  </slot>
 </dds-image>
 <p class="bx--image__caption">
   undefined
@@ -19,8 +21,10 @@
 <button class="bx--image-with-caption__image">
   <dds-image
     alt="Image alt text"
-    default-src="https://dummyimage.com/672x336/ee5396/161616&text=2x1"
+    default-src="https://dummyimage.com/672x336/ee5396/161616&text=2:1"
   >
+    <slot>
+    </slot>
   </dds-image>
   <div class="bx--image-with-caption__zoom-button">
   </div>