feat: 🎸 make sure gmaps fits box well and has rounded corners

src/__story__/gmaps.story.tsx

@@ -1,7 +1,15 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import Embed from '..';
+import {Box} from './Box';
 
 storiesOf('gmaps', module)
   .add('Site link', () => <Embed url={'https://www.google.com/maps/@46.5084367,6.5426424,15z'} />)
   .add('Search link', () => <Embed url={'https://www.google.com/maps/place/London,+UK/@51.5140318,-0.3089719,11z/data=!4m5!3m4!1s0x47d8a00baf21de75:0x52963a5addd52a99!8m2!3d51.5073509!4d-0.1277583'} />)
+  .add('Fitted', () => {
+    return (
+      <Box>
+        <Embed url={'https://www.google.com/maps/@46.5084367,6.5426424,15z'} />
+      </Box>
+    );
+  })

src/blocks/gmaps/index.tsx

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import {BlockProps} from '../..';
+import {rule} from 'p4-css';
+
+const blockClass = rule({
+  d: 'inline-block',
+  ov: 'hidden',
+  bdrad: '6px',
+  maxW: '600px',
+  w: '100%',
+  '&>iframe': {
+    d: 'block',
+    ov: 'hidden',
+    bd: 0,
+    w: '100%',
+    h: '360px',
+  },
+});
 
 const latlngRegex = /@([\-0-9\.]+),([\-0-9\.]+)(?:[^\-0-9\.]|$)/;
 
@@ -10,13 +26,12 @@ const Gmaps: React.SFC<BlockProps> = ({url, renderVoid}) => {
   const [omit, lat, lng] = matches;
 
   return (
-    <iframe
-      frameBorder="0"
-      style={{border: 'none', maxWidth: '600px', width: '100%'}}
-      height="360px"
-      allowFullScreen
-      src={`https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21948.472927059174!2d${encodeURIComponent(lng)}!3d${encodeURIComponent(lat)}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sch!4v1551898961513`}
-    />
+    <div className={blockClass}>
+      <iframe
+        allowFullScreen
+        src={`https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21948.472927059174!2d${encodeURIComponent(lng)}!3d${encodeURIComponent(lat)}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sch!4v1551898961513`}
+      />
+    </div>
   );
 }