@coopdigital/react 0.4.0 → 0.5.0

package/README.md

@@ -16,31 +16,32 @@
 <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. 
+
+You can see the full range of components and documentation on the [Experience Kit Storybook](https://static.coop.co.uk/experience-kit-storybook-react)
+
 ## Getting started
 
-Install the package from NPM:
+Install the react package and its companion [styles package](https://www.npmjs.com/package/@coopdigital/styles) from NPM:
 ```
-npm install @coopdigital/react
+npm install @coopdigital/react @coopdigital/styles
 ```
+*Note: In some edge cases you may want to install the packages independently* 
 
-Import the components that you need:
+## Usage
+
+Import the components that you need, along with the main stylesheet and the corresponding component styles:
 ```
-import { Button } from "@coopdigital/react"
+import { Pill } from "@coopdigital/react"
+import "@coopdigital/styles/dist/main.css"
+import "@coopdigital/styles/dist/components/Pill.css"
 ```
 
-### Package Scripts
-
-The following scripts should be run inside the react package folder.
-
-| Script               | Action                                   |
-| -------------------- | ---------------------------------------- |
-| `npm run test` | To run vitest |
-| `npm run test:coverage` | To run vitest test coverage |
-| `npm run test:e2e` | To run playwright in headless mode |
-| `npm run test:e2e:ui` | To run playwright with UI |
-| `npm run build` | To run build script |
-| `npm run build:storybook` | To build storybook |
-| `npm run storybook` | To run storybook |
+Alternatively if your project uses SASS you can import the source stylesheets:
+```
+@use "@coopdigital/styles/src/main.scss"
+@use "@coopdigital/styles/src/components/Pill.scss"
+```
 
 ## Contributors ✨
 
@@ -140,3 +141,27 @@ Thanks goes to these wonderful people:
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 
+
+## License
+
+MIT License
+
+Copyright (c) Co-operative Group Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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.0",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -13,6 +13,14 @@
     "!**/__{screenshots,tests}__",
     "!**/*.{stories,test}.*"
   ],
+  "keywords": [
+    "co-op",
+    "design-system",
+    "experience-kit",
+    "experience-library",
+    "components",
+    "react"
+  ],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
@@ -30,11 +38,11 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@chromatic-com/storybook": "^3.2.5",
-    "@coopdigital/styles": "^0.5.1",
+    "@coopdigital/styles": "^0.5.3",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-a11y": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.3",
     "@storybook/addon-interactions": "^8.6.3",
     "@storybook/addon-mdx-gfm": "^8.6.3",
@@ -56,5 +64,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "5f4108a06b915b2bd2c757bd713026e0710b0eb9"
+  "gitHead": "fdc3cd6c04f66f5b1240f615951d337ac0669eac"
 }

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"