fix(Markdown): allow flexible vimeo videos in markdown (#853)

Updated markdown iframe override to support vimeo videos
Codecademy · Jun 30, 2020 · 774074c · 774074c
1 parent b003a27
commit 774074c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -4,3 +4,4 @@ node_modules
 **/tmp
 packages/gamut-icons/src/icons
 packages/gamut-styles/**/*.d.ts
+packages/styleguide/stories/Core/Atoms/Markdown/*.md
diff --git a/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx
@@ -9,8 +9,14 @@ export interface IframeProps extends HTMLAttributes<HTMLIFrameElement> {
   height?: number;
 }
 
+const YOUTUBE_PATTERN = /youtu(be\.com|\.be)/;
+const VIMEO_PATTERN = /player\.vimeo\.com/;
+
 const Iframe: FunctionComponent<IframeProps> = (props) => {
-  if (props.src && props.src.match(/youtu(be\.com|\.be)/)) {
+  if (
+    props.src &&
+    [YOUTUBE_PATTERN, VIMEO_PATTERN].some((pattern) => pattern.test(props.src))
+  ) {
     const { width = 16, height = 9 } = props;
     const ratioPadding = (
       (Math.round(height) / Math.round(width)) *

diff --git a/packages/styleguide/stories/Core/Atoms/Markdown/Markdown.stories.mdx b/packages/styleguide/stories/Core/Atoms/Markdown/Markdown.stories.mdx
@@ -5,7 +5,11 @@ import { text, select } from '@storybook/addon-knobs';
 import exampleMarkdown from './markdown-example.md';
 import { customText } from './helpers';
 
-<Meta title="Core|Atoms/Markdown" component={Markdown} />
+<Meta
+  title="Core|Atoms/Markdown"
+  component={Markdown}
+  parameters={{ knobs: { escapeHTML: false } }}
+/>
 
 # Markdown
 

diff --git a/packages/styleguide/stories/Core/Atoms/Markdown/markdown-example.md b/packages/styleguide/stories/Core/Atoms/Markdown/markdown-example.md
@@ -312,3 +312,7 @@ Use the `printf()` function.
 | col 1 is |  left-aligned | $1600 |
 | col 2 is |    centered   |   $12 |
 | col 3 is | right-aligned |    $1 |
+
+### Iframes
+
+<iframe src="https://player.vimeo.com/video/145702525?byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>