@justeattakeaway/pie-chip 0.0.0-snapshot-release-20240209112948

package/README.md

@@ -0,0 +1,116 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-chip">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-chip.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-chip)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-chip
+
+`pie-chip` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-chip` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-chip
+
+# yarn
+$ yarn add @justeattakeaway/pie-chip
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieChip } from '@justeattakeaway/pie-chip';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-chip';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieChip } from '@justeattakeaway/pie-chip/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-chip`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| variant | `String` | `default` | Variant of the chip, one of `variants` - `default`, `outline`, `ghost` |
+| isSelected | `Boolean` | `false` | If `true`, applies the selected styles |
+| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the chip |
+| isDismissible | `Boolean` | `false` | If `true`, displays a close icon to dismiss the chip component. Can be only used if `isSelected` is set to true |
+| disabled | `Boolean` | `false` | If `true`, disables the chip component |
+
+In your markup or JSX, you can then use these to set the properties for the `pie-chip` component:
+
+```html
+<!-- Native HTML -->
+<pie-chip>Label</pie-chip>
+
+<!-- JSX -->
+<PieChip>Label</PieChip>
+```
+
+## Slots
+
+| Slot | Description |
+| Default slot | Used to pass text into the chip component. |
+| icon | Used to pass in an icon to the chip component. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
+
+### Using `pie-icons-webc` with `pie-chip` icon slot
+
+We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
+
+```html
+<!--
+  Note that pie-chip and the icon that you want to use will need to be imported as components into your application.
+  See the `pie-icons-webc` README for more info on importing these icons.
+-->
+<pie-chip>
+    <icon-vegan slot="icon"></icon-vegan>
+    Label
+</pie-chip>
+```
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -0,0 +1,197 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/defs.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "['default', 'outline', 'ghost']"
+          },
+          "default": "['default', 'outline', 'ghost']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PieChip",
+          "slots": [
+            {
+              "description": "The icon slot",
+              "name": "icon"
+            },
+            {
+              "description": "Default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ChipProps['variant']"
+              },
+              "privacy": "public",
+              "default": "'default'",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "isSelected",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "isSelected"
+            },
+            {
+              "kind": "field",
+              "name": "isLoading",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "isLoading"
+            },
+            {
+              "kind": "field",
+              "name": "isDismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "isDismissible"
+            },
+            {
+              "kind": "method",
+              "name": "renderSpinner",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Template for the loading state"
+            },
+            {
+              "kind": "method",
+              "name": "renderCloseButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Template for the dismissible state"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ChipProps['variant']"
+              },
+              "default": "'default'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "isSelected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isSelected"
+            },
+            {
+              "name": "isLoading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isLoading"
+            },
+            {
+              "name": "isDismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isDismissible"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "pie-chip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieChip",
+          "declaration": {
+            "name": "PieChip",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit';
+
+export declare interface ChipProps {
+    /**
+     * What style variant the chip should be such as default, outline or ghost.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the chip element is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, the chip element will apply the selected styles.
+     */
+    isSelected?: boolean;
+    /**
+     * When true, displays a loading indicator inside the chip.
+     */
+    isLoading?: boolean;
+    /**
+     * When true, displays a close icon to dismiss the chip component.
+     * Can be only used if `isSelected` is set to true
+     */
+    isDismissible?: boolean;
+}
+
+/**
+ * @tagname pie-chip
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
+export declare class PieChip extends LitElement implements ChipProps {
+    variant: ChipProps['variant'];
+    disabled: boolean;
+    isSelected: boolean;
+    isLoading: boolean;
+    isDismissible: boolean;
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner;
+    /**
+     * Template for the dismissible state
+     *
+     * @private
+     */
+    private renderCloseButton;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export declare const variants: readonly ["default", "outline", "ghost"];
+
+export { }

package/dist/index.js

@@ -0,0 +1,91 @@
+import { unsafeCSS as h, LitElement as b, html as l, nothing as p } from "lit";
+import { property as a } from "lit/decorators.js";
+import { validPropertyValues as g, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
+const f = `.c-chip{--chip-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--icon-display-override: block;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled),.c-chip[isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.c-chip[variant=outline]:not([disabled],[isSelected],[isLoading]){--chip-border-color: var(--dt-color-border-strong)}.c-chip[variant=outline],.c-chip[variant=ghost]{--chip-bg-color: transparent}.c-chip[variant=outline]:hover:not(:disabled),.c-chip[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip[variant=outline]:active:not(:disabled),.c-chip[variant=outline][isLoading]:not(:disabled),.c-chip[variant=ghost]:active:not(:disabled),.c-chip[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip[isSelected]{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip[isSelected]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip[isSelected]:active:not(:disabled),.c-chip[isSelected][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.c-chip[isDismissible][isSelected]{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip[isDismissible][isSelected] .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip[isLoading]>*:not(.c-chip-spinner){visibility:hidden}.c-chip[isLoading] .c-chip-spinner{position:absolute}.c-chip[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
+`, u = ["default", "outline", "ghost"];
+var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (d, e, c, r) => {
+  for (var i = r > 1 ? void 0 : r ? S(e, c) : e, t = d.length - 1, s; t >= 0; t--)
+    (s = d[t]) && (i = (r ? s(e, c, i) : s(i)) || i);
+  return r && i && y(e, c, i), i;
+};
+const v = "pie-chip";
+class o extends b {
+  constructor() {
+    super(...arguments), this.variant = "default", this.disabled = !1, this.isSelected = !1, this.isLoading = !1, this.isDismissible = !1;
+  }
+  /**
+   * Template for the loading state
+   *
+   * @private
+   */
+  renderSpinner() {
+    const { isSelected: e } = this;
+    return l`
+                    <pie-spinner
+                        class="c-chip-spinner"
+                        size="small"
+                        variant="${e ? "inverse" : "secondary"}">
+                    </pie-spinner>`;
+  }
+  /**
+   * Template for the dismissible state
+   *
+   * @private
+   */
+  renderCloseButton() {
+    return l`
+                    <button 
+                        class="c-chip-closeBtn"
+                        data-test-id="chip-close-button">
+                        <icon-close-circle-filled size="m"></icon-close-circle-filled>
+                    </button>`;
+  }
+  render() {
+    const {
+      variant: e,
+      disabled: c,
+      isSelected: r,
+      isLoading: i,
+      isDismissible: t
+    } = this;
+    return l`
+            <div
+                class="c-chip"
+                role="button"
+                tabindex="0"
+                data-test-id="pie-chip"
+                variant="${e}"
+                ?disabled="${c}"
+                ?isSelected="${r}"
+                ?isLoading="${i}"
+                ?isDismissible="${t}">
+                    <slot name="icon"></slot>
+                    ${i ? this.renderSpinner() : p}
+                    <slot></slot> 
+                    ${t && r ? this.renderCloseButton() : p}        
+            </div>`;
+  }
+}
+o.styles = h(f);
+n([
+  a(),
+  g(v, u, "primary")
+], o.prototype, "variant", 2);
+n([
+  a({ type: Boolean })
+], o.prototype, "disabled", 2);
+n([
+  a({ type: Boolean })
+], o.prototype, "isSelected", 2);
+n([
+  a({ type: Boolean })
+], o.prototype, "isLoading", 2);
+n([
+  a({ type: Boolean })
+], o.prototype, "isDismissible", 2);
+m(v, o);
+export {
+  o as PieChip,
+  u as variants
+};

package/dist/react.d.ts

@@ -0,0 +1,63 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import * as React_2 from 'react';
+import type { TemplateResult } from 'lit';
+
+export declare interface ChipProps {
+    /**
+     * What style variant the chip should be such as default, outline or ghost.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the chip element is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, the chip element will apply the selected styles.
+     */
+    isSelected?: boolean;
+    /**
+     * When true, displays a loading indicator inside the chip.
+     */
+    isLoading?: boolean;
+    /**
+     * When true, displays a close icon to dismiss the chip component.
+     * Can be only used if `isSelected` is set to true
+     */
+    isDismissible?: boolean;
+}
+
+export declare const PieChip: React_2.ForwardRefExoticComponent<ChipProps & React_2.RefAttributes<PieChip_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-chip
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
+declare class PieChip_2 extends LitElement implements ChipProps {
+    variant: ChipProps['variant'];
+    disabled: boolean;
+    isSelected: boolean;
+    isLoading: boolean;
+    isDismissible: boolean;
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner;
+    /**
+     * Template for the dismissible state
+     *
+     * @private
+     */
+    private renderCloseButton;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+
+export declare const variants: readonly ["default", "outline", "ghost"];
+
+export { }

package/dist/react.js

@@ -0,0 +1,19 @@
+import * as e from "react";
+import { createComponent as i } from "@lit/react";
+import { PieChip as t } from "./index.js";
+import { variants as P } from "./index.js";
+import "lit";
+import "lit/decorators.js";
+import "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
+const p = i({
+  displayName: "PieChip",
+  elementClass: t,
+  react: e,
+  tagName: "pie-chip",
+  events: {}
+}), n = p;
+export {
+  n as PieChip,
+  P as variants
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@justeattakeaway/pie-chip",
+  "description": "PIE Design System Chip built using Web Components",
+  "version": "0.0.0-snapshot-release-20240209112948",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "custom-elements.json",
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "npx build-react-wrapper && run -T vite build",
+    "create:manifest": "yarn cem analyze --litelement",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_CHIP} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.10.0",
+    "cem-plugin-module-file-extensions": "0.0.5"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20240209112948",
+    "@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240209112948",
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240209112948"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "customElements": "custom-elements.json",
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/chip.scss

@@ -0,0 +1,142 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+@mixin chip-interactive-states($bg-color, $mode: 'default') {
+    &:hover:not(:disabled) {
+        @if $mode == 'inverse' {
+            --hover-modifier: var(--dt-color-hover-02);
+        } @else {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
+        }
+
+        @if $mode == 'transparent' {
+            --hover-modifier: var(--dt-color-hover-01);
+            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
+        } @else {
+            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
+        }
+    }
+
+    &:active:not(:disabled),
+    &[isLoading]:not(:disabled) {
+        @if $mode == 'inverse' {
+            --active-modifier: var(--dt-color-active-02);
+        } @else {
+            --active-modifier: calc(-1 * var(--dt-color-active-01));
+        }
+
+        @if $mode == 'transparent' {
+            --active-modifier: var(--dt-color-active-01);
+            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
+        } @else {
+            --chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
+        }
+    }
+}
+
+
+.c-chip {
+    --chip-bg-color: var(--dt-color-interactive-secondary);
+    --chip-color: var(--dt-color-content-interactive-secondary);
+    --chip-border-width: 1px;
+    --chip-border-color: transparent;
+    --chip-padding-block: calc(6px - var(--chip-border-width));
+    --chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));
+    --chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));
+    --chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));
+    --chip-gap: var(--dt-spacing-b);
+    --chip-dismissible-offset: calc(var(--chip-gap) / -2); // ensures the spacing between the text and close icon is 4px
+
+    // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
+    --icon-display-override: block;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--chip-gap);
+    padding-block-start: var(--chip-padding-block);
+    padding-block-end: var(--chip-padding-block);
+    padding-inline-start: var(--chip-padding-inline);
+    padding-inline-end: var(--chip-padding-inline);
+    background-color: var(--chip-bg-color);
+    color: var(--chip-color);
+    border-radius: var(--dt-radius-rounded-e);
+    border: 1px solid;
+    border-color: var(--chip-border-color);
+    cursor: pointer;
+    min-width: var(--chip-min-width);
+
+    @include p.font-size(--dt-font-interactive-xs-size);
+    @include p.line-height(--dt-font-interactive-xs-line-height);
+    font-weight: var(--dt-font-weight-bold);
+
+    @include chip-interactive-states('--dt-color-interactive-secondary');
+
+    &[variant='default'] {
+        // same as default styles
+    }
+
+    &[variant='outline']:not([disabled], [isSelected], [isLoading]) {
+        --chip-border-color: var(--dt-color-border-strong);
+    }
+
+    &[variant='outline'],
+    &[variant='ghost'] {
+        --chip-bg-color: transparent;
+
+        @include chip-interactive-states('--dt-color-black', 'transparent');
+    }
+
+    &[isSelected] {
+        --chip-bg-color: var(--dt-color-interactive-primary);
+        --chip-color: var(--dt-color-content-interactive-primary);
+
+        @include chip-interactive-states('--dt-color-interactive-primary', 'inverse');
+    }
+
+    &[isDismissible][isSelected] {
+        padding-inline-end: var(--chip-padding-dismissible);
+        padding-block-start: var(--chip-padding-dismissible);
+        padding-block-end: var(--chip-padding-dismissible);
+
+        .c-chip-closeBtn {
+            display: inline-flex;
+            user-select: none;
+            outline: none;
+            border: none;
+            color: inherit;
+            background-color: inherit;
+            border-radius: inherit;
+            cursor: pointer;
+            padding: 0;
+            margin-inline-start: var(--chip-dismissible-offset);
+        }
+    }
+
+    &[isLoading] {
+        & > *:not(.c-chip-spinner) {
+            visibility: hidden;
+        }
+
+        .c-chip-spinner {
+            position: absolute;
+        }
+    }
+
+    &[disabled] {
+        --chip-bg-color: var(--dt-color-disabled-01);
+        --chip-color: var(--dt-color-content-disabled);
+
+        cursor: not-allowed;
+    }
+
+    &:focus-visible {
+        @include p.focus;
+    }
+}
+
+::slotted(svg) {
+    display: block;
+    height: var(--icon-size-override);
+    width: var(--icon-size-override);
+}

