[FRNT-562] add icon component (#163)

* add icon component * fix * fix naming * fix usage * fix usage
woly-ui · Jul 8, 2021 · 2a4d8de · 2a4d8de
1 parent 3884804
commit 2a4d8de
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 2 deletions.
diff --git a/src/lib/global.ts b/src/lib/global.ts
@@ -86,6 +86,7 @@ export const Global = styled.div`
   --woly-font-size: 15px;
 
   --woly-background: hsla(var(--bw-1000), 1);
+  --woly-base-black: hsla(var(--bw-0), 1);
   --woly-neutral: hsla(var(--bw-500), 1);
   --woly-focus-color: hsla(var(--primary-700), 1);
   --woly-danger-color: hsla(var(--danger-500), 1);

diff --git a/src/woly/atoms/icon-box/index.tsx b/src/woly/atoms/icon-box/index.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Priority } from 'lib/types';
+import { box } from 'ui/elements/box';
+
+interface IconBoxProps {
+  className?: string;
+  children: React.ReactNode;
+  weight?: string;
+}
+
+const IconBoxBase: React.FC<IconBoxProps & Priority> = ({
+  className,
+  children,
+  priority = 'secondary',
+  weight = 'transparent',
+}) => (
+  <div className={className} data-weight={weight} data-priority={priority}>
+    <span data-icon="icon-component">{children}</span>
+  </div>
+);
+
+export const IconBox = styled(IconBoxBase)`
+  ${box}
+  --local-icon-size: var(--woly-line-height);
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  font-size: var(--woly-font-size);
+  line-height: var(--woly-line-height);
+
+  border-style: solid;
+
+  border-width: var(--woly-border-width);
+  border-radius: var(--woly-rounding);
+  outline: none;
+
+  [data-icon] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &[data-weight='fill'] {
+    --local-shape-color: var(--woly-shape-default);
+    --local-fill-color: var(--woly-shape-text-default);
+    --local-border-color: var(--woly-shape-default);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='icon-component'] > svg > path {
+      fill: var(--local-fill-color);
+    }
+  }
+
+  &[data-weight='outline'] {
+    --local-shape-color: transparent;
+    --local-fill-color: var(--woly-shape-default);
+    --local-border-color: var(--woly-shape-default);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='icon-component'] > svg > path {
+      fill: var(--local-fill-color);
+    }
+  }
+
+  &[data-weight='goast'] {
+    --local-shape-color: transparent;
+    --local-fill-color: var(--woly-base-black);
+    --local-border-color: transparent;
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='icon-component'] > svg > path {
+      fill: var(--local-fill-color);
+    }
+  }
+
+  &[data-weight='transparent'] {
+    --local-shape-color: transparent;
+    --local-fill-color: var(--woly-shape-default);
+    --local-border-color: transparent;
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='icon-component'] > svg > path {
+      fill: var(--local-fill-color);
+    }
+  }
+` as StyledComponent<'div', Record<string, unknown>, IconBoxProps & Priority>;
diff --git a/src/woly/atoms/icon-box/usage.mdx b/src/woly/atoms/icon-box/usage.mdx
@@ -0,0 +1,128 @@
+import { IconBox, Box, Tooltip, Text, Input } from 'ui';
+import {IconClose, IconInfo} from 'static/icons';
+import {block, Playground} from 'lib/playground';
+
+### Example
+
+<!-- TODO update example with PRs FRNT-4transparent1 & FRNT-520 -->
+
+`IconBox` is an icon-wrapper component that adds a box model to static icon elements.
+
+## Weight
+
+<Playground>
+  <IconBox priority="primary" weight="transparent">
+    <IconClose />
+  </IconBox>
+  <IconBox priority="primary" weight="outline">
+    <IconClose />
+  </IconBox>
+  <IconBox priority="primary" weight="fill">
+    <IconClose />
+  </IconBox>
+</Playground>
+
+## Priority
+
+<Playground>
+  <IconBox priority="secondary" weight="transparent">
+    <IconClose />
+  </IconBox>
+  <IconBox priority="secondary" weight="outline">
+    <IconClose />
+  </IconBox>
+  <IconBox priority="secondary" weight="fill">
+    <IconClose />
+  </IconBox>
+</Playground>
+
+## Size
+
+Size is controlled by the component-level block property, not by the props.
+
+<Playground>
+  <block.N>
+    <IconBox priority="secondary" weight="fill">
+      <IconClose />
+    </IconBox>
+  </block.N>
+  <block.XS>
+    <IconBox priority="secondary" weight="fill">
+      <IconClose />
+    </IconBox>
+  </block.XS>
+  <block.S>
+    <IconBox priority="secondary" weight="fill">
+      <IconClose />
+    </IconBox>
+  </block.S>
+  <block.M>
+    <IconBox priority="secondary" weight="fill">
+      <IconClose />
+    </IconBox>
+  </block.M>
+  <block.L>
+    <IconBox priority="secondary" weight="fill">
+      <IconClose />
+    </IconBox>
+  </block.L>
+</Playground>
+
+## Example with other components
+
+<Playground>
+  <block.L style={{ width: '400px', padding: '120px' }}>
+    <Tooltip
+      message={
+        <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+          <IconBox priority="default" weight="goast">
+            <IconInfo />
+          </IconBox>
+          <Box>
+            <Text>г. Комсомольск на Амуре, ул. 1-го октября, д. 145, корп. 9, кв. 16</Text>
+          </Box>
+        </div>
+      }
+      position="bottom"
+    >
+      <Input
+        leftIcon={<IconInfo />}
+        name="adress"
+        onChange={() => console.info('On input change')}
+        type="text"
+        priority="primary"
+        value="г. Комсомольск на Амуре, ул. 1-го октября, д. 145, корп. 9, кв. 16"
+      />
+    </Tooltip>
+  </block.L>
+</Playground>
+
+<Playground>
+  <block.L style={{ display: 'flex', alignItems: 'center', padding: '120px' }}>
+    <Tooltip
+      message={
+        <Box>
+          <Text>Для перехода на страницу с достопримечательностями кликните по ссылке </Text>
+        </Box>
+      }
+      position="bottom"
+    >
+      <block.S>
+        <IconBox priority="default" weight="goast" style={{ alignSelf: 'flex-start' }}>
+          <IconInfo />
+        </IconBox>
+      </block.S>
+    </Tooltip>
+    <Box>
+      <a href="/">Посетите город Комсомольск на Амуре </a>
+    </Box>
+  </block.L>
+</Playground>
+
+### Props
+
+| Name       | Type              | Default       | Description                                            |
+| ---------- | ----------------- | ------------- | ------------------------------------------------------ |
+| `children` | `React.ReactNode` | `null`        | Component to show as content (ex.: svg-icon)           |
+| `weight`   | `string`          | `transparent` | Change icon`s styles (ex.: fill, outline, transparent) |
+| `priority` | `string`          | `'secondary'` | Priority prop to style Icon component                  |
diff --git a/src/woly/atoms/index.ts b/src/woly/atoms/index.ts
@@ -1,18 +1,19 @@
+export { Avatar } from './avatar';
 export { Backdrop } from './backdrop';
 export { Box, BoxVertical } from './box';
 export { Button } from './button';
 export { ButtonIcon } from './button-icon';
 export { Chip } from './chip';
 export { HeaderPanel } from './header-panel';
 export { Heading } from './heading';
+export { IconBox } from './icon-box';
 export { Input } from './input';
 export { Label } from './label';
 export { ListItem, ListContainer } from './list';
+export { Loader } from './loader';
 export { Separator } from './separator';
 export { Surface } from './surface';
-export { Loader } from './loader';
 export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';
 export { UploadArea } from './upload-area';
-export { Avatar } from './avatar';