@coopdigital/react 0.2.0 → 0.3.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,21 @@
+import React from "react";
+export interface PillProps {
+    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, 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 default Pill;

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

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

package/dist/components/Pill/Pill.js

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

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

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,8 +1,8 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.2.0",
-  "main": "src/index.ts",
+  "version": "0.3.0",
+  "main": "dist/index.js",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -27,30 +27,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@chromatic-com/storybook": "^3.2.4",
-    "@coopdigital/styles": "^0.4.0",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@coopdigital/styles": "^0.5.0",
     "@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": "500daac771417639d21d083af67e4570ad1da09b"
+  "gitHead": "ccedccf7209f30e95b5312052836bbd745410d0c"
 }

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

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

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,25 @@
+/**
+ * @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>
+    )
+  })
+})

package/src/components/Pill/Pill.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+
+export interface PillProps {
+  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,
+  badge,
+  badgeColor = "red",
+  children,
+  className = "",
+  href,
+  pillColor = "blue",
+  size = "md",
+}: PillProps) => {
+  const element = href ? "a" : "span"
+
+  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/src/styles/Colours.mdx

@@ -0,0 +1,33 @@
+import { ColorPalette, ColorItem } from "@storybook/blocks"
+
+<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)",
+    }}
+  />
+  <ColorItem
+    title="gradient"
+    subtitle="Grayscale"
+    colors={["linear-gradient(65deg,white,black)"]}
+  />
+</ColorPalette>

package/src/styles/Text.mdx

@@ -0,0 +1,17 @@
+import { Unstyled } from "@storybook/blocks"
+
+<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>
+</Unstyled>