Checklist

• Include a description of your pull request and instructions for the reviewer to verify your work.
• Link to the issue if this PR is issue-specific. Fixes Consider adding BaseImagePlaceholder to BlockIframe #129
• Create/update the corresponding story if this includes a UI component.
• Create/update documentation. If not included, tell us why.
• List the environments / browsers in which you tested your changes.
• Tests, linting, or other required checks are passing.
• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
• PR has been tagged with a SemVer label and a general category label, or skip-changelog.
  • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
  • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

This PR adds responsive embeds to BlockIframeEmbed using the same strategy as in WWW. To keep this clean, it made sense to create a new BaseIframe component and use that within certain contexts in BlockIframeEmbed.

• Adds BaseIframe w/ stories. I think BaseIframe falls into the "mixin" category, so I think we can rename it when implementing Rename and reorganize components #130.
• Renames /src/scss/components/_BlockIframeEmbed.scss to _BaseIframe.scss as the class applies directly to the iframe, not the block
• Modifies BlockIframeEmbed to use BaseImagePlaceholder with BaseIframe to default to a responsive 16:9 embed. If a height is provided, then it will override the aspect ratio.
• I also updated all of the iframe examples to something a little less asset heavy.

Breaking changes / Migration notes

BlockIframeEmbed is now responsive for 16:9 embeds! However, you will need to make the following changes to your project:

• The template for BlockIframeEmbed has changed and you will need to update the markup in your projects.
• The scss partial for BlockIframeEmbed has been renamed to _BaseIframe.scss, so you will need to update your scss imports if you are using Explorer 1 a la carte.

Instructions to test

Note: dist has already been rebuilt.

1. npm run storybook
2. check the Components > Base > BaseIframe stories
3. check the Components > Blocks > BlockIframeEmbed stories

Tested in the following environments/browsers:

Operating System

• macOS
• iOS
• iPadOS
• Windows

Browser

• Chrome
• Firefox ESR
• Firefox
• Safari
• Edge