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

Author: talohana

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, mdastToHtml } 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');
 

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>`;
 };