@royallondon/design-system-component-search-keyword 0.0.0-stage → 2.3.0

package/LICENSE.md

@@ -0,0 +1,54 @@
+Authorised Use Licence v1.0
+
+Copyright © 2026 Royal London.
+All rights reserved.
+
+1. Grant of Licence
+
+The Licensor grants a non-exclusive, non-transferable,
+revocable, royalty-free licence to use the Software only where:
+
+(a) the individual, organisation, or business has been
+expressly authorised in writing by the Licensor; and
+
+(b) such authorisation remains in force.
+
+2. Restrictions
+
+The Software may not be:
+
+(a) used by any unauthorised person or organisation;
+
+(b) redistributed, sublicensed, sold, rented or made
+available to third parties;
+
+(c) incorporated into another product or service without
+written approval;
+
+(d) reverse engineered except where prohibited by law.
+
+3. Ownership
+
+The Software remains the exclusive property of the Licensor.
+No ownership rights are transferred under this Licence.
+
+4. Termination
+
+The Licensor may revoke authorisation at any time by
+written notice.
+
+Upon termination the Licensee must immediately cease use
+of the Software and destroy all copies.
+
+5. No Warranty
+
+The Software is provided "as is" without warranty of any kind.
+
+6. Limitation of Liability
+
+The Licensor shall not be liable for any damages arising
+from use of the Software.
+
+7. Governing Law
+
+This Licence shall be governed by the laws of England and Wales.

package/README.md

