@coopdigital/react 0.19.3 → 0.19.5

package/README.md

@@ -6,15 +6,11 @@
 
 # Experience Kit for React
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[all_contributors_badge]: https://img.shields.io/badge/all_contributors-17-C08A00.svg '' 
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 <a href="https://www.npmjs.com/package/@coopdigital/react"><img src="https://img.shields.io/npm/v/%40coopdigital%2Freact?color=E85A00" alt="npm version" /></a>
 <img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Freact?label=published&color=6762F9">
 <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Freact?color=819C00">
 <a href="https://static.coop.co.uk/experience-kit-storybook-react"><img src="https://img.shields.io/badge/storybook-react-F85792" alt="storybook" /></a>
-[![All Contributors][all_contributors_badge]](#contributors)
+
 
 > React components for the Experience Library design system. 
 
@@ -43,115 +39,6 @@ Alternatively if your project uses SASS you can import the source stylesheets:
 @use "@coopdigital/styles/src/components/Pill.scss"
 ```
 
-## Contributors ✨
-
-Thanks goes to these wonderful people:
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-<tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/aaronrleslie">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UKMP0F917-34a22da610d8-150" width="200px;" alt=""/></div>
-<small>Aaron Leslie</small>
-<div><a href="#infra-aaronrleslie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
-<small>Catia Costa</small>
-<div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="#code-catia.costa1" title="Code">💻</a> <a href="#doc-catia.costa1" title="Documentation">📖</a> <a href="#test-catia.costa1" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
-<small>Chris Latimer</small>
-<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#code-chris.latimer" title="Code">💻</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Craig Mckay</small>
-<div><a href="#projectManagement-craig.mckay" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/daniel.lippross">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Daniel Lippross</small>
-<div><a href="#platform-daniel.lippross" title="Packaging/porting to new platform">📦</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
-<small>Emalin Matthews</small>
-<div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="#code-emalin.matthews" title="Code">💻</a> <a href="#doc-emalin.matthews" title="Documentation">📖</a> <a href="#test-emalin.matthews" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Jelena Milosevic</small>
-<div><a href="#infra-jelena.milosevic" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
-</a></td>
-    </tr><br />
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/23337489/avatar.png" width="200px;" alt=""/></div>
-<small>Kamini Pagare</small>
-<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="#code-kamini.pagare" title="Code">💻</a> <a href="#doc-kamini.pagare" title="Documentation">📖</a> <a href="#test-kamini.pagare" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
-<small>Lee Connolly</small>
-<div><a href="#projectManagement-lee.connolly" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Liam Hall</small>
-<div><a href="#projectManagement-liam.hall" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/meg.jpg" width="200px;" alt=""/></div>
-<small>Meg White</small>
-<div><a href="#projectManagement-meg.white" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
-<div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
-<small>Omid Kashan</small>
-<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="#code-omid.kashan" title="Code">💻</a> <a href="#doc-omid.kashan" title="Documentation">📖</a> <a href="#test-omid.kashan" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/phil.wolstenholme">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25900363/avatar.png" width="200px;" alt=""/></div>
-<small>Phil Wolstenholme</small>
-<div><a href="#a11y-phil.wolstenholme" title="Accessibility">️️️️♿️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Romain Chen</small>
-<div><a href="#design-romain.chen" title="Design">🎨</a></div>
-</a></td>
-    </tr><br />
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
-<small>Sam Harden</small>
-<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="#code-sam.harden" title="Code">💻</a> <a href="#doc-sam.harden" title="Documentation">📖</a> <a href="#test-sam.harden" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Shweta Jaju</small>
-<div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
-<div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
-<small>Theo Kouzelis</small>
-<div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="#code-theodore.kouzelis" title="Code">💻</a> <a href="#doc-theodore.kouzelis" title="Documentation">📖</a> <a href="#test-theodore.kouzelis" title="Tests">⚠️</a></div>
-</a></td>
-    </tr>
-</tbody></table>
-
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 
-
 ## License
 
 MIT License

package/dist/components/Pill/Pill.d.ts

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
-import { Darks, OffersRed, Tints } from "../../types/colors";
+import { Darks, OfferRed, Tints } from "../../types/colors";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
@@ -9,7 +9,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies what text Pill should display on the badge. */
     badge?: string;
     /** **(Optional)** Specifies the badge background color from the available options. */
-    badgeBackground?: Darks | OffersRed;
+    badgeBackground?: Darks | OfferRed;
     /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Pill component. */

package/dist/components/Pill/Pill.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
 const Pill = (_a) => {
-    var { as, background = "tint-grey", badge, badgeBackground = "offers-red", children, className = "", href, size = "md" } = _a, props = __rest(_a, ["as", "background", "badge", "badgeBackground", "children", "className", "href", "size"]);
+    var { as, background = "tint-grey", badge, badgeBackground = "offer-red", children, className = "", href, size = "md" } = _a, props = __rest(_a, ["as", "background", "badge", "badgeBackground", "children", "className", "href", "size"]);
     let element = href ? "a" : "span";
     if (as) {
         element = as;

package/dist/components/Squircle/Squircle.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes, JSX } from "react";
-import { CoopBlue, Green, OffersRed } from "../../types/colors";
+import { BrandBlue, Green, OfferRed } from "../../types/colors";
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the background color of the Squircle. */
-    background?: OffersRed | CoopBlue | Green;
+    background?: OfferRed | BrandBlue | Green;
     /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Squircle component. */

package/dist/components/Squircle/Squircle.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { bgPropToClass } from '../../utils/index.js';
 
 const Squircle = (_a) => {
-    var { background = "offers-red", children, className, size = "lg" } = _a, props = __rest(_a, ["background", "children", "className", "size"]);
+    var { background = "offer-red", children, className, size = "lg" } = _a, props = __rest(_a, ["background", "children", "className", "size"]);
     const componentProps = Object.assign({ className: `coop-squircle ${bgPropToClass(background, className)} ${className !== null && className !== void 0 ? className : ""}`, "data-size": size.length && size !== "lg" ? size : undefined }, props);
     return (jsx("figure", Object.assign({}, componentProps, { children: jsx("figcaption", { children: children }) })));
 };

package/dist/types/colors.d.ts

@@ -5,7 +5,7 @@ export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey
 export type White = "white";
 export type Black = "black";
 export type None = "none";
-export type CoopBlue = "coop-blue";
-export type OffersRed = "offers-red";
+export type BrandBlue = "brand-blue";
+export type OfferRed = "offer-red";
 export type Green = "green";
 export type Blue = "blue";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.3",
+    "@coopdigital/styles": "^0.16.5",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -75,5 +75,5 @@
   "dependencies": {
     "clsx": "^2.1.1"
   },
-  "gitHead": "4b0b52bb134f10067e1c87b0ba9afab3504f5368"
+  "gitHead": "75fa676ceb3961f9de1052ebf2b80af2ab8a1663"
 }

package/src/components/Pill/Pill.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { bgPropToClass } from "../../../src/utils"
-import { Darks, OffersRed, Tints } from "../../types/colors"
+import { Darks, OfferRed, Tints } from "../../types/colors"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
@@ -15,7 +15,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies what text Pill should display on the badge. */
   badge?: string
   /** **(Optional)** Specifies the badge background color from the available options. */
-  badgeBackground?: Darks | OffersRed
+  badgeBackground?: Darks | OfferRed
   /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Pill component. */
@@ -30,7 +30,7 @@ export const Pill = ({
   as,
   background = "tint-grey",
   badge,
-  badgeBackground = "offers-red",
+  badgeBackground = "offer-red",
   children,
   className = "",
   href,

package/src/components/Squircle/Squircle.tsx

@@ -1,11 +1,11 @@
 import type { HTMLAttributes, JSX } from "react"
 
 import { bgPropToClass } from "../../../src/utils"
-import { CoopBlue, Green, OffersRed } from "../../types/colors"
+import { BrandBlue, Green, OfferRed } from "../../types/colors"
 
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies the background color of the Squircle. */
-  background?: OffersRed | CoopBlue | Green
+  background?: OfferRed | BrandBlue | Green
   /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Squircle component. */
@@ -15,7 +15,7 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Squircle = ({
-  background = "offers-red",
+  background = "offer-red",
   children,
   className,
   size = "lg",

package/src/types/colors.ts

@@ -35,7 +35,7 @@ export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey
 export type White = "white"
 export type Black = "black"
 export type None = "none"
-export type CoopBlue = "coop-blue"
-export type OffersRed = "offers-red"
+export type BrandBlue = "brand-blue"
+export type OfferRed = "offer-red"
 export type Green = "green"
 export type Blue = "blue"