[FRNT-477] Implement danger variant (#95)

woly-ui · Apr 27, 2021 · 2b74b94 · 2b74b94
1 parent 75093a0
commit 2b74b94
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 49 deletions.
diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
@@ -26,6 +26,7 @@ export const Global = styled.div`
   --woly-neutral: var(--palette-snow-500);
   --woly-focus: var(--palette-lavender-500);
   --woly-background: var(--palette-snow-0);
+  --woly-danger: var(--palette-dawn-300);
   
   [data-variant='primary'] {
     --woly-shape-default: var(--palette-lavender-300);
@@ -68,18 +69,26 @@ export const Global = styled.div`
     --woly-text-disabled: #e4e4e4;
     --woly-fill-disabled: #e4e4e4;
   }
-  [data-variant='error'] {
-    --woly-border-width: 1.5px;
+  [data-variant='danger'] {
+    --woly-shape-default: var(--woly-danger);
+    --woly-shape-disabled: var(--palette-snow-300);
+    --woly-shape-hover: var(--woly-danger);
+    --woly-shape-active: var(--woly-danger);
 
-    --woly-background: #ffffff;
-    --woly-border: #eb5656;
-    --woly-color: #eb5656;
-    --woly-label-color: #eb5656;
-    --woly-canvas: #eb5656;
-
-    --woly-border-focus: #eb5656;
-    --woly-error-text: #eb5656;
-    --woly-hint-color: #ff9097;
+    --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(--woly-danger);
+    --woly-canvas-active: var(--woly-danger);
+
+    --woly-canvas-text-default: var(--woly-danger);
+    --woly-canvas-text-disabled: var(--palette-snow-500);
+    --woly-canvas-text-hover: var(--woly-danger);
+    --woly-canvas-text-active: var(--woly-danger);
   }
 `;
 

diff --git a/src/ui/atoms/heading/index.tsx b/src/ui/atoms/heading/index.tsx
@@ -1,13 +1,6 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-
-/**
- * --woly-font-size
- * --woly-label-color
- * --woly-line-height
- */
-
 interface HeadingProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   children: React.ReactNode;
   size?: 1 | 2 | 3;
@@ -21,7 +14,9 @@ const map = (properties: HeadingProps & Variant) => ({
 });
 
 export const Heading = styled.span.attrs(map)`
-  color: var(--woly-color, #000000);
+  --local-color: var(--woly-canvas-text-default);
+
+  color: var(--local-color);
   font-size: 24px;
   line-height: 30px;
   font-weight: 500;

diff --git a/src/ui/atoms/input/usage.mdx b/src/ui/atoms/input/usage.mdx
@@ -188,17 +188,14 @@ Primary and secondary variants are should be used to focus user attention.
 
 Error variant can be used to focus user attention on error.
 
-<!-- example will be fixed with task FRNT-477 -->
-
 <Playground>
   <Input
     leftIcon={<InfoIcon />}
     name="name"
     onChange={(event) => console.info('On input change')}
     placeholder="Error input"
     type="text"
-    value="Error"
-    variant="Error"
+    variant="danger"
   />
 </Playground>
 

diff --git a/src/ui/atoms/label/index.tsx b/src/ui/atoms/label/index.tsx
@@ -10,12 +10,14 @@ const map = (properties: LabelProps & Variant) => ({
 });
 
 export const Label = styled.label.attrs(map)`
-  --vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --horizontal: calc(var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--vertical));
+  --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));
 
-  padding: var(--woly-vertical, 6px) var(--woly-horizontal, 6px);
+  --local-color: var(--woly-canvas-text-default);
 
-  color: var(--woly-label-color, #000000);
+  padding: var(--local-vertical) var(--local-horizontal);
+
+  color: var(--local-color);
   font-size: var(--woly-font-size, 15px);
   line-height: var(--woly-line-height, 24px);
 ` as StyledComponent<'label', Record<string, unknown>, LabelProps & Variant>;
diff --git a/src/ui/atoms/text-area/index.tsx b/src/ui/atoms/text-area/index.tsx
@@ -104,7 +104,7 @@ export const TextArea = styled(TextAreaBase)`
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
-  --local-border-color: var(--woly-neutral);
+  --local-border-color: var(--woly-canvas-text-hover);
   --local-background-color: var(--woly-canvas-default);
   --local-value-color: var(--woly-canvas-text-default);
 

diff --git a/src/ui/atoms/text-area/usage.mdx b/src/ui/atoms/text-area/usage.mdx
@@ -41,6 +41,17 @@ Primary and danger variants are should be used to focus user attention.
   />
 </Playground>
 
+Error variant focus user attention on error.
+
+<Playground>
+  <TextArea
+    name="name"
+    placeholder="Primary"
+    onChange={() => console.info('On textarea change')}
+    variant="danger"
+  />
+</Playground>
+
 ## Disabled
 
 This Boolean attribute indicates that the user cannot interact with the control.

diff --git a/src/ui/atoms/text/index.tsx b/src/ui/atoms/text/index.tsx
@@ -1,12 +1,6 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-
-/**
- * --woly-hint-color
- * --woly-color
- */
-
 interface TextProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   children: React.ReactNode;
   type?: 'L' | 'S' | 'XS' | 'M' | 'subtitle' | 'hint';
@@ -20,8 +14,10 @@ const map = (properties: TextProps & Variant) => ({
 });
 
 export const Text = styled.p.attrs(map)`
+  --local-color: var(--woly-canvas-text-default);
+  
   margin: 0;
-  color: var(--woly-color, #000000);
+  color: var(--local-color);
   font-size: 15px;
   line-height: 21px;
   font-weight: 400;
@@ -52,7 +48,7 @@ export const Text = styled.p.attrs(map)`
   &[data-type='hint'] {
     font-size: 12px;
     line-height: 15px;
-    color: var(--woly-hint-color, #000000);
+    color: var(--local-color);
   }
 
   &[data-type='hint'][data-weight='light'] {

diff --git a/src/ui/elements/quarks/input-container/index.tsx b/src/ui/elements/quarks/input-container/index.tsx
@@ -69,7 +69,7 @@ export const InputContainer = styled(InputContainerBase)`
   --local-compensate: var(--woly-const-m);
 
   --local-background-color: var(--woly-canvas-default);
-  --local-border-color: var(--woly-neutral);
+  --local-border-color: var(--woly-canvas-text-hover);
   --local-icon-fill: var(--woly-canvas-text-active);
   --local-value-color: var(--woly-canvas-text-default);
 
@@ -132,12 +132,11 @@ export const InputContainer = styled(InputContainerBase)`
   }
 
   &:focus {
-    --local-border-color: var(--woly-focus);
-    box-shadow: 0 0 0 2px var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
     outline: none;
 
     [data-icon] {
-        --local-icon-fill: var(--woly-canvas-text-default);
+      --local-icon-fill: var(--woly-canvas-text-default);
     }
   }
 

diff --git a/src/ui/molecules/field/usage.mdx b/src/ui/molecules/field/usage.mdx
@@ -27,7 +27,7 @@ The input line indicates where to enter text, displayed below the label.
 <Playground>
   <Field label="Label">
     <Input
-      variant="default"
+      variant="primary"
       name="name"
       onChange={(event) => console.info('On input change')}
       placeholder="Placeholder"
@@ -48,12 +48,12 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
     <Checkbox text="Item text" variant="default" />
     <Checkbox text="Item text" variant="default" />
   </Field>
-  <Field label="Label for a standalone component" variant="default">
+  <Field label="Label for a standalone component" variant="primary">
     <TextArea
       name="name"
       placeholder="TextArea"
       onChange={() => console.info('On textarea change')}
-      variant="default"
+      variant="primary"
       overflow="hidden"
       isDisabled
     />
@@ -65,7 +65,7 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
       name="input"
       onChange={() => console.info('change')}
       placeholder="Enter password"
-      variant="default"
+      variant="primary"
     />
   </Field>
 </Playground>{' '}
@@ -85,7 +85,7 @@ Labels and children component can be replaced in row
           isChecked={value}
           onChange={change}
           id="roundTwo"
-          variant="round"/>
+          variant="primary"/>
       </Field>
     )}
   </State>
@@ -106,7 +106,44 @@ or in column variants
           isChecked={value}
           onChange={change}
           id="roundOne"
-          variant="round"/>
+          variant="primary"/>
+      </Field>
+    )}
+  </State>
+</Playground>
+
+### Variants 
+
+Error variant can be used to focus user attention on error.
+
+<Playground direction="vertical">
+  <Field label="Textarea with error" variant="danger">
+    <TextArea
+      name="name"
+      placeholder="TextArea"
+      onChange={() => console.info('On textarea change')}
+      variant="danger"
+      overflow="hidden"
+      isDisabled
+    />
+  </Field>
+  <Field label="Input with error" variant="danger">
+    <Input
+      variant="danger"
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      placeholder="Placeholder"
+      type="text"
+    />
+  </Field>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <Field label="Switch with error">
+        <Switch
+          isChecked={value}
+          onChange={change}
+          id="roundOne"
+          variant="danger"/>
       </Field>
     )}
   </State>

diff --git a/src/ui/molecules/input-password/usage.mdx b/src/ui/molecules/input-password/usage.mdx
@@ -47,7 +47,7 @@ Disabled text fields are uneditable. They have less opacity so that they appear
 ### Variants
 
 Primary and secondary variants are should be used to focus user attention.
-<!-- example for secondary variant will be fixed with task FRNT-477 -->
+<!-- example for secondary variant will be fixed with task FRNT-476 -->
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
@@ -76,8 +76,6 @@ Primary and secondary variants are should be used to focus user attention.
 
 Error variant can be used to focus user attention on error.
 
-<!-- example will be fixed with task FRNT-477 -->
-
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
     {(value, change) => (

diff --git a/src/ui/molecules/switch/usage.mdx b/src/ui/molecules/switch/usage.mdx
@@ -60,6 +60,18 @@ Switch is used to choose between two different options.
   </State>
 </Playground>
 
+### Variants
+
+Error variant focus attention user on error
+
+<Playground direction="horizontal">
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <Switch id="unchecked" checked={value} onChange={change} variant="danger" />
+    )}
+  </State>
+</Playground>
+
 ### Kinds
 
 | Name     | Description                                           |