@@ -1,3 +1,87 @@
-# Temporary Holding Version
+### Installation
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Install the Search keyword package from npm
+
+```bash
+npm install @royallondon/design-system-component-search-keyword
+```
+
+Import the required CSS file
+
+```css
+@import '@royallondon/design-system-component-search-keyword/dist/search-keyword';
+```
+
+Add the html code for the search keyword component
+
+```html
+<form method="" class="rl-c-search--ice">
+  <label class="rl-u__visuallyhidden" for="search-input">Search</label>
+  <input
+    type="text"
+    class="rl-c-search__input rl--bg-color-white"
+    id="search-input"
+    aria-describedby="search-input"
+    placeholder="Search Royal London"
+  />
+  <button type="submit" class="rl-c-search__submit">
+    <svg class="rl-f-icon rl-f-icon--md rl-f-icon--primary">
+      <title>Search</title>
+      <use href="/assets/icons.svg#search"></use>
+    </svg>
+  </button>
+</form>
+```
+
+Import the js for the component, json data to be used for the search results and initialise the new searchBar class
+
+```js
+import SearchBar from '@royallondon/design-system-component-search-keyword/dist/search-keyword.js';
+import data from 'PathToJsonFile.json';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new SearchBar(data);
+});
+```
+
+1. You can pass in the following options to searchBar js class
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  const searchBar = new SearchBar(searchData, {
+    formSelector: '#my-search-form',
+    inputSelector: '#my-search-input',
+    submitButtonSelector: '#my-search-submit',
+    minCharacters: 2, // Set to 2 if you want search to start after 2 characters are typed
+  });
+});
+```
+
+### Support
+
+Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
+
+### Licence
+
+#### @royallondon/design-system-component-search-keyword
+
+This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.
+
+Use of this package is subject to the Royal London Authorised Use Licence. See the `LICENSE.md` file included in this package.
+
+The Search keyword component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Search keyword page](https://design.royallondon.com/components/search-keyword/).
+
+### Release log
+
+| Version | Release notes                                                                                                                     |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| 2.3.0   | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps; add TypeScript declarations |
+| 2.2.5   | Move to new feed                                                                                                                  |
+| 2.2.4   | Update border for compatibility with Forms 2.x and 3.x                                                                            |
+| 2.2.0   | Apply new icons and latest tokens added to foundations                                                                            |
+| 2.1.1   | Add custom font weight to search result titles                                                                                    |
+| 2.1.0   | Update search keyword to use type tokens                                                                                          |
+| 2.0.1   | Fix for width not collapsing on small screens                                                                                     |
+| 2.0.0   | Upgrade for compatibility with foundations v2                                                                                     |
+| 1.1.0   | Fixes for screen reader announcing results                                                                                        |
+| 1.0.0   | First release of search keyword component                                                                                         |

package/dist/search-keyword.css

@@ -0,0 +1 @@
+[class*=rl-c-search--]{background:var(--search-keyword-fill-input-on);display:flex;gap:.375rem;justify-content:space-between;max-width:600px;position:relative;width:100%;z-index:1}.rl-c-search__input{all:unset;border:2px solid var(--search-keyword-fill-input-on);color:var(--search-keyword-text-input-on);flex:1 1 auto;font-family:var(--typography-font-family-title-medium);font-size:var(--typography-size-title-medium);font-weight:var(--typography-weight-title-medium);line-height:var(--type-line-height-single);min-width:0;padding:12px 0;text-indent:10px}@media (--mq-sm ){.rl-c-search__input:-moz-placeholder{padding-right:3.625rem}.rl-c-search__input:placeholder-shown{padding-right:3.625rem}}.rl-c-search__input::-moz-placeholder{color:var(--search-keyword-text-input-on);text-indent:calc(1.5rem - var(--spacing-01))}.rl-c-search__input::placeholder{color:var(--search-keyword-text-input-on);text-indent:calc(1.5rem - var(--spacing-01))}.rl-c-search:hover{border-bottom:1px solid var(--search-keyword-stroke-input-on-hover)}.rl-c-search__input:hover{border-color:var(--search-keyword-fill-input-on)}.rl-c-search__input:focus{outline:.125rem solid var(--color-watermelon);outline-offset:.125rem}.rl-c-search__submit{border:2px solid var(--color-ice);padding:0 10px}.rl-c-search__submit [class*=rl-icon]{cursor:pointer;font-size:2rem}.rl-c-search__clear{border:2px solid var(--color-ice);padding:0 18px}.rl-c-search__clear [class*=rl-icon]{cursor:pointer}.rl-c-search__results-list{background:var(--search-keyword-fill-result);list-style-type:none;margin:0;padding:0;width:100%}.rl-c-search__result-item{border-bottom:1px solid var(--search-keyword-stroke-result);cursor:pointer;padding:12px}.rl-c-search__result-item:hover{background-color:var(--search-keyword-fill-result-hover)}.rl-c-search__results{position:absolute;top:59px;width:100%;z-index:1002}.rl-c-search__results-summary{background:var(--search-keyword-fill-counter);border-bottom:1px solid var(--search-keyword-stroke-result);font-weight:700;padding:var(--spacing-02) 12px}.rl-c-search__result-title{color:var(--search-keyword-text-result-title);font-family:var(--typography-font-family-title-small);font-size:var(--typography-size-title-small);font-weight:700;line-height:var(--type-line-height-body);margin-bottom:var(--spacing-02)}.rl-c-search__result-title:last-child{margin-bottom:0}.rl-c-search__view-all{background:var(--color-teal-dark);color:var(--color-white);font-family:var(--typography-font-family-label-medium);font-size:var(--typography-size-label-medium);font-weight:var(--typography-weight-label-medium);gap:var(--spacing-02);justify-content:flex-start;line-height:var(--type-line-height-single);margin-top:var(--spacing-01);padding:var(--spacing-02) 12px var(--spacing-01)}.rl-c-search__no-results{background:var(--color-cloud);border-bottom:1px solid var(--color-fog);padding:var(--spacing-02) 12px}.rl-c-search__overlay{background:color-mix(in srgb,var(--search-keyword-fill-overlay),transparent 80%);bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}.rl-c-search--white{background:var(--color-white)}.rl-c-search--white .rl-c-search__input{border:2px solid var(--color-white)}.rl-c-search--white .rl-c-search__input:hover{border-color:var(--color-white)}.rl-c-search--white .rl-c-search__clear,.rl-c-search--white .rl-c-search__submit{border:2px solid var(--color-white)}

package/dist/search-keyword.d.ts

@@ -0,0 +1,33 @@
+export interface SearchItem {
+  title: string;
+  description: string;
+}
+
+export interface SearchBarOptions {
+  formSelector?: string;
+  inputSelector?: string;
+  submitButtonSelector?: string;
+  preventDefault?: boolean;
+  minCharacters?: number;
+}
+
+export default class SearchBar {
+  constructor(searchData: SearchItem[], options?: SearchBarOptions);
+
+  data: SearchItem[];
+  options: Required<SearchBarOptions>;
+  form: HTMLFormElement | null;
+  input: HTMLInputElement | null;
+  submitButton: HTMLButtonElement | null;
+  resultsContainer: HTMLDivElement;
+  overlay: HTMLDivElement;
+
+  performSearch(): void;
+  displayResults(matches: SearchItem[]): void;
+  showResults(): void;
+  hideResults(): void;
+  clearResults(): void;
+  clearInput(): void;
+  selectResult(result: string): void;
+  closeSearchAndReset(): void;
+}

package/dist/search-keyword.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("./utils.js");
+class SearchBar {
+  constructor(searchData, options = {}) {
+    this.data = searchData;
+    this.options = {
+      formSelector: '.rl-c-search--ice',
+      inputSelector: '#search-input',
+      submitButtonSelector: '.rl-c-search__submit',
+      preventDefault: false,
+      minCharacters: 3,
+      ...options
+    };
+    this.form = document.querySelector(this.options.formSelector);
+    if (!this.form) {
+      console.error(`Form element not found with selector: ${this.options.formSelector}`);
+      return;
+    }
+    this.input = this.form.querySelector(this.options.inputSelector);
+    this.submitButton = this.form.querySelector(this.options.submitButtonSelector);
+    if (!this.input) {
+      console.error(`Input element not found with selector: ${this.options.inputSelector}`);
+    }
+    if (!this.submitButton) {
+      console.error(`Submit button not found with selector: ${this.options.submitButtonSelector}`);
+    }
+    this.createResultsContainer();
+    this.createOverlay();
+    this.input.addEventListener('input', this.handleInput.bind(this));
+    this.input.addEventListener('keydown', this.handleKeydown.bind(this));
+    this.form.addEventListener('focusin', this.handleFocusIn.bind(this));
+    document.addEventListener('focusin', this.handleFocusOut.bind(this));
+    document.addEventListener('click', this.handleClickOutside.bind(this));
+    this.form.addEventListener('submit', this.handleSubmit.bind(this));
+    document.addEventListener('keydown', this.handleEscapeKey.bind(this));
+    this.overlay.addEventListener('click', this.handleOverlayClick.bind(this));
+    this.debouncedSearch = (0, _utils.debounce)(this.performSearch.bind(this), 300);
+  }
+  createResultsContainer() {
+    this.resultsContainer = document.createElement('div');
+    this.resultsContainer.className = 'rl-c-search__results';
+    this.resultsContainer.innerHTML = `
+      <div id="results-summary" aria-live="polite" class="rl-c-search__results-summary"></div>
+      <ul id="rl-c-search-results" class="rl-c-search__results-list" role="listbox" aria-label="Search results"></ul>
+      <div id="no-results" class="rl-c-search__no-results" style="display: none;" aria-live="polite">No results found</div>
+      <a href="#" id="view-all" class="rl-c-search__view-all rl-c-button">View all results <svg class="rl-f-icon rl-f-icon--xs" aria-hidden="true"><use xlink:href="/assets/icons.svg#arrow-next"></use></svg></a>
+    `;
+    this.resultsContainer.addEventListener('focusin', this.handleFocusIn.bind(this));
+    this.form.appendChild(this.resultsContainer);
+    this.resultsSummary = this.resultsContainer.querySelector('#results-summary');
+    this.resultsList = this.resultsContainer.querySelector('#rl-c-search-results');
+    this.noResults = this.resultsContainer.querySelector('#no-results');
+    this.viewAllLink = this.resultsContainer.querySelector('#view-all');
+    this.hideResults();
+  }
+  createOverlay() {
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'rl-c-search__overlay';
+    document.body.appendChild(this.overlay);
+    this.overlay.style.display = 'none';
+  }
+  handleInput() {
+    const query = this.input.value;
+    this.toggleClearButton(query);
+    this.debouncedSearch();
+  }
+  handleFocusIn() {
+    this.showOverlay();
+    this.form.classList.add('rl-c-search--focused');
+    this.form.style.zIndex = '1002';
+  }
+  handleFocusOut(event) {
+    if (!this.form.contains(event.target) && !this.resultsContainer.contains(event.target)) {
+      this.closeSearchAndReset();
+    }
+  }
+  showOverlay() {
+    this.overlay.style.display = 'block';
+  }
+  hideOverlay() {
+    this.overlay.style.display = 'none';
+  }
+  toggleClearButton(query) {
+    if (query.length > 0) {
+      if (!this.clearButton) {
+        this.clearButton = document.createElement('button');
+        this.clearButton.type = 'button';
+        this.clearButton.className = 'rl-c-search__clear';
+        this.clearButton.innerHTML = '<svg class="rl-f-icon rl-f-icon--xs rl-f-icon--secondary"><title>Clear search</title><use xlink:href="/assets/icons.svg#no"></use></svg>';
+        this.clearButton.addEventListener('click', this.clearInput.bind(this));
+        this.input.parentNode.insertBefore(this.clearButton, this.input.nextSibling);
+      }
+      this.clearButton.style.display = 'inline';
+    } else if (this.clearButton) {
+      this.clearButton.style.display = 'none';
+    }
+  }
+  clearInput() {
+    this.input.value = '';
+    this.toggleClearButton('');
+    this.clearResults();
+    this.input.focus();
+  }
+  performSearch() {
+    const query = this.input.value.toLowerCase();
+    if (query.length < this.options.minCharacters) {
+      this.clearResults();
+      return;
+    }
+    const matches = this.data.filter(item => item.title.toLowerCase().includes(query) || item.description.toLowerCase().includes(query));
+    this.displayResults(matches);
+  }
+  displayResults(matches) {
+    this.clearResults();
+    if (matches.length === 0) {
+      this.noResults.style.display = 'block';
+      this.showResults();
+      return;
+    }
+    const displayLimit = 6;
+    const displayedMatches = matches.slice(0, displayLimit);
+    const summaryText = `Showing ${displayedMatches.length} of ${matches.length} results`;
+    this.resultsSummary.textContent = summaryText;
+    this.resultsSummary.setAttribute("tabindex", "0");
+    this.resultsSummary.style.display = 'block';
+    displayedMatches.forEach((match, index) => {
+      const li = document.createElement('li');
+      li.className = 'rl-c-search__result-item';
+      li.setAttribute('role', 'option');
+      li.setAttribute('id', `search-result-${index}`);
+      li.setAttribute('aria-selected', 'false');
+      li.tabIndex = 0;
+      li.innerHTML = `
+        <div class="rl-c-search__result-title">${match.title}</div>
+        <div class="rl-c-search__result-description">${match.description}</div>
+      `;
+      li.addEventListener('click', () => this.selectResult(match.title));
+      this.resultsList.appendChild(li);
+    });
+    this.viewAllLink.style.display = matches.length > displayLimit ? 'flex' : 'none';
+    this.showResults();
+
+    // Update ARIA attributes
+    this.input.setAttribute('aria-expanded', 'true');
+    this.resultsList.setAttribute('aria-busy', 'false');
+
+    // Set focus to the first result
+    if (displayedMatches.length > 0) {
+      const firstResult = this.resultsList.querySelector('.rl-c-search__result-item');
+      firstResult.setAttribute('aria-selected', 'true');
+      this.input.setAttribute('aria-activedescendant', firstResult.id);
+    }
+  }
+  showResults() {
+    this.resultsContainer.style.display = 'block';
+  }
+  hideResults() {
+    this.resultsContainer.style.display = 'none';
+  }
+  clearResults() {
+    this.resultsList.innerHTML = '';
+    this.resultsSummary.style.display = 'none';
+    this.noResults.style.display = 'none';
+    this.viewAllLink.style.display = 'none';
+    this.hideResults();
+    this.input.removeAttribute('aria-activedescendant');
+    this.input.setAttribute('aria-expanded', 'false');
+  }
+  selectResult(result) {
+    this.input.value = result;
+    this.toggleClearButton(result);
+    this.clearResults();
+    this.hideOverlay();
+    this.input.focus();
+  }
+  handleKeydown(e) {
+    const items = this.resultsList.querySelectorAll('.rl-c-search__result-item');
+    const currentIndex = Array.from(items).findIndex(item => item.getAttribute('aria-selected') === 'true');
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        e.preventDefault();
+        let nextIndex;
+        if (e.key === 'ArrowDown') {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        } else {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        }
+        items.forEach(item => item.setAttribute('aria-selected', 'false'));
+        items[nextIndex].setAttribute('aria-selected', 'true');
+        this.input.setAttribute('aria-activedescendant', `search-result-${nextIndex}`);
+        break;
+      case 'Enter':
+        if (document.activeElement === this.input && currentIndex !== -1) {
+          e.preventDefault();
+          this.selectResult(items[currentIndex].querySelector('.rl-c-search__result-title').textContent);
+        }
+        break;
+      case 'Escape':
+        this.closeSearchAndReset();
+        break;
+    }
+  }
+  handleEscapeKey(e) {
+    if (e.key === 'Escape') {
+      this.closeSearchAndReset();
+    }
+  }
+  handleOverlayClick(e) {
+    if (e.target === this.overlay) {
+      this.closeSearchAndReset();
+    }
+  }
+  closeSearchAndReset() {
+    this.clearResults();
+    this.hideOverlay();
+    this.form.classList.remove('rl-c-search--focused');
+    this.input.value = '';
+    this.toggleClearButton('');
+    this.input.setAttribute('aria-expanded', 'false');
+    this.input.removeAttribute('aria-activedescendant');
+    this.input.blur();
+    this.form.style.zIndex = '1';
+  }
+  handleClickOutside(e) {
+    if (!this.form.contains(e.target) && !this.resultsContainer.contains(e.target) && e.target !== this.overlay) {
+      this.closeSearchAndReset();
+    }
+  }
+  handleSubmit(e) {
+    if (this.options.preventDefault) {
+      e.preventDefault();
+    }
+    this.performSearch();
+  }
+}
+exports.default = SearchBar;

package/dist/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.debounce = debounce;
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@royallondon/design-system-component-search-keyword",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.0",
+  "description": "Royal London Design System - Search keyword package",
+  "homepage": "https://design.royallondon.com/components/search-keyword/",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
+    "directory": "ds-packages/packages/design-system-component-search-keyword"
+  },
+  "bugs": {
+    "url": "https://design.royallondon.com/support/"
+  },
+  "keywords": [
+    "royal-london-design-system-component-search-keyword",
+    "rlds-search-keyword",
+    "royal-london"
+  ],
+  "author": "Design System Squad <DesignSystem@royallondon.com>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "main": "dist/search-keyword.css",
+  "style": "dist/search-keyword.css",
+  "scripts": {
+    "build:clean": "npx rimraf dist",
+    "build:lint": "stylelint src/**/*.{css,pcss} --fix",
+    "build:css": "postcss src/**/search-keyword.pcss --base src --dir dist/ --ext css",
+    "build:js": "npm-run-all --serial build:babel build:types",
+    "build:babel": "babel src/ --out-dir dist/ --config-file ../../babel.config",
+    "build:types": "npx copyfiles -u 1 \"src/**/*.d.ts\" dist",
+    "build": "npm-run-all --serial build:clean build:css build:js"
+  },
+  "devDependencies": {
+    "@royallondon/design-system-foundations": "^2.23.0"
+  },
+  "peerDependencies": {
+    "@royallondon/design-system-foundations": "^2.19.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }