@royallondon/design-system-component-button 0.0.0-stage → 2.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,47 @@
-# 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 Button package from npm
+
+```bash
+npm install @royallondon/design-system-component-button
+```
+
+Import the required CSS file
+
+```css
+@import '@royallondon/design-system-component-button/dist/button';
+```
+
+[Add the relevant classes to your buttons](https://design.royallondon.com/components/button/#variants)
+
+### Support
+
+Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
+
+### Licence
+
+#### @royallondon/design-system-component-button
+
+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 Button component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Button page](https://design.royallondon.com/components/button/).
+
+### Release log
+
+| Version | Release notes                                                                                           |
+| ------- | ------------------------------------------------------------------------------------------------------- |
+| 2.4.0   | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps    |
+| 2.3.3   | Move to new feed                                                                                        |
+| 2.3.0   | Apply new icons and latest tokens added to foundations                                                  |
+| 2.2.0   | Update button styles to use type tokens                                                                 |
+| 2.1.0   | Add loading button variant                                                                              |
+| 2.0.2   | Fix issue with media query processing without postcss                                                   |
+| 2.0.1   | Fix secondary ghost button styles                                                                       |
+| 2.0.0   | Upgrade for compatibility with foundations v2                                                           |
+| 1.2.0   | Update to allow icons to be aligned correctly in a button and add css for destructive button            |
+| 1.1.0   | Refactor to use wildcard selector [class*="rl-c-button"], add margins by default across all breakpoints |
+| 1.0.2   | Dist folder incorrectly compiled, ghost button still had white background                               |
+| 1.0.1   | Removed white background from ghost light button                                                        |
+| 1.0.0   | First release                                                                                           |

package/dist/button.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-button__dark,[class*=rl-c-button]{align-items:center;border-radius:0;-moz-column-gap:var(--spacing-01);column-gap:var(--spacing-01);cursor:pointer;display:inline-flex;font-family:var(--typography-font-family-label-medium);font-size:var(--typography-size-label-medium);font-weight:var(--typography-weight-label-medium);justify-content:center;line-height:var(--type-line-height-single);padding:var(--spacing-03) var(--spacing-04);text-decoration:none;width:100%}@media (min-width:48rem){.rl-c-button__dark,[class*=rl-c-button]{width:auto}}@media (--mq-medium ){.rl-c-button__dark,[class*=rl-c-button]{width:auto}}[class*=rl-c-button]+[class*=rl-c-button]{margin-top:var(--spacing-04)}@media (min-width:48rem){[class*=rl-c-button]+[class*=rl-c-button]{margin-left:var(--spacing-04);margin-top:0}}@media (--mq-medium ){[class*=rl-c-button]+[class*=rl-c-button]{margin-left:var(--spacing-04);margin-top:0}}[class*=rl-c-button]:hover:not([disabled]){background:var(--button-fill-hover);color:var(--button-text)}.rl-c-button__dark:hover:not([disabled]){background:var(--button-fill-hover-inverted);color:var(--button-text-inverted)}.rl-c-button[disabled],[class*=rl-c-button]:disabled{background:var(--button-fill-disabled);color:var(--button-text);cursor:auto}.rl-c-button__dark:disabled,.rl-c-button__dark[disabled]{background:var(--button-fill-disabled-inverted);color:var(--button-text-disabled-inverted)}.rl-c-button--primary{background:var(--button-fill);color:var(--button-text)}.rl-c-button--primary:hover:not([disabled]){background:var(--button-fill-hover);color:var(--button-text)}.rl-c-button--primary__dark{background:var(--button-fill-inverted);color:var(--button-text-inverted)}.rl-c-button--primary__dark:hover:not([disabled]){background:var(--button-fill-hover-inverted);color:var(--button-text-inverted)}.rl-c-button--secondary{background:var(--button-fill-secondary);color:var(--button-text-secondary)}.rl-c-button--secondary:hover:not([disabled]){background:var(--button-fill-secondary-hover);color:var(--button-text-secondary)}.rl-c-button--secondary__dark{background:var(--button-fill-secondary-inverted);color:var(--button-text-secondary-inverted)}.rl-c-button--secondary__dark:hover:not([disabled]){background:var(--button-fill-secondary-hover-inverted);color:var(--button-text-secondary-inverted)}.rl-c-button--ghost,.rl-c-button--ghost__dark{background:transparent;border:2px solid var(--button-stroke-ghost);color:var(--button-text-ghost);padding:calc(var(--spacing-03) - 2px) calc(var(--spacing-04) - 2px)}.rl-c-button--ghost__dark{border-color:var(--button-stroke-ghost-inverted);color:var(--button-text-ghost-inverted)}.rl-c-button--ghost:hover:not([disabled]){background:var(--button-fill-ghost-hover);color:var(--button-text-ghost)}.rl-c-button--ghost__dark:hover:not([disabled]){background:var(--button-fill-ghost-hover-inverted);color:var(--button-text-ghost-inverted)}.rl-c-button--ghost:disabled,.rl-c-button--ghost[disabled]{background:none;border-color:var(--button-stroke-ghost-disabled);color:var(--button-text-ghost-disabled)}.rl-c-button--ghost__dark:disabled{background:none;border-color:var(--button-stroke-ghost-disabled-inverted);color:var(--button-text-ghost-disabled-inverted)}.rl-c-button--text,.rl-c-button--text__dark{border:2px solid transparent}.rl-c-button--text{color:var(--button-text-text)}.rl-c-button--text:hover:not([disabled]){background:var(--button-fill-text-hover);border-color:var(--button-stroke-text-hover);color:var(--button-text-text)}.rl-c-button--text__dark{color:var(--button-text-text-inverted)}.rl-c-button--text__dark:hover:not([disabled]){background:var(--button-fill-text-hover-inverted);border-color:var(--button-stroke-text-inverted);color:var(--button-text-text-inverted)}.rl-c-button--text:disabled,.rl-c-button--text[disabled],.rl-c-button--text__dark:disabled,.rl-c-button--text__dark[disabled]{background:none;border:none}.rl-c-button--text:disabled,.rl-c-button--text[disabled]{color:var(--button-text-text-disabled)}.rl-c-button--text__dark:disabled,.rl-c-button--text__dark[disabled]{color:var(--button-text-text-disabled-inverted)}.rl-c-button--destructive{background:var(--button-fill-destructive);color:var(--button-text-destructive)}.rl-c-button--destructive:hover:not([disabled]){background:var(--button-fill-destructive-hover);color:var(--button-text-destructive)}.rl-c-button--loading .rl-f-icon{display:none}.rl-c-button--loading [class*=rl-icon]:after,.rl-c-button--loading [class*=rl-icon]:before,.rl-c-button--loading span[aria-label]:after,.rl-c-button--loading span[aria-label]:before{aspect-ratio:1;border:.125rem solid transparent;border-radius:50%;border-top-color:currentcolor;content:"";display:block;width:1rem}.rl-c-button--loading [class*=rl-icon]:before,.rl-c-button--loading span[aria-label]:before{border-color:color-mix(in srgb,currentColor 30%,transparent);position:absolute}.rl-c-button--loading [class*=rl-icon]:after,.rl-c-button--loading span[aria-label]:after{animation:spinner 1s ease-out infinite;content:"\00a0"/"loading";font-size:0}.rl-c-button--loaded [class*=rl-icon]:before{content:"\e954"/"loaded"}@keyframes spinner{0%{rotate:0turn}to{rotate:1turn}}

package/package.json

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