feat(CodePen): add support for height & width options

MichaelDeBoey · Oct 16, 2020 · e90eb17 · e90eb17
1 parent 94e0a3e
commit e90eb17
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/__tests__/transformers/CodePen.js b/src/__tests__/transformers/CodePen.js
@@ -1,8 +1,6 @@
 import cases from 'jest-in-case';
-
 import plugin from '../../';
 import { getHTML, shouldTransform } from '../../transformers/CodePen';
-
 import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
 
 cases(
@@ -79,13 +77,24 @@ cases(
 );
 
 test('Gets the correct CodePen iframe', () => {
-  const html = getHTML('https://codepen.io/team/codepen/pen/PNaGbb');
+  const html = getHTML('https://codepen.io/team/codepen/pen/PNaGbb', {});
 
   expect(html).toMatchInlineSnapshot(
     `"<iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:100%; height:300px;\\"></iframe>"`
   );
 });
 
+test('Gets the correct CodePen iframe with custom dimensions', () => {
+  const html = getHTML('https://codepen.io/team/codepen/pen/PNaGbb', {
+    width: '50%',
+    height: '50%',
+  });
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:50%; height:50%;\\"></iframe>"`
+  );
+});
+
 test('Plugin can transform CodePen links', async () => {
   const markdownAST = getMarkdownASTForFile('CodePen');
 

diff --git a/src/transformers/CodePen.js b/src/transformers/CodePen.js
@@ -7,8 +7,8 @@ export const shouldTransform = (url) => {
   );
 };
 
-export const getHTML = (url) => {
+export const getHTML = (url, { width = '100%', height = '300px' }) => {
   const iframeUrl = url.replace('/pen/', '/embed/preview/');
 
-  return `<iframe src="${iframeUrl}" style="width:100%; height:300px;"></iframe>`;
+  return `<iframe src="${iframeUrl}" style="width:${width}; height:${height};"></iframe>`;
 };