feat: extend Video component / image/caption spacing fix

packages/example/src/data/nav-items.yaml

@@ -26,6 +26,8 @@
       path: /components/ImageCard
     - title: Tabs
       path: /components/Tabs
+    - title: Video
+      path: /components/Video
 - title: Contributing
   pages:
     - title: Agreement

packages/example/src/pages/components/Caption.mdx

@@ -12,7 +12,7 @@ The `<Caption>` component is typically used below images or videos. They will de
 
 #### Normal
 
-![Colors](images/colors.png)
+<Video src="/videos/hero-video.mp4" poster="/images/poster.png" />
 
 <Caption>
   This is a regular caption. It will attempt to respond to it's container

packages/example/src/pages/components/Video.mdx

@@ -0,0 +1,48 @@
+---
+title: Video
+---
+
+<PageDescription>
+
+The `<Video>` component can render a Vimeo player or a html video player.
+
+</PageDescription>
+
+## Example
+
+#### Vimeo
+
+<Video title="Eyes" vimeoId="310583077" />
+
+#### Video
+
+<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
+  <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
+</Video>
+
+## Code
+
+#### Vimeo
+
+```
+<Video title="Eyes" vimeoId="310583077" />
+```
+
+#### Video
+
+```
+<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
+  <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
+</Video>
+
+```
+
+## Props
+
+| property | propType                                                                     | required | default | description                                                                                                                                                                                                                                                                                                                              |
+| -------- | ---------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| vimeoId  | string                                                                       |          |         | To find your `vimeoId`, go to the Vimeo page and find the video you want to put on your website. Once it is loaded, look at the URL and look for the numbers that come after the slash (/).                                                                                                                                              |
+| src      | string                                                                       |          |         | Use the html `<video>` player with a local `.mp4` video                                                                                                                                                                                                                                                                                  |
+| title    | string                                                                       |          |         | Vimeo title                                                                                                                                                                                                                                                                                                                              |
+| poster   | string                                                                       |          |         | Provides an image to show before the video loads, only works with `src`                                                                                                                                                                                                                                                                  |
+| children | [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) |          |         | _non-vimeo only_ – Provide `.vtt` file in your static directory to make your videos more accessible. Then add a track element with a src pointing to it Check out [this simple tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#Tutorial_on_how_to_write_a_WebVTT_file) for getting started with writing vtt files. |

packages/example/static/videos/vtt/hero-video.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.500 --> 00:00:02.000
+This is a video text track (vtt) file.
+
+00:00:02.500 --> 00:00:04.300
+Use it to give your videos captions for accessibility.

packages/gatsby-theme-carbon/src/components/Caption/caption.scss

@@ -2,7 +2,17 @@
   @include carbon--type-style('body-short-01');
   padding-top: $spacing-03;
   margin-bottom: $spacing-06;
-  margin-top: -$spacing-06; // to account for default spacing below images
+}
+
+// Caption after images
+.gatsby-resp-image-wrapper + .#{$prefix}--caption,
+img + .#{$prefix}--caption {
+  margin-top: -$spacing-06;
+}
+
+// Caption after video
+.#{$prefix}--video + .#{$prefix}--caption {
+  margin-top: -$spacing-08;
 }
 
 // Responsive by default

packages/gatsby-theme-carbon/src/components/Video/Video.js

@@ -1,35 +1,63 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { settings } from 'carbon-components';
+import cx from 'classnames';
 
-const { prefix } = settings;
-
-export default class Vimeo extends React.Component {
-  static propTypes = {
-    vimeoId: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-  };
-
-  render() {
-    const { vimeoId, title } = this.props;
+import { video, vimeo } from './Video.module.scss';
 
+export const Video = ({ vimeoId, title, ...props }) => {
+  if (vimeoId) {
     return (
-      <div className={`${prefix}--video`}>
-        <div className="gatsby-resp-iframe-wrapper">
-          <div className="embedVideo-container">
-            <iframe
-              title={title}
-              src={`https://player.vimeo.com/video/${vimeoId}`}
-              width="640"
-              height="360"
-              frameBorder="0"
-              webkitallowfullscreen="true"
-              mozallowfullscreen="true"
-              allowFullScreen
-            />
-          </div>
+      <div className={cx(video, vimeo)}>
+        <div className="embedVideo-container">
+          <iframe
+            title={title}
+            src={`https://player.vimeo.com/video/${vimeoId}`}
+            width="640"
+            height="360"
+            frameBorder="0"
+            webkitallowfullscreen="true"
+            mozallowfullscreen="true"
+            allowFullScreen
+          />
         </div>
       </div>
     );
   }
-}
+
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <video className={video} controls type="video/mp4" {...props} />
+  );
+};
+
+Video.propTypes = {
+  vimeoId: PropTypes.string,
+  children: PropTypes.element,
+  src: PropTypes.string,
+  title: PropTypes.string,
+  poster: PropTypes.string,
+  videoSourceValidator: props => {
+    if (!props.vimeoId && !props.src) {
+      return new Error(
+        `The Video component requires either a 'vimeoId' Or a 'src' prop`
+      );
+    }
+    if (props.vimeoId && props.src) {
+      return new Error(
+        `You can only specify one source for the Video component. Use either the 'vimeoId' OR the 'src' prop.`
+      );
+    }
+    if (props.vimeoId && props.poster) {
+      return new Error(
+        `You can't specify a poster for vimeo videos. You can control the poster image from the Vimeo control panel`
+      );
+    }
+    if (props.vimeoId && props.children) {
+      return new Error(
+        `You can't specify children/tracks for vimeo videos. You can control the captions from the Vimeo control panel`
+      );
+    }
+  },
+};
+
+export default Video;

packages/gatsby-theme-carbon/src/components/Video/video.scss → packages/gatsby-theme-carbon/src/components/Video/Video.module.scss

@@ -1,9 +1,12 @@
-.#{$prefix}--video {
+@import '~carbon-components/scss/globals/scss/vars';
+
+.video {
   margin-bottom: $spacing-08;
+  width: 100%;
 }
 
 // iframe
-.gatsby-resp-iframe-wrapper {
+.vimeo {
   position: relative;
   height: 0px;
   overflow: hidden;

packages/gatsby-theme-carbon/src/styles/_page.scss

@@ -114,7 +114,9 @@ img {
   max-width: 100%;
 }
 
-.gatsby-resp-image-wrapper {
+.gatsby-resp-image-wrapper,
+img[src*='gif'],
+img[src*='svg'] {
   margin-bottom: $spacing-06;
 }
 

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -55,7 +55,6 @@ $font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
 @import '../components/ResourceCard/resource-card-group.scss';
 @import '../components/ArticleCard/article-card.scss';
 @import '../components/Aside/aside.scss';
-@import '../components/Video/video.scss';
 @import '../components/Code/code.scss';
 @import '../components/FeatureCard/feature-card.scss';
 @import '../components/ImageCard/image-card.scss';