Merge pull request #163 from WebDevStudios/feature/component-handling

Feature/component handling

Author: Greg Rickaby

components/atoms/TwitterEmbed/TwitterEmbed.js

@@ -0,0 +1,41 @@
+import RichText from '@/components/atoms/RichText'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import {TwitterTweetEmbed} from 'react-twitter-embed'
+import styles from './TwitterEmbed.module.css'
+
+/**
+ * TwitterEmbed Block
+ *
+ * @author WebDevStudios
+ * @param {object} props           TwitterEmbed component props.
+ * @param {string} props.className Optional className.
+ * @param {string} props.caption   Optional caption.
+ * @param {string} props.url       The full URL to the video.
+ * @return {Element}               The TwitterEmbed component.
+ */
+export default function TwitterEmbed({className, caption, url}) {
+  const tweetURL = url ? url.split('/') : '' // Split URL string into array.
+  const tweetId = tweetURL ? tweetURL[tweetURL.length - 1] : '' // Get ID from url array.
+
+  return (
+    <>
+      {!!tweetId && (
+        <div className={cn(styles.twitterEmbed, className)}>
+          <TwitterTweetEmbed tweetId={tweetId} />
+          {!!caption && (
+            <div className={styles.caption}>
+              <RichText tag="span">{caption}</RichText>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+TwitterEmbed.propTypes = {
+  className: PropTypes.string,
+  caption: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/atoms/TwitterEmbed/TwitterEmbed.module.css

@@ -0,0 +1,7 @@
+.twitterEmbed {
+  @apply block;
+
+  & .caption {
+    @apply text-center text-xs pt-12;
+  }
+}

components/atoms/TwitterEmbed/TwitterEmbed.stories.mdx

@@ -0,0 +1,18 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import TwitterEmbed from '.'
+
+<Meta title="Components/Atoms/TwitterEmbed" component={TwitterEmbed} />
+
+# Twitter Embed
+
+Use this to display a tweet from a timeline
+
+<Canvas>
+  <Story name="Component">
+    <TwitterEmbed
+      url="https://twitter.com/webdevstudios/status/1351167649418514432"
+      caption="This is an optional caption"
+    />
+  </Story>
+</Canvas>

components/atoms/TwitterEmbed/index.js

@@ -0,0 +1 @@
+export {default} from './TwitterEmbed'

components/atoms/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,70 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import styles from './VideoEmbed.module.css'
+
+/**
+ * VideoEmbed Block
+ *
+ * @author WebDevStudios
+ * @param {object} props           VideoEmbed component props.
+ * @param {string} props.className Optional className.
+ * @param {string} props.url       The full URL to the video.
+ * @param {string} props.type      The type of video (youtube, vimeo).
+ * @param {string} props.caption   Optional caption.
+ * @return {Element}               The VideoEmbed component.
+ */
+export default function VideoEmbed({className, url, type, caption}) {
+  /**
+   * Create URL embed for YouTube or Vimeo videos.
+   *
+   * @param {string} url The video URL.
+   */
+  function createVideoUrl(url) {
+    if (!url) {
+      return false
+    }
+
+    let videoUrl, videoId
+
+    videoId = url.indexOf('v=') !== -1 ? url.split('v=') : url.split('/')
+    videoId = videoId[videoId.length - 1]
+
+    videoUrl = url.includes('vimeo')
+      ? `//player.vimeo.com/video/${videoId}`
+      : `//youtube.com/embed/${videoId}`
+
+    return videoUrl
+  }
+
+  return (
+    <div className={cn(styles.videoEmbed, className)}>
+      <div className={styles.wrapper}>
+        <iframe
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          frameBorder="0"
+          height="315"
+          loading="lazy"
+          src={createVideoUrl(url)}
+          width="560"
+          title={`Embedded content from ${type}`}
+          className={className}
+        ></iframe>
+      </div>
+      {!!caption && (
+        <div className={styles.caption}>
+          <RichText tag="span">{caption}</RichText>
+        </div>
+      )}
+    </div>
+  )
+}
+
+VideoEmbed.propTypes = {
+  className: PropTypes.string,
+  caption: PropTypes.string,
+  type: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/atoms/VideoEmbed/VideoEmbed.module.css

@@ -0,0 +1,17 @@
+.videoEmbed {
+  @apply mb-24;
+
+  & .wrapper {
+    @apply w-full relative overflow-hidden;
+
+    padding-top: 56.25%;
+  }
+
+  & iframe {
+    @apply absolute w-full h-full inset-0;
+  }
+
+  & .caption {
+    @apply text-center text-xs pt-12;
+  }
+}

components/atoms/VideoEmbed/VideoEmbed.stories.mdx

@@ -0,0 +1,35 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import VideoEmbed from '.'
+
+<Meta title="Components/Atoms/VideoEmbed" component={VideoEmbed} />
+
+# Video Embed
+
+Use this to display a video in iFrame, pass the YouTube video ID to the `VideoEmbed` component.
+
+<Canvas>
+  <Story name="Component">
+    <VideoEmbed
+      url="https://www.youtube.com/watch?v=ebQbQufIb0E"
+      caption="This is an optional caption"
+    />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<VideoEmbed />` props in the [Canvas tab of the Controls story](?path=/story/design-system-organisims-videoembed--controls).
+
+export const Template = (args) => <VideoEmbed {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      url: 'https://www.youtube.com/watch?v=ebQbQufIb0E'
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/VideoEmbed/index.js

@@ -0,0 +1 @@
+export {default} from './VideoEmbed'