added library section to the showcase page for Icon library

Author: didoo

showcase/app/components/page-components/icon/index.gts

@@ -2,14 +2,17 @@
  * Copyright IBM Corp. 2021, 2025
  * SPDX-License-Identifier: MPL-2.0
  */
+
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
 
 import SubSectionSize from 'showcase/components/page-components/icon/sub-sections/size';
 import SubSectionColor from 'showcase/components/page-components/icon/sub-sections/color';
 import SubSectionDisplay from 'showcase/components/page-components/icon/sub-sections/display';
+import SubSectionLibrary from 'showcase/components/page-components/icon/sub-sections/library';
 
 const IconIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Icon Component"}}
@@ -20,6 +23,7 @@ const IconIndex: TemplateOnlyComponent = <template>
     <SubSectionSize />
     <SubSectionColor />
     <SubSectionDisplay />
+    <SubSectionLibrary />
   </section>
 </template>;
 

showcase/app/components/page-components/icon/sub-sections/display.gts

@@ -9,6 +9,7 @@ import { array } from '@ember/helper';
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 import ShwTextH4 from 'showcase/components/shw/text/h4';
 import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import { HdsIcon } from '@hashicorp/design-system-components/components';
 
@@ -76,6 +77,8 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
 
     {{/each}}
   {{/let}}
+
+  <ShwDivider />
 </template>;
 
 export default SubSectionDisplay;

showcase/app/components/page-components/icon/sub-sections/library.gts

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwLabel from 'showcase/components/shw/label';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import catalog from '@hashicorp/flight-icons/catalog.json';
+
+import type { IconName } from '@hashicorp/flight-icons/svg';
+
+export default class SubSectionIconLibrary extends Component {
+  get groupedIcons() {
+    const groupedIcons: Record<string, IconName[]> = {}; // icons grouped by category
+
+    catalog.assets
+      .filter(({ size }) => size === '24')
+      .forEach((icon) => {
+        const category = icon.category;
+        if (!groupedIcons[category]) {
+          groupedIcons[category] = [];
+        }
+        groupedIcons[category].push(icon.iconName as IconName);
+      });
+
+    // Sort the categories alphabetically
+    const sortedGroupedIcons: Record<string, IconName[]> = {};
+    Object.keys(groupedIcons)
+      .sort()
+      .forEach((category) => {
+        sortedGroupedIcons[category] = groupedIcons[category] as IconName[];
+      });
+
+    return sortedGroupedIcons;
+  }
+
+  <template>
+    <div class="shw-component-icon-library-header">
+      <ShwTextH2>Library</ShwTextH2>
+    </div>
+
+    {{#each-in this.groupedIcons as |categoryName categoryIcons|}}
+      <ShwTextH4 @tag="h3">{{categoryName}}</ShwTextH4>
+
+      <ShwGrid @columns={{8}} @gap="1rem" as |SG|>
+        {{#each categoryIcons as |iconName|}}
+          <SG.Item class="shw-component-icon-library-item">
+            <HdsIcon @name={{iconName}} @size="24" />
+            <ShwLabel
+              class="hds-typography-body-100 shw-icon-label"
+            >{{iconName}}</ShwLabel>
+          </SG.Item>
+        {{/each}}
+      </ShwGrid>
+
+      <ShwDivider @level={{2}} />
+
+    {{/each-in}}
+  </template>
+}

showcase/app/styles/showcase-pages/icon.scss

@@ -29,4 +29,18 @@ body.page-components-icon {
     background: #0c0c0e;
     outline: 2px solid #0c0c0e;
   }
+
+  // LIBRARY
+
+  .shw-component-icon-library-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .shw-component-icon-library-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
 }