Default props

@pauliescanlon/gatsby-mdx-embed/.gitignore

@@ -18,6 +18,8 @@ pids
 components
 types
 utils
+context
+hooks
 gatsby-browser.d.ts
 gatsby-browser.js
 gatsby-ssr.d.ts

@pauliescanlon/gatsby-mdx-embed/hooks/useDefaultProps.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _PluginOptionsContext = _interopRequireDefault(require("../context/PluginOptionsContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var useDefaultProps = function useDefaultProps(componentKey, passedProps) {
+  // TODO: better TS typings
+  // The returning the same type as Props is not really true, many values that were optional there and might not exist are supplied now.
+  var pluginOptions = (0, _react.useContext)(_PluginOptionsContext.default);
+  var defaultProps = pluginOptions.defaultProps[componentKey];
+  return _objectSpread({}, defaultProps, {}, passedProps);
+};
+
+var _default = useDefaultProps;
+exports.default = _default;

@pauliescanlon/gatsby-mdx-embed/src/components/CodePen/CodePen.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface ICodePenProps {
   /** CodePen id */
@@ -9,21 +10,21 @@ export interface ICodePenProps {
   tabs?: string[] | 'js' | 'css' | 'scss' | 'less' | 'result'
 }
 
-export const CodePen: FunctionComponent<ICodePenProps> = ({
-  codePenId,
-  height = 500,
-  tabs = 'result'
-}: ICodePenProps) => (
-  <iframe
-    title={`codePen-${codePenId}`}
-    className="codepen-mdx-embed"
-    height={height}
-    style={{
-      width: '100%'
-    }}
-    scrolling="no"
-    src={`https://codepen.io/team/codepen/embed/${codePenId}?height=265&theme-id=default&default-tab=${tabs}`}
-    frameBorder="no"
-    allowFullScreen
-  />
-)
+export const CodePen: FunctionComponent<ICodePenProps> = props => {
+  // TODO: height and tabs return back as possibly undefined types, fix in useDefaultProps with TS...somehow
+  const { codePenId, height, tabs } = useDefaultProps('CodePen', props)
+  return (
+    <iframe
+      title={`codePen-${codePenId}`}
+      className="codepen-mdx-embed"
+      height={height}
+      style={{
+        width: '100%'
+      }}
+      scrolling="no"
+      src={`https://codepen.io/team/codepen/embed/${codePenId}?height=265&theme-id=default&default-tab=${tabs}`}
+      frameBorder="no"
+      allowFullScreen
+    />
+  )
+}

@pauliescanlon/gatsby-mdx-embed/src/components/CodeSandbox/CodeSandbox.tsx

@@ -7,7 +7,7 @@ export interface ICodeSandboxProps {
 
 export const CodeSandbox: FunctionComponent<ICodeSandboxProps> = ({
   codeSandboxId
-}: ICodeSandboxProps) => (
+}) => (
   <iframe
     title={`codeSandbox-${codeSandboxId}`}
     className="codesandbox-mdx-embed"

@pauliescanlon/gatsby-mdx-embed/src/components/Flickr/Flickr.tsx

@@ -5,9 +5,7 @@ export interface IFlickrProps {
   flickrLink: string
 }
 
-export const Flickr: FunctionComponent<IFlickrProps> = ({
-  flickrLink
-}: IFlickrProps) => (
+export const Flickr: FunctionComponent<IFlickrProps> = ({ flickrLink }) => (
   <span
     className="flickr-embed-mdx"
     data-flickr-embed="true"

@pauliescanlon/gatsby-mdx-embed/src/components/Gist/Gist.tsx

@@ -15,9 +15,7 @@ interface IGistState {
   file?: string
 }
 
-export const Gist: FunctionComponent<IGistProps> = ({
-  gistLink
-}: IGistProps) => {
+export const Gist: FunctionComponent<IGistProps> = ({ gistLink }) => {
   const [gistResponse, setGistResponse] = useState<IGistState>({
     isLoading: true,
     div: '',

@pauliescanlon/gatsby-mdx-embed/src/components/Instagram/Instagram.tsx

@@ -7,7 +7,7 @@ export interface IInstagramProps {
 
 export const Instagram: FunctionComponent<IInstagramProps> = ({
   instagramId
-}: IInstagramProps) => (
+}) => (
   <blockquote
     className="instagram-media instagram-mdx-embed"
     data-instgrm-version="12"

@pauliescanlon/gatsby-mdx-embed/src/components/Pinterest/Pin.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface IPinProps {
   /** Pinterest id */
@@ -7,14 +8,14 @@ export interface IPinProps {
   size: 'small' | 'medium' | 'large'
 }
 
-export const Pin: FunctionComponent<IPinProps> = ({
-  pinId,
-  size = 'small'
-}: IPinProps) => (
-  <a
-    className="pinterest-pin pinterest-pin-mdx-embed"
-    data-pin-do="embedPin"
-    data-pin-width={size}
-    href={`https://www.pinterest.com/pin/${pinId}`}
-  />
-)
+export const Pin: FunctionComponent<IPinProps> = props => {
+  const { pinId, size } = useDefaultProps('Pin', props)
+  return (
+    <a
+      className="pinterest-pin pinterest-pin-mdx-embed"
+      data-pin-do="embedPin"
+      data-pin-width={size}
+      href={`https://www.pinterest.com/pin/${pinId}`}
+    />
+  )
+}

@pauliescanlon/gatsby-mdx-embed/src/components/Pinterest/PinterestBoard.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface IPinterestBoardProps {
   /** Pinterest link */
@@ -13,19 +14,20 @@ export interface IPinterestBoardProps {
   variant?: 'board' | 'user'
 }
 
-export const PinterestBoard: FunctionComponent<IPinterestBoardProps> = ({
-  pinterestLink,
-  width = 400,
-  height = 250,
-  imageWidth = 80,
-  variant = 'board'
-}: IPinterestBoardProps) => (
-  <a
-    className="pinterest-board pinterest-board-mdx-embed"
-    data-pin-do={`embed${variant.charAt(0).toUpperCase()}${variant.slice(1)}`}
-    data-pin-board-width={width}
-    data-pin-scale-height={height}
-    data-pin-scale-width={imageWidth}
-    href={`https://www.pinterest.com/${pinterestLink}`}
-  />
-)
+export const PinterestBoard: FunctionComponent<IPinterestBoardProps> = props => {
+  const { pinterestLink, width, height, imageWidth, variant } = useDefaultProps(
+    'PinterestBoard',
+    props
+  )
+  // TODO: TypeScript shows warnings about possibly undefined because the returntype of useDefaultProps is not typed to always include defaults (it does)
+  return (
+    <a
+      className="pinterest-board pinterest-board-mdx-embed"
+      data-pin-do={`embed${variant.charAt(0).toUpperCase()}${variant.slice(1)}`}
+      data-pin-board-width={width}
+      data-pin-scale-height={height}
+      data-pin-scale-width={imageWidth}
+      href={`https://www.pinterest.com/${pinterestLink}`}
+    />
+  )
+}

@pauliescanlon/gatsby-mdx-embed/src/components/Pinterest/PinterestFollowButton.tsx

@@ -7,7 +7,7 @@ export interface IPinterestFollowButtonProps {
 
 export const PinterestFollowButton: FunctionComponent<IPinterestFollowButtonProps> = ({
   username
-}: IPinterestFollowButtonProps) => (
+}) => (
   <a
     className="pinterest-follow-button pinterest-follow-button-mdx-embed"
     data-pin-do="buttonFollow"

@pauliescanlon/gatsby-mdx-embed/src/components/SoundCloud/SoundCloud.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface ISoundCloudProps {
   /** SoundCloud link */
@@ -15,22 +16,26 @@ export interface ISoundCloudProps {
   color?: string
 }
 
-export const SoundCloud: FunctionComponent<ISoundCloudProps> = ({
-  soundCloudLink,
-  width = '100%',
-  height = 'auto',
-  autoPlay = false,
-  visual = false,
-  color
-}: ISoundCloudProps) => (
-  <iframe
-    title={`sound-cloud-${soundCloudLink}`}
-    className="soundcloud-mdx-embed"
-    width={width}
-    height={height}
-    scrolling="no"
-    frameBorder="no"
-    allow="autoplay"
-    src={`https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/${soundCloudLink}&color=%23${color}&auto_play=${autoPlay}&visual=${visual}`}
-  />
-)
+export const SoundCloud: FunctionComponent<ISoundCloudProps> = props => {
+  // Does color need a default? It currently has none and is listed as optional prop.
+  const {
+    soundCloudLink,
+    width,
+    height,
+    autoPlay,
+    visual,
+    color
+  } = useDefaultProps('SoundCloud', props)
+  return (
+    <iframe
+      title={`sound-cloud-${soundCloudLink}`}
+      className="soundcloud-mdx-embed"
+      width={width}
+      height={height}
+      scrolling="no"
+      frameBorder="no"
+      allow="autoplay"
+      src={`https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/${soundCloudLink}&color=%23${color}&auto_play=${autoPlay}&visual=${visual}`}
+    />
+  )
+}

@pauliescanlon/gatsby-mdx-embed/src/components/Spotify/Spotify.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface ISpotifyProps {
   /** Spotify link */
@@ -9,18 +10,17 @@ export interface ISpotifyProps {
   height?: number | string
 }
 
-export const Spotify: FunctionComponent<ISpotifyProps> = ({
-  spotifyLink,
-  width = 320,
-  height = 380
-}: ISpotifyProps) => (
-  <iframe
-    title={`spotify-${spotifyLink}`}
-    className="spotify-mdx-embed"
-    src={`https://open.spotify.com/embed/${spotifyLink}`}
-    width={width}
-    height={height}
-    frameBorder="0"
-    allow="encrypted-media"
-  />
-)
+export const Spotify: FunctionComponent<ISpotifyProps> = props => {
+  const { spotifyLink, width, height } = useDefaultProps('Spotify', props)
+  return (
+    <iframe
+      title={`spotify-${spotifyLink}`}
+      className="spotify-mdx-embed"
+      src={`https://open.spotify.com/embed/${spotifyLink}`}
+      width={width}
+      height={height}
+      frameBorder="0"
+      allow="encrypted-media"
+    />
+  )
+}

@pauliescanlon/gatsby-mdx-embed/src/components/Twitch/Twitch.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import { getPadding } from '../../utils'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface ITwitchProps {
   /** Twitch id */
@@ -14,13 +15,9 @@ export interface ITwitchProps {
   autoPlay: boolean
 }
 
-export const Twitch: FunctionComponent<ITwitchProps> = ({
-  twitchId,
-  autoPlay = false,
-  skipTo = { h: 0, m: 0, s: 0 }
-}: ITwitchProps) => {
+export const Twitch: FunctionComponent<ITwitchProps> = props => {
+  const { twitchId, autoPlay, skipTo } = useDefaultProps('Twitch', props)
   const { h, m, s } = skipTo
-
   return (
     <div
       className="twitch-mdx-embed"

@pauliescanlon/gatsby-mdx-embed/src/components/Twitter/Tweet.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+import useDefaultProps from '../../hooks/useDefaultProps'
 
 export interface ITweetProps {
   /** Tweet link */
@@ -9,18 +10,21 @@ export interface ITweetProps {
   align?: 'left' | 'center' | 'right'
 }
 
-export const Tweet: FunctionComponent<ITweetProps> = ({
-  tweetLink,
-  theme = 'light',
-  align = 'left'
-}: ITweetProps) => (
-  <div className="twitter-tweet-mdx-embed" style={{ overflow: 'auto' }}>
-    <blockquote className="twitter-tweet" data-theme={theme} data-align={align}>
-      <a href={`https://twitter.com/${tweetLink}?ref_src=twsrc%5Etfw`}>
-        {typeof window !== 'undefined' && !(window as any).twttr
-          ? 'Loading'
-          : ''}
-      </a>
-    </blockquote>
-  </div>
-)
+export const Tweet: FunctionComponent<ITweetProps> = props => {
+  const { tweetLink, theme, align } = useDefaultProps('Tweet', props)
+  return (
+    <div className="twitter-tweet-mdx-embed" style={{ overflow: 'auto' }}>
+      <blockquote
+        className="twitter-tweet"
+        data-theme={theme}
+        data-align={align}
+      >
+        <a href={`https://twitter.com/${tweetLink}?ref_src=twsrc%5Etfw`}>
+          {typeof window !== 'undefined' && !(window as any).twttr
+            ? 'Loading'
+            : ''}
+        </a>
+      </blockquote>
+    </div>
+  )
+}