replace icon library (gravitational#29384)

Somith11 · Aug 2, 2023 · 64c3e7b · 64c3e7b
1 parent 8a2280e
commit 64c3e7b
Show file tree

Hide file tree

Showing 440 changed files with 21,465 additions and 5,803 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --noEmit",
     "prettier-check": "yarn prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx}'",
     "prettier-write": "yarn prettier --write --loglevel silent '+(e|web)/**/*.{ts,tsx,js,jsx}'",
+    "process-icons": "node web/packages/design/src/Icon/script/script.js & yarn prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
     "nop": "exit 0"
   },
   "private": true,

diff --git a/web/packages/design/src/ButtonIcon/ButtonIcon.jsx b/web/packages/design/src/ButtonIcon/ButtonIcon.jsx
@@ -19,8 +19,6 @@ import styled from 'styled-components';
 
 import { space, color, alignSelf } from 'design/system';
 
-import Icon from '../Icon';
-
 const sizeMap = {
   0: {
     fontSize: '12px',
@@ -86,10 +84,6 @@ const StyledButtonIcon = styled.button`
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
 
-  ${Icon} {
-    color: inherit;
-  }
-
   &:disabled {
     color: ${({ theme }) => theme.colors.text.disabled};
   }

diff --git a/web/packages/design/src/CardSuccess/CardSuccess.jsx b/web/packages/design/src/CardSuccess/CardSuccess.jsx
@@ -23,7 +23,7 @@ import { CircleCheck } from 'design/Icon';
 export default function CardSuccess({ title, children }) {
   return (
     <Card width="540px" p={7} my={4} mx="auto" textAlign="center">
-      <CircleCheck mb={3} fontSize={56} color="success" />
+      <CircleCheck mb={3} size={64} color="success" />
       {title && (
         <Text typography="h2" mb="4">
           {title}

diff --git a/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap b/web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap
@@ -16,22 +16,36 @@ exports[`rendering of CardSuccess components 1`] = `
 }
 
 .c1 {
-  display: inline-block;
-  transition: color 0.3s;
-  color: #FFFFFF;
-  margin-bottom: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: #00BFA5;
-  font-size: 56px;
+  margin-bottom: 16px;
 }
 
 <div
   class="c0"
   width="540px"
 >
   <span
-    class="c1 icon icon-checkmark-circle "
+    class="c1 icon icon-circlecheck"
     color="success"
-    font-size="56"
-  />
+  >
+    <svg
+      fill="currentColor"
+      height="64"
+      viewBox="0 0 24 24"
+      width="64"
+    >
+      <path
+        d="M16.2803 10.2803C16.5732 9.98744 16.5732 9.51256 16.2803 9.21967C15.9874 8.92678 15.5126 8.92678 15.2197 9.21967L10.5 13.9393L8.78033 12.2197C8.48744 11.9268 8.01256 11.9268 7.71967 12.2197C7.42678 12.5126 7.42678 12.9874 7.71967 13.2803L9.96967 15.5303C10.2626 15.8232 10.7374 15.8232 11.0303 15.5303L16.2803 10.2803Z"
+      />
+      <path
+        clip-rule="evenodd"
+        d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </span>
 </div>
 `;
diff --git a/web/packages/design/src/DataTable/Cells.tsx b/web/packages/design/src/DataTable/Cells.tsx
@@ -47,7 +47,10 @@ export function SortHeaderCell<T>({
   if (serversideProps) {
     return (
       <th>
-        <a onClick={handleServersideClick}>
+        <a
+          onClick={handleServersideClick}
+          style={{ display: 'flex', alignItems: 'center' }}
+        >
           {text}
           <SortIndicator
             sortDir={
@@ -63,7 +66,7 @@ export function SortHeaderCell<T>({
 
   return (
     <th>
-      <a onClick={onClick}>
+      <a onClick={onClick} style={{ display: 'flex', alignItems: 'center' }}>
         {text}
         <SortIndicator sortDir={dir} />
       </a>
@@ -77,14 +80,14 @@ export function SortIndicator<T>({
   sortDir?: SortHeaderCellProps<T>['dir'];
 }) {
   if (sortDir === 'DESC') {
-    return <Icons.SortDesc title="sort items desc" />;
+    return <Icons.ChevronDown title="sort items desc" />;
   }
 
   if (sortDir === 'ASC') {
-    return <Icons.SortAsc title="sort items asc" />;
+    return <Icons.ChevronUp title="sort items asc" />;
   }
 
-  return <Icons.Sort title="sort items" />;
+  return <Icons.ChevronsVertical title="sort items" />;
 }
 
 export const TextCell = ({ data }) => <Cell>{`${data || ''}`}</Cell>;

diff --git a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
@@ -49,15 +49,15 @@ export function ClientSidePager(props: Props) {
           disabled={isPrevDisabled}
           mx={0}
         >
-          <CircleArrowLeft fontSize="3" />
+          <CircleArrowLeft />
         </StyledArrowBtn>
         <StyledArrowBtn
           ml={0}
           onClick={nextPage}
           title="Next page"
           disabled={isNextDisabled}
         >
-          <CircleArrowRight fontSize="3" />
+          <CircleArrowRight />
         </StyledArrowBtn>
       </Flex>
     </Flex>

diff --git a/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx b/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx
@@ -34,15 +34,15 @@ export function ServerSidePager({ nextPage, prevPage }: Props) {
           disabled={isPrevDisabled}
           mx={0}
         >
-          <CircleArrowLeft fontSize="3" />
+          <CircleArrowLeft />
         </StyledArrowBtn>
         <StyledArrowBtn
           ml={0}
           onClick={nextPage}
           title="Next page"
           disabled={isNextDisabled}
         >
-          <CircleArrowRight fontSize="3" />
+          <CircleArrowRight />
         </StyledArrowBtn>
       </Flex>
     </Flex>

diff --git a/web/packages/design/src/DataTable/Pager/StyledPager.tsx b/web/packages/design/src/DataTable/Pager/StyledPager.tsx
@@ -17,13 +17,12 @@
 import styled from 'styled-components';
 
 import { ButtonIcon } from 'design';
-import Icon from 'design/Icon';
 
 export const StyledArrowBtn = styled(ButtonIcon)`
-  ${Icon} {
+  svg {
     font-size: 20px;
   }
-  ${Icon}:before {
+  svg:before {
     // arrow icons have some padding that makes them look slightly off-center, padding compensates it
     padding-left: 1px;
   }

diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -20,8 +20,6 @@ import { space, borderRadius } from 'design/system';
 
 import { decomposeColor, emphasize } from 'design/theme/utils/colorManipulator';
 
-import Icon from '../Icon';
-
 export const StyledTable = styled.table(
   props => `
   background: ${props.theme.colors.levels.surface};
@@ -65,10 +63,8 @@ export const StyledTable = styled.table(
     text-transform: uppercase;
     white-space: nowrap;
 
-    ${Icon} {
-      font-weight: bold;
-      font-size: 8px;
-      margin-left: 8px;
+    svg {
+      height: 12px;
     }
   }
 

diff --git a/web/packages/design/src/DataTable/Table.test.tsx b/web/packages/design/src/DataTable/Table.test.tsx
@@ -105,19 +105,19 @@ describe('design/Table SortIndicator', () => {
   test('sort indicator defaults to sort vertical (neither ASC or DESC)', () => {
     render(<SortIndicator />);
     expect(screen.getByTitle('sort items')).toHaveClass(
-      'icon-chevrons-expand-vertical'
+      'icon-chevronsvertical'
     );
   });
 
   test('sort indicator respects sortDir prop set to ASC', () => {
     render(<SortIndicator sortDir={'ASC'} />);
-    expect(screen.getByTitle('sort items asc')).toHaveClass('icon-chevron-up');
+    expect(screen.getByTitle('sort items asc')).toHaveClass('icon-chevronup');
   });
 
   test('sort indicator respects sortDir prop set to DESC', () => {
     render(<SortIndicator sortDir={'DESC'} />);
     expect(screen.getByTitle('sort items desc')).toHaveClass(
-      'icon-chevron-down'
+      'icon-chevrondown'
     );
   });
 

diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
@@ -348,7 +348,7 @@ const EmptyIndicator = ({
             justifyContent: 'center',
           }}
         >
-          <Icons.Database mr="2" />
+          <Icons.Database mr={2} />
           {emptyText}
         </Text>
       </td>