+
+dark mode: {darkMode.value ? 'enabled' : 'disabled'}
+
+ )
+}
+
+ToggleDesktop.story = {
+ name: 'Desktop',
+}
diff --git a/components/dark-mode-toggle/index.tsx b/components/dark-mode-toggle/index.tsx
new file mode 100644
index 0000000..ac629c2
--- /dev/null
+++ b/components/dark-mode-toggle/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import useDarkMode from 'use-dark-mode'
+import { SvgSun } from 'components/svgs/svg-sun'
+import { SvgMoon } from 'components/svgs/svg-moon'
+
+import styles from './index.module.scss'
+
+const DarkModeToggle = () => {
+ const darkMode = useDarkMode(false)
+
+ return (
+ +
+
+
+
+ )
+}
+
+export { DarkModeToggle }
diff --git a/components/drag-and-drop/index.module.scss b/components/drag-and-drop/index.module.scss
new file mode 100644
index 0000000..c415eac
--- /dev/null
+++ b/components/drag-and-drop/index.module.scss
@@ -0,0 +1,101 @@
+@import '../../styles/variables.scss';
+
+.root {
+ width: 100%;
+ max-width: 476px;
+ padding: 24px 24px 20px;
+ background: $white;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba($black, 0.12);
+ transition: background 0.2s ease;
+
+ &.dark {
+ background: $darker-grey;
+ }
+}
+
+.dropZoneWrapper {
+ position: relative;
+ height: 244px;
+ margin-bottom: 16px;
+ text-align: center;
+ background: $off-white;
+ border-radius: 6px;
+ transition: background 0.2s ease;
+
+ &.dark {
+ background: $dark-grey;
+ }
+}
+
+.dashed {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ border-radius: 6px;
+
+ rect {
+ transition: stroke 0.2s ease;
+ animation: dash 0.75s linear infinite forwards;
+ animation-play-state: paused;
+ }
+
+ &.dragActive rect {
+ animation-play-state: running;
+ }
+}
+
+@keyframes dash {
+ 0% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: -20;
+ }
+}
+
+.dropZone {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+.imageUpload {
+ margin-bottom: 20px;
+}
+
+.imageUploadText {
+ u {
+ font-weight: 700;
+ color: $link;
+ cursor: pointer;
+ transition: color 0.2s ease;
+ }
+
+ &.dark u {
+ color: $link-dark;
+ }
+}
+
+.info {
+ display: flex;
+ align-items: center;
+ margin-top: 8px;
+
+ svg {
+ flex: 0 0 20px;
+ margin-right: 8px;
+ }
+}
diff --git a/components/drag-and-drop/index.stories.tsx b/components/drag-and-drop/index.stories.tsx
new file mode 100644
index 0000000..65bf73e
--- /dev/null
+++ b/components/drag-and-drop/index.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import useDarkMode from 'use-dark-mode'
+import { DragAndDrop } from '.'
+import { Button } from 'components/button'
+
+export default {
+ title: 'Drag & Drop',
+}
+
+export const DragAndDropDesktop = () => {
+ const { toggle } = useDarkMode(false)
+ const onDrop = (acceptedFiles: File[]) => {
+ console.log('acceptedFiles[0]', acceptedFiles[0])
+ }
+
+ return (
+
+
+ +
+ )
+}
+
+DragAndDropDesktop.story = {
+ name: 'Desktop',
+}
diff --git a/components/drag-and-drop/index.tsx b/components/drag-and-drop/index.tsx
new file mode 100644
index 0000000..8e804bc
--- /dev/null
+++ b/components/drag-and-drop/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import classnames from 'classnames'
+import useDarkMode from 'use-dark-mode'
+import { useDropzone } from 'react-dropzone'
+import { Typography } from 'components/typography'
+import { SvgDropZone } from 'components/svgs/svg-drop-zone'
+import { SvgImageUpload } from 'components/svgs/svg-image-upload'
+import { SvgInfo } from 'components/svgs/svg-info'
+
+import styles from './index.module.scss'
+
+type DragAndDropProps = {
+ onDrop: (acceptedFiles: File[]) => void
+}
+
+const DragAndDrop = ({ onDrop }: DragAndDropProps) => {
+ const { value: isDark } = useDarkMode(false)
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
+ return (
+ + +
+
+
+
+
+
+ )
+}
+
+export { DragAndDrop }
diff --git a/components/lazy-image/index.module.scss b/components/lazy-image/index.module.scss
new file mode 100644
index 0000000..9388e59
--- /dev/null
+++ b/components/lazy-image/index.module.scss
@@ -0,0 +1,29 @@
+@import '../../styles/variables.scss';
+
+.root {
+ position: relative;
+ width: 100%;
+}
+
+.image {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ font-family: 'object-fit: cover; object-position: center;', sans-serif;
+ object-fit: cover;
+ object-position: center;
+}
+
+.placeholder {
+ composes: image;
+ transition: opacity 0.2s linear 0.2s;
+}
+
+.normal {
+ composes: image;
+ transition: opacity 0.2s linear;
+}
diff --git a/components/lazy-image/index.tsx b/components/lazy-image/index.tsx
new file mode 100644
index 0000000..3e302ca
--- /dev/null
+++ b/components/lazy-image/index.tsx
@@ -0,0 +1,54 @@
+import React, { useRef, useEffect } from 'react'
+import { LazyImageFull, ImageState } from 'react-lazy-images'
+import objectFitImages from 'object-fit-images'
+
+import styles from './index.module.scss'
+
+type LazyImageProps = {
+ src: string
+ srcRetina: string
+ srcPlaceholder: string
+ alt: string
+ aspectRatio: string
+}
+
+const LazyImage = ({ src, srcRetina, srcPlaceholder, alt, aspectRatio }: LazyImageProps) => {
+ const [widthString, heightString] = aspectRatio.split('/')
+ const width = parseInt(widthString)
+ const height = parseInt(heightString)
+
+ const imgRef = useRef
+
+
+
+
+ Drag & drop a .png file or
+
+ click here to upload it. +
+
+
+
+ + click here to upload it. +
+ 
+ ![{imageProps.alt}]()
+
+ )
+ }}
+
+ {body}
+
+ +
+ )
+}
+
+ToolTitleDesktop.story = {
+ name: 'desktop',
+}
diff --git a/components/tool-title/index.tsx b/components/tool-title/index.tsx
new file mode 100644
index 0000000..2e1e13b
--- /dev/null
+++ b/components/tool-title/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Typography } from 'components/typography'
+
+import styles from './index.module.scss'
+
+type ToolTitleProps = {
+ children: string
+}
+
+const ToolTitle = ({ children }: ToolTitleProps) => (
+ + +
+
+ {children}
+
+
+ TOOL
+
+
+)
+
+export { ToolTitle }
diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss
index b86a4c3..5753995 100644
--- a/components/typography/index.module.scss
+++ b/components/typography/index.module.scss
@@ -28,6 +28,16 @@
.footer {
font-size: $font-size-footer;
line-height: $line-height-footer;
+
+ a {
+ color: inherit;
+
+ &:focus,
+ &:active,
+ &:hover {
+ color: inherit;
+ }
+ }
}
.superscript {
@@ -53,12 +63,22 @@
.black {
color: $black;
+ transition: color 0.2s ease;
+
+ &.dark {
+ color: $white;
+ }
}
.gray {
- color: $gray;
+ color: $grey;
}
.white {
color: $white;
+ transition: color 0.2s ease;
+
+ &.dark {
+ color: $black;
+ }
}
diff --git a/components/typography/index.stories.tsx b/components/typography/index.stories.tsx
new file mode 100644
index 0000000..46545e9
--- /dev/null
+++ b/components/typography/index.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { withKnobs, text, select } from '@storybook/addon-knobs'
+import useDarkMode from 'use-dark-mode'
+import { Button } from 'components/button'
+import { Typography } from '.'
+
+export default {
+ title: 'Typography',
+ decorators: [withKnobs],
+}
+
+export const TypographyDesktop = () => {
+ const { toggle } = useDarkMode(false)
+ const variant = select(
+ 'variant',
+ ['h1', 'smallBody', 'regularBody', 'mediumBody', 'largeBody', 'footer', 'superscript'],
+ 'h1'
+ )
+ const weight = select('weight', ['regular', 'medium', 'semiBold', 'bold'], 'regular')
+ const color = select('color', ['black', 'gray', 'white'], 'black')
+ const body = text('body', 'Some text')
+ return (
+
+
+ {body}
+
+
+ +
+ )
+}
+
+TypographyDesktop.story = {
+ name: 'Desktop',
+}
diff --git a/components/typography/index.tsx b/components/typography/index.tsx
index 3f6d19d..1d7a7f0 100644
--- a/components/typography/index.tsx
+++ b/components/typography/index.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import useDarkMode from 'use-dark-mode'
import styles from './index.module.scss'
@@ -10,13 +11,20 @@ type TypographyProps = {
weight: 'regular' | 'medium' | 'semiBold' | 'bold'
color: 'black' | 'gray' | 'white'
tag?: string
-}
+} & React.DetailedHTMLProps+ +
-
- Favycon
-
-
-
-
+import styles from './index.module.scss'
-
-
- A small online tool to help you generate your favicon in all the sizes and formats you need.
-
- Just drag & drop an image and you will then get a downloadable file alongside some documentation on how to - add the favicons. -
-
-
- Created by 4 people on their 2020’s worldwide quarantine. Background image from Unsplash.
-
-
+const getRandomNumber = (min = 1, max = 3) => Math.floor(Math.random() * max) + min
-
-
-)
+ return (
+
-
- Favycon
-
-
- TOOL
-
-
- -
- Just drag & drop an image and you will then get a downloadable file alongside some documentation on how to - add the favicons. -
-
+ Favycon
+
+ A small online tool to help you generate your favicon in all the sizes and formats you need.
+
+
+ Just drag & drop an image and you will then get a downloadable file alongside some documentation on how
+ to add the favicons.
+
+
+
+ Created by 4 people on their 2020’s worldwide quarantine. Background image from{' '}
+
+ Unsplash
+
+ .
+
+
+ +
+
+
+
+
+
+