added filter to the showcase icon library to highlight mapped/unmapped icons

Author: didoo

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

@@ -4,9 +4,12 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
 
 import ShwTextH2 from 'showcase/components/shw/text/h2';
 import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwTextBody from 'showcase/components/shw/text/body';
 import ShwGrid from 'showcase/components/shw/grid';
 import ShwLabel from 'showcase/components/shw/label';
 import ShwDivider from 'showcase/components/shw/divider';
@@ -25,6 +28,19 @@ import catalog from '@hashicorp/flight-icons/catalog.json';
 // ).sort();
 
 export default class SubSectionIconLibrary extends Component {
+  @tracked filterBy = '';
+
+  setLibraryFilter = (event: Event) => {
+    const { value } = event.target as HTMLSelectElement;
+    this.filterBy = value;
+  };
+
+  get filterByClass() {
+    return this.filterBy !== ''
+      ? `shw-component-icon-library-filter-${this.filterBy}`
+      : '';
+  }
+
   get groupedIcons() {
     const groupedIcons: Record<string, string[]> = {}; // icons grouped by category
 
@@ -50,12 +66,29 @@ export default class SubSectionIconLibrary extends Component {
   }
 
   <template>
-    <ShwTextH2>Library</ShwTextH2>
+    <div class="shw-component-icon-library-header">
+      <ShwTextH2>Library</ShwTextH2>
+      <div class="shw-component-icon-library-filter">
+        <label
+          for="shw-component-icon-library-filter-control"
+          class="shw-component-icon-library-filter-label"
+        >Filter:</label>
+        <select
+          id="shw-component-icon-library-filter-control"
+          class="shw-component-icon-library-filter-control"
+          {{on "change" this.setLibraryFilter}}
+        >
+          <option value="">Show all</option>
+          <option value="carbonized">With mapping</option>
+          <option value="non-carbonized">Without mapping</option>
+        </select>
+      </div>
+    </div>
 
     {{#each-in this.groupedIcons as |categoryName categoryIcons|}}
       <ShwTextH4 @tag="h3">{{categoryName}}</ShwTextH4>
 
-      <ShwGrid @columns={{8}} @gap="1rem" as |SG|>
+      <ShwGrid @columns={{8}} @gap="1rem" class={{this.filterByClass}} as |SG|>
         {{#each categoryIcons as |iconName|}}
           <SG.Item class="shw-component-icon-library-item">
             <HdsIcon @name={{iconName}} @size="24" />

showcase/app/components/shw/text/types.ts

@@ -13,6 +13,7 @@ export enum TextTagValues {
   P = 'p',
   Span = 'span',
   Div = 'div',
+  Label = 'label',
 }
 
 export type TextTags = `${TextTagValues}`;

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

@@ -4,8 +4,9 @@
  */
 
 // ICON
-// The icon page is currently displayed in 2 places,
-// foundations for FlightIcon and components for Hds::icon
+
+@use "../typography" as *;
+
 body.page-components-icon {
   .shw-component-icon-theme-toggle-container {
     position: sticky;
@@ -39,9 +40,69 @@ body.page-components-icon {
     outline: 2px solid #0c0c0e;
   }
 
+  // LIBRARY
+
+  .shw-component-icon-library-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .shw-component-icon-library-filter {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .shw-component-icon-library-filter-label {
+    @include shw-font-family('gilmer');
+
+    margin: 0;
+    color: var(--shw-color-black);
+    font-size: 0.9rem;
+    line-height: 20px;
+  }
+
+  .shw-component-icon-library-filter-control {
+    @include shw-font-family('gilmer');
+
+    height: 24px;
+    padding: 2px 24px 2px 8px;
+    color: var(--shw-color-gray-100);
+    font-size: 0.8rem;
+    background-color: var(--shw-color-gray-600);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.34572 7H20.6543C21.8517 7 22.4504 8.4463 21.6028 9.29391L12.9519 17.9515C12.4272 18.4763 11.5728 18.4763 11.0481 17.9515L2.39722 9.29391C1.54961 8.4463 2.14832 7 3.34572 7Z' fill='%23808080'/%3E%3C/svg%3E"); // notice: the 'caret' color is hardcoded here!
+    background-repeat: no-repeat;
+    background-position: right 6px top 4px;
+    background-size: 12px 12px;
+    border: 1px solid var(--shw-color-gray-400);
+    border-radius: 3px;
+    appearance: none;
+
+    &:hover {
+      background-color: var(--shw-color-gray-500);
+    }
+
+    &:where(:focus-visible) {
+      outline: 2px dashed var(--shw-color-action-active-foreground);
+    }
+  }
+
   .shw-component-icon-library-item {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
+
+  .shw-component-icon-library-filter-carbonized {
+    .shw-component-icon-library-item:has(.hds-icon:not([data-has-carbon-equivalent])) {
+      opacity: 0.1;
+    }
+  }
+
+  .shw-component-icon-library-filter-non-carbonized {
+    .shw-component-icon-library-item:has(.hds-icon[data-has-carbon-equivalent]) {
+      opacity: 0.1;
+    }
+  }
 }