@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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.scss

@@ -64,3 +64,14 @@
 
 // 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';