@coopdigital/react 0.4.1 → 0.5.1

package/README.md

@@ -7,7 +7,7 @@
 # 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-15-C08A00.svg '' 
+[all_contributors_badge]: https://img.shields.io/badge/all_contributors-16-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>
@@ -90,7 +90,7 @@ Thanks goes to these wonderful people:
     </tr><br />
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<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>
@@ -113,19 +113,24 @@ Thanks goes to these wonderful people:
 <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/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>
       <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>
+    </tr><br />
+    <tr>
       <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>
-    </tr><br />
-    <tr>
       <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>

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

@@ -1,13 +1,22 @@
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react";
 export interface PillProps {
+    /** Specifies the custom element to override default `a` or `span` */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** Specifies a custom aria-label */
     ariaLabel?: string;
+    /** Specifies what text Pill should display on the badge. */
     badge?: string;
+    /** Specifies the badge background color from the available options. */
     badgeColor?: "green" | "orange" | "red" | "pink";
+    /** Represents the content inside the Pill component. It can be any valid JSX or string. */
     children?: React.ReactNode;
+    /** Receives any optional className to be applied to Pill component. */
     className?: string;
+    /** Specifies the URL that the Pill component will link to when clicked. */
     href?: string;
+    /** Specifies the Pill background color from the available options. */
     pillColor?: "blue" | "pink";
+    /** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
 export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => React.ReactElement<React.AnchorHTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;

package/dist/index.d.ts

@@ -1,2 +1 @@
-export * from "./components/Button";
 export * from "./components/Pill";

package/dist/index.js

@@ -1,2 +1 @@
-export { Button } from './components/Button/Button.js';
 export { Pill } from './components/Pill/Pill.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -38,31 +38,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@chromatic-com/storybook": "^3.2.5",
-    "@coopdigital/styles": "^0.5.2",
+    "@coopdigital/styles": "^0.5.4",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/addon-mdx-gfm": "^8.6.3",
-    "@storybook/addon-onboarding": "^8.6.3",
-    "@storybook/blocks": "^8.6.3",
-    "@storybook/manager-api": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-vite": "^8.6.3",
-    "@storybook/test": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
+    "@storybook/addon-a11y": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-mdx-gfm": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "rollup": "^4.34.8",
-    "storybook": "^8.6.3"
+    "storybook": "^8.6.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "827c8ec0c84d2f8034e28acde178e7c3e7ed488b"
+  "gitHead": "634e2f73ada33fd85e9adef7b6ef8d84ae506afd"
 }

package/src/components/Pill/Pill.tsx

@@ -1,15 +1,24 @@
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react"
 
 export interface PillProps {
+  /** Specifies the custom element to override default `a` or `span` */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** Specifies a custom aria-label */
   ariaLabel?: string
+  /** Specifies what text Pill should display on the badge. */
   badge?: string
+  /** Specifies the badge background color from the available options. */
   badgeColor?: "green" | "orange" | "red" | "pink"
+  /** Represents the content inside the Pill component. It can be any valid JSX or string. */
   children?: React.ReactNode
+  /** Receives any optional className to be applied to Pill component. */
   className?: string
+  /** Specifies the URL that the Pill component will link to when clicked. */
   href?: string
+  /** Specifies the Pill background color from the available options. */
   pillColor?: "blue" | "pink"
+  /** Specifies what should be the Pill size. */
   size?: "sm" | "md" | "lg" | "xl"
 }
 

package/src/index.ts

@@ -1,2 +1 @@
-export * from "./components/Button"
 export * from "./components/Pill"

package/src/styles/Colours.mdx

@@ -1,33 +1,160 @@
-import { ColorPalette, ColorItem } from "@storybook/blocks"
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"
+
+export const compStyle = getComputedStyle(document.documentElement)
+
+<Meta title="Styles / Colours" />
+
+# Colours
+
+<br />
+
+## Brand colours
+
+<br />
+<br />
 
 <ColorPalette>
   <ColorItem
