rewite surface, update palette and usage (#178)

woly-ui · Jul 19, 2021 · dcac5a0 · dcac5a0
1 parent 76aab5d
commit dcac5a0
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 106 deletions.
diff --git a/src/lib/global.ts b/src/lib/global.ts
@@ -118,15 +118,15 @@ export const Global = styled.div`
   }
 
   [data-priority='white'] {
-    --woly-shape-default: transparent;
+    --woly-shape-default: hsla(var(--bw-1000), 1);
     --woly-shape-disabled: hsla(var(--bw-200), 1);
-    --woly-shape-hover: transparent;
-    --woly-shape-active: transparent;
+    --woly-shape-hover: hsla(var(--bw-400), 1);
+    --woly-shape-active: hsla(var(--bw-600), 1);
 
-    --woly-shape-text-default: hsla(var(--bw-1000), 1);
+    --woly-shape-text-default: hsla(var(--bw-0), 1);
     --woly-shape-text-disabled: hsla(var(--bw-300), 1);
-    --woly-shape-text-hover: hsla(var(--bw-400), 1);
-    --woly-shape-text-active: hsla(var(--bw-500), 1);
+    --woly-shape-text-hover: hsla(var(--bw-0), 1);
+    --woly-shape-text-active: hsla(var(--bw-0), 1);
 
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: hsla(var(--bw-200), 1);

diff --git a/src/static/icons/index.ts b/src/static/icons/index.ts
@@ -12,3 +12,4 @@ export { default as IconSearch } from './search.svg';
 export { default as IconFilledUnchecked } from './check-filled-unchecked.svg';
 export { default as IconSpinner } from './spinner.svg';
 export { default as IconProfile } from './profile.svg';
+export { default as Threebars } from './threebars.svg';
diff --git a/src/static/icons/threebars.svg b/src/static/icons/threebars.svg
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
@@ -128,8 +128,8 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
   &[data-weight='goast'] {
     --local-shape-color: transparent;
-    --local-icon-color: var(--woly-shape-text-default);
-    --local-border-color: var(--woly-shape-text-default);
+    --local-icon-color: var(--woly-shape-default);
+    --local-border-color: var(--woly-shape-default);
 
     --local-shadow: var(--woly-border-width) var(--woly-border-width)
       calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);

diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx
@@ -146,12 +146,6 @@ In case of choosing button-icon in black-and-white priority with outline styles
       weight="goast"
       priority="white"
     />
-    <ButtonIcon
-      icon={<IconSearch />}
-      onClick={() => console.info('ButtonIcon clicked')}
-      priority="white"
-      weight="fill"
-    />
   </block.L>
 </Playground>
 

diff --git a/src/woly/atoms/surface/index.tsx b/src/woly/atoms/surface/index.tsx
@@ -1,12 +1,32 @@
+import React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 
-const map = (properties: Priority) => ({
+interface SurfaceProps {
+  weight?: string;
+}
+
+const map = (properties: SurfaceProps & Priority) => ({
   'data-priority': properties.priority || 'secondary',
+  'data-weight': properties.weight || 'goast',
 });
 
 export const Surface = styled.div.attrs(map)`
-  background-color: var(--woly-shape-text-default);
+  z-index: 1;
+
+  width: 100%;
+
   border-radius: var(--woly-rounding);
-  box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
-` as StyledComponent<'div', Record<string, unknown>, Priority>;
+
+  &[data-weight='fill'] {
+    background-color: var(--woly-shape-default);
+    border-color: var(--woly-shape-default);
+    box-shadow: 3px 3px 8px var(--woly-shape-default);
+  }
+
+  &[data-weight='goast'] {
+    background-color: var(--woly-background);
+    border-color: var(--woly-background);
+    box-shadow: 3px 3px 8px var(--woly-shape-text-disabled);
+  }
+` as StyledComponent<'div', Record<string, unknown>, SurfaceProps & Priority>;
diff --git a/src/woly/atoms/surface/usage.mdx b/src/woly/atoms/surface/usage.mdx
@@ -7,8 +7,31 @@ import {
   Playground,
   State
 } from 'lib/playground'
-import {Button, ButtonIcon, Input, Label, Surface} from 'ui'
-import {IconClose} from 'static/icons';
+import {Button, ButtonIcon, Input, Label, Surface, Popover, ListContainer, ListItem, Text} from 'ui';
+import {IconClose, Threebars} from 'static/icons';
+
+export const links = [
+  {
+    id: "fwed324fcse",
+    content: "John",
+    disabled: false
+  },
+  {
+    id: "fwed32q4fcss",
+    content: "Alex",
+    disabled: true
+  },
+  {
+    id: "fwed32q4fcsw",
+    content: "Michael",
+    disabled: false
+  },
+  {
+    id: "fwed32q4fcsb",
+    content: "Donald",
+    disabled: false
+  }
+];
 
 `Surface` is a simple layer that contains information. Surface can be used inside Popover or Sidebar component.
 
@@ -17,8 +40,10 @@ import {IconClose} from 'static/icons';
 Simple text inside `Surface`.
 
 <Playground>
-  <Surface>
-    <Content>Surface content</Content>
+  <Surface priority="primary" weight="fill">
+    <Content>
+      <Text type="XS">Surface content</Text>
+    </Content>
   </Surface>
 </Playground>
 
@@ -29,41 +54,41 @@ Sign in form based on `Surface`.
 <Playground>
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
-      <block.S style={{ padding: '20px' }}>
-        <Button onClick={change} text="Sign in" priority="primary" />
-        <div
-          style={{
-            visibility: value ? 'visible' : 'hidden',
-            marginTop: '20px',
-          }}
+      <block.L style={{ width: '300px', padding: '350px 0' }}>
+        <Popover
+          isOpen={false}
+          content={
+            <Surface priority="primary" weight="goast">
+              <FormBlock>
+                <Label priority="primary">Name</Label>
+                <Input
+                  name="name"
+                  onChange={() => console.info('On input change')}
+                  placeholder="Ivan Ivanov"
+                  type="text"
+                  priority="primary"
+                />
+                <Label priority="primary">Password</Label>
+                <Input
+                  name="password"
+                  onChange={() => console.info('On input change')}
+                  type="password"
+                  priority="primary"
+                />
+                <Button
+                  style={{ marginTop: '20px' }}
+                  onClick={() => {}}
+                  text="Submit"
+                  type="submit"
+                  priority="primary"
+                />
+              </FormBlock>
+            </Surface>
+          }
         >
-          <Surface>
-            <FormBlock>
-              <Label priority="primary">Name</Label>
-              <Input
-                name="name"
-                onChange={() => console.info('On input change')}
-                placeholder="Ivan Ivanov"
-                type="text"
-                priority="primary"
-              />
-              <Label priority="primary">Password</Label>
-              <Input
-                name="password"
-                onChange={() => console.info('On input change')}
-                type="password"
-                priority="primary"
-              />
-              <Button
-                style={{ marginTop: '20px' }}
-                onClick={() => {}}
-                text="Sign in"
-                priority="primary"
-              />
-            </FormBlock>
-          </Surface>
-        </div>
-      </block.S>
+          <Button onClick={change} text="Sign in" priority="primary" />
+        </Popover>
+      </block.L>
     )}
   </State>
 </Playground>
