WEBDEV-8811: Migrate ia-clearable-text-input into elements

.github/workflows/ci.yml

@@ -3,8 +3,9 @@ name: App CI
 on:
   push:
     branches: [ main ]
+  # every pull request, whatever it targets, so a PR stacked on another
+  # branch still gets its tests run
   pull_request:
-    branches: [ main ]
 
 jobs:
   build:

package.json

@@ -27,7 +27,6 @@
     "ghpages:build": "wireit"
   },
   "dependencies": {
-    "@internetarchive/ia-clearable-text-input": "^1.1.1",
     "@lit/localize": "^0.12.2",
     "lit": "^2.8.0 || ^3.3.2",
     "magic-snowflakes": "^7.0.2",

src/elements/ia-clearable-text-input/assets/close.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Close Icon
+ *
+ * Kept as an inline Lit `svg` template rather than an imported `.svg` file so
+ * that the clear button can recolor it from the component's own styles, which
+ * is not possible on the contents of an `<img>`.
+ */
+import { svg } from 'lit';
+
+export default svg`
+  <svg viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="fill-color"
+      fill-rule="evenodd"
+      d="m29.1923882 10.8076118c.5857864.5857865.5857864 1.535534 0 2.1213204l-7.0711162 7.0703398 7.0711162 7.0717958c.5857864.5857864.5857864 1.5355339 0 2.1213204-.5857865.5857864-1.535534.5857864-2.1213204 0l-7.0717958-7.0711162-7.0703398 7.0711162c-.5857864.5857864-1.5355339.5857864-2.1213204 0-.5857864-.5857865-.5857864-1.535534 0-2.1213204l7.0706602-7.0717958-7.0706602-7.0703398c-.5857864-.5857864-.5857864-1.5355339 0-2.1213204.5857865-.5857864 1.535534-.5857864 2.1213204 0l7.0703398 7.0706602 7.0717958-7.0706602c.5857864-.5857864 1.5355339-.5857864 2.1213204 0z"
+    />
+  </svg>
+`;

src/elements/ia-clearable-text-input/ia-clearable-text-input-story.ts

@@ -0,0 +1,121 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import type { PropInputSettings } from '@demo/story-components/story-prop-settings';
+import type { StyleInputSettings } from '@demo/story-components/story-styles-settings';
+import type { IaClearableTextInput } from './ia-clearable-text-input';
+
+import './ia-clearable-text-input';
+import '@demo/story-template';
+
+const styleInputSettings: StyleInputSettings[] = [
+  {
+    label: 'Height',
+    cssVariable: '--input-height',
+    defaultValue: '3rem',
+  },
+  {
+    label: 'Text color',
+    cssVariable: '--input-color',
+    defaultValue: '#555555',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color',
+    cssVariable: '--input-border-color',
+    defaultValue: '#cccccc',
+    inputType: 'color',
+  },
+  {
+    label: 'Border radius',
+    cssVariable: '--input-border-radius',
+    defaultValue: '2rem',
+  },
+  {
+    label: 'Font size',
+    cssVariable: '--input-font-size',
+    defaultValue: '1.7rem',
+  },
+  {
+    label: 'Clear icon background',
+    cssVariable: '--clear-button-icon-background',
+    defaultValue: '#2c2c2c',
+    inputType: 'color',
+  },
+  {
+    label: 'Clear icon color',
+    cssVariable: '--clear-button-icon-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+];
+
+const propInputSettings: PropInputSettings<IaClearableTextInput>[] = [
+  {
+    label: 'Value',
+    propertyName: 'value',
+    defaultValue: '',
+  },
+  {
+    label: 'Placeholder',
+    propertyName: 'placeholder',
+    defaultValue: 'Search...',
+  },
+  {
+    label: 'Screen reader label',
+    propertyName: 'screenReaderLabel',
+    defaultValue: 'Search the archive',
+  },
+  {
+    label: 'Clear button screen reader label',
+    propertyName: 'clearButtonScreenReaderLabel',
+    defaultValue: 'Clear',
+  },
+  {
+    label: 'Focus the field after clearing',
+    propertyName: 'focusOnClear',
+    defaultValue: true,
+    inputType: 'radio',
+    radioOptions: [true, false],
+  },
+  {
+    label: 'Always show the clear button',
+    propertyName: 'forceClearButton',
+    defaultValue: false,
+    inputType: 'radio',
+    radioOptions: [true, false],
+  },
+];
+
+@customElement('ia-clearable-text-input-story')
+export class IaClearableTextInputStory extends LitElement {
+  render() {
+    return html`
+      <story-template
+        elementTag="ia-clearable-text-input"
+        elementClassName="IaClearableTextInput"
+        .styleInputData=${{ settings: styleInputSettings }}
+        .propInputData=${{ settings: propInputSettings }}
+      >
+        <ia-clearable-text-input slot="demo"></ia-clearable-text-input>
+        <div slot="usage-notes">
+          <p>
+            A text field with a clear button that appears once there's something
+            to clear. Set <code>forceClearButton</code> to keep the button
+            visible even when the field is empty.
+          </p>
+          <p>
+            Emits <code>input</code> on every value change, including when the
+            clear button empties the field, <code>clear</code> carrying the
+            value the field held beforehand, and <code>submit</code> carrying
+            the current value when Enter is pressed.
+          </p>
+          <p>
+            <code>screenReaderLabel</code> is what labels the field, so it needs
+            setting for the component to be accessible.
+          </p>
+        </div>
+      </story-template>
+    `;
+  }
+}