docs(Foundation): showing icons depending on group

livechat · Jan 31, 2024 · 658f8f6 · 658f8f6
1 parent f27e135
commit 658f8f6
Show file tree

Hide file tree

Showing 5 changed files with 491 additions and 6 deletions.
diff --git a/packages/react-components/src/components/Icon/Icon.mdx b/packages/react-components/src/components/Icon/Icon.mdx
@@ -2,6 +2,8 @@ import { Canvas, Story, ArgsTable, Meta, Title } from '@storybook/blocks';
 import { Figma } from '@storybook/addon-designs/blocks';
 import * as IconStories from './Icon.stories';
 import { IconsShowcase } from './IconsShowcase/IconsShowcase';
+import { getIconsByGroup } from './IconsShowcase/helpers';
+import { IconGroup } from './IconsShowcase/types';
 
 <Meta of={IconStories} />
 
@@ -27,9 +29,25 @@ To use them, import the icon you need and pass it to the `source` prop of the `I
 
 ℹ️ Click on the icon to copy its name to clipboard.
 
-<Canvas sourceState="none">
-  <IconsShowcase />
-</Canvas>
+### Arrows
+
+<IconsShowcase data={getIconsByGroup(IconGroup.Arrows)} />
+
+### Text
+
+<IconsShowcase data={getIconsByGroup(IconGroup.Text)} />
+
+### File Type
+
+<IconsShowcase data={getIconsByGroup(IconGroup.FileType)} />
+
+### General
+
+<IconsShowcase data={getIconsByGroup(IconGroup.General)} />
+
+### Brands
+
+<IconsShowcase data={getIconsByGroup(IconGroup.Brands)} />
 
 ## Component API <a id="ComponentAPI" />
 

diff --git a/packages/react-components/src/components/Icon/IconsShowcase/IconsShowcase.tsx b/packages/react-components/src/components/Icon/IconsShowcase/IconsShowcase.tsx
@@ -4,18 +4,23 @@ import * as DSIcons from '@livechat/design-system-icons';
 
 import { handleCopyText } from '../../../stories/helpers';
 import { Icon, IconSource } from '../index';
+
 import './style.scss';
+import { IconName } from './types';
 
 export type IconsMap = {
   [key: string]: IconSource;
 };
 
 const Icons = DSIcons as IconsMap;
 
-export const IconsShowcase: React.FC = () => {
+interface IProps {
+  data: IconName[];
+}
+export const IconsShowcase: React.FC<IProps> = ({ data }) => {
   return (
-    <div className="icons-showcase-wrapper">
-      {Object.keys(Icons).map((item) => {
+    <div className="icons-showcase-wrapper sb-unstyled">
+      {data.map((item) => {
         const iconSource = Icons[item];
 
         return (