feat: Support iframes in container media content

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

@@ -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" />,
+      <iframe key="iframe" srcDoc="<h1>This is an iframe</h1>"></iframe>,
     ],
     width: ['', '33%', '50%'],
   },

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

@@ -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" />,
+      <iframe key="iframe" srcDoc="<h1>This is an iframe</h1>"></iframe>,
     ],
     height: ['', 100, 200, 300],
   },

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

@@ -5007,7 +5007,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;