Add "library section" to the showcase page for Icon library to improve Percy coverage (#3723)

didoo · web-flow · commit 3bf6b71f53be · 2026-03-18T16:29:34.000Z
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/showcase/app/components/page-components/icon/index.gts b/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>;
 
diff --git a/showcase/app/components/page-components/icon/sub-sections/color.gts b/showcase/app/components/page-components/icon/sub-sections/color.gts
@@ -23,13 +23,13 @@ const SubSectionColor: TemplateOnlyComponent = <template>
     <SF.Item as |SFI|>
       <SFI.Label>unspecified color (<code>currentColor</code>)</SFI.Label>
       <div>
-        <HdsIcon @name="lock-fill" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @size="24" />
       </div>
     </SF.Item>
     <SF.Item as |SGI|>
       <SGI.Label>parent with <code>#e12568</code> color</SGI.Label>
       <div {{style color="#e12568"}}>
-        <HdsIcon @name="lock-fill" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @size="24" />
       </div>
     </SF.Item>
   </ShwFlex>
@@ -41,7 +41,7 @@ const SubSectionColor: TemplateOnlyComponent = <template>
     {{#each COLORS as |color|}}
       <SG.Item @label={{color}}>
         <div class="shw-component-icon-sample-color--{{color}}">
-          <HdsIcon @name="lock-fill" @color={{color}} @size="24" />
+          <HdsIcon @name="plus-circle-fill" @color={{color}} @size="24" />
         </div>
       </SG.Item>
     {{/each}}
@@ -53,12 +53,12 @@ const SubSectionColor: TemplateOnlyComponent = <template>
   <ShwFlex @direction="column" as |SF|>
     <SF.Item as |SGI|>
       <SGI.Label><code>#e91e63</code></SGI.Label>
-      <HdsIcon @name="lock-fill" @color="#e91e63" @size="24" />
+      <HdsIcon @name="plus-circle-fill" @color="#e91e63" @size="24" />
     </SF.Item>
     <SF.Item as |SGI|>
       <SGI.Label><code>--token-color-palette-purple-400</code></SGI.Label>
       <HdsIcon
-        @name="lock-fill"
+        @name="plus-circle-fill"
         @color="var(--token-color-palette-purple-400)"
         @size="24"
       />
@@ -69,7 +69,7 @@ const SubSectionColor: TemplateOnlyComponent = <template>
         <code>green !important</code>
       </SGI.Label>
       <div {{style color="green !important"}}>
-        <HdsIcon @name="lock-fill" @color="orange" @size="24" />
+        <HdsIcon @name="plus-circle-fill" @color="orange" @size="24" />
       </div>
     </SF.Item>
   </ShwFlex>
diff --git a/showcase/app/components/page-components/icon/sub-sections/display.gts b/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';
 
@@ -23,9 +24,9 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
           "Block (default)"
         }}</ShwTextH4>
 
-      <ShwFlex class="shw-foundation-outline-icons" as |SF|>
+      <ShwFlex class="shw-component-outline-icons" as |SF|>
         <SF.Item @label="single icon">
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
         </SF.Item>
         <SF.Item @label="multiple icons">
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
@@ -34,29 +35,29 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
         </SF.Item>
       </ShwFlex>
 
-      <ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SG|>
+      <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SG|>
         <SG.Item @label="icon + inline text">
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside flexbox)">
-          <div class="shw-foundation-icon-container-flex">
-            <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <div class="shw-component-icon-container-flex">
+            <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
         <SG.Item @label="icon + inline text (inside grid)">
-          <div class="shw-foundation-icon-container-grid">
-            <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <div class="shw-component-icon-container-grid">
+            <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
             <span class="hds-typography-body-200">Lorem ipsum dolor</span>
           </div>
         </SG.Item>
       </ShwFlex>
 
-      <ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SF|>
+      <ShwFlex class="shw-component-outline-icons" @gap="4rem" as |SF|>
         <SF.Item @label="icons interleaved with inline text">
           <span class="hds-typography-body-200">Lorem ipsum dolor</span>
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <span class="hds-typography-body-200">Sit amet consectetur</span>
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
           <HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
@@ -65,7 +66,7 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
         </SF.Item>
         <SF.Item @label="icons interleaved with block text">
           <p class="hds-typography-body-200">Lorem ipsum dolor</p>
-          <HdsIcon @name="bookmark" @isInline={{isInline}} />
+          <HdsIcon @name="bookmark-fill" @isInline={{isInline}} />
           <p class="hds-typography-body-200">Sit amet consectetur</p>
           <HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
           <HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
@@ -76,6 +77,8 @@ const SubSectionDisplay: TemplateOnlyComponent = <template>
 
     {{/each}}
   {{/let}}
+
+  <ShwDivider />
 </template>;
 
 export default SubSectionDisplay;
diff --git a/showcase/app/components/page-components/icon/sub-sections/library.gts b/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>
+}
diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss
@@ -236,4 +236,8 @@ body {
   main section:not([data-test-percy]) {
     display: none !important;
   }
+  // disable icons animations when Percy is taking screenshots
+  .hds-icon--animation-loading {
+    animation: none !important;
+  }
 }
diff --git a/showcase/app/styles/showcase-pages/icon.scss b/showcase/app/styles/showcase-pages/icon.scss
@@ -4,22 +4,20 @@
  */
 
 // ICON
-// The icon page is currently displayed in 2 places,
-// foundations for FlightIcon and components for Hds::icon
 body.page-components-icon {
-  .shw-foundation-outline-icons {
+  .shw-component-outline-icons {
     .hds-icon {
       outline: 1px dotted #CCC;
     }
   }
 
-  .shw-foundation-icon-container-flex {
+  .shw-component-icon-container-flex {
     display: flex;
     gap: 4px;
     align-items: center;
   }
 
-  .shw-foundation-icon-container-grid {
+  .shw-component-icon-container-grid {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 4px;
@@ -31,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;
+  }
 }
diff --git a/showcase/package.json b/showcase/package.json
@@ -59,6 +59,7 @@
     "@glint/template": "^1.5.2",
     "@hashicorp/design-system-components": "workspace:*",
     "@hashicorp/design-system-tokens": "workspace:*",
+    "@hashicorp/flight-icons": "workspace:*",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "@percy/cli": "^1.30.5",
     "@percy/ember": "^4.2.0",

Original file line number	Diff line number	Diff line change
`@@ -236,4 +236,8 @@ body {`
`236`	`236`	`main section:not([data-test-percy]) {`
`237`	`237`	`display: none !important;`
`238`	`238`	`}`
	`239`	`+ // disable icons animations when Percy is taking screenshots`
	`240`	`+ .hds-icon--animation-loading {`
	`241`	`+ animation: none !important;`
	`242`	`+ }`
`239`	`243`	`}`