feat: Support iframes in container media content

cloudscape-design · Aug 25, 2023 · f4ae284 · f4ae284
1 parent ebe2f92
commit f4ae284
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/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\`.
 

diff --git a/src/container/interfaces.ts b/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;
 

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -91,7 +91,8 @@
   // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
   img,
   video,
-  picture {
+  picture,
+  iframe {
     width: 100%;
     height: 100%;
     object-fit: cover;