feat(icons): add new list with search icon (#1774)

* feat(icons): add new list with search icon * chore: update changeset * fix(icons/vrt): use single packages instead of preset Co-authored-by: Nicola Molinari <[email protected]>
commercetools · Feb 10, 2021 · 49d7b6a · 49d7b6a · vercel · Feb 10, 2021
1 parent f9e34a8
commit 49d7b6a
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 7 deletions.
diff --git a/.changeset/wet-snails-flash.md b/.changeset/wet-snails-flash.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/icons': minor
+---
+
+feat(icons): add new list with search icon
diff --git a/packages/components/icons/src/generated/ListWithSearch.tsx b/packages/components/icons/src/generated/ListWithSearch.tsx
diff --git a/packages/components/icons/src/generated/index.tsx b/packages/components/icons/src/generated/index.tsx
diff --git a/packages/components/icons/src/icons.visualroute.js b/packages/components/icons/src/icons.visualroute.js
@@ -2,7 +2,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Switch, Route } from 'react-router-dom';
 import { ThemeProvider } from '@emotion/react';
-import * as UIKit from '@commercetools-frontend/ui-kit';
+import * as icons from '@commercetools-uikit/icons';
+import Text from '@commercetools-uikit/text';
 import { Suite, Spec } from '../../../../test/percy';
 
 const IconList = styled.div`
@@ -26,9 +27,7 @@ const IconContainer = styled.div`
   width: ${(props) => (props.big ? '50px' : '25px')};
 `;
 
-const icons = Object.keys(UIKit)
-  .filter((thing) => thing.endsWith('Icon'))
-  .sort();
+const allIconNames = Object.keys(icons).sort();
 
 const sizes = ['small', 'medium', 'big', 'scale'];
 
@@ -46,13 +45,13 @@ const colors = [
 export const routePath = '/icons';
 
 const renderIcon = (iconName, color, size) => {
-  const Icon = UIKit[iconName];
+  const Icon = icons[iconName];
   return (
     <IconItem key={iconName}>
       <IconContainer big={size === 'scale'}>
         <Icon color={color} size={size} />
       </IconContainer>
-      <UIKit.Text.Body>{iconName}</UIKit.Text.Body>
+      <Text.Body>{iconName}</Text.Body>
     </IconItem>
   );
 };
@@ -73,7 +72,9 @@ export const component = ({ themes }) => (
                 omitPropsList
               >
                 <IconList>
-                  {icons.map((iconName) => renderIcon(iconName, color, size))}
+                  {allIconNames.map((iconName) =>
+                    renderIcon(iconName, color, size)
+                  )}
                 </IconList>
               </Spec>
             ))}

diff --git a/packages/components/icons/src/svg/list-with-search.svg b/packages/components/icons/src/svg/list-with-search.svg
diff --git a/transforms/v10/icons/icon-names.js b/transforms/v10/icons/icon-names.js
@@ -69,6 +69,7 @@ const iconNames = [
   'InfoIcon',
   'InformationIcon',
   'ListIcon',
+  'ListWithSearchIcon',
   'LogoutIcon',
   'MailIcon',
   'MinimizeIcon',