react-jupiter 5.11.34 → 6.0.0-beta.1

package/src/components/typography/utils.js

@@ -0,0 +1,53 @@
+export const getSizeOfHeading = (theme, size, level) => {
+  switch (size) {
+    case theme.sizes.small:
+      if (level === 1) return theme.h1SizeSmall;
+      if (level === 2) return theme.h2SizeSmall;
+      if (level === 3) return theme.h3SizeSmall;
+      if (level === 4) return theme.h4SizeSmall;
+      if (level === 5) return theme.h5SizeSmall;
+      return theme.h6SizeMedium;
+    case theme.sizes.medium:
+      if (level === 1) return theme.h1SizeMedium;
+      if (level === 2) return theme.h2SizeMedium;
+      if (level === 3) return theme.h3SizeMedium;
+      if (level === 4) return theme.h4SizeMedium;
+      if (level === 5) return theme.h5SizeMedium;
+      return theme.h6SizeMedium;
+    case theme.sizes.large:
+    default:
+      if (level === 1) return theme.h1SizeLarge;
+      if (level === 2) return theme.h2SizeLarge;
+      if (level === 3) return theme.h3SizeLarge;
+      if (level === 4) return theme.h4SizeLarge;
+      if (level === 5) return theme.h5SizeLarge;
+      return theme.h6SizeLarge;
+  }
+};
+
+export const getMarginOfHeading = (theme, size, level) => {
+  switch (size) {
+    case theme.sizes.small:
+      if (level === 1) return `${theme.h1SizeSmallMarginTop}px 0 ${theme.h1SizeSmallMarginBottom}px`;
+      if (level === 2) return `${theme.h2SizeSmallMarginTop}px 0 ${theme.h2SizeSmallMarginBottom}px`;
+      if (level === 3) return `${theme.h3SizeSmallMarginTop}px 0 ${theme.h3SizeSmallMarginBottom}px`;
+      if (level === 4) return `${theme.h4SizeSmallMarginTop}px 0 ${theme.h4SizeSmallMarginBottom}px`;
+      if (level === 5) return `${theme.h5SizeSmallMarginTop}px 0 ${theme.h5SizeSmallMarginBottom}px`;
+      return `${theme.h6SizeSmallMarginTop}px 0 ${theme.h6SizeSmallMarginBottom}px`;
+    case theme.sizes.medium:
+      if (level === 1) return `${theme.h1SizeMediumMarginTop}px 0 ${theme.h1SizeMediumMarginBottom}px`;
+      if (level === 2) return `${theme.h2SizeMediumMarginTop}px 0 ${theme.h2SizeMediumMarginBottom}px`;
+      if (level === 3) return `${theme.h3SizeMediumMarginTop}px 0 ${theme.h3SizeMediumMarginBottom}px`;
+      if (level === 4) return `${theme.h4SizeMediumMarginTop}px 0 ${theme.h4SizeMediumMarginBottom}px`;
+      if (level === 5) return `${theme.h5SizeMediumMarginTop}px 0 ${theme.h5SizeMediumMarginBottom}px`;
+      return `${theme.h6SizeMediumMarginTop}px 0 ${theme.h6SizeMediumMarginBottom}px`;
+    case theme.sizes.large:
+    default:
+      if (level === 1) return `${theme.h1SizeLargeMarginTop}px 0 ${theme.h1SizeLargeMarginBottom}px`;
+      if (level === 2) return `${theme.h2SizeLargeMarginTop}px 0 ${theme.h2SizeLargeMarginBottom}px`;
+      if (level === 3) return `${theme.h3SizeLargeMarginTop}px 0 ${theme.h3SizeLargeMarginBottom}px`;
+      if (level === 4) return `${theme.h4SizeLargeMarginTop}px 0 ${theme.h4SizeLargeMarginBottom}px`;
+      if (level === 5) return `${theme.h5SizeLargeMarginTop}px 0 ${theme.h5SizeLargeMarginBottom}px`;
+      return `${theme.h6SizeLargeMarginTop}px 0 ${theme.h6SizeLargeMarginBottom}px`;
+  }
+};

