feat: Support iframes in container media content (#1487)

pages/container/common.tsx

@@ -1,13 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
+import { useState } from 'react';
 import { ContainerProps } from '~components/container';
 import Container from '~components/container';
 import Header from '~components/header';
 import Link from '~components/link';
 import SpaceBetween from '~components/space-between';
 import Button from '~components/button';
 
+let nextIframeIndex = 0;
+export const PermutationIframe = () => {
+  const [iframeIndex] = useState(() => nextIframeIndex++);
+  return <iframe title={`iframe ${iframeIndex}`} srcDoc="<h1>This is an iframe</h1>"></iframe>;
+};
+
 export const PermutationContainer = ({ permutation }: { permutation: ContainerProps.Media }) => {
   return (
     <Container

pages/container/media-side-permutations.page.tsx

@@ -11,7 +11,7 @@ import image169 from './images/16-9.png';
 import image43 from './images/4-3.png';
 import image916 from './images/9-16.png';
 import imageVideo from './images/video.png';
-import { PermutationContainer } from './common';
+import { PermutationContainer, PermutationIframe } from './common';
 
 const permutations = createPermutations<ContainerProps.Media>([
   {
@@ -20,6 +20,7 @@ const permutations = createPermutations<ContainerProps.Media>([
       <img key={'image43'} src={image43} alt="placeholder" />,
       <img key={'image916'} src={image916} alt="placeholder" />,
       <img key={'imageVideo'} src={imageVideo} alt="placeholder" />,
+      <PermutationIframe key="iframe" />,
     ],
     width: ['', '33%', '50%'],
   },

pages/container/media-top-permutations.page.tsx

@@ -11,7 +11,7 @@ import image169 from './images/16-9.png';
 import image43 from './images/4-3.png';
 import image916 from './images/9-16.png';
 import imageVideo from './images/video.png';
-import { PermutationContainer } from './common';
+import { PermutationContainer, PermutationIframe } from './common';
 
 const permutations = createPermutations<ContainerProps.Media>([
   {
@@ -20,6 +20,7 @@ const permutations = createPermutations<ContainerProps.Media>([
       <img key={'image43'} src={image43} alt="placeholder" />,
       <img key={'image916'} src={image916} alt="placeholder" />,
       <img key={'imageVideo'} src={imageVideo} alt="placeholder" />,
+      <PermutationIframe key="iframe" />,
     ],
     height: ['', 100, 200, 300],
   },

src/__a11y__/axe.ts

@@ -29,6 +29,9 @@ export const spec: Axe.Spec = {
   rules: [
     // Skip the empty table header rule which fails for the single selection table header
     { id: 'empty-table-header', enabled: false },
+    // Skip the rule which enforces that axe is included in all iframes, which fails on
+    // very basic iframes on media container tests
+    { id: 'frame-tested', enabled: false },
   ],
 };
 

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -5014,7 +5014,7 @@ all containers to the height of the longest one, to avoid extra vertical scroll
     Object {
       "description": "Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.
 You can define different positions and sizes for the media element within the container.
-* \`content\` - Use this slot to render your media element. We support \`img\`, \`video\` and \`picture\` elements.
+* \`content\` - Use this slot to render your media element. We support \`img\`, \`video\`, \`picture\`, and \`iframe\` elements.
 
 * \`position\` - Defines the media slot's position within the container. Defaults to \`top\`.
 

src/container/interfaces.ts

@@ -19,7 +19,7 @@ export interface ContainerProps extends BaseComponentProps {
    * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.
    * You can define different positions and sizes for the media element within the container.
    *
-   * * `content` - Use this slot to render your media element. We support `img`, `video` and `picture` elements.
+   * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.
    *
    * * `position` - Defines the media slot's position within the container. Defaults to `top`.
    *
@@ -72,9 +72,7 @@ export interface ContainerProps extends BaseComponentProps {
 export namespace ContainerProps {
   export interface Media {
     /**
-     *
-     * Use this slot to render your media element. We support `img`, `video` and `picture` elements.
-     *
+     * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.
      */
     content: React.ReactNode;
 

src/container/styles.scss

@@ -98,6 +98,13 @@
     object-position: center;
   }
 
+  // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
   &-top {
     max-height: 66%;
     border-top-left-radius: awsui.$border-radius-container;