WIP: Dropzone

.gitignore

@@ -27,4 +27,6 @@ typings/
 .env
 .next
 src/**/*.d.ts
-test
+test
+.history
+.prettierrc

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

src/components/DropZone/Circle/Circle.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Text } from '../../Typography/Text';
+import {
+    StyledLoadingCircle,
+    StyledSVG,
+    StyledSVGCircleOne,
+    StyledSVGCircleTwo,
+    StyledLoadingCircleText,
+} from './style/Circle.style';
+import { Type } from 'src/types';
+
+interface LoadingCircleProps {
+    progress: number;
+}
+
+export const LoadingCircle: React.FC<LoadingCircleProps> = (props) => {
+    const { progress } = props;
+    const totalDashOffset = 251;
+    const currentDashOffset =
+        totalDashOffset - progress * (totalDashOffset / 100);
+    let circleTwoType: Type = 'error';
+
+    if (progress > 25) {
+        circleTwoType = 'warning';
+    }
+    if (progress > 50) {
+        circleTwoType = 'primary';
+    }
+    if (progress > 75) {
+        circleTwoType = 'success';
+    }
+
+    return (
+        <StyledLoadingCircle>
+            <StyledSVG height="100" width="100" className="svg">
+                <StyledSVGCircleOne cx="50" cy="50" r="40" fill="none" />
+                <StyledSVGCircleTwo
+                    cx="50"
+                    cy="50"
+                    r="40"
+                    fill="none"
+                    type={circleTwoType}
+                    dashOffset={currentDashOffset}
+                />
+            </StyledSVG>
+            <StyledLoadingCircleText key={progress} type={circleTwoType}>
+                {`${progress}%`}
+            </StyledLoadingCircleText>
+        </StyledLoadingCircle>
+    );
+};

src/components/DropZone/Circle/index.ts

@@ -0,0 +1 @@
+export * from './Circle';

src/components/DropZone/Circle/style/Circle.style.ts

@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components';
+import { Text } from '../../../Typography/Text';
+import { Type } from 'src/types';
+
+interface StyledSVGCircleTwoProps {
+    type: Type;
+    dashOffset: number;
+}
+
+interface StyledSVGCircleText {
+    type: Type;
+    key: number;
+}
+
+export const StyledLoadingCircle = styled.div`
+    height: 100px;
+    width: 100px;
+    position: relative;
+`;
+
+export const StyledSVG = styled.svg`
+    display: block;
+    max-width: 100%;
+`;
+
+export const StyledSVGCircleOne = styled.circle`
+    stroke: ${(props) => props.theme.color.border};
+    stroke-width: 3px;
+`;
+
+export const StyledSVGCircleTwo = styled.circle<StyledSVGCircleTwoProps>`
+    stroke-width: 3px;
+    stroke-dasharray: 251;
+    stroke-dashoffset: ${(props) => props.dashOffset};
+    transform-origin: 50% 50%;
+    transform: rotate(-90deg);
+    transition: stroke 1s ease;
+
+    ${(props) =>
+        props.type === 'error' &&
+        css`
+            stroke: ${props.theme.color.error.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'warning' &&
+        css`
+            stroke: ${props.theme.color.warning.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'primary' &&
+        css`
+            stroke: ${props.theme.color.primary.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'success' &&
+        css`
+            stroke: ${props.theme.color.success.alpha};
+        `}
+`;
+
+export const StyledLoadingCircleText = styled(Text)<StyledSVGCircleText>`
+    font-size: 26px;
+    text-anchor: middle;
+    font-weight: bold;
+    position: absolute;
+    top: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: color 1s ease;
+
+    ${(props) =>
+        props.type === 'error' &&
+        css`
+            color: ${props.theme.color.error.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'warning' &&
+        css`
+            color: ${props.theme.color.warning.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'primary' &&
+        css`
+            color: ${props.theme.color.primary.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'success' &&
+        css`
+            color: ${props.theme.color.success.alpha};
+        `}
+
+`;

src/components/DropZone/Circle/style/index.ts

@@ -0,0 +1 @@
+export * from './Circle.style';

src/components/DropZone/DropZone.story.jsx

@@ -0,0 +1,52 @@
+import { select, text, withKnobs, number } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { specs } from 'storybook-addon-specifications';
+import { defaultValues } from '../../constants/defaultValues';
+import { Component, tests } from './DropZone.test';
+import { DropZone } from './DropZone';
+
+const stories = storiesOf('DropZone', module);
+
+stories.addDecorator(withKnobs);
+
+stories.add(
+    'Overview',
+    () => {
+        return (
+            <>
+                <DropZone />
+            </>
+        );
+    },
+    {
+        info: { inline: true },
+    }
+);
+
+stories.add(
+    'Playground',
+    () => {
+        const size = select(
+            `size:`,
+            ['small', `medium`, 'large'],
+            defaultValues.size
+        );
+        const type = select(
+            `type:`,
+            ['primary', 'success', 'warning', 'error'],
+            defaultValues.type
+        );
+        const state = select(`state:`, ['default', 'uploading'], 'default');
+        const progress = number(`progress: `, 0);
+
+        const dropZone = Component(size, type, state, progress);
+
+        specs(() => tests(dropZone));
+
+        return dropZone;
+    },
+    {
+        info: { inline: true },
+    }
+);

src/components/DropZone/DropZone.test.jsx

@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { defaultValues } from '../../constants/defaultValues';
+import expect from 'expect';
+import { DropZone } from './DropZone';
+
+export const Component = (size, type, state, progress) => {
+    return (
+        <DropZone size={size} type={type} state={state} progress={progress} />
+    );
+};
+
+export const tests = (dropZone = Component()) => {
+    let output = shallow(dropZone);
+};
+
+tests();