Merge pull request #210 from US-CBP/feature/cbp-chip-custom-icon

Feature/cbp chip custom icon

packages/web-components/CHANGELOG.md

@@ -4,6 +4,16 @@ This CHANGELOG.md tracks the updates to the web components package of the CBP de
 
 The React components are wrappers generated from this package and will share the same changes.
 
+## [0.0.1-develop.15] TBD
+
+* First cut of `cbp-pagination`.
+* First cut of `cbp-usa-banner`.
+* Added multi-select support to `cbp-dropdown`.
+* Added the ability to set Dropdown selections based on `value` (supports pagination).
+* Added the ability to slot a custom icon into the `cbp-chip` component.
+* Added interactive card variants and functionality.
+* Additional bug fixes per design review.
+
 ## [0.0.1-develop.14] 09-16-2024
 
 * First cut of `cbp-notice`.

packages/web-components/src/components/cbp-chip/cbp-chip.scss

@@ -48,7 +48,6 @@
 
 [data-cbp-theme=light] cbp-chip[context*=dark]:not([context=light-always]),
 [data-cbp-theme=dark] cbp-chip:not([context=dark-inverts]):not([context=light-always]) {
-
   --cbp-chip-color-text: var(--cbp-chip-color-text-dark);
   --cbp-chip-color-text-hover: var(--cbp-chip-color-text-hover-dark);
   --cbp-chip-color-text-focus: var(--cbp-chip-color-text-focus-dark);
@@ -108,7 +107,7 @@ cbp-chip {
       background-color: var(--cbp-chip-color-background-pressed);
       color: var(--cbp-chip-color-text-pressed);
 
-      .cbp-chip__label + cbp-icon>svg {
+      .cbp-chip__label + cbp-icon[name=plus]>svg {
         transform: rotate(-135deg);
       }
 

packages/web-components/src/components/cbp-chip/cbp-chip.stories.tsx

@@ -45,3 +45,24 @@ const Template = ({ label, name, value, pressed, context, sx }) => {
     `;
 };
 export const Chip = Template.bind({});
+
+
+const ChipWithCustomIconTemplate = ({ label, name, value, icon, pressed, context, sx }) => {
+  return ` 
+      <cbp-chip
+        ${name ? `name="${name}"` : ''}
+        ${value ? `value="${value}"` : ''}
+        ${icon ? `icon="${icon}"` : ''}
+        ${pressed ? 'pressed' : ''}
+        ${context && context != 'light-inverts' ? `context=${context}` : ''}
+        ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+      >
+        <cbp-icon slot="cbp-chip-icon" name="${icon}" size="var(--cbp-space-3x)"></cbp-icon>
+        ${label}
+      </cbp-chip>
+    `;
+};
+export const ChipWithCustomIcon = ChipWithCustomIconTemplate.bind({});
+ChipWithCustomIcon.args = {
+  icon: 'filter'
+}

packages/web-components/src/components/cbp-chip/cbp-chip.tsx

@@ -3,6 +3,7 @@ import { setCSSProps } from '../../utils/utils';
 
 /**
  * @slot - The default slot defines the chip's label.
+ * @slot cbp-chip-icon - Optionally slot a custom icon for the default state (will still show the x for removal when pressed).
  */
 @Component({
   tag: 'cbp-chip',
@@ -11,14 +12,18 @@ import { setCSSProps } from '../../utils/utils';
 export class CbpChip {
 
   private button: HTMLButtonElement;
+  private icon: HTMLCbpIconElement;
+  private iconName: string = "plus"; // default is "plus" but if customized, we need to keep track of it
   private ariaPressed: boolean;
 
   @Element() host: HTMLElement;
 
   /** Specifies the `name` attribute of the rendered button */
-  @Prop() name: string;
+  @Prop({ reflect: true }) name: string;
+
   /** Specifies the `value` attribute of the rendered button */
   @Prop() value: string;
+
   /** Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button */
   @Prop() pressed: boolean;
 
@@ -31,11 +36,18 @@ export class CbpChip {
   /** A custom event emitted when the chip is activated/toggled. */
   @Event() chipClick!: EventEmitter;
 
-  handleClick = (e) => {
+  handleClick(e){
+    // We're using this variable rather than the property to avoid re-rendering, which would impact the animation
     this.ariaPressed=!this.ariaPressed;
 
     // toggle the aria-pressed attribute directly to allow for animation
-    this.button.setAttribute('aria-pressed', `${this.ariaPressed}`)
+    if (this.iconName == "plus" ) {
+      this.button.setAttribute('aria-pressed', `${this.ariaPressed}`)
+    }
+    else {
+      this.pressed = !this.pressed;
+      this.pressed ? this.icon.name="times" : this.icon.name=this.iconName;
+    }
 
     this.chipClick.emit({
       host: this.host,
@@ -57,23 +69,31 @@ export class CbpChip {
       ...this.sx,
     });
   }
-
+
+  componentDidLoad() {
+    if (!this.icon) this.icon = this.host.querySelector('cbp-icon');
+    this.iconName = this.icon.name;
+  }
+
   render() {
     return (
       <Host>
         <button
           type="button"
+          value={this.value}
           aria-pressed={`${this.pressed}`}
           ref={(el) => this.button = el} 
-          onClick={ e => this.handleClick(e) }
+          onClick={ (e) => this.handleClick(e) }
         >
           <span class="cbp-chip__label">
             <slot />
           </span>
-          <cbp-icon name="plus" size='var(--cbp-space-3x)'></cbp-icon>
+          {this.host.querySelector('[slot=cbp-chip-icon]')
+            ? <slot name="cbp-chip-icon" />
+            : <cbp-icon name="plus" size='var(--cbp-space-3x)' ref={el => this.icon = el} />
+          }
         </button>
       </Host>
     );
   }
-
-}
+}

packages/web-components/src/components/cbp-dropdown/cbp-dropdown.specs.mdx

@@ -101,7 +101,13 @@ The Dropdown component offers an alternative to the native select element that c
     * If no value is explicitly set, the value passed is derived from the text label (similar to a native select option with no value).
     * Toggling the selected state is deferred to the parent dropdown
   * Parent dropdown receives the event
-    * 
+    * Set the item as selected.
+      * This will trigger checking the checkbox for multi-select dropdowns.
+    * For single-select dropdowns, deselect all other items.
+    * Update the selectedItems array (State) behind a delay.
+    * Update the hidden form field value.
+    * Update the dropdown's visible label.
+    * For single select dropdowns, close the dropdown and send focus back to the main control.
 
 * On Dropdown value property being updated externally (reactively):
   * Check if the new value is different from the old value. (if not, do nothing)