@coopdigital/react 0.2.1 → 0.4.0

package/README.md

@@ -4,8 +4,6 @@
 <br />
 </nav>
 
-
-
 # Experience Kit for React
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
@@ -18,9 +16,6 @@
 <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)
 
-
-
-
 ## Getting started
 
 Install the package from NPM:
@@ -33,16 +28,10 @@ Import the components that you need:
 import { Button } from "@coopdigital/react"
 ```
 
-## Developing
-
-Refer to the [root README](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/README.md) for general development setup and usage instructions (lint, formatting, etc).
-
-
 ### Package Scripts
 
 The following scripts should be run inside the react package folder.
 
-
 | Script               | Action                                   |
 | -------------------- | ---------------------------------------- |
 | `npm run test` | To run vitest |
@@ -53,8 +42,6 @@ The following scripts should be run inside the react package folder.
 | `npm run build:storybook` | To build storybook |
 | `npm run storybook` | To run storybook |
 
-
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people:
@@ -72,12 +59,12 @@ Thanks goes to these wonderful people:
       <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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a></div>
+<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>
@@ -92,7 +79,7 @@ Thanks goes to these wonderful people:
       <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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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>
@@ -104,7 +91,7 @@ Thanks goes to these wonderful people:
       <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>
 <small>Kamini Pagare</small>
-<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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>
@@ -124,12 +111,12 @@ Thanks goes to these wonderful people:
       <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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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/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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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>
@@ -141,7 +128,7 @@ Thanks goes to these wonderful people:
       <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="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<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>
@@ -152,9 +139,4 @@ Thanks goes to these wonderful people:
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Check out the [contributing guidelines](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/CONTRIBUTING.md) to add new people. Contributions of any kind welcome! 
-
-
-## Troubleshooting
-
-This is still a work in progress, we appreciate feedback. If you have any issues, please get in touch via [tech query channel on slack](https://co-opdigital.slack.com/archives/C0167V69R8W).
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 

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

@@ -0,0 +1,14 @@
+import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react";
+export interface PillProps {
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    ariaLabel?: string;
+    badge?: string;
+    badgeColor?: "green" | "orange" | "red" | "pink";
+    children?: React.ReactNode;
+    className?: string;
+    href?: string;
+    pillColor?: "blue" | "pink";
+    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>>;
+export default Pill;

package/dist/components/Pill/Pill.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Pill = ({ ariaLabel, as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md", }) => {
+    let element = href ? "a" : "span";
+    if (as) {
+        element = as;
+    }
+    const componentProps = {
+        "aria-label": ariaLabel,
+        className: `coop-pill ${className}`,
+        "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined,
+        "data-badge-color": badgeColor,
+        "data-pill-color": pillColor,
+        "data-size": size.length && size != "md" ? size : undefined,
+        href,
+    };
+    return React.createElement(element, Object.assign({}, componentProps), children);
+};
+
+export { Pill, Pill as default };

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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.2.1",
-  "main": "src/index.ts",
+  "version": "0.4.0",
+  "main": "dist/index.js",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "!**/__{screenshots,tests}__",
+    "!**/*.{stories,test}.*"
   ],
   "scripts": {
     "test": "vitest run",
+    "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "build": "tsx scripts build",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
@@ -27,30 +30,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@chromatic-com/storybook": "^3.2.4",
-    "@coopdigital/styles": "^0.4.1",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@coopdigital/styles": "^0.5.1",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-onboarding": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/theming": "^8.5.8",
+    "@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",
     "@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.5.8"
+    "storybook": "^8.6.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "dce17e1b85785160c7e817e85c61006060572dfb"
+  "gitHead": "5f4108a06b915b2bd2c757bd713026e0710b0eb9"
 }

package/src/components/Pill/Pill.tsx

@@ -0,0 +1,45 @@
+import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react"
+
+export interface PillProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  ariaLabel?: string
+  badge?: string
+  badgeColor?: "green" | "orange" | "red" | "pink"
+  children?: React.ReactNode
+  className?: string
+  href?: string
+  pillColor?: "blue" | "pink"
+  size?: "sm" | "md" | "lg" | "xl"
+}
+
+export const Pill = ({
+  ariaLabel,
+  as,
+  badge,
+  badgeColor = "red",
+  children,
+  className = "",
+  href,
+  pillColor = "blue",
+  size = "md",
+}: PillProps) => {
+  let element: PillProps["as"] = href ? "a" : "span"
+
+  if (as) {
+    element = as
+  }
+
+  const componentProps = {
+    "aria-label": ariaLabel,
+    className: `coop-pill ${className}`,
+    "data-badge": badge?.length ? badge : undefined,
+    "data-badge-color": badgeColor,
+    "data-pill-color": pillColor,
+    "data-size": size.length && size != "md" ? size : undefined,
+    href,
+  }
+
+  return React.createElement(element, { ...componentProps }, children)
+}
+export default Pill

package/src/components/Pill/index.ts

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

package/src/index.ts

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

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-export {};

package/src/components/Button/Button.e2e.test.ts

@@ -1,8 +0,0 @@
-import { expect, test } from "@playwright/test"
-
-const server_url = "/iframe.html?viewMode=story&id=components-button--primary&args=&globals="
-
-test("Add to basket button visibility", async ({ page }) => {
-  await page.goto(server_url)
-  await expect(page.getByRole("button", { name: "Add to basket" })).toBeVisible()
-})

package/src/components/Button/Button.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import Button from "./Button"
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {}

package/src/components/Button/Button.test.tsx

@@ -1,18 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { render } from "@testing-library/react"
-import { describe, it, afterEach } from "vitest"
-import { Button } from "."
-import { cleanup } from "@testing-library/react"
-afterEach(() => {
-  cleanup()
-})
-
-describe("Button", () => {
-  it("renders button", () => {
-    render(<Button />)
-    //screen.debug()
-  })
-})