feat: add select and multi-select components

Also add button styles to allow for multi-select list of selected items

Author: codemacabre

src/scss/components/_index.scss

@@ -11,6 +11,7 @@
 @forward "jump-menu/jump-menu";
 @forward "search-bar/search-bar";
 @forward "section/section";
+@forward "select/select";
 @forward "table/table";
 @forward "menu-toggle/menu-toggle";
 @forward "message/message";

src/scss/components/button/_button.scss

@@ -51,4 +51,40 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+
+  &--pill {
+    color: $color-grey-90;
+    background-color: $color-teal-20;
+    border: 1px solid $color-teal-50;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    &:hover {
+      background-color: white;
+    }
+  }
+
+  &--remove {
+    position: relative;
+    padding-right: 2.1em;
+
+    &::after {
+      position: absolute;
+      right: 0.7em;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "×";
+      color: currentColor;
+      pointer-events: none;
+      padding-bottom: 0.1rem;
+      font-size: 1em;
+      transition: all 0.2s ease-in-out;
+    }
+
+    &:hover {
+      &::after {
+        color: $color-red-40;
+        transition: all 0.2s ease-in-out;
+      }
+    }
+  }
 }

src/scss/components/select/_select.scss

@@ -0,0 +1,58 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
+
+.iati-select {
+  color: currentColor;
+
+  &__label {
+    display: block;
+    margin: 0 0 1rem 0;
+  }
+
+  &__control-wrapper {
+    position: relative;
+    display: inline-block;
+
+    &::after {
+      position: absolute;
+      right: 0.7em;
+      top: calc(50% - 0.1875em);
+      content: "";
+      width: 0.75em;
+      height: 0.375em;
+      background-color: currentColor;
+      clip-path: polygon(15% 0, 0 0, 50% 100%, 100% 0, 85% 0, 50% 70%);
+      pointer-events: none;
+    }
+  }
+
+  &__control {
+    padding: 0.7em 2.1em 0.7em 0.7em;
+    font-family: $font-stack-heading;
+    line-height: 1.1;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    background-color: #fff;
+    border: 1px solid $color-teal-50;
+    font-family: $font-stack-heading;
+    color: $color-grey-90;
+    font-weight: 600;
+  }
+}
+
+.iati-multi-select {
+  margin: 1rem 0 0 0;
+  padding: 0;
+
+  &__item {
+    --display: inline-flex; // Used by .display--* utilities
+
+    display: var(--display);
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+    margin: 0;
+    padding: 0;
+  }
+}

src/scss/components/select/multi-select.ts

@@ -0,0 +1,84 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+
+@customElement('multi-select')
+export class MultiSelect extends LitElement {
+  @property({ type: String })
+  label: string = 'Select options';
+
+  @property({ type: Array })
+  options: string[] = [];
+
+  @state()
+  selectedItems: string[] = [];
+
+  createRenderRoot() {
+    return this;
+  }
+
+  _handleSelect(e: Event) {
+    const selectEl = e.target as HTMLSelectElement;
+    const value = selectEl.value;
+
+    if (value && !this.selectedItems.includes(value)) {
+      this.selectedItems = [...this.selectedItems, value];
+    }
+    selectEl.value = '';
+  }
+
+  _handleRemove(itemToRemove: string) {
+    this.selectedItems = this.selectedItems.filter(
+      (item) => item !== itemToRemove
+    );
+  }
+
+  render() {
+    const availableOptions = this.options.filter(
+      (opt) => !this.selectedItems.includes(opt)
+    );
+
+    return html`
+      <div class="iati-select">
+        <label for="iati-multi-select" class="iati-select__label">${this.label}</label>
+
+        <div class="iati-select__control-wrapper">
+          <select 
+            id="iati-multi-select" 
+            class="iati-select__control" 
+            @change=${this._handleSelect}
+          >
+            <option value="">---</option>
+            ${map(
+              availableOptions,
+              (opt) => html`<option value=${opt}>${opt}</option>`
+            )}
+          </select>
+        </div>
+      </div>
+
+      <ul class="iati-multi-select">
+        ${map(
+          this.selectedItems,
+          (item) => html`
+            <li class="iati-multi-select__item">
+              <button 
+                class="iati-button iati-button--pill iati-button--remove" 
+                @click=${() => this._handleRemove(item)}
+                title="Remove ${item}"
+              >
+                ${item}
+              </button>
+            </li>
+          `
+        )}
+      </ul>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'multi-select': MultiSelect;
+  }
+}

src/scss/components/select/select.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import "./multi-select.ts";
+
+const meta: Meta = {
+  title: "Components/Select",
+  argTypes: {
+    label: { control: 'text' },
+    options: { control: 'object' },
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const SingleSelect: Story = {
+  name: "Single Select",
+  render: () => html`
+    <div class="iati-select">
+      <label for="iati-single-select" class="iati-select__label">
+        Choose your language
+      </label>
+      <div class="iati-select__control-wrapper">
+        <select id="iati-single-select" class="iati-select__control">
+          <option>English</option>
+          <option>French</option>
+        </select>
+      </div>
+    </div>
+  `,
+};
+
+export const MultiSelect: Story = {
+  name: "Multi Select",
+  args: {
+    label: 'Choose your language(s)',
+    options: ['English', 'French']
+  },
+  render: (args) => html`
+    <multi-select
+      .label=${args.label}
+      .options=${args.options}
+    ></multi-select>
+  `,
+};