Merge remote-tracking branch 'origin/feat/FRNT-493-implement-download…

…-area-component'

src/lib/box-styles.tsx

@@ -20,8 +20,8 @@ export const Global = styled.div`
 
   /* should be rewritten to formulas */
   --woly-line-height: 24px;
-  --woly-border-width: 2px;
-  --woly-rounding: 4px;
+  --woly-border-width: 1.5px;
+  --woly-rounding: 3px;
   --woly-font-size: 15px;
   --woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
 
@@ -47,7 +47,7 @@ export const Global = styled.div`
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: var(--palette-snow-100);
     --woly-canvas-hover: var(--palette-snow-500);
-    --woly-canvas-active: var(--palette-lavender-500);
+    --woly-canvas-active: var(--palette-snow-500);
 
     --woly-canvas-text-default: var(--palette-snow-1000);
     --woly-canvas-text-disabled: var(--palette-snow-500);
@@ -56,25 +56,23 @@ export const Global = styled.div`
   }
 
   [data-variant='secondary'] {
-    --woly-shape-default: var(--palette-snow-500);
-    --woly-shape-disabled: var(--palette-snow-100);
-    --woly-shape-hover: var(--palette-snow-500);
-    --woly-shape-active: var(--palette-snow-500);
-
-    --woly-shape-text-default: var(--palette-snow-0);
-    --woly-shape-text-disabled: var(--palette-snow-0);
-    --woly-shape-text-hover: var(--palette-snow-0);
-    --woly-shape-text-active: var(--palette-snow-0);
-
-    --woly-canvas-default: transparent;
-    --woly-canvas-disabled: var(--palette-snow-100);
-    --woly-canvas-hover: var(--palette-snow-500);
-    --woly-canvas-active: var(--palette-snow-500);
-
-    --woly-canvas-text-default: var(--palette-snow-1000);
-    --woly-canvas-text-disabled: var(--palette-snow-500);
-    --woly-canvas-text-hover: var(--palette-snow-500);
-    --woly-canvas-text-active: var(--palette-snow-500);
+    --woly-border-width: 1.5px;
+
+    --woly-background: #ffffff;
+    --woly-border: #b0a3f4;
+    --woly-color: #b0a3f4;
+    --woly-hint-color: #c4c4c4;
+    --woly-background-hover: #ffffff;
+    --woly-border-hover: #c9c0f8;
+    --woly-color-hover: #c9c0f8;
+    --woly-background-focus: #ffffff;
+    --woly-border-focus: #9381f1;
+    --woly-color-focus: #9381f1;
+    --woly-background-disabled: #c0c0c0;
+    --woly-border-disabled: #c0c0c0;
+    --woly-color-disabled: #a39bb2;
+    --woly-text-disabled: #e4e4e4;
+    --woly-fill-disabled: #e4e4e4;
   }
   [data-variant='danger'] {
     --woly-shape-default: var(--woly-danger);
@@ -187,7 +185,7 @@ const Frame = styled.div`
   max-width: 100%;
   padding: 1rem;
   overflow: auto;
-  border: 2px solid rgb(246, 248, 250);
+  border: 2px solid var(--base, rgb(246, 248, 250));
   border-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -258,6 +256,14 @@ export const Line = styled.div`
   align-items: baseline;
 `;
 
+export const Modal = styled.div`
+  z-index: 1;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
 export const ColumnContent = styled.div`
   background: var(--palette-lavender-500);
   color: var(--palette-snow-0);
@@ -269,10 +275,3 @@ export const ColumnContent = styled.div`
 export const TableContent = styled.div`
   padding: 10px;
 `;
-
-export const Form = styled.form`
-  width: 100%;
-  & > div {
-    margin-bottom: 10px;
-  }
-`;

src/ui/atoms/index.ts

@@ -15,3 +15,4 @@ export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';
 export { Tooltip } from './tooltip';
+export { UploadArea } from './upload-area';

src/ui/atoms/upload-area/index.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Variant } from 'lib/types';
+
+interface UploadAreaProps {
+  className?: string;
+  center?: boolean;
+  content?: React.ReactNode;
+}
+
+const UploadAreaBase: React.FC<UploadAreaProps & Variant> = ({
+  className,
+  center = false,
+  content,
+  variant = 'default',
+}) => (
+  <div className={className} data-variant={variant} tabIndex={0}>
+    <div data-content data-center={center}>
+      <div data-overlay />
+      {content}
+    </div>
+  </div>
+);
+
+export const UploadArea = styled(UploadAreaBase)`
+  --local-border-color: var(--woly-canvas-hover);
+  --local-background-color: var(--woly-canvas-disabled);
+
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+  overflow: auto;
+
+  background-color: var(--local-background-color);
+  border: var(--woly-border-width) dashed var(--local-border-color);
+  border-radius: var(--woly-rounding);
+
+  [data-center='true'] {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:focus {
+    --local-border-color: var(--woly-focus);
+    --local-background-color: rgba(110, 59, 254, 0.05);
+    outline: none;
+
+    [data-overlay] {
+      width: 100%;
+      height: 100%;
+
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      background: rgba(110, 59, 254, 0.05);
+    }
+  }
+` as StyledComponent<'div', Record<string, unknown>, UploadAreaProps & Variant>;