Merge pull request #958 from microlinkhq/recipes

microlinkhq · Jul 7, 2020 · 08084f3 · 08084f3
2 parents 472119a + 5ec5bf9
commit 08084f3
Show file tree

Hide file tree

Showing 22 changed files with 189 additions and 228 deletions.
diff --git a/src/components/elements/Card/Card.stories.js b/src/components/elements/Card/Card.stories.js
@@ -12,10 +12,10 @@ import { Card } from 'components/elements'
 
 export default () => (
   <Fragment>
-    <Card.Success />
-    <Card.Error />
-    <Card.Warning />
-    <Card.Info />
+    <Card />
+    <Card />
+    <Card />
+    <Card />
   </Fragment>
 )`
 

diff --git a/src/components/elements/Toggle/Toggle.js b/src/components/elements/Toggle/Toggle.js
@@ -25,7 +25,7 @@ function Toggle ({ onChange, children, defaultValue }) {
 
   return (
     <Flex data-toggle width='100%'>
-      <Box ml={[0, 2, 2, 2]} border={1} borderColor='black05' borderRadius={2}>
+      <Box border={1} borderColor='black05' borderRadius={2}>
         {children.map((value, index) => {
           const isLast = index + 1 === children.length
           const isActive = active === value

diff --git a/src/components/elements/Toolbar.js b/src/components/elements/Toolbar.js
@@ -16,7 +16,7 @@ Toolbar.defaultProps = {
   display: 'flex',
   px: 0,
   height: TOOLBAR_HEIGHT,
-  maxWidth: layout.medium
+  maxWidth: layout.normal
 }
 
 export default Toolbar
diff --git a/src/components/elements/Unavatar/Unavatar.js b/src/components/elements/Unavatar/Unavatar.js
@@ -6,10 +6,10 @@ const StyledImage = styled(Image)`
   max-width: inherit;
 `
 
-export default ({ from = '', query, ...props }) => (
+export default ({ query, ...props }) => (
   <StyledImage
     borderRadius={2}
-    src={`https://unavatar.now.sh/${from ? `${from}/${query}` : query}`}
+    src={`https://unavatar.now.sh/${query}`}
     height='100%'
     {...props}
   />

diff --git a/src/components/elements/Unavatar/Unavatar.stories.js b/src/components/elements/Unavatar/Unavatar.stories.js
@@ -7,7 +7,7 @@ const code = `
 import { Unavatar } from 'components/elements'
 
 export default () => (
-  <Unavatar height='80px' width='80px' companyName='microlink.io' />
+  <Unavatar height='80px' width='80px' query='microlink.io' />
 )
 `
 

