[FRNT-493] Implement upload area component

src/lib/box-styles.tsx

@@ -21,7 +21,7 @@ export const Global = styled.div`
   /* should be rewritten to formulas */
   --woly-line-height: 24px;
   --woly-border-width: 1.5px;
-  --woly-rounding: 4px;
+  --woly-rounding: 3px;
   --woly-font-size: 15px;
   --woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
 

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/input/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+
 import { InputContainer, InputElement } from '../../elements/quarks';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -52,12 +53,11 @@ export const Input = styled(InputBase)`
   --local-horizontal: calc(
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
-  
+
   box-sizing: border-box;
   width: 100%;
 
   &[data-disabled='true'] {
     pointer-events: none;
   }
-
 ` as StyledComponent<'div', Record<string, unknown>, InputProps & Variant>;

src/ui/atoms/input/usage.mdx

@@ -14,14 +14,14 @@ import { ButtonIcon } from '../../atoms';
 `Input` is a field to accept data from the user. Input is used to create form fields that accept user input.
 They typically appear in forms and dialogs.
 
-Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. 
+Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly.
 This makes it easier for the user to enter information using a virtual keyboard.
 
 When a input is active or contains an error, the input’s border color and thickness vary.
 
 ## Placeholder text (Hint text)
 
-Placeholder text rests in the input field until the user starts entering text. 
+Placeholder text rests in the input field until the user starts entering text.
 It may contain an action or an example, such as a phone number or email address.
 
 ## Helper text
@@ -35,10 +35,9 @@ Specs:
 - Left justified
 - On a single line if possible, or with text wrapping (if multiple lines)
 
-
 ## Error message
 
-When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. 
+When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error.
 Until the error is fixed, the error replaces the helper text.
 
 An error message should appear on a single line, if possible.
@@ -52,7 +51,6 @@ Specs:
 - Right justified
 - Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit)
 
-
 ### Example
 
 <Playground>
@@ -69,7 +67,7 @@ Specs:
 
 Disabled text fields are uneditable. They have less opacity so that they appear less tappable.
 
-<Playground direction='vertical'>
+<Playground direction="vertical">
   <Input
     disabled
     name="name"
@@ -89,7 +87,7 @@ Disabled text fields are uneditable. They have less opacity so that they appear
   />
 </Playground>
 
-### Icons 
+### Icons
 
 Inputs can be combined with an icon on the left side or the right. Use icons on the both sides is not recommended.
 
@@ -121,10 +119,10 @@ Inputs can be combined with an icon on the left side or the right. Use icons on
   />
 </Playground>
 
-Icons can also be touch targets for nested components. 
+Icons can also be touch targets for nested components.
 
 <Playground size="L" direction="vertical">
-  <Input 
+  <Input
     rightIcon={
       <block.S>
         <ButtonIcon
@@ -140,7 +138,7 @@ Icons can also be touch targets for nested components.
     onChange={(event) => console.info('On input change')}
     variant="primary"
   />
-  <Input 
+  <Input
     leftIcon={<InfoIcon />}
     type="text"
     name="name"
@@ -162,9 +160,10 @@ Icons can also be touch targets for nested components.
 ### Variants
 
 Primary and secondary variants are should be used to focus user attention.
+
 <!-- example for secondary variant will be fixed with task FRNT-477 -->
 
-<Playground direction='vertical'>
+<Playground direction="vertical">
   <Input
     leftIcon={<InfoIcon />}
     name="name"
@@ -185,7 +184,6 @@ Primary and secondary variants are should be used to focus user attention.
   />
 </Playground>
 
-
 Error variant can be used to focus user attention on error.
 
 <Playground>
@@ -211,7 +209,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.S>
   <block.M>
     <Input
@@ -220,7 +218,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.M>
   <block.L>
     <Input
@@ -229,7 +227,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.L>
   <block.XL>
     <Input
@@ -238,7 +236,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.XL>
   <block.H>
     <Input
@@ -247,7 +245,7 @@ Size controlled by the `component-level` block property not from the props.
       placeholder="Enter your name here"
       type="text"
       variant="primary"
-  />
+    />
   </block.H>
 </Playground>
 
@@ -265,10 +263,10 @@ Inputs can be placed inside the container. Input width is equal to container siz
       placeholder="Enter your name here"
       variant="primary"
       onChange={(event) => console.info('On input change')}
-  />
+    />
   </block.L>
   <block.L>
-    <Input 
+    <Input
       leftIcon={<InfoIcon />}
       type="text"
       name="name"
@@ -288,7 +286,6 @@ Inputs can be placed inside the container. Input width is equal to container siz
   </block.L>
 </Playground>
 
-
 ### Kinds
 
 | Name    | Description                              |

src/ui/atoms/label/index.tsx

@@ -11,7 +11,9 @@ const map = (properties: LabelProps & Variant) => ({
 
 export const Label = styled.label.attrs(map)`
   --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical));
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
+  );
 
   --local-color: var(--woly-canvas-text-default);
 

src/ui/atoms/text/index.tsx

@@ -15,7 +15,7 @@ const map = (properties: TextProps & Variant) => ({
 
 export const Text = styled.p.attrs(map)`
   --local-color: var(--woly-canvas-text-default);
-  
+
   margin: 0;
   color: var(--local-color);
   font-size: 15px;

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>;