@cfpb/cfpb-design-system 4.2.4 → 4.3.1

package/src/elements/cfpb-tag-topic/index.js

@@ -17,12 +17,10 @@ export class CfpbTagTopic extends LitElement {
    *   Whether the preceding sibling is a jump link or not.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      href: { type: String, reflect: true },
-      siblingOfJumpLink: { type: Boolean },
-    };
-  }
+  static properties = {
+    href: { type: String, reflect: true },
+    siblingOfJumpLink: { type: Boolean },
+  };
 
   /*
    * @property {string} href - The URL to link to (makes the tag a link).
@@ -55,7 +53,7 @@ export class CfpbTagTopic extends LitElement {
         ? html`<span class="a-tag-topic"
             >${bullet}<span class="a-tag-topic__text"><slot></slot></span
           ></span>`
-        : html`<a class="${this.#tagClass}" href="${this.href}"
+        : html`<a class=${this.#tagClass} href=${this.href}
             >${bullet}<span class="a-tag-topic__text"><slot></slot></span
           ></a>`;
     return html`${slot}`;

package/src/elements/cfpb-utilities/parse-child-data.js

@@ -0,0 +1,50 @@
+/**
+ * Normalize "childData" style inputs into an array.
+ * Accepts:
+ *   - JS arrays
+ *   - JSON strings
+ *   - JSON-like strings with single quotes
+ * @param {Array | string} input
+ * @param {object} options - optional settings.
+ * @param {boolean} options.allowSingleQuotes - default true.
+ * @returns {Array|null} Parsed array/string, or null if invalid.
+ */
+export function parseChildData(input, options = {}) {
+  const { allowSingleQuotes = true } = options;
+
+  if (!input) return null;
+
+  // Already an array - most desirable case.
+  if (Array.isArray(input)) {
+    return input;
+  }
+
+  if (typeof input !== 'string') {
+    console.error('childData must be a string or array.');
+    return null;
+  }
+
+  let text = input.trim();
+
+  // String is empty after trim.
+  if (!text) return null;
+
+  // Optional conversation: single -> double quotes for HTML convenience.
+  if (allowSingleQuotes) {
+    text = text.replace(/'/g, '"');
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+
+    if (!Array.isArray(parsed)) {
+      console.error('childData JSON must parse to an array.');
+      return null;
+    }
+
+    return parsed;
+  } catch (err) {
+    console.error('Failed to parse childData JSON:', err);
+    return null;
+  }
+}

package/src/elements/cfpb-utilities/parse-child-data.spec.js

@@ -0,0 +1,56 @@
+import { parseChildData } from './parse-child-data.js';
+
+describe('parseChildData', () => {
+  it('returns null for empty input', () => {
+    expect(parseChildData(null)).toBeNull();
+    expect(parseChildData(undefined)).toBeNull();
+    expect(parseChildData('')).toBeNull();
+  });
+
+  it('returns the array unchanged if input is already an array', () => {
+    const arr = [1, 2, 3];
+    expect(parseChildData(arr)).toBe(arr);
+  });
+
+  it('parses valid JSON string into array', () => {
+    const json = '[{"text":"a"},{"text":"b"}]';
+    const result = parseChildData(json);
+    expect(result).toEqual([{ text: 'a' }, { text: 'b' }]);
+  });
+
+  it('parses JSON-like string with single quotes when allowSingleQuotes=true', () => {
+    const jsonLike = "[{'text':'a'},{'text':'b'}]";
+    const result = parseChildData(jsonLike, { allowSingleQuotes: true });
+    expect(result).toEqual([{ text: 'a' }, { text: 'b' }]);
+  });
+
+  it('throws error / returns null for invalid JSON', () => {
+    const invalid = '[{text:a},{text:b}]';
+    const result = parseChildData(invalid);
+    expect(result).toBeNull();
+  });
+
+  it('returns null when parsed JSON is not an array', () => {
+    const objString = '{"a":1,"b":2}';
+    const result = parseChildData(objString);
+    expect(result).toBeNull();
+  });
+
+  it('does not convert single quotes if allowSingleQuotes=false', () => {
+    const singleQuoteStr = "[{'text':'a'}]";
+    const result = parseChildData(singleQuoteStr, { allowSingleQuotes: false });
+    expect(result).toBeNull();
+  });
+
+  it('trims whitespace before parsing', () => {
+    const json = '   [ {"text":"x"} ]  ';
+    const result = parseChildData(json);
+    expect(result).toEqual([{ text: 'x' }]);
+  });
+
+  it('works with mixed content and multiple spaces', () => {
+    const jsonLike = " [  { 'text' : 'x' } , { 'text':'y' } ] ";
+    const result = parseChildData(jsonLike, { allowSingleQuotes: true });
+    expect(result).toEqual([{ text: 'x' }, { text: 'y' }]);
+  });
+});

package/src/elements/cfpb-utilities/search-service.js

@@ -0,0 +1,46 @@
+export class SearchService {
+  constructor(items = [], options = {}) {
+    this.items = items;
+
+    // Specify object keys to search in.
+    this.fields = options.fields || null;
+  }
+
+  setItems(items) {
+    this.items = items;
+  }
+
+  search(query) {
+    if (!query || query.trim() === '') return this.items;
+
+    const lowerQuery = query.toLowerCase();
+
+    const result = this.items.filter((item) => {
+      if (typeof item === 'string') {
+        return item.toLocaleLowerCase().includes(lowerQuery);
+      }
+
+      if (typeof item === 'object' && this.fields) {
+        return this.fields.some((field) => {
+          const value = item[field];
+          return (
+            typeof value === 'string' &&
+            value.toLowerCase().includes(lowerQuery)
+          );
+        });
+      }
+
+      // Fallback: check all string values.
+      const fallback = Object.values(item).some((value) => {
+        const match =
+          typeof value === 'string'
+            ? value.toLowerCase().includes(lowerQuery)
+            : false;
+        return match;
+      });
+      return fallback;
+    });
+
+    return result;
+  }
+}

package/src/elements/cfpb-utilities/search-service.spec.js

@@ -0,0 +1,138 @@
+import { SearchService } from './search-service.js';
+
+describe('SearchService', () => {
+  //
+  // ---------------------------------------------------------------------------
+  // BASIC STRING SEARCH TESTS
+  // ---------------------------------------------------------------------------
+  //
+  describe('basic behavior', () => {
+    let service;
+    let items;
+
+    beforeEach(() => {
+      items = ['Pawpaw', 'Elderberry', 'Persimmon'];
+      service = new SearchService(items);
+    });
+
+    it('returns all items when query is empty', () => {
+      const result = service.search('');
+      expect(result).toEqual(items);
+    });
+
+    it('is case-insensitive', () => {
+      const result = service.search('elderberry');
+      expect(result).toEqual(['Elderberry']);
+    });
+
+    it('matches partial substrings', () => {
+      const result = service.search('aw');
+      expect(result).toEqual(['Pawpaw']);
+    });
+
+    it('returns empty array if no matches', () => {
+      const result = service.search('xyz');
+      expect(result).toEqual([]);
+    });
+
+    it('updates the internal list with setItems()', () => {
+      const newItems = ['Possum', 'Moose'];
+      service.setItems(newItems);
+      const result = service.search('moose');
+      expect(result).toEqual(['Moose']);
+    });
+  });
+
+  //
+  // ---------------------------------------------------------------------------
+  // OBJECT-BASED SEARCH TESTS
+  // ---------------------------------------------------------------------------
+  //
+  describe('object-based search', () => {
+    let service;
+    let items;
+
+    beforeEach(() => {
+      items = [
+        {
+          name: 'Pawpaw',
+          description: 'Largest fruit native to North America',
+        },
+        { name: 'Elderberry', description: 'Must be cooked before eaten.' },
+        { name: 'Persimmon', description: 'Trees are dioecious.' },
+      ];
+    });
+
+    it('searches specific fields when provided', () => {
+      service = new SearchService(items, { fields: ['name'] });
+      const result = service.search('pawpaw');
+      expect(result).toEqual([
+        {
+          name: 'Pawpaw',
+          description: 'Largest fruit native to North America',
+        },
+      ]);
+    });
+
+    it('searches across multiple fields', () => {
+      service = new SearchService(items, { fields: ['name', 'description'] });
+      const result = service.search('America');
+      expect(result).toEqual([
+        {
+          name: 'Pawpaw',
+          description: 'Largest fruit native to North America',
+        },
+      ]);
+    });
+
+    it('searches all string values if no fields specified', () => {
+      service = new SearchService(items);
+      const result = service.search('dioecious');
+      expect(result).toEqual([
+        { name: 'Persimmon', description: 'Trees are dioecious.' },
+      ]);
+    });
+
+    it('ignores non-string fields', () => {
+      const complexItems = [
+        { name: 'Grape', count: 5 },
+        { name: 'Mango', count: 10 },
+      ];
+
+      service = new SearchService(complexItems);
+      const result = service.search('10');
+
+      // Numbers are ignored.
+      expect(result).toEqual([]);
+    });
+  });
+
+  //
+  // ---------------------------------------------------------------------------
+  // EDGE CASES & ROBUSTNESS
+  // ---------------------------------------------------------------------------
+  //
+  describe('edge cases', () => {
+    let service;
+    beforeEach(() => {
+      service = new SearchService();
+    });
+
+    it('handles null or undefined queries gracefully', () => {
+      service.setItems(['Bottle cap']);
+      expect(service.search(null)).toEqual(['Bottle cap']);
+      expect(service.search(undefined)).toEqual(['Bottle cap']);
+    });
+
+    it('returns an empty array when items is empty', () => {
+      const result = service.search('bottle');
+      expect(result).toEqual([]);
+    });
+
+    it('ignores objects without string properties', () => {
+      service.setItems([{ id: 1 }, { id: 2 }]);
+      const result = service.search('1');
+      expect(result).toEqual([]);
+    });
+  });
+});

package/src/elements/cfpb-utilities/transition/transition.scss

@@ -0,0 +1,98 @@
+/* ==========================================================================
+   Utility classes for transitions.
+
+   Adds transitions utilty classes for transform, opacity,
+   and for the removing the transition duration.
+   ========================================================================== */
+
+.u-no-animation {
+  transition-duration: 0s !important;
+}
+
+//
+// Utility classes for moving an element using transform translate values.
+//
+
+.u-move-transition {
+  transition: transform 0.25s ease-out;
+}
+
+.u-move-to-origin {
+  transform: translate3d(0, 0, 0);
+}
+
+.u-move-left {
+  transform: translate3d(-100%, 0, 0);
+}
+
+// TODO: Look into adding a mixin for movement multiples.
+.u-move-left-2x {
+  transform: translate3d(-200%, 0, 0);
+}
+
+.u-move-left-3x {
+  transform: translate3d(-300%, 0, 0);
+}
+
+.u-move-right {
+  transform: translate3d(100%, 0, 0);
+}
+
+.u-move-up {
+  transform: translate3d(0, -100%, 0);
+}
+
+//
+// Utility classes for setting an element's opacity.
+//
+
+.u-alpha-transition {
+  transition: opacity 0.25s linear;
+}
+
+.u-alpha-100 {
+  opacity: 1;
+}
+
+.u-alpha-0 {
+  opacity: 0;
+}
+
+//
+// Utility classes for setting an element's height.
+//
+
+.u-max-height-transition {
+  overflow: hidden;
+  contain: paint;
+
+  // Duration is set here, but it is actually overridden in the JavaScript.
+  transition: max-height 0.2s ease-out;
+}
+
+/*
+.u-max-height-default {
+  This class is kept for documentation completeness.
+  The actual max-height is set in the JavaScript,
+  so that we know what the actual height of the content is for easing purposes.
+}
+
+.u-max-height-dynamic {
+  This class is kept for documentation completeness.
+  The actual max-height is set in the JavaScript,
+  so that we know what the actual height of the content is for easing purposes.
+}
+*/
+
+.u-max-height-zero {
+  max-height: 0 !important;
+}
+
+.u-max-height-summary {
+  /* The value set here should show 4 lines of text at our standard 16px
+     base font size. The calculation comes from the following:
+     88px = 16 * 5.5em.
+     5.5em = base-line-height (22px) * 4 / base-font-size (16px)
+  */
+  max-height: 88px !important;
+}

package/src/elements/index.js

@@ -4,11 +4,17 @@
 
 // TODO: aggregate and export the component subdirectories automatically.
 export * from './cfpb-button';
+export * from './cfpb-form-alert';
+export * from './cfpb-expandable';
 export * from './cfpb-form-choice';
 export * from './cfpb-file-upload';
 export * from './cfpb-label';
+export * from './cfpb-list';
+export * from './cfpb-list-item';
+export * from './cfpb-form-search';
+export * from './cfpb-form-search-input';
 export * from './cfpb-tag-filter';
 export * from './cfpb-tag-topic';
 export * from './cfpb-tag-group';
-export * from './cfpb-multiselect';
+export * from './cfpb-select';
 export * from './cfpb-pagination';

package/src/index.js

@@ -2,9 +2,9 @@
    Design System
    ========================================================================== */
 
-export * from './abstracts';
+export * from './elements/abstracts';
 
-export * from './base';
+export * from './elements/base';
 
 export * from './components/cfpb-buttons';
 export * from './components/cfpb-expandables';

package/src/index.scss

@@ -1,5 +1,3 @@
-@forward 'abstracts';
-@forward 'base';
 
 // Buttons.
 @forward 'components/cfpb-buttons/vars';
@@ -64,3 +62,17 @@
 
 // Utilities.
 @forward 'utilities';
+
+// Web components.
+@forward 'elements/base';
+@forward 'elements/abstracts';
+
+// cfpb-button
+@forward 'elements/cfpb-button/cfpb-button';
+@forward 'elements/cfpb-button/cfpb-button-group';
+@forward 'elements/cfpb-button/cfpb-button-link'; 
+@forward 'elements/cfpb-button/cfpb-button.component';
+@forward 'elements/cfpb-button/vars';
+
+// cfpb-icon-text
+@forward 'elements/cfpb-icon-text/cfpb-icon-text.component';