@coopdigital/react 0.3.0 → 0.4.1

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,5 +1,6 @@
-import React from "react";
+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";
@@ -9,13 +10,5 @@ export interface PillProps {
     pillColor?: "blue" | "pink";
     size?: "sm" | "md" | "lg" | "xl";
 }
-export declare const Pill: ({ ariaLabel, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => React.DetailedReactHTMLElement<{
-    "aria-label": string | undefined;
-    className: string;
-    "data-badge": string | undefined;
-    "data-badge-color": "green" | "orange" | "red" | "pink";
-    "data-pill-color": "pink" | "blue";
-    "data-size": "sm" | "lg" | "xl" | undefined;
-    href: string | undefined;
-}, HTMLElement>;
+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

@@ -1,7 +1,10 @@
 import React from 'react';
 
-const Pill = ({ ariaLabel, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md", }) => {
-    const element = href ? "a" : "span";
+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}`,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -9,10 +9,21 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "!**/__{screenshots,tests}__",
+    "!**/*.{stories,test}.*"
+  ],
+  "keywords": [
+    "co-op",
+    "design-system",
+    "experience-kit",
+    "experience-library",
+    "components",
+    "react"
   ],
   "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",
@@ -28,7 +39,7 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
     "@chromatic-com/storybook": "^3.2.5",
-    "@coopdigital/styles": "^0.5.0",
+    "@coopdigital/styles": "^0.5.2",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -53,5 +64,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "ccedccf7209f30e95b5312052836bbd745410d0c"
+  "gitHead": "827c8ec0c84d2f8034e28acde178e7c3e7ed488b"
 }

package/src/components/Pill/Pill.tsx

@@ -1,6 +1,8 @@
-import React from "react"
+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"
@@ -13,6 +15,7 @@ export interface PillProps {
 
 export const Pill = ({
   ariaLabel,
+  as,
   badge,
   badgeColor = "red",
   children,
@@ -21,7 +24,11 @@ export const Pill = ({
   pillColor = "blue",
   size = "md",
 }: PillProps) => {
-  const element = href ? "a" : "span"
+  let element: PillProps["as"] = href ? "a" : "span"
+
+  if (as) {
+    element = as
+  }
 
   const componentProps = {
     "aria-label": ariaLabel,

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/dist/components/Pill/Pill.e2e.test.d.ts

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

package/dist/components/Pill/Pill.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: Meta<typeof Button> = {
-  component: 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()
-  })
-})

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

@@ -1,134 +0,0 @@
-import { expect, test } from "@playwright/test"
-import AxeBuilder from "@axe-core/playwright"
-
-const defaultUrl = "/iframe.html?globals=&args=&id=components-pill--default&viewMode=story"
-const withoutLinkUrl = "/iframe.html?globals=&args=&id=components-pill--without-link&viewMode=story"
-const withBadgeUrl = "/iframe.html?globals=&args=&id=components-pill--with-badge&viewMode=story"
-
-test.describe("Pill default", () => {
-  test("Renders", async ({ page }) => {
-    await page.goto(defaultUrl)
-    const pill = page.getByRole("link", { name: "Be more Co-op" })
-    await expect(pill).toBeVisible()
-    await expect(pill).toHaveAttribute("href", "/be-more-co-op")
-  })
-
-  test("Does accept additional classes", async ({ page }) => {
-    await page.goto(defaultUrl + "&args=className:coop--uppercase")
-    const pill = page.getByRole("link", { name: "Be more Co-op" })
-    await expect(pill).toHaveClass(/coop-pill/)
-    await expect(pill).toHaveClass(/coop--uppercase/)
-  })
-
-  test("Doesn't display new badge", async ({ page }) => {
-    await page.goto(defaultUrl)
-    const pill = page.getByRole("link", { name: "Be more Co-op" })
-    await expect(pill).not.toHaveAttribute("data-badge")
-  })
-
-  test("Doesn't have any automatically detectable accessibility issues", async ({ page }) => {
-    await page.goto(defaultUrl)
-
-    await page.locator("#storybook-root").waitFor()
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .include("#storybook-root")
-      .analyze()
-
-    expect(accessibilityScanResults.violations).toEqual([])
-  })
-
-  test("Does match the previous screenshot", async ({ page }) => {
-    await page.goto(defaultUrl)
-    await expect(page).toHaveScreenshot()
-  })
-})
-
-test.describe("Pill with badge", () => {
-  test("Renders and has the badge", async ({ page }) => {
-    await page.goto(withBadgeUrl)
-    const pill = page.getByRole("link", { name: "Your weekly offers" })
-    await expect(pill).toBeVisible()
-    await expect(pill).toHaveAttribute("href", "/your-weekly-offers")
-    await expect(pill).toHaveAttribute("data-badge")
-  })
-
-  test("Doesn't have any automatically detectable accessibility issues", async ({ page }) => {
-    await page.goto(withBadgeUrl)
-
-    await page.locator("#storybook-root").waitFor()
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .include("#storybook-root")
-      .analyze()
-
-    expect(accessibilityScanResults.violations).toEqual([])
-  })
-
-  test("Does match the previous screenshot", async ({ page }) => {
-    await page.goto(withBadgeUrl)
-    await expect(page).toHaveScreenshot()
-  })
-})
-
-test.describe("Pill with or without href", () => {
-  test("Doesn't add a link when href is not provided", async ({ page }) => {
-    await page.goto(withoutLinkUrl)
-    const pill = page.locator("span.coop-pill")
-    await expect(pill).toBeVisible()
-  })
-
-  test("Renders a link when href is provided", async ({ page }) => {
-    await page.goto(withoutLinkUrl + "&args=href:test")
-    const pill = page.locator("a.coop-pill")
-    await expect(pill).toBeVisible()
-  })
-})
-
-test.describe("Pill size attribute", () => {
-  test("Doesn't apply data-size when size is 'md' (default)", async ({ page }) => {
-    await page.goto(defaultUrl + "&args=size:md")
-    const pill = page.locator(".coop-pill")
-    await expect(pill).not.toHaveAttribute("data-size")
-  })
-
-  test("Doesn't apply data-size when size is undefined", async ({ page }) => {
-    await page.goto(defaultUrl)
-    const pill = page.locator(".coop-pill")
-    await expect(pill).not.toHaveAttribute("data-size")
-  })
-
-  test("Does NOT apply data-size when size is an empty string", async ({ page }) => {
-    await page.goto(defaultUrl + "&args=size:")
-    const pill = page.locator(".coop-pill")
-    await expect(pill).not.toHaveAttribute("data-size")
-  })
-})
-
-test.describe("Pill badge color attribute", () => {
-  test("Applies data-badge-color when badgeColor is 'orange'", async ({ page }) => {
-    await page.goto(defaultUrl + "&args=badgeColor:orange")
-    const pill = page.locator(".coop-pill")
-    await expect(pill).toHaveAttribute("data-badge-color", "orange")
-  })
-
-  test("Applies default badge color when badgeColor is not provided", async ({ page }) => {
-    await page.goto(defaultUrl)
-    const pill = page.locator(".coop-pill")
-    await expect(pill).toHaveAttribute("data-badge-color", "red")
-  })
-})
-
-test.describe("Pill color attribute", () => {
-  test("Applies data-pill-color when pillColor is 'pink'", async ({ page }) => {
-    await page.goto(defaultUrl + "&args=pillColor:pink")
-    const pill = page.locator(".coop-pill")
-    await expect(pill).toHaveAttribute("data-pill-color", "pink")
-  })
-
-  test("Applies default pill color when pillColor is not provided", async ({ page }) => {
-    await page.goto(defaultUrl)
-    const pill = page.locator(".coop-pill")
-    await expect(pill).toHaveAttribute("data-pill-color", "blue")
-  })
-})

package/src/components/Pill/Pill.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import "../../../../styles/src/components/Pill.scss"
-
-import Pill from "./Pill"
-
-const meta: Meta<typeof Pill> = {
-  component: Pill,
-  argTypes: {
-    href: {
-      description: "Specifies the URL that the Pill component will link to when clicked.",
-    },
-    children: {
-      description:
-        "Represents the content inside the Pill component. It can be any valid JSX or string.",
-      control: false,
-    },
-    className: {
-      description: "Receives any optional className to be applied to Pill component.",
-    },
-    badge: {
-      description: "Specifies what text Pill should display on the badge.",
-    },
-    size: {
-      description: "Specifies what should be the Pill size.",
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.",
-      },
-    },
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { href: "/be-more-co-op", children: "Be more Co-op" },
-  parameters: {
-    docs: {
-      description: {
-        story: "Displays a basic Pill with default settings.",
-      },
-    },
-  },
-}
-
-export const WithoutLink: Story = {
-  args: { children: "Be more Co-op" },
-  parameters: {
-    docs: {
-      description: {
-        story: "Displays a basic Pill as basic <span> element.",
-      },
-    },
-  },
-}
-
-export const WithBadge: Story = {
-  args: {
-    href: "/your-weekly-offers",
-    badge: "NEW",
-    children: "Your weekly offers",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Displays a Pill with an additional custom badge to indicate new content.",
-      },
-    },
-  },
-}
-
-export const Sizes: Story = {
-  args: {
-    children: "Your weekly offers",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Displays all the 4 sizes supported.",
-      },
-    },
-  },
-  render: (args) => (
-    <>
-      <div className="coop-pill-group">
-        <Pill {...args} size="xl" />
-        <Pill {...args} size="lg" />
-        <Pill {...args} size="md" />
-        <Pill {...args} size="sm" />
-      </div>
-      <div className="coop-pill-group">
-        <Pill {...args} badge="NEW" size="xl" />
-        <Pill {...args} badge="NEW" size="lg" />
-        <Pill {...args} badge="NEW" size="md" />
-        <Pill {...args} badge="NEW" size="sm" />
-      </div>
-    </>
-  ),
-}
-
-export const ColourVariations: Story = {
-  args: {
-    children: "Your weekly offers",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Displays all the colour variations supported for Badge and Pill.",
-      },
-    },
-  },
-  render: (args) => (
-    <>
-      <div className="coop-pill-group">
-        <Pill {...args} pillColor="blue" />
-        <Pill {...args} pillColor="pink" />
-      </div>
-      <div className="coop-pill-group">
-        <Pill {...args} badge="NEW" pillColor="blue" badgeColor="red" />
-        <Pill {...args} badge="NEW" pillColor="blue" badgeColor="green" />
-        <Pill {...args} badge="NEW" pillColor="blue" badgeColor="orange" />
-        <Pill {...args} badge="NEW" pillColor="blue" badgeColor="pink" />
-      </div>
-      <div className="coop-pill-group">
-        <Pill {...args} badge="NEW" pillColor="pink" badgeColor="red" />
-        <Pill {...args} badge="NEW" pillColor="pink" badgeColor="green" />
-        <Pill {...args} badge="NEW" pillColor="pink" badgeColor="orange" />
-        <Pill {...args} badge="NEW" pillColor="pink" badgeColor="pink" />
-      </div>
-    </>
-  ),
-}

package/src/components/Pill/Pill.test.tsx

@@ -1,25 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { render, cleanup } from "@testing-library/react"
-import { describe, it, afterEach } from "vitest"
-import { Pill } from "."
-
-afterEach(() => {
-  cleanup()
-})
-
-describe("Pill", () => {
-  it("Renders default Pill", () => {
-    render(<Pill href="test/abc">Add missing receipt</Pill>)
-  })
-
-  it("Renders Pill with badge", () => {
-    render(
-      <Pill href="test/abc" badge="NEW">
-        <span>Add missing receipt</span>
-      </Pill>
-    )
-  })
-})