diff --git a/src/components/markdown/index.js b/src/components/markdown/index.js
@@ -27,10 +27,10 @@ import {
 
 import MicrolinkBase from '../patterns/Microlink/Microlink'
 import DemoIntegrations from './DemoIntegrations'
-import { textGradient } from '../../theme'
+import { layout, textGradient } from '../../theme'
 import Heading from '../elements/Heading'
 
-const { Container, WIDTH, CONTAINER_SPACE } = withContainer
+const { Container, CONTAINER_SPACE } = withContainer
 
 const Link = styled(LinkBase)``
 
@@ -60,7 +60,7 @@ export const MultiCodeEditor = withContainer(
 export const H1 = withTitle(withSlug(styled(Heading)``))
 
 H1.defaultProps = {
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h1',
   fontSize: [`calc(${fontSizes[5]} * 0.75px)`, 5],
   lineHeight: [2, 3],
@@ -77,7 +77,7 @@ const H2Base = styled(Heading)``
 H2Base.defaultProps = {
   ml: 'auto',
   mr: 'auto',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h2',
   fontSize: [`calc(${fontSizes[4]} * 0.75px)`, 4],
   lineHeight: [2, 3],
@@ -108,7 +108,7 @@ export const H3 = withTitle(withSlug(styled(Heading)``))
 H3.defaultProps = {
   ml: 'auto',
   mr: 'auto',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h3',
   fontSize: 3,
   lineHeight: 2,
@@ -123,7 +123,7 @@ export const H4 = withTitle(withSlug(styled(Heading)``))
 H4.defaultProps = {
   ml: 'auto',
   mr: 'auto',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h4',
   fontSize: 2,
   lineHeight: 2,
@@ -138,7 +138,7 @@ export const H5 = withTitle(withSlug(styled(Heading)``))
 H5.defaultProps = {
   ml: 'auto',
   mr: 'auto',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h5',
   fontSize: 1,
   lineHeight: 2,
@@ -153,7 +153,7 @@ export const H6 = withTitle(withSlug(styled(Heading)``))
 H6.defaultProps = {
   ml: 'auto',
   mr: 'auto',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   as: 'h6',
   fontSize: 1,
   color: 'gray9',
@@ -165,10 +165,11 @@ H6.defaultProps = {
 }
 
 export const Paraph = props => {
-  const special =
-    get(props, 'children.props.src') || get(props, 'children.props.href')
-  const maxWidth = special ? WIDTH.large : WIDTH.normal
-  return <Text maxWidth={maxWidth} {...props} />
+  const isMedia =
+    get(props, 'children.props.props.src') ||
+    get(props, 'children.props.props.href')
+  const maxWidth = isMedia ? layout.normal : layout.small
+  return <Text data-debug maxWidth={maxWidth} {...props} />
 }
 
 Paraph.defaultProps = {
@@ -192,7 +193,7 @@ Ul.defaultProps = {
   ml: 'auto',
   mr: 'auto',
   as: 'ul',
-  maxWidth: WIDTH.normal,
+  maxWidth: layout.small,
   ...CONTAINER_SPACE
 }
 
@@ -209,7 +210,7 @@ Li.defaultProps = {
   mr: 'auto',
   mb: 2,
   as: 'li',
-  maxWidth: WIDTH.normal
+  maxWidth: layout.small
 }
 
 const codeStyle = css`
@@ -237,7 +238,6 @@ CodeInline.defaultProps = {
 }
 
 const mediaStyle = {
-  maxWidth: `${WIDTH.normal}px`,
   borderRadius: '3px',
   ml: 'auto',
   mr: 'auto',
@@ -247,11 +247,12 @@ const mediaStyle = {
 const _ImageBase = styled(ImageBase)``
 
 _ImageBase.defaultProps = {
-  ...mediaStyle,
-  lazy: false
+  ...mediaStyle
 }
 
-export const Image = withContainer(_ImageBase)
+export const Image = withContainer(_ImageBase, {
+  maxWidth: 'inherit'
+})
 
 const _VideoBase = styled(VideoBase)``
 
@@ -290,7 +291,7 @@ export const Tweet = props => (
 
 export const Blockquote = styled.blockquote`
   margin: auto;
-  max-width: ${WIDTH.normal}px;
+  max-width: ${layout.small};
   border-left: 3px solid ${colors.black};
   padding-left: ${space[3]};
   font-style: italic;

diff --git a/src/components/pages/home/explore.js b/src/components/pages/home/explore.js
diff --git a/src/components/pages/home/index.js b/src/components/pages/home/index.js
@@ -1,7 +1,6 @@
 import Hero from './hero'
 import Screenshots from './screenshots'
 import Meta from './meta'
-import Explore from './explore'
 import Analytics from './analytics'
 
-export { Hero, Screenshots, Meta, Explore, Analytics }
+export { Hero, Screenshots, Meta, Analytics }
diff --git a/src/components/pages/home/meta.js b/src/components/pages/home/meta.js
@@ -40,7 +40,7 @@ const Meta = ({ demoLinks, ...props }) => {
         mb={[0, 0, 0, 3]}
         px={[5, 6, 6, 6]}
         textAlign='center'
-        maxWidth={layout.medium}
+        maxWidth={layout.normal}
       >
         <Hide breakpoints={[1, 2, 3]}>
           Engage your content with enriched media. Convert your links into

diff --git a/src/components/pages/home/screenshots.js b/src/components/pages/home/screenshots.js
@@ -100,7 +100,7 @@ const Screenshots = props => {
         mb={[0, 0, 0, 3]}
         px={[5, 6, 6, 6]}
         textAlign='center'
-        maxWidth={layout.medium}
+        maxWidth={layout.normal}
       >
         <Hide breakpoints={[1, 2, 3]}>
           Take a retina display screenshot of any URL. Automatic CDN

diff --git a/src/components/patterns/Aside/AsideBase.js b/src/components/patterns/Aside/AsideBase.js
@@ -115,8 +115,8 @@ const Aside = ({
         mt={[0, 0, 0, 3]}
         pb={3}
         mb={4}
-        ml={3}
-        pl={2}
+        ml={[3, 3, 3, 0]}
+        pl={[2, 2, 2, 0]}
       >
         {CloseButton && (
           <Box mb={4} width='100%'>

diff --git a/src/components/patterns/Footer/Footer.js b/src/components/patterns/Footer/Footer.js
@@ -63,7 +63,7 @@ export default ({ theme, ...props }) => {
   } = isDark ? DARK_THEME : LIGHT_THEME
 
   return (
-    <Container maxWidth={layout.large}>
+    <Container px={0} maxWidth={layout.normal}>
       <Flex
         as='footer'
         py={[0, 0, 4, 4]}