package/src/defs-react.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/defs.ts

@@ -0,0 +1,26 @@
+export const variants = ['default', 'outline', 'ghost'] as const;
+
+export interface ChipProps {
+    /**
+     * What style variant the chip should be such as default, outline or ghost.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the chip element is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, the chip element will apply the selected styles.
+     */
+    isSelected?: boolean;
+    /**
+     * When true, displays a loading indicator inside the chip.
+     */
+    isLoading?: boolean;
+    /**
+     * When true, displays a close icon to dismiss the chip component.
+     * Can be only used if `isSelected` is set to true
+     */
+    isDismissible?: boolean;
+
+}

package/src/index.ts

@@ -0,0 +1,106 @@
+import {
+    LitElement, html, unsafeCSS, TemplateResult, nothing,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import styles from './chip.scss?inline';
+import { ChipProps, variants } from './defs';
+import '@justeattakeaway/pie-icons-webc/IconCloseCircleFilled';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-chip';
+
+/**
+ * @tagname pie-chip
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
+export class PieChip extends LitElement implements ChipProps {
+    @property()
+    @validPropertyValues(componentSelector, variants, 'primary')
+    public variant: ChipProps['variant'] = 'default';
+
+    @property({ type: Boolean })
+    public disabled = false;
+
+    @property({ type: Boolean })
+    public isSelected = false;
+
+    @property({ type: Boolean })
+    public isLoading = false;
+
+    @property({ type: Boolean })
+    public isDismissible = false;
+
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner (): TemplateResult {
+        const { isSelected } = this;
+        const spinnerVariant = isSelected ? 'inverse' : 'secondary';
+
+        return html`
+                    <pie-spinner
+                        class="c-chip-spinner"
+                        size="small"
+                        variant="${spinnerVariant}">
+                    </pie-spinner>`;
+    }
+
+    /**
+     * Template for the dismissible state
+     *
+     * @private
+     */
+    private renderCloseButton (): TemplateResult {
+        return html`
+                    <button 
+                        class="c-chip-closeBtn"
+                        data-test-id="chip-close-button">
+                        <icon-close-circle-filled size="m"></icon-close-circle-filled>
+                    </button>`;
+    }
+
+    render () {
+        const {
+            variant,
+            disabled,
+            isSelected,
+            isLoading,
+            isDismissible,
+        } = this;
+
+        return html`
+            <div
+                class="c-chip"
+                role="button"
+                tabindex="0"
+                data-test-id="pie-chip"
+                variant="${variant}"
+                ?disabled="${disabled}"
+                ?isSelected="${isSelected}"
+                ?isLoading="${isLoading}"
+                ?isDismissible="${isDismissible}">
+                    <slot name="icon"></slot>
+                    ${isLoading ? this.renderSpinner() : nothing}
+                    <slot></slot> 
+                    ${isDismissible && isSelected ? this.renderCloseButton() : nothing}        
+            </div>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieChip);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieChip;
+    }
+}