feat(Embed|Video): add components

docs/src/examples/components/Embed/Types/EmbedExample.shorthand.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { Embed, Flex, Text } from '@stardust-ui/react'
+
+const EmbedExample = () => (
+  <Flex column>
+    <Embed
+      placeholder="https://github.com/bower-media-samples/big-buck-bunny-480p-5s/master/poster.jpg"
+      src="https://github.com/bower-media-samples/big-buck-bunny-1080p-5s/master/video.mp4"
+      playing
+      variables={{ height: '400px', width: '711.11px' }}
+    />
+    <Text>(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org</Text>
+  </Flex>
+)
+
+export default EmbedExample

docs/src/examples/components/Embed/Types/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Embed"
+      description="A basic embedded GIF."
+      examplePath="components/Embed/Types/EmbedExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Embed/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import Types from './Types'
+
+const EmbedExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default EmbedExamples

docs/src/examples/components/Video/Types/VideoExample.shorthand.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Video, Text, Flex } from '@stardust-ui/react'
+
+const VideoExample = () => (
+  <Flex column>
+    <Video
+      src="https://github.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4"
+      variables={{ width: '600px' }}
+    />
+    <Text>(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org</Text>
+  </Flex>
+)
+
+export default VideoExample

docs/src/examples/components/Video/Types/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Video."
+      examplePath="components/Video/Types/VideoExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Video/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import Types from './Types'
+
+const VideoExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default VideoExamples

packages/react/src/components/Embed/Embed.tsx

@@ -0,0 +1,145 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import {
+  createShorthandFactory,
+  UIComponent,
+  UIComponentProps,
+  commonPropTypes,
+  applyAccessibilityKeyHandlers,
+  customPropTypes,
+} from '../../lib'
+import { embedBehavior } from '../../lib/accessibility'
+import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
+import Image from '../Image/Image'
+import Video from '../Video/Video'
+import Box from '../Box/Box'
+import * as _ from 'lodash'
+
+import { ReactProps, ShorthandValue } from '../../types'
+
+export interface EmbedProps extends UIComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default embedBehavior
+   * */
+  accessibility?: Accessibility
+
+  /** Video source URL. */
+  src?: string
+
+  /** Image source URL for when video isn't playing */
+  placeholder?: string
+
+  /** whether the gif should be playing */
+  playing?: boolean
+
+  iframe?: ShorthandValue
+
+  video?: ShorthandValue
+}
+
+export interface EmbedState {
+  isPlaying: boolean
+}
+
+/**
+ * A GIF is a muted segment of a video
+ * @accessibility
+ * If GIF should be visible to screen readers, textual representation needs to be provided in 'alt' or 'title' property.
+ *
+ * Other considerations:
+ *  - when alt and title property are empty, then Narrator in scan mode navigates to the gif and narrates it as empty paragraph
+ */
+class Embed extends UIComponent<ReactProps<EmbedProps>, EmbedState> {
+  static create: Function
+
+  static className = 'ui-embed'
+
+  static displayName = 'Embed'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      children: false,
+      content: false,
+    }),
+    iframe: customPropTypes.itemShorthand,
+    playing: PropTypes.bool,
+    poster: PropTypes.string,
+    src: PropTypes.string,
+    video: customPropTypes.itemShorthand,
+  }
+
+  static defaultProps = {
+    as: 'span',
+    accessibility: embedBehavior as Accessibility,
+  }
+
+  public state = {
+    isPlaying: this.props.playing,
+  }
+
+  shouldComponentUpdate(nextProps: EmbedProps, nextState: EmbedState): boolean {
+    if (nextProps.playing !== this.props.playing) {
+      this.setState({ isPlaying: nextProps.playing })
+      return false
+    }
+
+    return !_.isEqual(this.props, nextProps) || !_.isEqual(nextState, this.state)
+  }
+
+  renderComponent({ ElementType, classes, accessibility, unhandledProps, styles, variables }) {
+    const { placeholder, src, video, iframe } = this.props
+
+    return (
+      <ElementType
+        {...unhandledProps}
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+        onClick={this.handleClick}
+      >
+        {this.state.isPlaying
+          ? Video.create(video || ElementType, {
+              defaultProps: {
+                src,
+                placeholder,
+                autoPlay: true,
+                muted: true,
+                controls: false,
+                loop: true,
+                styles: styles.video,
+                variables: {
+                  width: variables.width,
+                  height: variables.height,
+                },
+              },
+            })
+          : Image.create(placeholder, {
+              defaultProps: {
+                styles: styles.image,
+                variables: {
+                  width: variables.width,
+                  height: variables.height,
+                },
+              },
+            })}
+        {Box.create(iframe, { defaultProps: { as: 'iframe' } })}
+      </ElementType>
+    )
+  }
+
+  protected actionHandlers: AccessibilityActionHandlers = {
+    performClick: event => this.handleClick(event),
+  }
+
+  private handleClick = e => {
+    e.stopPropagation()
+    e.preventDefault()
+    this.setState({ isPlaying: !this.state.isPlaying })
+  }
+}
+
+Embed.create = createShorthandFactory({ Component: Embed })
+
+export default Embed

packages/react/src/components/Video/Video.tsx

