feat: create storybook for icons

sahabpardaz · Aug 22, 2022 · ea00918 · ea00918
1 parent 41c18a6
commit ea00918
Show file tree

Hide file tree

Showing 13 changed files with 398 additions and 37 deletions.
diff --git a/libs/core/src/icons/Edit2.tsx → libs/core/src/icons/EditAlt.tsx b/libs/core/src/icons/Edit2.tsx → libs/core/src/icons/EditAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const Edit2 = createSvgIcon(
+export const EditAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="m13.26 3.6-8.21 8.69c-.31.33-.61.98-.67 1.43l-.37 3.24c-.13 1.17.71 1.97 1.87 1.77l3.22-.55c.45-.08 1.08-.41 1.39-.75l8.21-8.69c1.42-1.5 2.06-3.21-.15-5.3-2.2-2.07-3.87-1.34-5.29.16Z"
@@ -22,5 +22,5 @@ export const Edit2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'Edit2',
+  'EditAlt',
 );
diff --git a/libs/core/src/icons/Lock2.tsx → libs/core/src/icons/LockAlt.tsx b/libs/core/src/icons/Lock2.tsx → libs/core/src/icons/LockAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const Lock2 = createSvgIcon(
+export const LockAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M6 10V8c0-3.31 1-6 6-6s6 2.69 6 6v2M12 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
@@ -20,5 +20,5 @@ export const Lock2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'Lock2',
+  'LockAlt',
 );
diff --git a/libs/core/src/icons/MessageQuestion.tsx b/libs/core/src/icons/MessageQuestion.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { createSvgIcon } from '../mui';
+
+export const MessageQuestion = createSvgIcon(
+  <React.Fragment>
+    <path
+      d="M17 18.43h-4l-4.45 2.96A.997.997 0 0 1 7 20.56v-2.13c-3 0-5-2-5-5v-6c0-3 2-5 5-5h10c3 0 5 2 5 5v6c0 3-2 5-5 5Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 11.36v-.21c0-.68.42-1.04.84-1.33.41-.28.82-.64.82-1.3 0-.92-.74-1.66-1.66-1.66-.92 0-1.66.74-1.66 1.66M11.995 13.75h.01"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </React.Fragment>,
+  'MessageQuestion',
+);
diff --git a/libs/core/src/icons/More2.tsx → libs/core/src/icons/MoreAlt.tsx b/libs/core/src/icons/More2.tsx → libs/core/src/icons/MoreAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const More2 = createSvgIcon(
+export const MoreAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M10 19c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2ZM10 5c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2ZM10 12c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2Z"
@@ -10,5 +10,5 @@ export const More2 = createSvgIcon(
       strokeWidth={1.5}
     />
   </React.Fragment>,
-  'More2',
+  'MoreAlt',
 );
diff --git a/libs/core/src/icons/MoreCircle2.tsx → libs/core/src/icons/MoreCircleAlt.tsx b/libs/core/src/icons/MoreCircle2.tsx → libs/core/src/icons/MoreCircleAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const MoreCircle2 = createSvgIcon(
+export const MoreCircleAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z"
@@ -20,5 +20,5 @@ export const MoreCircle2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'MoreCircle2',
+  'MoreCircleAlt',
 );
diff --git a/libs/core/src/icons/MoreSquare2.tsx → libs/core/src/icons/MoreSquareAlt.tsx b/libs/core/src/icons/MoreSquare2.tsx → libs/core/src/icons/MoreSquareAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const MoreSquare2 = createSvgIcon(
+export const MoreSquareAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z"
@@ -20,5 +20,5 @@ export const MoreSquare2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'MoreSquare2',
+  'MoreSquareAlt',
 );
diff --git a/libs/core/src/icons/Unlock2.tsx → libs/core/src/icons/UnlockAlt.tsx b/libs/core/src/icons/Unlock2.tsx → libs/core/src/icons/UnlockAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const Unlock2 = createSvgIcon(
+export const UnlockAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M17 22H7c-4 0-5-1-5-5v-2c0-4 1-5 5-5h10c4 0 5 1 5 5v2c0 4-1 5-5 5ZM6 10V8c0-3.31 1-6 6-6 3.404 0 5.091 1.144 5.711 3 .2.598.289 1.27.289 2"
@@ -20,5 +20,5 @@ export const Unlock2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'Unlock2',
+  'UnlockAlt',
 );
diff --git a/libs/core/src/icons/Users2.tsx → libs/core/src/icons/UsersAlt.tsx b/libs/core/src/icons/Users2.tsx → libs/core/src/icons/UsersAlt.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSvgIcon } from '../mui';
 
-export const Users2 = createSvgIcon(
+export const UsersAlt = createSvgIcon(
   <React.Fragment>
     <path
       d="M18 7.16a.605.605 0 0 0-.19 0 2.573 2.573 0 0 1-2.48-2.58c0-1.43 1.15-2.58 2.58-2.58a2.58 2.58 0 0 1 2.58 2.58A2.589 2.589 0 0 1 18 7.16ZM16.97 14.44c1.37.23 2.88-.01 3.94-.72 1.41-.94 1.41-2.48 0-3.42-1.07-.71-2.6-.95-3.97-.71M5.97 7.16c.06-.01.13-.01.19 0a2.573 2.573 0 0 0 2.48-2.58C8.64 3.15 7.49 2 6.06 2a2.58 2.58 0 0 0-2.58 2.58c.01 1.4 1.11 2.53 2.49 2.58ZM7 14.44c-1.37.23-2.88-.01-3.94-.72-1.41-.94-1.41-2.48 0-3.42 1.07-.71 2.6-.95 3.97-.71M12 14.63a.605.605 0 0 0-.19 0 2.573 2.573 0 0 1-2.48-2.58c0-1.43 1.15-2.58 2.58-2.58a2.58 2.58 0 0 1 2.58 2.58c-.01 1.4-1.11 2.54-2.49 2.58ZM9.09 17.78c-1.41.94-1.41 2.48 0 3.42 1.6 1.07 4.22 1.07 5.82 0 1.41-.94 1.41-2.48 0-3.42-1.59-1.06-4.22-1.06-5.82 0Z"
@@ -12,5 +12,5 @@ export const Users2 = createSvgIcon(
       strokeLinejoin="round"
     />
   </React.Fragment>,
-  'Users2',
+  'UsersAlt',
 );
diff --git a/libs/core/src/icons/components/IconCell.tsx b/libs/core/src/icons/components/IconCell.tsx
@@ -0,0 +1,19 @@
+import { Grid, styled, Tooltip, Typography } from '@mui/material';
+
+export const IconCell: React.FC<{ icon: React.ReactElement; name: string }> = ({ icon, name }) => {
+  return (
+    <Tooltip title={name} arrow enterDelay={500} enterNextDelay={500}>
+      <Grid item textAlign="center" width="86px">
+        {icon}
+        <IconName>{name}</IconName>
+      </Grid>
+    </Tooltip>
+  );
+};
+
+const IconName = styled((props: any) => <Typography variant="subtitle1" {...props} />)`
+  overflow: hidden;
+  white-space: noWrap;
+  text-overflow: ellipsis;
+  cursor: default;
+`;