Skip to content

Commit

Permalink
feat: 🎸 make figma block fit outer box
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich committed Apr 24, 2019
1 parent b63d31e commit cf76ab0
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 8 deletions.
8 changes: 8 additions & 0 deletions src/__story__/figma.story.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import Embed from '..';
import {Box} from './Box';

storiesOf('figma', module)
.add('Site link', () => <Embed url={'https://www.figma.com/file/LFRrspoKaAYUlEHLZiLoQX/Google-Material-Design?node-id=0%3A1'} />)
.add('Fitted', () => {
return (
<Box>
<Embed url={'https://www.figma.com/file/LFRrspoKaAYUlEHLZiLoQX/Google-Material-Design?node-id=0%3A1'} />
</Box>
);
})
8 changes: 8 additions & 0 deletions src/__story__/gfycat.story.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import Embed from '..';
import {Box} from './Box';

storiesOf('gfycat', module)
.add('Site link', () => <Embed url={'https://gfycat.com/snivelingflimsyfunnelweaverspider'} />)
.add('Site link - 2', () => <Embed url={'https://gfycat.com/bittervainchuckwalla-airplane-transportation'} />)
.add('Fitted', () => {
return (
<Box>
<Embed url={'https://gfycat.com/snivelingflimsyfunnelweaverspider'} />
</Box>
);
})
31 changes: 23 additions & 8 deletions src/blocks/figma/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
import * as React from 'react';
import {BlockProps} from '../..';
import {rule} from 'p4-css';

const blockClass = rule({
d: 'block',
ov: 'hidden',
w: '100%',
bd: '1px solid #E5E9F2',
bdrad: '6px',
'& iframe': {
d: 'block',
ov: 'hidden',
bd: 0,
w: '100%',
h: '450px',
bdrad: '8px',
},
});

const Figma: React.SFC<BlockProps> = ({url}) => {
return (
<iframe
frameBorder="no"
style={{border: 'none'}}
width="100%"
height="450px"
src={`https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`}
allowFullScreen
/>
<div className={blockClass}>
<iframe
src={`https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`}
allowFullScreen
/>
</div>
);
}

Expand Down

0 comments on commit cf76ab0

Please sign in to comment.