package/src/components/typography/utils.test.js

@@ -0,0 +1,188 @@
+import { getSizeOfHeading, getMarginOfHeading } from './utils';
+import theme from './theme';
+
+describe('Utils of typography', () => {
+  describe('Get size of heading', () => {
+    it('should return 30px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 1);
+      expect(fontSize).toBe(30);
+    });
+
+    it('should return 24px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 1);
+      expect(fontSize).toBe(24);
+    });
+
+    it('should return 18px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 1);
+      expect(fontSize).toBe(18);
+    });
+
+    it('should return 24px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 2);
+      expect(fontSize).toBe(24);
+    });
+
+    it('should return 20px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 2);
+      expect(fontSize).toBe(20);
+    });
+
+    it('should return 16px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 2);
+      expect(fontSize).toBe(16);
+    });
+
+    it('should return 20px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 3);
+      expect(fontSize).toBe(20);
+    });
+
+    it('should return 18px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 3);
+      expect(fontSize).toBe(18);
+    });
+
+    it('should return 14px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 3);
+      expect(fontSize).toBe(14);
+    });
+
+    it('should return 16px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 4);
+      expect(fontSize).toBe(16);
+    });
+
+    it('should return 14px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 4);
+      expect(fontSize).toBe(14);
+    });
+
+    it('should return 12px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 4);
+      expect(fontSize).toBe(12);
+    });
+
+    it('should return 14px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 5);
+      expect(fontSize).toBe(14);
+    });
+
+    it('should return 12px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 5);
+      expect(fontSize).toBe(12);
+    });
+
+    it('should return 10px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 5);
+      expect(fontSize).toBe(10);
+    });
+
+    it('should return 12px', () => {
+      const fontSize = getSizeOfHeading(theme, 'lg', 6);
+      expect(fontSize).toBe(12);
+    });
+
+    it('should return 10px', () => {
+      const fontSize = getSizeOfHeading(theme, 'md', 6);
+      expect(fontSize).toBe(10);
+    });
+
+    it('should return 10px', () => {
+      const fontSize = getSizeOfHeading(theme, 'sm', 6);
+      expect(fontSize).toBe(10);
+    });
+  });
+
+  describe('Get margin of heading', () => {
+    it('should return 24px 0 18px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 1);
+      expect(margin).toBe('24px 0 18px');
+    });
+
+    it('should return 18px 0 12px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 1);
+      expect(margin).toBe('18px 0 12px');
+    });
+
+    it('should return 12px 0 8px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 1);
+      expect(margin).toBe('12px 0 8px');
+    });
+
+    it('should return 18px 0 14px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 2);
+      expect(margin).toBe('18px 0 14px');
+    });
+
+    it('should return 14px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 2);
+      expect(margin).toBe('14px 0 10px');
+    });
+
+    it('should return 10px 0 8px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 2);
+      expect(margin).toBe('10px 0 8px');
+    });
+
+    it('should return 16px 0 12px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 3);
+      expect(margin).toBe('16px 0 12px');
+    });
+
+    it('should return 14px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 3);
+      expect(margin).toBe('14px 0 10px');
+    });
+
+    it('should return 12px 0 8px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 3);
+      expect(margin).toBe('12px 0 8px');
+    });
+
+    it('should return 16px 0 12px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 4);
+      expect(margin).toBe('16px 0 12px');
+    });
+
+    it('should return 14px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 4);
+      expect(margin).toBe('14px 0 10px');
+    });
+
+    it('should return 10px 0 8px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 4);
+      expect(margin).toBe('10px 0 8px');
+    });
+
+    it('should return 14px 0 12px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 5);
+      expect(margin).toBe('14px 0 12px');
+    });
+
+    it('should return 12px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 5);
+      expect(margin).toBe('12px 0 10px');
+    });
+
+    it('should return 10px 0 8px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 5);
+      expect(margin).toBe('10px 0 8px');
+    });
+
+    it('should return 12px 0 12px', () => {
+      const margin = getMarginOfHeading(theme, 'lg', 6);
+      expect(margin).toBe('12px 0 12px');
+    });
+
+    it('should return 10px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'md', 6);
+      expect(margin).toBe('10px 0 10px');
+    });
+
+    it('should return 10px 0 10px', () => {
+      const margin = getMarginOfHeading(theme, 'sm', 6);
+      expect(margin).toBe('10px 0 10px');
+    });
+  });
+});