@@ -75,37 +100,41 @@ Aside menu based on `Surface`.
 <Playground>
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
-      <block.S style={{ paddingLeft: '320px', position: 'relative', height: '300px' }}>
+      <block style={{ position: 'relative', width: '400px', padding: '0 0 350px 0' }}>
         <ButtonIcon
           onClick={change}
-          priority="secondary"
-          style={{ position: 'absolute', left: 0, zIndex: 1 }}
-          icon={
-            <div
-              style={{
-                transform: value ? '' : 'rotate(45deg)',
-                transition: '0.5s',
-              }}
-            >
-              <IconClose />
-            </div>
-          }
-        />
-        <Aside
+          priority="default"
+          weight="transparent"
           style={{
-            width: value ? '250px' : '0',
+            position: 'absolute',
+            left: value ? '250px' : '60px',
+            zIndex: 2,
+            transition: '1s',
           }}
-        >
-          <Surface>
-            <Menu>
-              <li>Home</li>
-              <li>Shop</li>
-              <li>About</li>
-              <li>Contacts</li>
-            </Menu>
+          icon={value ? <IconClose /> : <Threebars />}
+        />
+        <Aside style={{ width: value ? '250px' : '40px', paddingLeft: value ? '10px' : '60px' }}>
+          <Surface priority="primary" weight="goast">
+            <ListContainer
+              style={{ paddingLeft: '30px', paddingTop: '70px' }}
+              priority="primary"
+              as="ul"
+            >
+              {links.map(({ id, content }) => (
+                <ListItem
+                  key={id}
+                  as="a"
+                  href={`#${id}`}
+                  onClick={() => {
+                    console.log(id);
+                  }}
+                  text={content}
+                />
+              ))}
+            </ListContainer>
           </Surface>
         </Aside>
-      </block.S>
+      </block>
     )}
   </State>
 </Playground>
@@ -122,3 +151,4 @@ Aside menu based on `Surface`.
 | ---------- | ----------------- | ------------- | ----------------------------------------------------------------- |
 | `children` | `React.ReactNode` |               | Pass any content as a children property within Surface component. |
 | `priority` | `string`          | `'secondary'` | Priority prop to style Surface component                          |
+| `weight`   | `string`          | `goast`       | Set surface`s weight (ex.: fill, goast)                           |
diff --git a/src/woly/atoms/text/index.tsx b/src/woly/atoms/text/index.tsx
@@ -15,7 +15,7 @@ const map = (properties: TextProps & Priority) => ({
 });
 
 export const Text = styled.p.attrs(map)`
-  --local-color: var(--woly-canvas-text-default);
+  --local-color: var(--woly-shape-text-default);
 
   margin: 0;
 

diff --git a/src/woly/molecules/modal/index.tsx b/src/woly/molecules/modal/index.tsx
@@ -84,6 +84,8 @@ const ModalBase: React.FC<ModalProps & Priority> = ({
 };
 
 const Shape = styled(Surface)`
+  /* TODO: rewrite formulas [13.07.21]*/
+  --local-inset-padding: 36px;
   position: relative;
   z-index: 1;
 
@@ -95,17 +97,15 @@ const Shape = styled(Surface)`
   max-width: calc((100% - (var(--local-inset-padding) * 2)) / 3 * 2);
 
   max-height: 100%;
-
-  padding: var(--local-vertical) var(--local-horizontal);
 `;
 
 export const Modal = styled(ModalBase)`
   ${box}
 
   /* TODO: rewrite formulas [13.07.21]*/
   --local-gap: calc(3px * var(--woly-component-level) * var(--woly-main-level));
-  --local-vertical: calc(var(--woly-const-m) * (var(--woly-component-level) + 1));
   --local-inset-padding: 36px;
+  --local-vertical: calc(var(--woly-const-m) * (var(--woly-component-level) + 1));
 
   position: fixed;
   top: 0;
@@ -118,7 +118,8 @@ export const Modal = styled(ModalBase)`
   justify-content: center;
   box-sizing: border-box;
   max-height: 100vh;
-  padding: --local-inset-padding;
+
+  padding: var(--local-inset-padding);
 
   visibility: hidden;
   opacity: 0;