-    title="theme.color.greyscale"
-    subtitle="Some of the greys"
-    colors={{ White: "#FFFFFF", Alabaster: "#F8F8F8", Concrete: "#F3F3F3" }}
-  />
-  <ColorItem title="theme.color.primary" subtitle="Coral" colors={{ WildWatermelon: "#FF4785" }} />
-  <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: "#1EA7FD" }} />
-  <ColorItem
-    title="theme.color.positive"
-    subtitle="Green"
-    colors={{
-      Apple: "rgba(102,191,60,1)",
-      Apple80: "rgba(102,191,60,.8)",
-      Apple60: "rgba(102,191,60,.6)",
-      Apple30: "rgba(102,191,60,.3)",
-    }}
-  />
-  <ColorItem
-    title="gradient"
-    subtitle="Grayscale"
-    colors={{
-      Gradient: "linear-gradient(to right,white,black)",
-    }}
+    title="Co-op blue"
+    subtitle="Co-op blue"
+    colors={{ "--color-brand-coop": compStyle.getPropertyValue("--color-brand-coop") }}
   />
   <ColorItem
-    title="gradient"
-    subtitle="Grayscale"
-    colors={["linear-gradient(65deg,white,black)"]}
+    title="Co-op deal red"
+    subtitle="Co-op brand deals"
+    colors={{ "--color-brand-deals": compStyle.getPropertyValue("--color-brand-deals") }}
   />
+
+<ColorItem
+  title="Text colours"
+  colors={{
+    "--color-white": compStyle.getPropertyValue("--color-white"),
+    "--color-text-alt": compStyle.getPropertyValue("--color-text-alt"),
+    "--color-text": compStyle.getPropertyValue("--color-text"),
+    "--color-black": compStyle.getPropertyValue("--color-black"),
+  }}
+/>
+
+<ColorItem
+  title="Tint colours"
+  colors={{
+    "--color-tint-purple": compStyle.getPropertyValue("--color-tint-purple"),
+    "--color-tint-pink": compStyle.getPropertyValue("--color-tint-pink"),
+    "--color-tint-green": compStyle.getPropertyValue("--color-tint-green"),
+    "--color-tint-orange": compStyle.getPropertyValue("--color-tint-orange"),
+    "--color-tint-red": compStyle.getPropertyValue("--color-tint-red"),
+    "--color-tint-yellow": compStyle.getPropertyValue("--color-tint-yellow"),
+    "--color-tint-lilac": compStyle.getPropertyValue("--color-tint-lilac"),
+    "--color-tint-blue": compStyle.getPropertyValue("--color-tint-blue"),
+  }}
+/>
+
+<ColorItem
+  title="Light colours"
+  colors={{
+    "--color-light-purple": compStyle.getPropertyValue("--color-light-purple"),
+    "--color-light-pink": compStyle.getPropertyValue("--color-light-pink"),
+    "--color-light-green": compStyle.getPropertyValue("--color-light-green"),
+    "--color-light-orange": compStyle.getPropertyValue("--color-light-orange"),
+    "--color-light-red": compStyle.getPropertyValue("--color-light-red"),
+    "--color-light-yellow": compStyle.getPropertyValue("--color-light-yellow"),
+    "--color-light-lilac": compStyle.getPropertyValue("--color-light-lilac"),
+    "--color-light-blue": compStyle.getPropertyValue("--color-light-blue"),
+  }}
+/>
+
+<ColorItem
+  title="Dark colours"
+  colors={{
+    "--color-dark-purple": compStyle.getPropertyValue("--color-dark-purple"),
+    "--color-dark-pink": compStyle.getPropertyValue("--color-dark-pink"),
+    "--color-dark-green": compStyle.getPropertyValue("--color-dark-green"),
+    "--color-dark-orange": compStyle.getPropertyValue("--color-dark-orange"),
+    "--color-dark-red": compStyle.getPropertyValue("--color-dark-red"),
+    "--color-dark-yellow": compStyle.getPropertyValue("--color-dark-yellow"),
+    "--color-dark-lilac": compStyle.getPropertyValue("--color-dark-lilac"),
+    "--color-navy": compStyle.getPropertyValue("--color-navy"),
+  }}
+/>
+
+<ColorItem
+  title="Grey backgrounds"
+  colors={{
+    "--color-grey-neutral-light": compStyle.getPropertyValue("--color-grey-neutral-light"),
+    "--color-grey-neutral-warm": compStyle.getPropertyValue("--color-grey-neutral-warm"),
+    "--color-grey-neutral-cool": compStyle.getPropertyValue("--color-grey-neutral-cool"),
+    "--color-grey-neutral-cool-light": compStyle.getPropertyValue(
+      "--color-grey-neutral-cool-light"
+    ),
+    "--color-grey-mid-light": compStyle.getPropertyValue("--color-grey-mid-light"),
+    "--color-grey-mid": compStyle.getPropertyValue("--color-grey-mid"),
+    "--color-grey-dark": compStyle.getPropertyValue("--color-grey-dark"),
+  }}
+/>
+
+<br />
+<br />
+<br />
+<br />
+## UI colors
+
+<br />
+### Link
+<br />
+<ColorItem
+  title="Link colours"
+  colors={{
+    "--color-link": compStyle.getPropertyValue("--color-link"),
+    "--color-link-hover": compStyle.getPropertyValue("--color-link-hover"),
+    "--color-link-active": compStyle.getPropertyValue("--color-link-active"),
+    "--color-link-visited": compStyle.getPropertyValue("--color-link-visited"),
+    "--color-link-focus": compStyle.getPropertyValue("--color-link-focus"),
+    "--color-focus-ring": compStyle.getPropertyValue("--color-focus-ring"),
+  }}
+/>
+
+<br />
+### Button
+<br />
+<ColorItem
+  title="Primary green button"
+  colors={{
+    "--color-button-green-primary": compStyle.getPropertyValue("--color-button-green-primary"),
+    "--color-button-green-primary-hover": compStyle.getPropertyValue(
+      "--color-button-green-primary-hover"
+    ),
+    "--color-button-green-primary-active": compStyle.getPropertyValue(
+      "--color-button-green-primary-active"
+    ),
+  }}
+/>
+<ColorItem
+  title="Blue button (default)"
+  colors={{
+    "--color-button / --color-button-blue": compStyle.getPropertyValue("--color-button-blue"),
+    "--color-button-hover / --color-button-blue-hover": compStyle.getPropertyValue(
+      "--color-button-blue-hover"
+    ),
+    "--color-button-active / --color-button-blue-active": compStyle.getPropertyValue(
+      "--color-button-blue-active"
+    ),
+  }}
+/>
+<ColorItem
+  title="Grey button"
+  colors={{
+    "--color-button-grey": compStyle.getPropertyValue("--color-button-grey"),
+    "--color-button-grey-hover": compStyle.getPropertyValue("--color-button-grey-hover"),
+    "--color-button-grey-active": compStyle.getPropertyValue("--color-button-grey-active"),
+  }}
+/>
+<ColorItem
+  title="White button"
+  colors={{
+    "--color-button-white": compStyle.getPropertyValue("--color-button-white"),
+    "--color-button-white-hover": compStyle.getPropertyValue("--color-button-white-hover"),
+    "--color-button-white-active": compStyle.getPropertyValue("--color-button-white-active"),
+  }}
+/>
+
 </ColorPalette>

package/src/styles/Text.mdx

@@ -1,17 +1,72 @@
-import { Unstyled } from "@storybook/blocks"
+import { Meta, Unstyled } from "@storybook/blocks"
+
+<Meta title="Styles / Text" />
+
+export const SampleText = "Lorem ipsum dolor..."
+
+# Text
+
+<br />
 
 <Unstyled>
-  <h1 className="coop-t-headline">h1</h1>
-  <h2>h2</h2>
-  <h3>h3</h3>
-  <h4>h4</h4>
-  <h5>h5</h5>
-  <h6>h6</h6>
-  <p>Paragraph text</p>
-  <hr />
-
-  <ul>
-    <li>Option 1</li>
-    <li>Option 1</li>
-  </ul>
+
+## Using Co-op Headline font
+
+<br />
+
+> <h1 className="coop-t-headline coop-t-headline-upper">h1: {SampleText}</h1>
+> <h2 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h2: {SampleText}</h2>
+> <h3 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h3: {SampleText}</h3>
+> <h4 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h4: {SampleText}</h4>
+> <h5 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h5: {SampleText}</h5>
+> <h6 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h6: {SampleText}</h6>
+
+<br />
+
+> <h1 className="coop-t-headline coop-t-headline-blue">h1: {SampleText}</h1>
+> <h2 className="coop-t-headline coop-t-headline-blue">h2: {SampleText}</h2>
+> <h3 className="coop-t-headline coop-t-headline-blue">h3: {SampleText}</h3>
+> <h4 className="coop-t-headline coop-t-headline-blue">h4: {SampleText}</h4>
+> <h5 className="coop-t-headline coop-t-headline-blue">h5: {SampleText}</h5>
+> <h6 className="coop-t-headline coop-t-headline-blue">h6: {SampleText}</h6>
+
+<br />
+<br />
+<br />
+## Using Primary font (Avenir Next)
+<br />
+
+> <h1>h1: {SampleText}</h1>
+> <h2>h2: {SampleText}</h2>
+> <h3>h3: {SampleText}</h3>
+> <h4>h4: {SampleText}</h4>
+> <h5>h5: {SampleText}</h5>
+> <h6>h6: {SampleText}</h6>
+>
+> <hr />
+>
+> <p class="coop-t-lead-p">Lead paragraph</p>
+>
+> <p>Paragraph text: {SampleText}</p>
+> <a href="">Link</a>
+> <br />
+> <br />
+> <p>Lists:</p>
+> <ul>
+>   <li>Option 1</li>
+>   <li>Option 1</li>
+> </ul>
+> <ol>
+>   <li>Option 1</li>
+>   <li>Option 1</li>
+> </ol>
+
 </Unstyled>
+
+<style>
+  {`
+  .toc-wrapper {
+    display: none;
+  }
+  `}
+</style>

package/src/styles/Typography.mdx

@@ -0,0 +1,43 @@
+import { Meta, Typeset } from "@storybook/blocks"
+
+<Meta title="Styles / Typography" />
+
+export const compStyle = getComputedStyle(document.documentElement)
+
+export const typography = {
+  type: {
+    primary: compStyle.getPropertyValue("--font-family"),
+    headline: compStyle.getPropertyValue("--font-family-headline"),
+  },
+  weight: {
+    regular: "400",
+    medium: "500",
+    demi: "600",
+    bold: "700",
+  },
+}
+
+export const SampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+export const SampleTextUppercase = SampleText.toUpperCase()
+
+# Typography
+
+**Font:** Avenir Next<br />
+**Weights:** 400 (regular), 500 (medium), 600 (demi)
+
+<Typeset
+  fontSizes={[10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 40, 46, 48, 56, 64, 82]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+**Font:** Co-op Headline <br />
+**Weights:** 700 (bold)
+
+<Typeset
+  fontSizes={[18, 20, 22, 24, 26, 28, 30, 32, 40, 46, 48, 56, 64, 82]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleTextUppercase}
+  fontFamily={typography.type.headline}
+/>

package/dist/components/Button/Button.d.ts

@@ -1,2 +0,0 @@
-export declare const Button: () => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/components/Button/Button.js

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-const Button = () => {
-    const a = "test";
-    return (jsx("button", { "data-testid": "react-button-id", className: a, children: "Add to basket" }));
-};
-
-export { Button, Button as default };

package/dist/components/Button/index.d.ts

@@ -1,4 +0,0 @@
-import Button from "./Button";
-export default Button;
-export { Button };
-export * from "./Button";

package/src/components/Button/Button.tsx

@@ -1,10 +0,0 @@
-export const Button = () => {
-  const a = "test"
-
-  return (
-    <button data-testid="react-button-id" className={a}>
-      Add to basket
-    </button>
-  )
-}
-export default Button

package/src/components/Button/index.ts

@@ -1,5 +0,0 @@
-import Button from "./Button"
-
-export default Button
-export { Button }
-export * from "./Button"