package/src/components/utils/date.js

@@ -0,0 +1,7 @@
+import moment from 'moment-jalaali';
+
+moment.loadPersian({ dialect: 'persian-modern' });
+
+export const isDateObject = (date) => typeof date.getMonth === 'function';
+
+export const convertToJalaali = (date, format) => moment(date).format(format);

package/src/components/utils/date.test.js

@@ -0,0 +1,15 @@
+import { isDateObject } from './date';
+
+describe('Date utils', () => {
+  describe('isDateObject method', () => {
+    it('should return true for a date object', () => {
+      const dateObject = new Date();
+      expect(isDateObject(dateObject)).toBe(true);
+    });
+
+    it('should return true for a date object', () => {
+      const dateObject = 'Mon, 18 Dec 1995 17:28:35 GMT';
+      expect(isDateObject(dateObject)).toBe(false);
+    });
+  });
+});

package/src/components/utils/detectMobile.js

@@ -0,0 +1,15 @@
+export function isMobile() {
+  return !!(
+    navigator.userAgent.match(/Android/i)
+      || navigator.userAgent.match(/webOS/i)
+      || navigator.userAgent.match(/iPhone/i)
+      || navigator.userAgent.match(/iPad/i)
+      || navigator.userAgent.match(/iPod/i)
+      || navigator.userAgent.match(/BlackBerry/i)
+      || navigator.userAgent.match(/Windows Phone/i)
+  );
+}
+
+export function isAndroid() {
+  return !!navigator.userAgent.match(/Android/i);
+}

package/src/components/utils/index.js

@@ -0,0 +1,7 @@
+import mediaQuery from './media-query';
+
+export { default as mediaQuery } from './media-query';
+
+export default {
+  mediaQuery,
+};

package/src/components/utils/media-query.js

@@ -0,0 +1,12 @@
+import { generateMedia } from 'styled-media-query';
+import theme from '../themes';
+
+const mediaQuery = generateMedia({
+  xl: `${theme.breakpoints.xl}px`,
+  lg: `${theme.breakpoints.lg}px`,
+  md: `${theme.breakpoints.md}px`,
+  sm: `${theme.breakpoints.sm}px`,
+  xs: `${theme.breakpoints.xs}px`,
+});
+
+export default mediaQuery;

package/src/components/utils/numbers.js

@@ -0,0 +1,25 @@
+// @flow
+
+// doc of Intl: https://mzl.la/2TJQm88
+export const toPersianNumber = (number: number, option = {}) => (
+  new Intl.NumberFormat('fa-IR', option).format(number)
+);
+
+export const englishNumberToPersianInString = (input: string) => {
+  const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+  return input.replace(/[0-9]/g, (index) => persianNumbers[+index]);
+};
+
+const persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
+const arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
+
+export const fixNumbers = (e) => {
+  let result = e.target.value;
+  if (typeof result === 'string') {
+    for (let i = 0; i < 10; i++) {
+      result = result.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+    }
+  }
+  e.target.value = result;
+  return result;
+};

package/src/components/utils/test.js

@@ -0,0 +1,6 @@
+const findByTestAtrr = (component, attr) => {
+  const wrapper = component.find(`[data-test='${attr}']`);
+  return wrapper;
+};
+
+export default findByTestAtrr;

package/src/components/utils/theme.js

