@royallondon/design-system-component-accordion 0.0.0-stage → 3.4.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,58 @@
-# 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 Accordion package from npm
+
+```bash
+npm install @royallondon/design-system-component-accordion
+```
+
+Import the required CSS file
+
+```css
+@import '@royallondon/design-system-component-accordion/dist/accordion';
+```
+
+Import the required JS file and initialise the accordion function
+
+```js
+import accordion from '@royallondon/design-system-component-accordion/dist/accordion';
+const accordionContainers = document.querySelectorAll('.rl-c-accordion');
+if (accordionContainers) {
+  accordion(accordionContainers);
+}
+```
+
+[Start using the Accordion component](https://design.royallondon.com/components/accordion/#live-example)
+
+### Support
+
+Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
+
+### Licence
+
+#### @royallondon/design-system-component-accordion
+
+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 Accordion component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Accordion page](https://design.royallondon.com/components/accordion/).
+
+### Release log
+
+| Version | Release notes                                                                                                                               |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| 3.4.0   | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps                                        |
+| 3.3.3   | Move to new feed                                                                                                                            |
+| 3.3.0   | Apply new icons and latest tokens added to foundations package                                                                              |
+| 3.2.2   | Add TypeScript declaration file                                                                                                             |
+| 3.2.1   | Correct build output for accordion component                                                                                                |
+| 3.2.0   | Update accordion to use type tokens                                                                                                         |
+| 3.1.0   | Update typography and sizing                                                                                                                |
+| 3.0.0   | Remove obsolete ts file from dist to avoid import name conflict and fix readme content                                                      |
+| 2.1.0   | Updates to font sizing with header title and accordion title                                                                                |
+| 2.0.0   | Upgrade for compatibility with foundations v2                                                                                               |
+| 1.0.3   | Fixed TypeScript                                                                                                                            |
+| 1.0.2   | Fixed action focus state bottom border was sitting behind accordion                                                                         |
+| 1.0.1   | Fixed incorrect focus state for accordion item action and hide accordion content so that links inside aren't tabable when content is hidden |
+| 1.0.0   | First release of component                                                                                                                  |

package/dist/accordion.css

@@ -0,0 +1 @@
+@custom-media --mq-xsmall (max-width: 31.9375rem);@custom-media --mq-small (min-width: 32rem);@custom-media --mq-medium (min-width: 48rem);@custom-media --mq-large (min-width: 64rem);@custom-media --mq-medium-max (max-width: 47.9375rem);@custom-media --mq-large-max (max-width: 63.9375rem);@custom-media --mq-xs-max (max-width: 31.9375rem);@custom-media --mq-sm (min-width: 32rem);@custom-media --mq-sm-max (max-width: 47.9375rem);@custom-media --mq-md (min-width: 48rem);@custom-media --mq-md-max (max-width: 63.9375rem);@custom-media --mq-lg (min-width: 64rem);@custom-media --mq-lg-max (max-width: 79.9375rem);@custom-media --mq-xl (min-width: 80rem);@custom-media --mq-xl-max (max-width: 95.9375rem);@custom-media --mq-xxl (min-width: 96rem);.rl-c-accordion-header{border-bottom:2px solid var(--accordion-stroke-title);display:flex;flex-direction:column;font-family:var(--typography-font-family-display-small);padding-block:var(--spacing-04)}.rl-c-accordion-header:has(>.rl-f-icon),.rl-c-accordion-header:has(>[class*=rl-icon__]){display:grid;gap:var(--spacing-02) var(--spacing-03);grid-template-areas:"accordion-first-icon accordion-heading" " . accordion-open-all";grid-template-columns:1.5rem 1fr}@media (min-width:48rem){.rl-c-accordion-header:has(>.rl-f-icon),.rl-c-accordion-header:has(>[class*=rl-icon__]){grid-template-areas:"accordion-first-icon accordion-heading accordion-open-all";grid-template-columns:2rem 1fr}}@media (--mq-medium ){.rl-c-accordion-header:has(>.rl-f-icon),.rl-c-accordion-header:has(>[class*=rl-icon__]){grid-template-areas:"accordion-first-icon accordion-heading accordion-open-all";grid-template-columns:2rem 1fr}}:is(.rl-c-accordion-header:has(>[class*=rl-icon__]),.rl-c-accordion-header:has(>.rl-f-icon)) [class*=rl-icon__]{height:1.5rem;width:1.5rem}@media (min-width:48rem){:is(.rl-c-accordion-header:has(>[class*=rl-icon__]),.rl-c-accordion-header:has(>.rl-f-icon)) [class*=rl-icon__]{height:2rem;width:2rem}}@media (--mq-medium ){:is(.rl-c-accordion-header:has(>[class*=rl-icon__]),.rl-c-accordion-header:has(>.rl-f-icon)) [class*=rl-icon__]{height:2rem;width:2rem}}.rl-c-accordion-header .rl-f-icon:first-child,.rl-c-accordion-header [class*=rl-icon__]:first-child{grid-area:accordion-first-icon}.rl-c-accordion-header__content{grid-area:accordion-heading}.rl-c-accordion-header__actions{grid-area:accordion-open-all}.rl-c-accordion-header__title{color:var(--accordion-text-title-headline);font-family:var(--typography-font-family-headline-small);font-size:var(--typography-size-headline-small);font-weight:var(--typography-weight-headline-small);line-height:var(--type-line-height);margin-bottom:0}.rl-c-accordion-header__description{color:var(--accordion-text-title-body);font-family:var(--typography-font-family-body-medium);margin-bottom:0}.rl-c-accordion-header__open-all{float:right;width:auto}.rl-c-accordion-item{border-bottom:1px solid var(--accordion-stroke-row)}.rl-c-accordion-item:hover{background:var(--accordion-fill-row-hover)}.rl-c-accordion-item--open{border-bottom-color:var(--accordion-stroke-row-active)}.rl-c-accordion-item--open:hover{background:var(--accordion-fill-row-active-hover)}.rl-c-accordion-item__action{align-items:flex-start;display:flex;gap:var(--spacing-02) var(--spacing-03);padding:var(--spacing-04) var(--spacing-03);position:relative;width:100%;z-index:1}@media (min-width:48rem){.rl-c-accordion-item__action{gap:var(--spacing-03)}}@media (--mq-medium ){.rl-c-accordion-item__action{gap:var(--spacing-03)}}.rl-c-accordion-item__action:has(>.rl-f-icon:first-child),.rl-c-accordion-item__action:has(>[class*=rl-icon__]:first-child){display:grid;grid-template-columns:1.25rem 1fr 1.25rem}@media (min-width:48rem){.rl-c-accordion-item__action:has(>.rl-f-icon:first-child),.rl-c-accordion-item__action:has(>[class*=rl-icon__]:first-child){grid-template-columns:1.5rem 1fr 1.5rem}}@media (--mq-medium ){.rl-c-accordion-item__action:has(>.rl-f-icon:first-child),.rl-c-accordion-item__action:has(>[class*=rl-icon__]:first-child){grid-template-columns:1.5rem 1fr 1.5rem}}.rl-c-accordion-item__action .rl-f-icon,.rl-c-accordion-item__action [class*=rl-icon__]{flex-shrink:0}.rl-c-accordion-item__action [class*=rl-icon__]{height:1.25rem;width:1.25rem}@media (min-width:48rem){.rl-c-accordion-item__action [class*=rl-icon__]{height:1.5rem;width:1.5rem}}@media (--mq-medium ){.rl-c-accordion-item__action [class*=rl-icon__]{height:1.5rem;width:1.5rem}}.rl-c-accordion-item__header{display:flex;flex-direction:column;flex-grow:1;gap:var(--spacing-01);position:relative;text-align:left}.rl-c-accordion-item__title{color:var(--accordion-text-row-title);font-family:var(--typography-font-family-title-small);font-size:var(--typography-size-title-small);font-weight:var(--typography-weight-title-small);line-height:var(--type-line-height-body);margin:0}.rl-c-accordion-item__description{color:var(--accordion-text-row-hint);font-family:var(--typography-font-family-body-small);font-size:var(--typography-size-body-small);font-weight:var(--typography-weight-body-small);line-height:var(--type-line-height);margin-bottom:0}.rl-c-accordion-item__action:not([class*=rl-c-badge])[class*=rl-icon__]{border-radius:50%;font-size:.75rem;height:1.25rem;width:1.25rem}@media (min-width:48rem){.rl-c-accordion-item__action:not([class*=rl-c-badge])[class*=rl-icon__]{font-size:1rem;height:1.5rem;width:1.5rem}}@media (--mq-medium ){.rl-c-accordion-item__action:not([class*=rl-c-badge])[class*=rl-icon__]{font-size:1rem;height:1.5rem;width:1.5rem}}.rl-c-accordion-item__action>.rl-f-icon:last-child,.rl-c-accordion-item__action>[class*=rl-icon__]:last-child{color:var(--icons-fill-symbol-secondary-100);flex-shrink:0;font-size:1.25rem;position:relative;transform:none;transition:all .3s ease-in-out}.rl-c-accordion-item--open :is(.rl-c-accordion-item__action>.rl-f-icon:last-child,.rl-c-accordion-item__action>[class*=rl-icon__]:last-child){transform:rotate(180deg)}.rl-c-accordion-item__action>.rl-f-icon:last-child{margin-block:var(--spacing-01)}.rl-c-accordion-item__content{color:var(--accordion-text-row-body);max-height:0;overflow:hidden;padding-inline:var(--spacing-03);transition:max-height .2s ease-in-out;visibility:hidden}@media (min-width:48rem){.rl-c-accordion-item__content{padding-right:var(--spacing-07)}}@media (--mq-medium ){.rl-c-accordion-item__content{padding-right:var(--spacing-07)}}.rl-c-accordion-item__content-inner{max-width:var(--size-limit-text-max);padding-block:var(--spacing-03) var(--spacing-07)}.rl-c-accordion-item__content-inner>:last-child{margin-bottom:0}.rl-c-accordion-item__content-open{height:auto;visibility:visible}

package/dist/accordion.d.ts

@@ -0,0 +1,2 @@
+declare function accordion(accordionContainers: NodeListOf<HTMLElement>): void;
+export default accordion;

package/dist/accordion.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function toggleAccordionContent(item) {
+  const action = item.querySelector(".rl-c-accordion-item__action");
+  const content = item.querySelector(".rl-c-accordion-item__content");
+  item.classList.toggle("rl-c-accordion-item--open");
+  content.classList.toggle("rl-c-accordion-item__content-open");
+
+  // Update aria-expanded attribute
+  const expanded = item.classList.contains("rl-c-accordion-item--open");
+  action.setAttribute("aria-expanded", expanded);
+
+  // Update aria-hidden attribute
+  const hidden = !expanded;
+  content.setAttribute("aria-hidden", hidden);
+  if (content.style.maxHeight) {
+    content.style.maxHeight = "";
+  } else {
+    content.style.maxHeight = content.scrollHeight + "px";
+  }
+}
+function isAllOpen(accordionItems) {
+  return Array.from(accordionItems).every(item => item.classList.contains("rl-c-accordion-item--open"));
+}
+function updateOpenAllButtonText(openAll, accordionItems) {
+  openAll.innerText = isAllOpen(accordionItems) ? "Close all" : "Open all";
+}
+function initAccordions(accordion) {
+  const openAll = accordion.querySelector(".rl-c-accordion-header__open-all");
+  const accordionItems = accordion.querySelectorAll(".rl-c-accordion-item");
+  accordionItems.forEach(item => {
+    const action = item.querySelector(".rl-c-accordion-item__action");
+    action.addEventListener("click", () => {
+      toggleAccordionContent(item);
+      if (openAll) {
+        updateOpenAllButtonText(openAll, accordionItems);
+      }
+    });
+  });
+  function updateMaxHeights() {
+    accordionItems.forEach(item => {
+      const content = item.querySelector(".rl-c-accordion-item__content");
+      if (item.classList.contains("rl-c-accordion-item--open")) {
+        content.style.maxHeight = content.scrollHeight + "px";
+      }
+    });
+  }
+  window.addEventListener("resize", updateMaxHeights);
+  if (openAll) {
+    openAll.addEventListener("click", () => {
+      const isOpen = !isAllOpen(accordionItems);
+      accordionItems.forEach(item => {
+        if (isOpen && !item.classList.contains("rl-c-accordion-item--open") || !isOpen && item.classList.contains("rl-c-accordion-item--open")) {
+          toggleAccordionContent(item);
+        }
+      });
+      updateOpenAllButtonText(openAll, accordionItems);
+      updateMaxHeights();
+    });
+  }
+}
+function accordion(accordionContainers) {
+  accordionContainers.forEach(accordion => {
+    initAccordions(accordion);
+  });
+}
+var _default = exports.default = accordion;

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@royallondon/design-system-component-accordion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "3.4.0",
+  "description": "Royal London Design System - Accordion package",
+  "homepage": "https://design.royallondon.com/components/accordion/",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
+    "directory": "ds-packages/packages/design-system-component-accordion"
+  },
+  "bugs": {
+    "url": "https://design.royallondon.com/support/"
+  },
+  "keywords": [
+    "royal-london-design-system-component-accordion",
+    "rlds-accordion",
+    "royal-london"
+  ],
+  "author": "Design System Squad <DesignSystem@royallondon.com>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "main": "dist/accordion.css",
+  "style": "dist/accordion.css",
+  "scripts": {
+    "build:clean": "npx rimraf dist",
+    "build:lint": "stylelint src/**/*.{css,pcss} --fix",
+    "build:css": "postcss src/**/accordion.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.15.0 < 3"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }