Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Extract figure and caption from Image so they can be reused for CFVideo
  • Loading branch information
daneden committed Feb 8, 2020
1 parent 633d531 commit a8a5d76
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 46 deletions.
35 changes: 25 additions & 10 deletions src/components/CFVideo.tsx
@@ -1,27 +1,42 @@
import styled from '@emotion/styled'
import React, { FunctionComponent } from 'react'
import ScriptTag from 'react-script-tag'
import { Atoms } from './designSystem/designSystem'
import mdToHTML from '../utils/mdToHTML'
import { Caption, Figure } from './designSystem/designSystem'

interface CFVideoProps {
autoPlay: boolean
caption?: string
controls: boolean
id: string
loop: boolean
preload: boolean
}

const Container = styled.div`
margin-bottom: ${Atoms.spacing.medium};
`

const CFVideo: FunctionComponent<CFVideoProps> = ({ id }) => {
const CFVideo: FunctionComponent<CFVideoProps> = ({
autoPlay = false,
caption,
controls = true,
id,
loop = false,
preload = true,
}) => {
return (
<Container>
<stream src={id} controls></stream>
<Figure>
<stream
autoPlay={autoPlay}
preload={String(preload)}
controls={controls}
loop={loop}
src={id}
></stream>
<ScriptTag
data-cfasync="false"
defer
type="text/javascript"
src={`https://embed.videodelivery.net/embed/r4xu.fla9.latest.js?video=${id}`}
/>
</Container>
{caption && <Caption>{mdToHTML(caption)}</Caption>}
</Figure>
)
}

Expand Down
38 changes: 2 additions & 36 deletions src/components/Image.tsx
@@ -1,14 +1,8 @@
import styled from '@emotion/styled'
import React, { FunctionComponent } from 'react'
import Imgix from 'react-imgix'
import mdToHTML from '../utils/mdToHTML'
import { Align, Atoms } from './designSystem/designSystem'

interface FigureProps {
className?: string
responsive?: boolean
margin?: boolean
}
import { Align, Atoms, Caption, Figure } from './designSystem/designSystem'
import { FigureProps } from './designSystem/Figure'

interface ImageProps extends FigureProps {
align?: 'left' | 'right'
Expand All @@ -19,34 +13,6 @@ interface ImageProps extends FigureProps {
src: string
}

const Figure = styled('figure')<FigureProps>(
({ margin, responsive }) => `
display: flex;
flex-direction: column;
justify-content: center;
writing-mode: horizontal-tb;
margin-bottom: ${margin ? Atoms.spacing.medium : 0};
img {
display: block;
width: ${responsive ? '100%' : 'auto'};
flex: 1 1 auto;
order: 2;
}
figcaption {
order: 3;
margin-top: ${Atoms.spacing.xxsmall};
}
`
)

const Caption = styled('figcaption')`
font-size: ${Atoms.font.size.small};
color: var(--meta-color, ${Atoms.colors.meta});
letter-spacing: 0.025em;
`

const Image: FunctionComponent<ImageProps> = ({
align,
alt,
Expand Down
10 changes: 10 additions & 0 deletions src/components/designSystem/Caption.tsx
@@ -0,0 +1,10 @@
import styled from '@emotion/styled'
import Atoms from './atoms'

const Caption = styled('figcaption')`
font-size: ${Atoms.font.size.small};
color: var(--meta-color, ${Atoms.colors.meta});
letter-spacing: 0.025em;
`

export default Caption
32 changes: 32 additions & 0 deletions src/components/designSystem/Figure.tsx
@@ -0,0 +1,32 @@
import styled from '@emotion/styled'
import Atoms from './atoms'

export interface FigureProps {
className?: string
responsive?: boolean
margin?: boolean
}

const Figure = styled('figure')<FigureProps>(
({ margin = true, responsive = true }) => `
display: flex;
flex-direction: column;
justify-content: center;
writing-mode: horizontal-tb;
margin-bottom: ${margin ? Atoms.spacing.medium : 0};
img {
display: block;
width: ${responsive ? '100%' : 'auto'};
flex: 1 1 auto;
order: 2;
}
figcaption {
order: 3;
margin-top: ${Atoms.spacing.xxsmall};
}
`
)

export default Figure
4 changes: 4 additions & 0 deletions src/components/designSystem/designSystem.ts
@@ -1,7 +1,9 @@
import Align from './Align'
import Atoms from './atoms'
import Blockquote from './Blockquote'
import Caption from './Caption'
import Code from './Code'
import Figure from './Figure'
import H1 from './H1'
import H2 from './H2'
import H3 from './H3'
Expand All @@ -19,7 +21,9 @@ export {
Align,
Atoms,
Blockquote,
Caption,
Code,
Figure,
H1,
H2,
H3,
Expand Down

0 comments on commit a8a5d76

Please sign in to comment.