@@ -0,0 +1,67 @@
+import defaultTheme from '../themes';
+
+export const getColorFromName = (theme = defaultTheme, color) => {
+  switch (color) {
+    case 'red':
+      return theme.colors.red600;
+    case 'green':
+      return theme.colors.green600;
+    case 'blue':
+      return theme.colors.blue600;
+    case 'yellow':
+      return theme.colors.yellow600;
+    case 'darkBlue':
+      return theme.colors.darkBlue600;
+    case 'gray':
+      return theme.colors.gray800;
+    case 'white':
+      return theme.colors.white;
+    case 'light':
+      return theme.colors.riverBed;
+    case 'black':
+      return theme.colors.black;
+    default:
+    case 'default':
+      return theme.defaultColor;
+  }
+};
+
+export const getHoverColorFromName = (theme, color) => {
+  switch (color) {
+    case 'red':
+      return theme.colors.red400;
+    case 'green':
+      return theme.colors.green400;
+    case 'blue':
+      return theme.colors.blue400;
+    case 'yellow':
+      return theme.colors.yellow400;
+    case 'darkBlue':
+      return theme.colors.darkBlue400;
+    case 'black':
+      return theme.colors.gray600;
+    default:
+    case 'default':
+      return theme.defaultColor;
+  }
+};
+
+export const getFocusColorFromName = (theme, color) => {
+  switch (color) {
+    case 'red':
+      return theme.colors.red800;
+    case 'green':
+      return theme.colors.green800;
+    case 'blue':
+      return theme.colors.blue800;
+    case 'yellow':
+      return theme.colors.yellow800;
+    case 'darkBlue':
+      return theme.colors.darkBlue800;
+    case 'gray':
+      return theme.colors.gray800;
+    default:
+    case 'default':
+      return theme.defaultColor;
+  }
+};

