diff --git a/docs/bloglayout.mdx b/docs/bloglayout.mdx index 18e979e..6dad737 100644 --- a/docs/bloglayout.mdx +++ b/docs/bloglayout.mdx @@ -3,7 +3,7 @@ name: bloglayout --- import { Playground } from 'docz' -import Bloglayout from '../src/templates/blog-post-layout' +import Bloglayout from '../src/templates/blog-post-layout.js' diff --git a/docs/button.mdx b/docs/button.mdx new file mode 100644 index 0000000..f2544ad --- /dev/null +++ b/docs/button.mdx @@ -0,0 +1,24 @@ +--- +name: Button +--- + +import { Playground } from 'docz' +import {Box} from '@chakra-ui/core' +import Button from '../src/components/button.js' +import ContactUsButton from '../src/components/contactUsButton.js' + +## Button + + + + +## Contact us Button + + + + +### Props +| Props | default | +|:-------|:------| +| text | Contact Us| + diff --git a/docs/config/theme.js b/docs/config/theme.js index 1ccfa1f..ed5ca18 100644 --- a/docs/config/theme.js +++ b/docs/config/theme.js @@ -1,15 +1,18 @@ +import { theme } from "@chakra-ui/core" + const maxContainerWidth = '70rem' const baseLineHeight = 1.45; //24.8px const desktopBaseSize = 1.125; //18px const mobileBaseSize = 1; //16px const breakpoints = [ - '52em', + '48rem', ] const scale = [ - 0.75,1, 1.2, 1.375, 1.6875, 2.5 + 0.75, 1, 1.2, 1.375, 1.6875, 2.5 ]; const fontSizes = scale.map(n=> n*mobileBaseSize + 'rem') +//desktops fontSizes.desktop = scale.map(n=> n*desktopBaseSize + 'rem') const fonts = { @@ -18,6 +21,13 @@ const fonts = { bold: 'TiemposBold', italic: 'TiemposItalic' } + +theme.sizes['maxContainerWidth'] = maxContainerWidth + +theme.borders['3px'] = '3px solid' + +const radii = [0, 1, 2, 4, 8, 16]; + const lineHeights = [ 0.5 * baseLineHeight + 'rem', 1 * baseLineHeight + 'rem', @@ -26,110 +36,24 @@ const lineHeights = [ 2.5 * baseLineHeight + 'rem', 3 * baseLineHeight + 'rem', ]; -const space = [0,...lineHeights]; + +const space = [0, ...lineHeights]; const colors = { tint: '#F8F4F2', - black: ['#0F0F0F','#333333', '#666666', '#999999'], + black: ['#0F0F0F','#333333', '#666666', '#999999', '#E0E0E0'], } colors.primary = colors.black[1] colors.secondary = colors.tint -const styles = { - body:{ - fontFamily: 'body', - fontSize: [1, 'desktop.1'], - lineHeight: 1, - }, - h1: { - fontFamily: 'heading', - fontSize: [5, 'desktop.5'], - lineHeight: 3, - marginTop: [3, 4], - marginBottom: 1, - padding: 0, - }, - h2: { - fontFamily: 'heading', - fontSize: [4, 'desktop.4'], - lineHeight: 2, - marginTop: [3, 4], - marginBottom: 1, - padding: 0, - }, - h3: { - fontFamily: 'heading', - fontSize: [3, 'desktop.3'], - lineHeight: 1, - marginTop: [ 2,3 ], - marginBottom: 1, - padding: 0, - }, - h4: { - fontFamily: 'heading', - fontSize: [2, 'desktop.2'], - lineHeight: 1, - marginTop: 2, - marginBottom: 1, - padding: 0, - }, - h5: { - fontFamily: 'heading', - fontSize: [1, 'desktop.1'], - lineHeight: 1, - marginTop: 2, - marginBottom: 1, - padding: 0, - }, - p: { - fontFamily: 'body', - fontSize: [1, 'desktop.1'], - lineHeight: 1, - maxWidth: '40rem', - marginBottom: [2,2] - }, - b: { - fontFamily: 'bold', - }, - strong: { - fontFamily: 'bold' - }, - em: { - fontFamily: 'italic' - }, - i: { - fontFamily: 'italic', - }, - Container: { - maxWidth: '71.5rem', - padding: 0, - px: ['0.725rem'] - }, - ul: { - listStyle: 'disc inside none' , - mb: [2,2] - }, - ol: { - listStyle: 'decimal inside none', - }, - li: { - mb: ['0.5rem','0.5rem'], - fontFamily: 'body', - fontSize: [1, 'desktop.1'], - lineHeight: 1, - maxWidth: '40rem', - marginBottom: [1,1] - } -} - -const theme = { +const customTheme = { + ...theme, breakpoints, space, fontSizes, + radii, lineHeights, - maxContainerWidth, fonts, colors, - styles, } -export default theme; \ No newline at end of file +export default customTheme; \ No newline at end of file diff --git a/docs/config/wrapper.js b/docs/config/wrapper.js index cf49254..ac7882d 100644 --- a/docs/config/wrapper.js +++ b/docs/config/wrapper.js @@ -1,5 +1,5 @@ import React from 'react' -import { ThemeProvider } from 'bricks' +import { ThemeProvider } from '@chakra-ui/core' import theme from './theme' global.__PATH_PREFIX__ = '' diff --git a/docs/contact-form.mdx b/docs/contact-form.mdx new file mode 100644 index 0000000..c374843 --- /dev/null +++ b/docs/contact-form.mdx @@ -0,0 +1,12 @@ +--- +name: Contact-form +--- + +import { Playground } from 'docz' +import ContactForm from '../src/components/contactForm.js' + +## Contact-form + + + + diff --git a/docs/developmentServices.mdx b/docs/developmentServices.mdx new file mode 100644 index 0000000..063e2ab --- /dev/null +++ b/docs/developmentServices.mdx @@ -0,0 +1,12 @@ +--- +name: Development-services +--- + +import { Playground } from 'docz' +import DevelopmentServices from '../src/components/developmentServices.js' + +## Development-services + + + + diff --git a/docs/icons.mdx b/docs/icons.mdx new file mode 100644 index 0000000..9cd7cbc --- /dev/null +++ b/docs/icons.mdx @@ -0,0 +1,18 @@ +--- +name: Icons +--- + +import { Playground } from 'docz' +import ReactIcon from '../src/components/icons/React.js' + +## React Icon + + + + +### Props + +| Props | Description | +|:-------|:------| +| width | Sets the width of the icon | +| Height | Sets the Height of the icon | \ No newline at end of file diff --git a/docs/libraries.mdx b/docs/libraries.mdx new file mode 100644 index 0000000..56df9ce --- /dev/null +++ b/docs/libraries.mdx @@ -0,0 +1,12 @@ +--- +name: Libraries +--- + +import { Playground } from 'docz' +import Libraries from '../src/components/libraries.js' + +## Libraries + + + + diff --git a/docs/link.mdx b/docs/link.mdx index f52f16c..e0c7a9e 100644 --- a/docs/link.mdx +++ b/docs/link.mdx @@ -8,14 +8,14 @@ import {Playground} from 'docz' ## PlainLink - + Pagination ## CategoryLink - + Category \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 426891c..a4c0a3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1028,6 +1028,153 @@ "to-fast-properties": "^2.0.0" } }, + "@chakra-ui/core": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/core/-/core-0.8.0.tgz", + "integrity": "sha512-il1I1nEWOmWJSspnC+WyArLHbHvs82hvKTNDd24wr6spa/7v2jaXFZeWDNenY35ay1NHV7Ya2StcBwQRGHMWYA==", + "requires": { + "@reach/auto-id": "0.10.2", + "@styled-system/css": "5.1.5", + "@styled-system/should-forward-prop": "5.1.5", + "@types/styled-system": "5.1.9", + "aria-hidden": "^1.1.1", + "body-scroll-lock": "^3.0.1", + "color": "3.1.2", + "copy-to-clipboard": "3.3.1", + "exenv": "^1.2.2", + "popper.js": "^1.15.0", + "react-animate-height": "2.0.21", + "react-focus-lock": "^2.2.1", + "react-spring": "^8.0.27", + "styled-system": "5.1.5", + "toasted-notes": "3.2.0", + "use-dark-mode": "2.3.1" + }, + "dependencies": { + "@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/border": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz", + "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "requires": { + "object-assign": "^4.1.1" + } + }, + "@styled-system/css": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz", + "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==" + }, + "@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/variant": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz", + "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==", + "requires": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.5" + } + }, + "styled-system": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", + "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==", + "requires": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.5", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.5", + "object-assign": "^4.1.1" + } + } + } + }, "@codebrahma/gatsby-theme-blog": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/@codebrahma/gatsby-theme-blog/-/gatsby-theme-blog-1.0.12.tgz", @@ -2587,42 +2734,58 @@ } }, "@emotion/cache": { - "version": "10.0.9", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.9.tgz", - "integrity": "sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==", + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", "requires": { - "@emotion/sheet": "0.9.2", - "@emotion/stylis": "0.8.3", - "@emotion/utils": "0.11.1", - "@emotion/weak-memoize": "0.2.2" + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" } }, "@emotion/core": { - "version": "10.0.10", - "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.10.tgz", - "integrity": "sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==", + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", + "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", "requires": { - "@emotion/cache": "^10.0.9", - "@emotion/css": "^10.0.9", - "@emotion/serialize": "^0.11.6", - "@emotion/sheet": "0.9.2", - "@emotion/utils": "0.11.1" + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.10.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", + "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } } }, "@emotion/css": { - "version": "10.0.12", - "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.12.tgz", - "integrity": "sha512-esET/v6AwYIw5YVo0e1L/bUik7bIMWyK32BudsC/PE5O1rLK3rjiLCOoMVv5GY6+ssuwWVzooGbz79hPvkkmsw==", + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", "requires": { - "@emotion/serialize": "^0.11.7", - "@emotion/utils": "0.11.1", - "babel-plugin-emotion": "^10.0.9" + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" } }, "@emotion/hash": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz", - "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, "@emotion/is-prop-valid": { "version": "0.8.1", @@ -2638,61 +2801,102 @@ "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" }, "@emotion/serialize": { - "version": "0.11.7", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.7.tgz", - "integrity": "sha512-GfzJIMue9eIEPFgBL340hBbjfki11vjYkfmY2LXoCDAFPuG6S+hkOlfinRXLnPVlXnKu7WWp587cVa6/xQriNQ==", - "requires": { - "@emotion/hash": "0.7.1", - "@emotion/memoize": "0.7.1", - "@emotion/unitless": "0.7.3", - "@emotion/utils": "0.11.1", + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", "csstype": "^2.5.7" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + } } }, "@emotion/sheet": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.2.tgz", - "integrity": "sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==" + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" }, "@emotion/styled": { - "version": "10.0.12", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.12.tgz", - "integrity": "sha512-oxvSoLi3AbI5bEfqkFE1hLTC3eMpifwj6klJ4bvzgE6EDqj4w859KQyZR7ekGRAcfGNFyEYhw67bm8FlMBlX7Q==", + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", "requires": { - "@emotion/styled-base": "^10.0.12", - "babel-plugin-emotion": "^10.0.9" + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" } }, "@emotion/styled-base": { - "version": "10.0.13", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.13.tgz", - "integrity": "sha512-6zhj3njNEnMYcVMv3rOpM7qLwe1Osike+xVgw7gkbp9a/r6zx5cUA5sRvCrtCa28yV5x7ePotKNHMZ1GLQJo2g==", + "version": "10.0.31", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz", + "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==", "requires": { - "@babel/runtime": "^7.4.3", - "@emotion/is-prop-valid": "0.8.1", - "@emotion/serialize": "^0.11.7", - "@emotion/utils": "0.11.1" + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.8", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.10.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", + "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } } }, "@emotion/stylis": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.3.tgz", - "integrity": "sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==" + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" }, "@emotion/unitless": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", - "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==", + "dev": true }, "@emotion/utils": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.1.tgz", - "integrity": "sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==" + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" }, "@emotion/weak-memoize": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz", - "integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==" + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, "@gatsbyjs/relay-compiler": { "version": "2.0.0-printer-fix.2", @@ -3147,6 +3351,36 @@ "strip-ansi": "^3" } }, + "@reach/alert": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@reach/alert/-/alert-0.1.5.tgz", + "integrity": "sha512-Ow+SB7rokGWxmm+AdOpf4eo29OaEYDqlJ1Kc9qulVX2cKjYiHQqAvkiCkSaIPkQbbyNmEXJ0c/rVpzPVvCVIAw==", + "requires": { + "@reach/component-component": "^0.1.3", + "@reach/visually-hidden": "^0.1.4" + } + }, + "@reach/auto-id": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.10.2.tgz", + "integrity": "sha512-PWFZevkHshiJV/z0L/5WQkWhe9QRzdZqC7N/JHRCoYo+odvCz9izXVRsxJf7p4sCuOCvnc8zNzAokFk2E1ZzDg==", + "requires": { + "@reach/utils": "^0.10.2", + "tslib": "^1.11.2" + }, + "dependencies": { + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" + } + } + }, + "@reach/component-component": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@reach/component-component/-/component-component-0.1.3.tgz", + "integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==" + }, "@reach/router": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz", @@ -3159,6 +3393,36 @@ "warning": "^3.0.0" } }, + "@reach/utils": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.10.3.tgz", + "integrity": "sha512-LoIZSfVAJMA+DnzAMCMfc/wAM39iKT8BQQ9gI1FODpxd8nPFP4cKisMuRXImh2/iVtG2Z6NzzCNgceJSrywqFQ==", + "requires": { + "@types/warning": "^3.0.0", + "tslib": "^1.11.2", + "warning": "^4.0.3" + }, + "dependencies": { + "tslib": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", + "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" + }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "@reach/visually-hidden": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz", + "integrity": "sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==" + }, "@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -3277,6 +3541,140 @@ "@styled-system/core": "^5.0.5" } }, + "@styled-system/should-forward-prop": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz", + "integrity": "sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==", + "requires": { + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/memoize": "^0.7.1", + "styled-system": "^5.1.5" + }, + "dependencies": { + "@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/border": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz", + "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "requires": { + "object-assign": "^4.1.1" + } + }, + "@styled-system/css": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz", + "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==" + }, + "@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/variant": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz", + "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==", + "requires": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.5" + } + }, + "styled-system": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", + "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==", + "requires": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.5", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.5", + "object-assign": "^4.1.1" + } + } + } + }, "@styled-system/space": { "version": "5.0.6", "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.0.6.tgz", @@ -3564,6 +3962,29 @@ "csstype": "^2.2.0" } }, + "@types/react-dom": { + "version": "16.9.8", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", + "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", + "requires": { + "@types/react": "*" + } + }, + "@types/styled-system": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.9.tgz", + "integrity": "sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ==", + "requires": { + "csstype": "^2.6.9" + }, + "dependencies": { + "csstype": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", + "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==" + } + } + }, "@types/tmp": { "version": "0.0.32", "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.32.tgz", @@ -3593,6 +4014,16 @@ "@types/unist": "*" } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, + "@use-it/event-listener": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.3.tgz", + "integrity": "sha512-UCHkLOVU+xj3/1R8jXz8GzDTowkzfIDPESOBlVC2ndgwUSBEqiFdwCoUEs2lcGhJOOiEdmWxF+T23C5+60eEew==" + }, "@webassemblyjs/ast": { "version": "1.7.11", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", @@ -4015,6 +4446,14 @@ "sprintf-js": "~1.0.2" } }, + "aria-hidden": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.1.tgz", + "integrity": "sha512-M7zYxCcOQPOaxGHoMTKUFD2UNcVFTp9ycrdStLcTPLf8zgTXC3+YcGe+UuzSh5X1BX/0/PtS8xTNy4xyH/6xtw==", + "requires": { + "tslib": "^1.0.0" + } + }, "aria-query": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz", @@ -4473,20 +4912,27 @@ } }, "babel-plugin-emotion": { - "version": "10.0.13", - "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.13.tgz", - "integrity": "sha512-w8yukWIYDw2ZUzBo7B9t5jh7wsM4NQWqvuZadW4MhVokgw5wsoBRJ59Sa1hMc3UZiatwb0iBNufmRQZVl77I5Q==", + "version": "10.0.33", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", + "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", "requires": { "@babel/helper-module-imports": "^7.0.0", - "@emotion/hash": "0.7.1", - "@emotion/memoize": "0.7.1", - "@emotion/serialize": "^0.11.6", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", "babel-plugin-macros": "^2.0.0", "babel-plugin-syntax-jsx": "^6.18.0", "convert-source-map": "^1.5.0", "escape-string-regexp": "^1.0.5", "find-root": "^1.1.0", "source-map": "^0.5.7" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + } } }, "babel-plugin-export-metadata": { @@ -5412,6 +5858,11 @@ } } }, + "body-scroll-lock": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.0.2.tgz", + "integrity": "sha512-PtItUun94iIupKry8J/h6SfRCLWZnly77KbPsTSKALmxfR282L8R0Ujkv7bydSZvLxAJS4sBJ3y/E6X8gYkGrQ==" + }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -6170,6 +6621,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -6842,6 +7298,14 @@ "integrity": "sha512-rxjlVPoTzuKQXem9rdIHSc6xo8TcvqmVZoItxvhMaI1/9MOSNEaee86CpMgv+QVul2Q5v/DkXfOOVwDJxF7KsA==", "dev": true }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "copyfiles": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-1.2.0.tgz", @@ -9410,13 +9874,28 @@ "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" }, "emotion-theming": { - "version": "10.0.10", - "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.10.tgz", - "integrity": "sha512-E4SQ3Y91avxxydDgubi/po/GaC5MM1XHm8kcClKg1PA/TeOye0PiLBzAzlgt9dBzDRV9+qHDunsayPvzVYIYng==", + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz", + "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==", "requires": { - "@emotion/weak-memoize": "0.2.2", - "hoist-non-react-statics": "^3.3.0", - "object-assign": "^4.1.1" + "@babel/runtime": "^7.5.5", + "@emotion/weak-memoize": "0.2.5", + "hoist-non-react-statics": "^3.3.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.10.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", + "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } } }, "encodeurl": { @@ -10647,6 +11126,11 @@ "readable-stream": "^2.3.6" } }, + "focus-lock": { + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz", + "integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==" + }, "follow-redirects": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz", @@ -12701,14 +13185,15 @@ } }, "gatsby-plugin-offline": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-offline/-/gatsby-plugin-offline-2.2.0.tgz", - "integrity": "sha512-CIRA2J0ZStBvJQAxbxC8d7w6TMi4QhA/60idfKAKLyR6zQWnvr9CElrr1JJBEEOzXziNRerFoFNftB6VJQ2mFA==", + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-offline/-/gatsby-plugin-offline-2.2.9.tgz", + "integrity": "sha512-Cq8ekeZvVInl8d1ck32ltX1L8V7MmrVaz8bGLTGKqXi0V1oMixd3MzimH3/CMbSsgVUkIAXFoEK8LcttsUBd4g==", "requires": { "@babel/runtime": "^7.0.0", - "cheerio": "^1.0.0-rc.2", - "idb-keyval": "^3.1.0", - "lodash": "^4.17.10", + "cheerio": "^1.0.0-rc.3", + "idb-keyval": "^3.2.0", + "lodash": "^4.17.15", + "slash": "^3.0.0", "workbox-build": "^3.6.3" }, "dependencies": { @@ -12725,6 +13210,11 @@ "parse5": "^3.0.1" } }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, "parse5": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", @@ -12732,6 +13222,11 @@ "requires": { "@types/node": "*" } + }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" } } }, @@ -13409,9 +13904,9 @@ "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==" }, "get-own-enumerable-property-symbols": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz", - "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==" + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz", + "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==" }, "get-pkg-repo": { "version": "4.1.0", @@ -14163,6 +14658,11 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoek": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", + "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" + }, "hoist-non-react-statics": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", @@ -15447,6 +15947,16 @@ "core-js": "^2.5.7" } }, + "joi": { + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz", + "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==", + "requires": { + "hoek": "4.x.x", + "isemail": "3.x.x", + "topo": "2.x.x" + } + }, "jpeg-js": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.5.tgz", @@ -15996,20 +16506,20 @@ "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=" }, "lodash.template": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz", - "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz", + "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==", "requires": { - "lodash._reinterpolate": "~3.0.0", + "lodash._reinterpolate": "^3.0.0", "lodash.templatesettings": "^4.0.0" } }, "lodash.templatesettings": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz", - "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz", + "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==", "requires": { - "lodash._reinterpolate": "~3.0.0" + "lodash._reinterpolate": "^3.0.0" } }, "lodash.throttle": { @@ -18113,8 +18623,7 @@ "popper.js": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", - "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==", - "dev": true + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" }, "portfinder": { "version": "1.0.20", @@ -19153,6 +19662,23 @@ "scheduler": "^0.13.6" } }, + "react-animate-height": { + "version": "2.0.21", + "resolved": "https://registry.npmjs.org/react-animate-height/-/react-animate-height-2.0.21.tgz", + "integrity": "sha512-CZHdjMD8qqp10tYtWmauWYASXxxv9vYeljxFGFtbcrbNXhsUv0w3IjxVK+0yCnyfk7769WfMZKHra4vRcbMnQg==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.1" + } + }, + "react-clientside-effect": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz", + "integrity": "sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, "react-codemirror2": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.0.tgz", @@ -19398,6 +19924,19 @@ "integrity": "sha512-iCofWhTjX+vQwvDmg7o6vg0XrUg1c41yBDZG+l83nz1FiCsleJoUgd3O+kHpOeWMXuPrRIFfCixvcqyOLGOgIg==", "dev": true }, + "react-focus-lock": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.3.1.tgz", + "integrity": "sha512-j15cWLPzH0gOmRrUg01C09Peu8qbcdVqr6Bjyfxj80cNZmH+idk/bNBYEDSmkAtwkXI+xEYWSmHYqtaQhZ8iUQ==", + "requires": { + "@babel/runtime": "^7.0.0", + "focus-lock": "^0.6.7", + "prop-types": "^15.6.2", + "react-clientside-effect": "^1.2.2", + "use-callback-ref": "^1.2.1", + "use-sidecar": "^1.0.1" + } + }, "react-helmet": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz", @@ -19497,6 +20036,15 @@ "integrity": "sha512-kWkFqCOJ0qbiwm7yQsaIcsEG3IBRbet1G+hR/p77O20amPA9eC0yli1lqZdudf6FlUUXfI5gIz31CNNxEMXh4w==", "dev": true }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -22198,11 +22746,34 @@ "vfile": "^3.0.0" } }, + "toasted-notes": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/toasted-notes/-/toasted-notes-3.2.0.tgz", + "integrity": "sha512-PucSn+SUdFSYNaaL1eNw7wYkEMJ7LULCR6j1YXPlRySHgWVgf+bXjq4dYd3hdA4mvmGz9HANmI1RnzhZ8av52Q==", + "requires": { + "@reach/alert": "^0.1.2", + "@types/react": "^16.8.10", + "@types/react-dom": "^16.8.3" + } + }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" }, + "topo": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz", + "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", + "requires": { + "hoek": "4.x.x" + } + }, "tough-cookie": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", @@ -22985,6 +23556,37 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-callback-ref": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.3.tgz", + "integrity": "sha512-DPBPh1i2adCZoIArRlTuKRy7yue7QogtEnfv0AKrWsY+GA+4EKe37zhRDouNnyWMoNQFYZZRF+2dLHsWE4YvJA==" + }, + "use-dark-mode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.1.tgz", + "integrity": "sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==", + "requires": { + "@use-it/event-listener": "^0.1.2", + "use-persisted-state": "^0.3.0" + } + }, + "use-persisted-state": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/use-persisted-state/-/use-persisted-state-0.3.0.tgz", + "integrity": "sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==", + "requires": { + "@use-it/event-listener": "^0.1.2" + } + }, + "use-sidecar": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.2.tgz", + "integrity": "sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==", + "requires": { + "detect-node": "^2.0.4", + "tslib": "^1.9.3" + } + }, "utif": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz", @@ -23986,33 +24588,10 @@ "universalify": "^0.1.0" } }, - "hoek": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", - "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==" - }, - "joi": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz", - "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==", - "requires": { - "hoek": "4.x.x", - "isemail": "3.x.x", - "topo": "2.x.x" - } - }, "pretty-bytes": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", "integrity": "sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=" - }, - "topo": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz", - "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", - "requires": { - "hoek": "4.x.x" - } } } }, diff --git a/package.json b/package.json index fa385a2..5c3359e 100644 --- a/package.json +++ b/package.json @@ -5,15 +5,15 @@ "version": "0.0.1", "author": "Anand Narayan ", "dependencies": { + "@chakra-ui/core": "^0.8.0", "@codebrahma/gatsby-theme-blog": "^1.0.12", - "@emotion/core": "^10.0.10", - "@emotion/styled": "^10.0.11", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@mdx-js/mdx": "^1.0.20", "@mdx-js/react": "^1.0.20", "@mdx-js/tag": "^0.20.3", "babel-preset-react": "^6.24.1", - "bricks": "github:codebrahma/bricks", - "emotion-theming": "^10.0.10", + "emotion-theming": "^10.0.27", "gatsby": "^2.13.15", "gatsby-image": "^2.1.2", "gatsby-plugin-crisp-chat": "^3.2.1", @@ -21,7 +21,7 @@ "gatsby-plugin-manifest": "^2.1.1", "gatsby-plugin-mdx": "^1.0.56", "gatsby-plugin-netlify": "^2.1.3", - "gatsby-plugin-offline": "^2.1.1", + "gatsby-plugin-offline": "^2.2.9", "gatsby-plugin-react-helmet": "^3.0.12", "gatsby-plugin-react-helmet-canonical-urls": "^1.2.0", "gatsby-plugin-sharp": "^2.1.3", @@ -38,8 +38,7 @@ "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-helmet": "^5.2.1", - "styled-system": "^5.0.5" + "react-helmet": "^5.2.1" }, "devDependencies": { "css-loader": "^3.0.0", diff --git a/solutions/react/react.mdx b/solutions/react/react.mdx index 3493c1a..3fc8b0e 100644 --- a/solutions/react/react.mdx +++ b/solutions/react/react.mdx @@ -11,7 +11,8 @@ keywords: image: ./images/reactjs.png link: /react-js-development --- -import { Box, P } from 'bricks'; +import { Box } from '@chakra-ui/core'; +import { P } from '../../src/components/typography.js'; import Title from '../../src/components/title.js'; import ContactUsButton from '../../src/components/contactUsButton.js'; import { RipplingProject } from '../../src/components/projects'; @@ -38,7 +39,6 @@ Lets talk! ---- [Here is our ReactJS Development process](/codebrahma-react-application) We have used the best libraries to develop React JS applications. Some of them are as follows. @@ -54,7 +54,6 @@ We have used the best libraries to develop React JS applications. Some of them a > For more info , take a look at our [blogs](/category/react) and [open source contributions](/open-source-contributions). ---- ## Contact Us diff --git a/src/components/button.js b/src/components/button.js new file mode 100644 index 0000000..61e4d74 --- /dev/null +++ b/src/components/button.js @@ -0,0 +1,20 @@ +import React from 'react' +import { Button as Btn } from '@chakra-ui/core'; + +const Button = (props) => ( + +) + +export default Button diff --git a/src/components/categorylink.js b/src/components/categorylink.js index 1d6a09f..7bfa717 100644 --- a/src/components/categorylink.js +++ b/src/components/categorylink.js @@ -1,29 +1,30 @@ -import {Link} from 'gatsby' -import styled from '@emotion/styled' -import {css} from 'bricks' +import React from 'react' +import { Link } from 'gatsby' +import { PseudoBox } from '@chakra-ui/core'; -export default styled(Link)( - css({ - bg: 'tint', - color: 'black.1', - fontSize:'0', - px:'6px', - py:'2px', - display:'inline-block', - borderRadius: '6px', - border: '1px solid black', - textDecoration: 'none', +export default (props) => diff --git a/src/components/contactForm.js b/src/components/contactForm.js index ed119a8..f3cd1bd 100644 --- a/src/components/contactForm.js +++ b/src/components/contactForm.js @@ -1,50 +1,47 @@ import React from "react" -import { Flex, Box, InputText, OutlinedButton } from "bricks" +import { Box, Input } from '@chakra-ui/core'; +import Button from './button'; -const ContactForm = ({ referrer }) => { - return ( -
- ( + + + + + - - - - - - - - - - - Submit - - - - - ) -} +
+ + + + + + + +) export default ContactForm diff --git a/src/components/contactUsButton.js b/src/components/contactUsButton.js index e8578c6..d3e7e2e 100644 --- a/src/components/contactUsButton.js +++ b/src/components/contactUsButton.js @@ -1,14 +1,18 @@ import React from "react" import PropTypes from "prop-types" import { navigate } from "gatsby" -import { InputButton } from "bricks" +import Button from './button'; const ContactUsButton = ({ text }) => ( - navigate("/contact")} - /> + ); ContactUsButton.defaultProps = { diff --git a/src/components/developmentServices.js b/src/components/developmentServices.js index 09507bc..0e6dd2e 100644 --- a/src/components/developmentServices.js +++ b/src/components/developmentServices.js @@ -1,10 +1,11 @@ import React from 'react'; -import { Box, P } from 'bricks'; +import { Box } from '@chakra-ui/core'; +import { P } from './typography' import Title from './title'; export default () => ( - + Reliable ReactJS Development Services

diff --git a/src/components/icons/React.js b/src/components/icons/React.js new file mode 100644 index 0000000..ea9bce8 --- /dev/null +++ b/src/components/icons/React.js @@ -0,0 +1,38 @@ +import React from 'react' + +const ReactIcon = (props) => ( + + + + + + + + +) + +export default ReactIcon diff --git a/src/components/image.js b/src/components/image.js deleted file mode 100644 index ef4d217..0000000 --- a/src/components/image.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import { StaticQuery, graphql } from "gatsby" -import Img from "gatsby-image" - -/* - * This component is built using `gatsby-image` to automatically serve optimized - * images with lazy loading and reduced file sizes. The image is loaded using a - * `StaticQuery`, which allows us to load the image from directly within this - * component, rather than having to pass the image data down from pages. - * - * For more information, see the docs: - * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `StaticQuery`: https://gatsby.dev/staticquery - */ - -const Image = () => ( - } - /> -) -export default Image diff --git a/src/components/libraries.js b/src/components/libraries.js index 5315521..547ee15 100644 --- a/src/components/libraries.js +++ b/src/components/libraries.js @@ -1,6 +1,6 @@ import React from "react" import styled from "@emotion/styled" -import { Flex, Box } from "bricks" +import { Flex, Box } from "@chakra-ui/core" import Title from "./title" const OrderedList = styled.ol` @@ -14,7 +14,7 @@ const ListItem = styled.li` export default () => ( - + ( <ListItem>Flow js</ListItem> </OrderedList> </Box> - <Box width={[1, 1 / 3]}> + <Box width={['100%', 1 / 3]}> <Title fontSize={[2, 'desktop.2']} fontWeight="bold" @@ -42,7 +42,7 @@ export default () => ( </OrderedList> </Box> - <Box width={[1, 1 / 3]}> + <Box width={['100%', 1 / 3]}> <Title fontSize={[2, 'desktop.2']} fontWeight="bold" @@ -56,7 +56,7 @@ export default () => ( </OrderedList> </Box> - <Box width={[1, 1 / 3]}> + <Box width={['100%', 1 / 3]}> <Title fontSize={[2, 'desktop.2']} fontWeight="bold" @@ -71,7 +71,7 @@ export default () => ( </OrderedList> </Box> - <Box width={[1, 1 / 3]}> + <Box width={['100%', 1 / 3]}> <Title fontSize={[2, 'desktop.2']} fontWeight="bold" @@ -87,7 +87,7 @@ export default () => ( </OrderedList> </Box> - <Box width={[1, 1 / 3]}> + <Box width={['100%', 1 / 3]}> <Title fontSize={[2, 'desktop.2']} fontWeight="bold" diff --git a/src/components/logo.js b/src/components/logo.js index a63d978..2be25d8 100644 --- a/src/components/logo.js +++ b/src/components/logo.js @@ -1,16 +1,9 @@ -import { H2 } from "bricks" import Link from "./link" import React from "react" +import { H2 } from "../components/typography"; export const Logo = ({ title }) => ( - <H2 marginTop={[0, 0]}> - <Link - to="/" - style={{ - textDecoration: `none`, - }} - > - {title} - </Link> + <H2 marginTop={[0, 0]} > + <Link to="/">{title}</Link> </H2> ) diff --git a/src/components/nav.js b/src/components/nav.js new file mode 100644 index 0000000..fe8d164 --- /dev/null +++ b/src/components/nav.js @@ -0,0 +1,82 @@ +import React, { useState } from 'react' +import { Box, Flex, PseudoBox, Icon } from '@chakra-ui/core' +import Link from './link' + +// TODO: mobile nav fix + +const Nav = ({ logo, links,}) => { + const [isOpen, setIsOpen] = useState(false) + + const mobileNav = { + position: 'fixed', + top: 0, + right: 0, + bottom: 0, + left: 0, + background: 'rgb(248, 244, 242)', + overflowY: 'auto', + zIndex: 1, + flexDirection: 'column' + } + + return ( + <Flex justify='space-between' align='center' py={1}> + {logo} + <Flex display={['none', 'flex']} css={isOpen ? mobileNav : {}}> + {links.map(({ link, title }) => ( + <PseudoBox + as={Link} + px={1} + to={link} + key={link} + fontFamily='body' + fontSize={1} + _hover={{ + textDecoration: 'underline' + }} + > + {title} + </PseudoBox> + ))} + </Flex> + <Box display={['block', 'none']} p={1} onClick={() => setIsOpen(!isOpen)}> + <Box height='3px' bg='primary' marginBottom='5px' width={'25px'}/> + <Box height='3px' bg='primary' marginBottom='5px'/> + <Box height='3px' bg='primary' marginBottom='5px'/> + </Box> + {isOpen && ( + <Flex + position='fixed' + top='0' + bottom='0' + right='0' + left='0' + bg='secondary' + flexDirection='column' + align='center' + zIndex='5' + > + <Flex p='2' justifyContent='flex-end' width='100%'> + <Icon name="close" p='1' onClick={() => setIsOpen(false)}/> + </Flex> + {links.map(({ link, title }) => ( + <Box + as={Link} + px={1} + to={link} + key={link} + fontFamily='body' + py={3} + fontSize={'desktop.3'} + userSelect='none' + > + {title} + </Box> + ))} + </Flex> + )} + </Flex> + ) +} + +export default Nav diff --git a/src/components/pagination.js b/src/components/pagination.js index 60b1359..31099fa 100644 --- a/src/components/pagination.js +++ b/src/components/pagination.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; -import {Link} from 'gatsby'; +import { Link } from 'gatsby'; const Wrapper = styled('div')` display: flex; diff --git a/src/components/project.js b/src/components/project.js index e392afa..c3fccaf 100644 --- a/src/components/project.js +++ b/src/components/project.js @@ -1,6 +1,7 @@ /** @jsx jsx */ import { jsx } from "@emotion/core" -import { Box, Flex, P } from "bricks" +import { Box, Flex } from "@chakra-ui/core" +import { P } from './typography' import PlainLink from "./link" import NonStretchedImage from "./nonStretchedImage" import Title from './title' @@ -13,7 +14,7 @@ export default ({ title, image, description, link, reverse = false }) => ( reverse ? "row-reverse" : "row" } > - <Box width={[1, '43%']}> + <Box width={['100%', '43%']}> <PlainLink to={link}> <NonStretchedImage alt={title} fluid={image} /> </PlainLink> @@ -21,7 +22,7 @@ export default ({ title, image, description, link, reverse = false }) => ( <Box width={[0, '14%']} /> <Flex flexDirection="column" - width={[1, '43%']} + width={['100%', '43%']} order={[0, 1]} mt={[1, 0]} justifyContent="center" diff --git a/src/components/textWithIcon.js b/src/components/textWithIcon.js index ef938b0..b681533 100644 --- a/src/components/textWithIcon.js +++ b/src/components/textWithIcon.js @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { P } from 'bricks'; +import { Text } from '@chakra-ui/core'; -export default styled(P)` +export default styled(Text)` display: flex; align-items: flex-start; margin-bottom: 10px !important; diff --git a/src/components/title.js b/src/components/title.js index 44f781c..6735d67 100644 --- a/src/components/title.js +++ b/src/components/title.js @@ -1,34 +1,20 @@ import React from 'react'; -import styled from '@emotion/styled'; -import { fontFamily, fontSize, fontWeight, lineHeight, space, border } from 'styled-system'; +import { Text } from '@chakra-ui/core'; -export const withTitleStyle = (comp) => styled(comp)` - ${fontFamily} - ${fontSize} - ${fontWeight} - ${lineHeight} - ${space} - ${border} -`; - -const Title = ({ comp, ...otherProps }) => { - const TitleComponent = withTitleStyle(comp || 'span'); - - return ( - <TitleComponent - fontFamily="heading" - fontSize={[4, 'desktop.4']} - lineHeight={2} - mt={[3, 4]} - mb={1} - px={0} - pt={0} - pb="2px" - borderBottom={`1px solid`} - borderColor="black.0" - {...otherProps} - /> - ); -} +const Title = (props) => ( + <Text + as='span' + fontFamily="heading" + fontSize={[4, 'desktop.4']} + lineHeight={2} + mt={[3, 4]} + mb={1} + p={0} + pb="2px" + borderBottom='1px' + borderColor="black.0" + {...props} + /> +); export default Title; diff --git a/src/components/typography.js b/src/components/typography.js new file mode 100644 index 0000000..ae183a6 --- /dev/null +++ b/src/components/typography.js @@ -0,0 +1,139 @@ +import React from 'react' +import { PseudoBox } from '@chakra-ui/core'; + +const H1 = (props) => ( + <PseudoBox + as='h1' + fontFamily='heading' + fontSize={[5,'desktop.5']} + lineHeight={3} + mt={[3, 4]} + mb={1} + p={0} + {...props} + /> +) +const H2 = (props) => ( + <PseudoBox + as='h2' + fontFamily='heading' + fontSize={[4,'desktop.4']} + lineHeight={2} + mt={[3, 4]} + mb={1} + p={0} + {...props} + /> +) +const H3 = (props) => ( + <PseudoBox + as='h3' + fontFamily='heading' + fontSize={[3,'desktop.3']} + lineHeight={1} + mt={[2, 3]} + mb={1} + p={0} + {...props} + /> +) +const H4 = (props) => ( + <PseudoBox + as='h4' + fontFamily='heading' + fontSize={[2,'desktop.2']} + lineHeight={1} + mt={2} + mb={1} + p={0} + {...props} + /> +) +const H5 = (props) => ( + <PseudoBox + as='h4' + fontFamily='heading' + fontSize={[1,'desktop.1']} + lineHeight={1} + mt={2} + mb={1} + p={0} + {...props} + /> +) + +const P = (props) => ( + <PseudoBox + as='p' + lineHeight='1' + fontSize={[1, 'desktop.1']} + mb='2' + {...props} + /> +) + +const B = (props) => ( + <PseudoBox + as='b' + fontFamily='bold' + {...props} + /> +) +const Em = (props) => ( + <PseudoBox + as='em' + fontFamily='italic' + {...props} + /> +) + +const I = (props) => ( + <PseudoBox + as='i' + fontFamily='italic' + {...props} + /> +) + +const Ul = (props) => ( + <PseudoBox + as='ul' + listStylePosition='inside' + listStyleImage='none' + listStyleType='disc' + mb={2} + {...props} + /> +) +const Ol = (props) => ( + <PseudoBox + as='ol' + listStylePosition='inside' + listStyleImage='none' + listStyleType='decimal' + mb={2} + {...props} + /> +) +const Li = (props) => ( + <PseudoBox + as='li' + fontFamily='body' + fontSize={[1, 'desktop.1']} + maxWidth="40rem" + mb={1} + {...props} + /> +) + +const Strong = (props) => ( + <PseudoBox + as='strong' + fontFamily='bold' + {...props} + /> +) + +export { + H1, H2, H3, H4, H5, P, B, Em, I, Ul, Ol, Li, Strong +} \ No newline at end of file diff --git a/src/pages/careers.mdx b/src/pages/careers.mdx index db4b278..f74e087 100644 --- a/src/pages/careers.mdx +++ b/src/pages/careers.mdx @@ -1,5 +1,4 @@ import Helmet from 'react-helmet' -import { InputButton } from 'bricks' import SEO from './../components/seo' <SEO diff --git a/src/pages/index.js b/src/pages/index.js index c580110..82b5c35 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,14 +2,17 @@ import { jsx } from "@emotion/core" // eslint-disable-next-line import { graphql, navigate } from "gatsby" +import Helmet from "react-helmet" +import { Box, Flex } from '@chakra-ui/core'; +import { H1, H3, P } from '../components/typography'; import Layout from "../templates/layout" import SEO from "../components/seo" -import Helmet from "react-helmet" -import { Box, Flex, H1, P, ReactIcon, OutlinedButton } from "bricks" +import ReactIcon from "../components/icons/React" import Title from "../components/title" import Project from "../components/project" import ContactUsButton from '../components/contactUsButton'; +import Button from '../components/button'; const IndexPage = ({ data }) => { const structuredData = `{ @@ -51,7 +54,7 @@ const IndexPage = ({ data }) => { <H1> We build your React & React Native frontend </H1> - <Box width={[1, 2/3]} mt={2} mx="auto"> + <Box width={['100%', 2/3]} mt={2} mx="auto"> <P> We take your design files & api docs. And give you a fast mobile and browser app. You focus on your backend business logic! @@ -66,13 +69,12 @@ const IndexPage = ({ data }) => { <ReactIcon width="200" height="200" /> <Title fontSize={[3, 'desktop.3']} - lineHeight={2} - borderWidth={0} + border='none' mt={0} > React & React Native - +

We have been building on React / React Native for 3 years now, and we absolutely love its declarative and functional philosophy. We @@ -83,7 +85,7 @@ const IndexPage = ({ data }) => { - + Our Featured Work @@ -101,24 +103,24 @@ const IndexPage = ({ data }) => { link="/serverless/" /> - - navigate('/work')}> + + - WE ARE ALL EARS - - + +

Whether it's a code review or a project, that you want to discuss or just want to say hello, We would love to hear from you. We cordially welcome your ideas, suggestions, and reviews regarding our work. diff --git a/src/pages/open-source-contributions.js b/src/pages/open-source-contributions.js index 90a9000..328fce6 100644 --- a/src/pages/open-source-contributions.js +++ b/src/pages/open-source-contributions.js @@ -2,104 +2,76 @@ import { jsx } from "@emotion/core" /** @jsx jsx */ import styled from "@emotion/styled" import Layout from "../templates/layout" -import { Box, Flex, H2, H4, P, HorizontalRule, css } from "bricks" +import { Box, Flex, PseudoBox } from '@chakra-ui/core'; +import { H4, P, H2 } from "../components/typography"; import { Link, graphql } from "gatsby" import Img from "gatsby-image" import SEO from "../components/seo" import PlainLink from "../components/link" import projects from "../data/open-source-projects.json" -const CardBox = styled(Flex)( - css({ - flexDirection: "column", - width: "20rem", - border: "2px solid #ddd", - justifyContent: "space-between", - padding: "0.5rem 1rem", - margin: "1rem", - "&:hover": { - boxShadow: "0px 0px 7px #ddd", - }, - }) -) - -const FlexWrap = styled(Flex)` - flex-wrap: wrap; -` - -const InlineBox = styled(Box)` - display: inline; -` - -const Title = styled(H4)` - margin: 0; -` - -const OutboundLink = styled(Link, { - shouldForwardProp: prop => prop !== "as", -})( - css({ - bg: "tint", - color: "black.1", - fontSize: "1", - px: "0.8rem", - py: "0.7rem", - display: "inline-block", - borderRadius: "6px", - border: "1px solid black", - textDecoration: "none", - "&:hover": { +const CardBox = styled(Flex)({ + flexDirection: "column", + width: "20rem", + border: "2px solid #ddd", + justifyContent: "space-between", + padding: "0.5rem 1rem", + margin: "1rem", + "&:hover": { + boxShadow: "0px 0px 7px #ddd", + }, +}) + +const OutboundLink = (props) => ( + ) -const ImageRow = styled(Flex)` - flex-direction: row; - justify-content: start; - align-items: center; - margin: 0.5rem 1rem; -` - -const FlexRow = styled(Flex)` - flex-direction: row; - justify-content: space-between; - align-items: center; - margin: 0.5rem 1rem; -` -const Paragraph = styled(P)` - max-width: max-content; -`; - const Card = ({ name, description, github, demo, image }) => { const imageData = image.childImageSharp.fixed; + return (

- - + + {name} - - {name} - - + +

{name}

+ +
-

{description}

- +

{description}

+ GitHub @@ -108,7 +80,7 @@ const Card = ({ name, description, github, demo, image }) => { Demo )} - + ) } @@ -135,11 +107,11 @@ const OpenSource = props => { ]} url="https://codebrahma.com/open-source-contributions" /> - +

Codebrahma dev team regularly contributes to open source. Some of our contributions can be found below. For more, you can checkout our  github page. - - +

+ {projects.map(({ name, description, github, demo, image }) => ( { image={props.data[image]} /> ))} - +
Contact Us to work with the best React.js / React Native consultancy :) diff --git a/src/pages/our-process.mdx b/src/pages/our-process.mdx index 9694f6c..081ae4f 100644 --- a/src/pages/our-process.mdx +++ b/src/pages/our-process.mdx @@ -1,6 +1,7 @@ import SEO from './../components/seo' import VimeoVideoContainer from './../components/vimeoVideoContainer' -import { Flex, H4, Box, P } from "bricks" +import { Flex, Box } from "@chakra-ui/core" +import { H4, P } from "../components/typography" - +

1. App Design

We accept designs in Figma, Zeplin, Sketch, Invision and etc.

 - +