testing icon sizes

libs/components/src/chip/chip.component.ts

@@ -0,0 +1,24 @@
+import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { ButtonModule } from "../button";
+import { IconButtonModule } from "../icon-button";
+
+@Component({
+  selector: "bit-chip",
+  templateUrl: "chip.template.html",
+  standalone: true,
+  imports: [CommonModule, ButtonModule, IconButtonModule],
+})
+export class ChipComponent {
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(value: BooleanInput) {
+    this._selected = coerceBooleanProperty(value);
+  }
+
+  private _selected = false;
+}

libs/components/src/chip/chip.stories.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import { ChipComponent } from "./chip.component";
+
+export default {
+  title: "Component Library/Chip",
+  component: ChipComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<ChipComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* html */ `
+      <bit-chip>
+        <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
+        Label
+      </bit-chip>
+
+      <bit-chip selected>
+        <i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
+        Label
+      </bit-chip>
+    `,
+  }),
+};

libs/components/src/chip/chip.template.html

@@ -0,0 +1,14 @@
+<button
+  bitButton
+  type="button"
+  aria-expanded="false"
+  aria-controls="listbox-id"
+  buttonType="secondary"
+>
+  <span class="tw-pr-1">
+    <ng-content select="[slot=start]"></ng-content>
+  </span>
+  <ng-content></ng-content>
+  <button *ngIf="selected" bitIconButton="bwi-close" size="small" type="button"></button>
+  <button *ngIf="!selected" bitIconButton="bwi-angle-down" size="small" type="button"></button>
+</button>