package/src/docs/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/docs/App.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import styled from 'styled-components';
+import GlobalStyle, { ContentContainer } from './globalStyle';
+import Header from './components/header';
+import SideNavigation from './components/side-navigation';
+import HomePage from './containers/home';
+import ButtonPage from './containers/button';
+import AvatarPage from './containers/avatar';
+import IconPage from './containers/icon';
+import TypographyPage from './containers/typography';
+import IconsPage from './containers/icons';
+import CardPage from './containers/card';
+import CoverPage from './containers/cover';
+import ProductPage from './containers/product';
+import FormPage from './containers/form';
+
+const Container = styled.main`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+const Content = styled.main`
+  position: relative;
+`;
+
+function App() {
+  return (
+    <Container>
+      <GlobalStyle />
+      <Header />
+      <Content>
+        <SideNavigation />
+        <ContentContainer>
+          <Route exact path="/" component={HomePage} />
+          <Route path="/components/typography" component={TypographyPage} />
+          <Route path="/components/avatar" component={AvatarPage} />
+          <Route path="/components/icon" component={IconPage} />
+          <Route path="/components/button" component={ButtonPage} />
+          <Route path="/components/icons" component={IconsPage} />
+          <Route path="/components/card" component={CardPage} />
+          <Route path="/components/cover" component={CoverPage} />
+          <Route path="/components/product" component={ProductPage} />
+          <Route path="/components/form" component={FormPage} />
+        </ContentContainer>
+      </Content>
+    </Container>
+  );
+}
+
+export default App;

package/src/docs/assets/ads-label.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="13.92" viewBox="0 0 33 13.92">
+    <defs>
+        <style>
+            .cls-1{fill:#1e94d2}
+        </style>
+    </defs>
+    <g id="Ads_Label-02" data-name="Ads Label-02" transform="translate(-1 -.54)">
+        <path id="Path_2689" d="M31.69 14.46H3.31A2.32 2.32 0 0 1 1 12.15v-9.3A2.32 2.32 0 0 1 3.31.54h28.38A2.32 2.32 0 0 1 34 2.85v9.29a2.32 2.32 0 0 1-2.31 2.32zM3.31 1.54A1.31 1.31 0 0 0 2 2.85v9.29a1.31 1.31 0 0 0 1.31 1.31h28.38a1.31 1.31 0 0 0 1.31-1.3v-9.3a1.31 1.31 0 0 0-1.31-1.31z" class="cls-1" data-name="Path 2689"/>
+        <path id="Path_2690" d="M10 3.34h2.2l2.62 8.41h-1.58l-.64-2.14h-3l-.66 2.14H7.43zm.5 3.18L10 8.35h2.28l-.58-1.8q-.52-1.84-.58-2.18-.17.63-.62 2.15z" class="cls-1" data-name="Path 2690"/>
+        <path id="Path_2691" d="M19.5 5.17V2.65H21v9.1h-1.17l-.25-.6a1.76 1.76 0 0 1-.7.52 2.38 2.38 0 0 1-1 .2 2.27 2.27 0 0 1-1.37-.39 2.35 2.35 0 0 1-.81-1.07 4.56 4.56 0 0 1-.27-1.67 5.26 5.26 0 0 1 .24-1.67 3.09 3.09 0 0 1 .66-1.16 2.63 2.63 0 0 1 1-.65A3.16 3.16 0 0 1 18.41 5a4.69 4.69 0 0 1 1.09.17zm-1.24 5.5a1.38 1.38 0 0 0 1.27-.76V6.47a1.49 1.49 0 0 0-.43-.14 2.48 2.48 0 0 0-.51-.06 1.45 1.45 0 0 0-1.32.59 3.21 3.21 0 0 0-.38 1.73 3.54 3.54 0 0 0 .16 1.13 1.51 1.51 0 0 0 .46.7 1.15 1.15 0 0 0 .76.25z" class="cls-1" data-name="Path 2691"/>
+        <path id="Path_2692" d="M25.72 9.93a.6.6 0 0 0-.19-.43 2.54 2.54 0 0 0-.83-.44l-.84-.32a2.74 2.74 0 0 1-.46-.24 2.37 2.37 0 0 1-.4-.34 1.83 1.83 0 0 1-.33-.48 1.65 1.65 0 0 1-.15-.74 2 2 0 0 1 .11-.62 1.74 1.74 0 0 1 .37-.63 2.35 2.35 0 0 1 .76-.52 2.76 2.76 0 0 1 1.16-.22 3.53 3.53 0 0 1 1.33.23 2.36 2.36 0 0 1 .92.62l-.95 1a1.9 1.9 0 0 0-.58-.43 1.68 1.68 0 0 0-.75-.17 1 1 0 0 0-.67.2.62.62 0 0 0-.24.5.64.64 0 0 0 .19.43 3.09 3.09 0 0 0 1.06.53 5.49 5.49 0 0 1 1.24.58A1.93 1.93 0 0 1 27 9a1.66 1.66 0 0 1 .2.84 1.78 1.78 0 0 1-.32 1 2.19 2.19 0 0 1-.88.74 3.08 3.08 0 0 1-1.35.27 4.8 4.8 0 0 1-1-.11 3.28 3.28 0 0 1-.95-.35 3.13 3.13 0 0 1-.68-.49l.89-1a2.67 2.67 0 0 0 .76.55 2.21 2.21 0 0 0 1 .24 1.14 1.14 0 0 0 .74-.21.66.66 0 0 0 .31-.55z" class="cls-1" data-name="Path 2692"/>
+    </g>
+</svg>

package/src/docs/assets/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

package/src/docs/components/header/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Container from './index.styles';
+
+const Header = () => (
+  <Container>
+    <span>هدر داکیومنت‌های دیزاین سیستم</span>
+  </Container>
+);
+
+export default Header;

package/src/docs/components/header/index.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Container = styled.header`
+  display: flex;
+  height: 70px;
+  background: #ddd;
+  justify-content: center;
+`;
+
+export default Container;