@@ -0,0 +1,74 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import { createShorthandFactory, UIComponent, UIComponentProps, commonPropTypes } from '../../lib'
+
+import { ReactProps } from '../../types'
+
+export interface VideoProps extends UIComponentProps {
+  /** Video source URL. */
+  src?: string
+
+  /** Image source URL for when video isn't playing */
+  poster?: string
+
+  /** Whether the video should be allowed to play audio */
+  muted?: boolean
+
+  /** Whether the video should start playing when rendered. Autoplay videos must be muted or they will not play immediately in certain browers like Chrome */
+  autoPlay?: boolean
+
+  /** Whether to display the native video controls */
+  controls?: boolean
+
+  /** Whether the video should automatically restart after it ends */
+  loop?: boolean
+}
+
+/**
+ * An video is a graphicical and audio representation of something.
+ */
+class Video extends UIComponent<ReactProps<VideoProps>> {
+  static create: Function
+
+  static className = 'ui-video'
+
+  static displayName = 'Video'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      children: false,
+      content: false,
+    }),
+    controls: PropTypes.bool,
+    autoPlay: PropTypes.bool,
+    muted: PropTypes.bool,
+    loop: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    as: 'video',
+    controls: true,
+    autoPlay: false,
+    muted: false,
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps }) {
+    const { controls, autoPlay, muted, loop } = this.props
+
+    return (
+      <ElementType
+        {...unhandledProps}
+        className={classes.root}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+      />
+    )
+  }
+}
+
+Video.create = createShorthandFactory({ Component: Video })
+
+export default Video

packages/react/src/index.ts

@@ -60,6 +60,8 @@ export {
   DropdownSearchInputProps,
 } from './components/Dropdown/DropdownSearchInput'
 
+export { default as Embed, EmbedProps, EmbedState } from './components/Embed/Embed'
+
 export { default as Flex, FlexProps } from './components/Flex/Flex'
 export { default as FlexItem, FlexItemProps } from './components/Flex/FlexItem'
 
@@ -155,6 +157,8 @@ export { default as Tree } from './components/Tree'
 export { default as Reaction, ReactionProps, ReactionState } from './components/Reaction/Reaction'
 export { default as ReactionGroup, ReactionGroupProps } from './components/Reaction/ReactionGroup'
 
+export { default as Video, VideoProps } from './components/Video/Video'
+
 //
 // Accessibility
 //

packages/react/src/lib/accessibility/Behaviors/Embed/embedBehavior.ts

@@ -0,0 +1,30 @@
+import { Accessibility } from '../../types'
+import * as keyboardKey from 'keyboard-key'
+
+/**
+ * @description
+ * GIFs are visual representation only so hidden unless alt or title applied.
+ *
+ * Enter/space keys play and pause the gif respectively
+ *
+ * @specification
+ * Sets 'aria-hidden' unless alt or title attribute provided
+ */
+const embedBehavior: Accessibility = (props: any) => ({
+  attributes: {
+    root: {
+      tabIndex: '0',
+      'aria-hidden': props['alt'] || props['title'] ? undefined : true,
+      role: 'presentation',
+    },
+  },
+  keyActions: {
+    root: {
+      performClick: {
+        keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+      },
+    },
+  },
+})
+
+export default embedBehavior

packages/react/src/lib/accessibility/index.ts

@@ -33,3 +33,4 @@ export { default as gridBehavior } from './Behaviors/Grid/gridBehavior'
 export { default as treeTitleBehavior } from './Behaviors/Tree/treeTitleBehavior'
 export { default as dialogBehavior } from './Behaviors/Dialog/dialogBehavior'
 export { default as statusBehavior } from './Behaviors/Status/statusBehavior'
+export { default as embedBehavior } from './Behaviors/Embed/embedBehavior'

packages/react/src/themes/teams/componentStyles.ts

@@ -22,6 +22,8 @@ export { default as DropdownSearchInput } from './components/Dropdown/dropdownSe
 export { default as DropdownSelectedItem } from './components/Dropdown/dropdownSelectedItemStyles'
 export { default as DropdownItem } from './components/Dropdown/dropdownItemStyles'
 
+export { default as Embed } from './components/Embed/embedStyles'
+
 export { default as Flex } from './components/Flex/flexStyles'
 export { default as FlexItem } from './components/Flex/flexItemStyles'
 
@@ -73,3 +75,5 @@ export { default as TreeItem } from './components/Tree/treeItemStyles'
 export { default as TreeTitle } from './components/Tree/treeTitleStyles'
 
 export { default as Animation } from './components/Animation/animationStyles'
+
+export { default as Video } from './components/Video/videoStyles'

packages/react/src/themes/teams/componentVariables.ts

@@ -22,6 +22,8 @@ export {
   default as DropdownSelectedItem,
 } from './components/Dropdown/dropdownSelectedItemVariables'
 
+export { default as Embed } from './components/Embed/embedVariables'
+
 export { default as Flex } from './components/Flex/flexVariables'
 export { default as FlexItem } from './components/Flex/flexItemVariables'
 
@@ -67,3 +69,5 @@ export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 
 export { default as Animation } from './components/Animation/animationVariables'
+
+export { default as Video } from './components/Video/videoVariables'