feat: icons refactoring

packages/core/package.json

@@ -18,7 +18,6 @@
   "dependencies": {
     "@emotion/core": "^10.0.16",
     "@emotion/styled": "^10.0.15",
-    "@qiwi/pijma-media": "^1.x.x",
     "@types/dom-helpers": "^3.4.1",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",

packages/core/src/cross-burger/CrossBurger.tsx

@@ -3,33 +3,42 @@ import React, {FC} from 'react'
 import {Value, Svg, Path} from '../primitive'
 
 export interface CrossBurgerProps {
-  width?: Value
-  height?: Value
+  size?: Value
   color?: string
   active?: boolean
 }
 
-export const CrossBurger: FC<CrossBurgerProps> = (props) => (
-  <Svg viewBox="0 0 24 24" width={props.width} height={props.height}>
+export const CrossBurger: FC<CrossBurgerProps> = ({
+  size = 6,
+  color = '#000',
+  active = false,
+}) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
     <Path
       d="M1,7 L23,7 C23.5522847,7 24,6.55228475 24,6 C24,5.44771525 23.5522847,5 23,5 L1,5 C0.44771525,5 0,5.44771525 0,6 C0,6.55228475 0.44771525,7 1,7 Z"
-      fill={props.color}
-      transform={`rotate(${props.active ? 45 : 0}deg)`}
+      fill={color}
+      transform={`rotate(${active ? 45 : 0}deg)`}
       transformOrigin="5px 9px"
       transition="transform 0.3s ease-in-out"
     />
     <Path
       d="M1,13 L23,13 C23.5522847,13 24,12.5522847 24,12 C24,11.4477153 23.5522847,11 23,11 L1,11 C0.44771525,11 0,11.4477153 0,12 C0,12.5522847 0.44771525,13 1,13 Z"
-      fill={props.color}
-      opacity={props.active ? 0 : 1}
+      fill={color}
+      opacity={active ? 0 : 1}
       transition="opacity 0.15s ease-in-out"
     />
     <Path
       d="M1,19 L23,19 C23.5522847,19 24,18.5522847 24,18 C24,17.4477153 23.5522847,17 23,17 L1,17 C0.44771525,17 0,17.4477153 0,18 C0,18.5522847 0.44771525,19 1,19 Z"
-      fill={props.color}
-      transform={`rotate(${props.active ? -45 : 0}deg)`}
+      fill={color}
+      transform={`rotate(${active ? -45 : 0}deg)`}
       transformOrigin="5px 15px"
       transition="transform 0.3s ease-in-out"
     />
   </Svg>
 )
+
+CrossBurger.defaultProps = {
+  size: 6,
+  color: '#000',
+  active: false,
+}

packages/core/src/grid/Grid.md

@@ -1,4 +1,4 @@
-```jsx {"separated": true}
+```jsx
 <Grid layout={[2, 6, 4]}>
   <Block>
     <Box width={1} height={20}/>
@@ -12,7 +12,7 @@
 </Grid>
 ```
 
-```jsx {"separated": true}
+```jsx
 <Grid layout={[2]}>
   <Block>
     <Box width={1} height={20}/>
@@ -47,7 +47,7 @@
 </Grid>
 ```
 
-```jsx {"separated": true}
+```jsx
 <Grid columns={5} layout={[1]}>
   <Block>
     <Box width={1} height={20}/>
@@ -67,7 +67,7 @@
 </Grid>
 ```
 
-```jsx {"separated": true}
+```jsx
 <Grid layout={[6]}>
   <Block>
     <Box width={1} height={20}/>

packages/core/src/icon/FilterIcon.tsx

@@ -0,0 +1,38 @@
+import React, {FC} from 'react'
+
+import {Svg, Path, Circle} from '../primitive'
+
+export interface FilterIconProps {
+  size?: number
+  color?: string
+  active?: boolean
+}
+
+export const FilterIcon: FC<FilterIconProps> = ({
+  size = 6,
+  color = '#000',
+  active = false,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" focusable="false">
+    <Path
+      d="M14 6a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-1.83-1a3.001 3.001 0 0 1 5.66 0H20a1 1 0 0 1 0 2h-2.17a3.001 3.001 0 0 1-5.66 0H4a1 1 0 1 1 0-2h8.17zM8 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-1.83-1a3.001 3.001 0 0 1 5.66 0H20a1 1 0 0 1 0 2h-8.17a3.001 3.001 0 0 1-5.66 0H4a1 1 0 0 1 0-2h2.17zM15 18a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-1.83-1a3.001 3.001 0 0 1 5.66 0H20a1 1 0 0 1 0 2h-1.17a3.001 3.001 0 0 1-5.66 0H4a1 1 0 0 1 0-2h9.17z"
+      fill={color}
+    />
+    {active ? (
+      <Circle
+        cx="21"
+        cy="3"
+        r="3"
+        fill="#D0021B"
+      />
+    ) : (
+      null
+    )}
+  </Svg>
+)
+
+FilterIcon.defaultProps = {
+  size: 6,
+  color: '#000',
+  active: false,
+}

packages/core/src/icon/Icon.md

@@ -0,0 +1,93 @@
+```jsx noeditor
+<Block>
+  <BlockContent>
+    <Flex wrap="wrap">
+      {Object.keys(IconPaths).map((name, i) => (
+        <Flex width={25} key={i} direction="column" align="center" my={3} mx={5}>
+          <FlexItem mb={4} shrink={0}>
+            <Icon name={name}/>
+          </FlexItem>
+          <FlexItem>
+            <Paragraph size="s" align="center">
+              {name}
+            </Paragraph>
+          </FlexItem>
+        </Flex>
+      ))}
+    </Flex>
+  </BlockContent>
+</Block>
+```
+
+### Icon
+
+```jsx
+<Block>
+  <BlockContent>
+    <Icon name="qiwi"/>
+  </BlockContent>
+</Block>
+```
+
+### Special
+
+```jsx
+<Block>
+  <BlockContent>
+    <Flex>
+      <FlexItem width={6} height={6} mr={6} cursor="pointer">
+        <QuestionIcon/>
+      </FlexItem>
+      <FlexItem width={6} height={6} mr={6} cursor="pointer" onClick={() => setState({filterIconActive: !state.filterIconActive})}>
+        <FilterIcon active={state.filterIconActive}/>
+      </FlexItem>
+      <FlexItem width={6} height={6} cursor="pointer" onClick={() => setState({crossBurgerActive: !state.crossBurgerActive})}>
+        <CrossBurger active={state.crossBurgerActive}/>
+      </FlexItem>
+    </Flex>
+  </BlockContent>
+</Block>
+```
+
+### Payment systems
+
+```jsx
+<Block>
+  <BlockContent>
+    <Flex>
+      <FlexItem width={12} height={6} mr={6}>
+        <MastercardIcon/>
+      </FlexItem>
+      <FlexItem width={12} height={6} mr={6}>
+        <MirIcon/>
+      </FlexItem>
+      <FlexItem width={12} height={6}>
+        <VisaIcon/>
+      </FlexItem>
+    </Flex>
+  </BlockContent>
+</Block>
+```
+
+### Security badges
+
+```jsx
+<Block>
+  <BlockContent>
+    <Flex>
+      <FlexItem width={16} height={6} mr={2}>
+        <PciDssIcon/>
+      </FlexItem>
+      <FlexItem width={16} height={6} mr={2}>
+        <MirAcceptIcon/>
+      </FlexItem>
+      <FlexItem width={16} height={6} mr={2}>
+        <VisaVerifiedIcon/>
+      </FlexItem>
+      <FlexItem width={16} height={6}>
+        <McscIcon/>
+      </FlexItem>
+    </Flex>
+  </BlockContent>
+</Block>
+```