@coopdigital/react 0.8.0 → 0.8.2

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.8.0",
-  "main": "dist/index.js",
+  "version": "0.8.2",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist",
-    "src",
+    "src/**/*.{tsx,ts}",
     "!**/__{screenshots,tests}__",
     "!**/*.{stories,test}.*"
   ],
@@ -39,31 +44,28 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.7.0",
+    "@coopdigital/styles": "^0.8.1",
     "@playwright/test": "^1.51.1",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-mdx-gfm": "^8.6.7",
-    "@storybook/addon-onboarding": "^8.6.7",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/manager-api": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-vite": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@storybook/theming": "^8.6.7",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-mdx-gfm": "^8.6.11",
+    "@storybook/addon-onboarding": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/manager-api": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/theming": "^8.6.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "rollup": "^4.36.0",
-    "storybook": "^8.6.7"
+    "storybook": "^8.6.11"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "0005324d74508d5df4479b54d79068555137e391"
+  "gitHead": "6e0b8a1a021138c3f9bd92e8aadd523c1cf4a2f5"
 }

package/src/styles/Colours.mdx

@@ -1,160 +0,0 @@
-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="Co-op blue"
-    subtitle="Co-op blue"
-    colors={{ "--color-brand-coop": compStyle.getPropertyValue("--color-brand-coop") }}
-  />
-  <ColorItem
-    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,119 +0,0 @@
-import { Meta, Unstyled } from "@storybook/blocks"
-
-<Meta title="Styles / Text" />
-
-export const SampleText = "Lorem ipsum dolor..."
-
-# Text
-
-<br />
-
-<Unstyled>
-
-## 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>
-
-> ```jsx
-> <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>
-
-> ```jsx
-> <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>
-
-> ```jsx
-> <h1>h1: {SampleText}</h1>
-> <h2>h2: {SampleText}</h2>
-> <h3>h3: {SampleText}</h3>
-> <h4>h4: {SampleText}</h4>
-> <h5>h5: {SampleText}</h5>
-> <h6>h6: {SampleText}</h6>
-> ```
-
-> <p class="coop-t-lead-p">Lead paragraph</p>
-> <hr />
-> <p>Paragraph text: {SampleText}</p>
-> <a href="">Link</a>
-
-> ```jsx
-> <p class="coop-t-lead-p">Lead paragraph</p>
-> <hr />
-> <p>Paragraph text: {SampleText}</p>
-> <a href="">Link</a>
-> ```
-
-> <p>Lists:</p>
-> <ul>
->   <li>Option 1</li>
->   <li>Option 1</li>
-> </ul>
-> <ol>
->   <li>Option 1</li>
->   <li>Option 1</li>
-> </ol>
-
-> ```jsx
-> <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

@@ -1,49 +0,0 @@
-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 ( as `--font-family`)<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 ( as `--font-family-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}
-/>
-
-<p>
-  <b>Note:</b>
-  The type sizes shown above have been chosen as our standard type sizes.
-  <br /> They are available as CSS variables, e.g. `--type-size-10`, `--type-size-12`, etc.
-</p>