@justeattakeaway/pie-card 0.14.0

package/README.md

@@ -0,0 +1,85 @@
+<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-card">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-card.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-card)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Contributing](#contributing)
+
+## pie-card
+
+`pie-card` 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-card` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-card
+
+# yarn
+$ yarn add @justeattakeaway/pie-card
+```
+
+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
+
+```js
+// default
+import { PieCard } from '@justeattakeaway/pie-card';
+
+// react
+import { PieCard } from '@justeattakeaway/pie-card/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-card`, 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                                                                                                                                                                                                                                                         |
+|---|---|-------------|------------------------------------------------------------------------------------------------------------------------------|
+| tag | `String`  | `button`      | What HTML element the card should be such as a or button
+| variant         | `string`  | `default`   | What style variant the card should be such as default, outline, inverse or outline-inverse                                                                                                                                                                          |
+| disabled        | `boolean` | `false`     | When true, the card is disabled.                                                                                                                                                                                                                          |
+| href            | `string`  | `undefined` | The URL that the card should point to (this will not take effect unless the card is a link).                                                                                                                                                                        |
+| target          | `string`  | `undefined` | Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link).                                                                                                                                       |
+| rel             | `string`  | `undefined` | What the relationship of the linked URL is (this will not take effect unless the card is a link).                                                                                                                                                                   |
+| aria            | `object`  | `undefined` | The ARIA labels used for various parts of the card.                                                                                                                                                                                                                 |
+| isDraggable     | `boolean` | `false`     | Sets a grab/grabbing cursor when set to true. **Note:** the actual dragging capabilities should be implemented by the consuming application.                                                                                                                            |
+| padding         | `String`  | `undefined` | Sets the padding of the card. Can be either a single value or two values separated by commas. Setting a single value adds padding to all sides of the card, whereas setting two values will set the "topBottom, leftRight" padding. e.g `'a'` or `'a, b'` |
+
+
+In your markup or JSX, you can then use these to set the properties for the `pie-card` component:
+
+```html
+<!-- Native HTML -->
+<pie-card disabled href="/foo/bar" rel="noopener" target="_blank"></pie-card>
+
+<!-- JSX -->
+<PieCard disabled href="/foo/bar" rel="noopener" target="_blank"></PieCard>
+```
+
+## 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/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,94 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+};
+
+export declare interface CardProps {
+    /**
+     * The ARIA labels used for various parts of the card.
+     */
+    aria?: AriaProps;
+    /**
+     * When true, the card is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The URL that the card should point to (this will not take effect unless the card is a link).
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link).
+     */
+    target?: string;
+    /**
+     * What the relationship of the linked URL is (this will not take effect unless the card is a link).
+     */
+    rel?: string;
+    /**
+     * What style variant the card should be such as default or inverse.
+     */
+    variant: typeof variants[number];
+    /**
+     * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
+     */
+    isDraggable: boolean;
+    /**
+     * What HTML element the card should be such as `a` or `button`.
+     */
+    tag?: typeof tags[number];
+    /**
+     * Sets the padding of the card. Can be either a single value or two values
+     * separated by a comma. Setting a single value adds padding to all sides of the card,
+     * whereas setting two values will set the "paddingX, paddingY" padding. e.g `'a'` or `'a, b'`
+     */
+    padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
+}
+
+declare type PaddingValue = typeof spacingTokens[number];
+
+export declare const paddingValues: string[];
+
+/**
+ * @tagname pie-card
+ */
+export declare class PieCard extends LitElement implements CardProps {
+    tag: CardProps['tag'];
+    variant: CardProps['variant'];
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled: boolean;
+    aria: CardProps['aria'];
+    isDraggable: boolean;
+    padding?: CardProps['padding'];
+    /**
+     * Renders the card as an anchor element.
+     *
+     * @private
+     */
+    private renderAnchor;
+    /**
+     * Generates padding for the component based on `padding` values passed
+     * by the consumer.
+     *
+     *
+     * Example: 'a' or 'a, b'
+     * Single values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right
+     *
+     * @private
+     */
+    private generatePaddingCSS;
+    render(): TemplateResult;
+    static styles: CSSResult;
+}
+
+declare const spacingTokens: readonly ["a", "b", "c", "d", "e", "f", "g"];
+
+export declare const tags: readonly ["a", "button"];
+
+export declare const variants: readonly ["default", "outline", "inverse", "outline-inverse"];
+
+export { }

package/dist/index.js

@@ -0,0 +1,142 @@
+import { unsafeCSS as p, LitElement as m, html as g, nothing as s } from "lit";
+import { property as n } from "lit/decorators.js";
+const u = (t, r, a) => function(e, c) {
+  const i = `#${c}`;
+  Object.defineProperty(e, c, {
+    get() {
+      return this[i];
+    },
+    set(b) {
+      const h = this[i];
+      r.includes(b) ? this[i] = b : (console.error(
+        `<${t}> Invalid value "${b}" provided for property "${c}".`,
+        `Must be one of: ${r.join(" | ")}.`,
+        `Falling back to default value: "${a}"`
+      ), this[i] = a), this.requestUpdate(c, h);
+    }
+  });
+};
+function $(t, r) {
+  customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, r);
+}
+const y = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:before,*:after{box-sizing:border-box}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
+`, S = ["default", "outline", "inverse", "outline-inverse"], k = ["a", "button"], f = ["a", "b", "c", "d", "e", "f", "g"], P = f.flatMap((t) => [t, ...f.map((r) => `${t},${r}`)]);
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (t, r, a, o) => {
+  for (var e = o > 1 ? void 0 : o ? C(r, a) : r, c = t.length - 1, i; c >= 0; c--)
+    (i = t[c]) && (e = (o ? i(r, a, e) : i(e)) || e);
+  return o && e && x(r, a, e), e;
+};
+const v = "pie-card";
+class d extends m {
+  constructor() {
+    super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
+  }
+  /**
+   * Renders the card as an anchor element.
+   *
+   * @private
+   */
+  renderAnchor() {
+    var a;
+    const r = this.generatePaddingCSS();
+    return g`
+            <a
+                class="c-card"
+                data-test-id="pie-card"
+                tag=${this.tag}
+                ?isDraggable="${this.isDraggable}"
+                variant=${this.variant}
+                ?disabled=${this.disabled}
+                href=${this.href || s}
+                target=${this.target || s}
+                rel=${this.rel || s}
+                role="link"
+                aria-label=${((a = this.aria) == null ? void 0 : a.label) || s}
+                aria-disabled=${this.disabled ? "true" : "false"}
+                style=${r || s}>
+                    <slot></slot>
+                </div>
+            </a>`;
+  }
+  /**
+   * Generates padding for the component based on `padding` values passed
+   * by the consumer.
+   *
+   *
+   * Example: 'a' or 'a, b'
+   * Single values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right
+   *
+   * @private
+   */
+  generatePaddingCSS() {
+    const { padding: r } = this;
+    let a = "";
+    if (!r)
+      return "";
+    const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
+    return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
+  }
+  render() {
+    const {
+      variant: r,
+      disabled: a,
+      tag: o,
+      aria: e,
+      isDraggable: c
+    } = this, i = this.generatePaddingCSS();
+    return o === "a" ? this.renderAnchor() : g`
+                <div
+                    class="c-card"
+                    data-test-id="pie-card"
+                    tag=${o}
+                    ?isDraggable="${c}"
+                    variant=${r}
+                    ?disabled=${a}
+                    role="button"
+                    tabindex="0"
+                    aria-label=${(e == null ? void 0 : e.label) || s}
+                    aria-disabled=${a ? "true" : "false"}
+                    style=${i || s}>
+                        <slot></slot>
+                    </div>
+                </div>`;
+  }
+}
+d.styles = p(y);
+l([
+  n(),
+  u(v, k, "button")
+], d.prototype, "tag", 2);
+l([
+  n(),
+  u(v, S, "default")
+], d.prototype, "variant", 2);
+l([
+  n({ type: String, reflect: !0 })
+], d.prototype, "href", 2);
+l([
+  n({ type: String, reflect: !0 })
+], d.prototype, "target", 2);
+l([
+  n({ type: String, reflect: !0 })
+], d.prototype, "rel", 2);
+l([
+  n({ type: Boolean })
+], d.prototype, "disabled", 2);
+l([
+  n({ type: Object })
+], d.prototype, "aria", 2);
+l([
+  n({ type: Boolean })
+], d.prototype, "isDraggable", 2);
+l([
+  n({ type: String }),
+  u(v, P, void 0)
+], d.prototype, "padding", 2);
+$(v, d);
+export {
+  d as PieCard,
+  P as paddingValues,
+  k as tags,
+  S as variants
+};

package/dist/react.d.ts

@@ -0,0 +1,97 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit-labs/react';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+};
+
+export declare interface CardProps {
+    /**
+     * The ARIA labels used for various parts of the card.
+     */
+    aria?: AriaProps;
+    /**
+     * When true, the card is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The URL that the card should point to (this will not take effect unless the card is a link).
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link).
+     */
+    target?: string;
+    /**
+     * What the relationship of the linked URL is (this will not take effect unless the card is a link).
+     */
+    rel?: string;
+    /**
+     * What style variant the card should be such as default or inverse.
+     */
+    variant: typeof variants[number];
+    /**
+     * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
+     */
+    isDraggable: boolean;
+    /**
+     * What HTML element the card should be such as `a` or `button`.
+     */
+    tag?: typeof tags[number];
+    /**
+     * Sets the padding of the card. Can be either a single value or two values
+     * separated by a comma. Setting a single value adds padding to all sides of the card,
+     * whereas setting two values will set the "paddingX, paddingY" padding. e.g `'a'` or `'a, b'`
+     */
+    padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
+}
+
+declare type PaddingValue = typeof spacingTokens[number];
+
+export declare const paddingValues: string[];
+
+export declare const PieCard: ReactWebComponent<PieCard_2, {}>;
+
+/**
+ * @tagname pie-card
+ */
+declare class PieCard_2 extends LitElement implements CardProps {
+    tag: CardProps['tag'];
+    variant: CardProps['variant'];
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled: boolean;
+    aria: CardProps['aria'];
+    isDraggable: boolean;
+    padding?: CardProps['padding'];
+    /**
+     * Renders the card as an anchor element.
+     *
+     * @private
+     */
+    private renderAnchor;
+    /**
+     * Generates padding for the component based on `padding` values passed
+     * by the consumer.
+     *
+     *
+     * Example: 'a' or 'a, b'
+     * Single values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right
+     *
+     * @private
+     */
+    private generatePaddingCSS;
+    render(): TemplateResult;
+    static styles: CSSResult;
+}
+
+declare const spacingTokens: readonly ["a", "b", "c", "d", "e", "f", "g"];
+
+export declare const tags: readonly ["a", "button"];
+
+export declare const variants: readonly ["default", "outline", "inverse", "outline-inverse"];
+
+export { }

package/dist/react.js

@@ -0,0 +1,72 @@
+import * as C from "react";
+import { PieCard as E } from "./index.js";
+import { paddingValues as D, tags as G, variants as O } from "./index.js";
+import "lit";
+import "lit/decorators.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const M = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), P = (c, r, p, m, h) => {
+  const s = h == null ? void 0 : h[r];
+  s === void 0 || p === m ? p == null && r in HTMLElement.prototype ? c.removeAttribute(r) : c[r] = p : ((n, t, u) => {
+    let o = w.get(n);
+    o === void 0 && w.set(n, o = /* @__PURE__ */ new Map());
+    let a = o.get(t);
+    u !== void 0 ? a === void 0 ? (o.set(t, a = { handleEvent: u }), n.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (o.delete(t), n.removeEventListener(t, a));
+  })(c, s, p);
+};
+function b(c = window.React, r, p, m, h) {
+  let s, n, t;
+  if (r === void 0) {
+    const l = c;
+    ({ tagName: n, elementClass: t, events: m, displayName: h } = l), s = l.react;
+  } else
+    s = c, t = p, n = r;
+  const u = s.Component, o = s.createElement, a = new Set(Object.keys(m ?? {}));
+  class f extends u {
+    constructor() {
+      super(...arguments), this.o = null;
+    }
+    t(e) {
+      if (this.o !== null)
+        for (const v in this.i)
+          P(this.o, v, this.props[v], e ? e[v] : void 0, m);
+    }
+    componentDidMount() {
+      this.t();
+    }
+    componentDidUpdate(e) {
+      this.t(e);
+    }
+    render() {
+      const { _$Gl: e, ...v } = this.props;
+      this.h !== e && (this.u = (i) => {
+        e !== null && ((d, g) => {
+          typeof d == "function" ? d(g) : d.current = g;
+        })(e, i), this.o = i, this.h = e;
+      }), this.i = {};
+      const y = { ref: this.u };
+      for (const [i, d] of Object.entries(v))
+        M.has(i) ? y[i === "className" ? "class" : i] = d : a.has(i) || i in t.prototype ? this.i[i] = d : y[i] = d;
+      return o(n, y);
+    }
+  }
+  f.displayName = h ?? t.name;
+  const N = s.forwardRef((l, e) => o(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
+  return N.displayName = f.displayName, N;
+}
+const $ = b({
+  displayName: "PieCard",
+  elementClass: E,
+  react: C,
+  tagName: "pie-card",
+  events: {}
+});
+export {
+  $ as PieCard,
+  D as paddingValues,
+  G as tags,
+  O as variants
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@justeattakeaway/pie-card",
+  "version": "0.14.0",
+  "description": "PIE Design System Card built using Web Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "yarn build:wrapper pie-card && run -T vite build",
+    "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_CARD} 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": {
+    "@justeattakeaway/pie-components-config": "0.4.0"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-webc-core": "0.11.0"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/card.scss

@@ -0,0 +1,104 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+@mixin card-interactive-states($bg-color, $mode: 'default') {
+    &:hover:not([disabled]) {
+        @if $mode == 'inverse' {
+            --hover-modifier: var(--dt-color-hover-01);
+        } @else {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
+        }
+
+        --card-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
+    }
+
+    &:active:not([disabled]) {
+        @if $mode == 'inverse' {
+            --active-modifier: var(--dt-color-active-01);
+        } @else {
+            --active-modifier: calc(-1 * var(--dt-color-active-01));
+        }
+
+        --card-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
+    }
+}
+
+.c-card {
+    --card-bg-color: var(--dt-color-container-default);
+    --card-color: var(--dt-color-content-default);
+    --card-radius: var(--dt-radius-rounded-c);
+    --card-border-color: transparent;
+
+    display: block;
+    position: relative;
+    color: var(--card-color);
+    background-color: var(--card-bg-color);
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-radius);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    text-decoration: none;
+
+    &[variant='default'] {
+        box-shadow: var(--dt-elevation-card);
+
+        @include card-interactive-states('--dt-color-container-default');
+    }
+
+    &[variant='outline'] {
+        border-color: var(--dt-color-border-strong);
+
+        @include card-interactive-states('--dt-color-container-default');
+    }
+
+    &[variant='inverse'] {
+        --card-bg-color: var(--dt-color-container-dark);
+        --card-color: var(--dt-color-content-inverse);
+
+        box-shadow: var(--dt-elevation-dark-card);
+
+        @include card-interactive-states('--dt-color-container-dark', 'inverse');
+    }
+
+    &[variant='outline-inverse'] {
+        --card-bg-color: var(--dt-color-container-dark);
+        --card-color: var(--dt-color-content-inverse);
+
+        border-color: var(--dt-color-border-inverse);
+
+        @include card-interactive-states('--dt-color-container-dark', 'inverse');
+    }
+
+    &[disabled] {
+        --card-bg-color: var(--dt-color-disabled-01);
+
+        cursor: not-allowed;
+
+        ::slotted(*) {
+            color: var(--dt-color-content-disabled);
+        }
+
+        img {
+            opacity: 0.5;
+        }
+
+        &[variant='inverse'],
+        &[variant='outline-inverse'] {
+            --card-bg-color: var(--dt-color-disabled-01-inverse);
+        }
+    }
+
+    &:focus-visible {
+        @include p.focus;
+    }
+
+    &[isdraggable] {
+        @extend %has-grab-cursor;
+    }
+}

package/src/defs.ts

@@ -0,0 +1,60 @@
+export const variants = ['default', 'outline', 'inverse', 'outline-inverse'] as const;
+export const tags = ['a', 'button'] as const;
+
+const spacingTokens = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] as const;
+export const paddingValues = spacingTokens.flatMap((first) => [first, ...spacingTokens.map((second) => `${first},${second}`)]);
+
+type PaddingValue = typeof spacingTokens[number];
+
+export type AriaProps = {
+    label?: string;
+};
+
+export interface CardProps {
+    /**
+     * The ARIA labels used for various parts of the card.
+     */
+    aria?: AriaProps;
+
+    /**
+     * When true, the card is disabled.
+     */
+    disabled: boolean;
+
+    /**
+     * The URL that the card should point to (this will not take effect unless the card is a link).
+     */
+    href?: string;
+
+    /**
+     * Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link).
+     */
+    target?: string;
+
+    /**
+     * What the relationship of the linked URL is (this will not take effect unless the card is a link).
+     */
+    rel?: string;
+
+    /**
+     * What style variant the card should be such as default or inverse.
+     */
+    variant: typeof variants[number];
+
+    /**
+     * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
+     */
+    isDraggable: boolean;
+
+    /**
+     * What HTML element the card should be such as `a` or `button`.
+     */
+     tag?: typeof tags[number];
+
+    /**
+     * Sets the padding of the card. Can be either a single value or two values
+     * separated by a comma. Setting a single value adds padding to all sides of the card,
+     * whereas setting two values will set the "paddingX, paddingY" padding. e.g `'a'` or `'a, b'`
+     */
+    padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
+}

package/src/index.ts

@@ -0,0 +1,161 @@
+import {
+    html, LitElement, unsafeCSS, nothing, TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import styles from './card.scss?inline';
+import {
+    variants,
+    tags,
+    CardProps,
+    paddingValues,
+} from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-card';
+
+/**
+ * @tagname pie-card
+ */
+export class PieCard extends LitElement implements CardProps {
+    @property()
+    @validPropertyValues(componentSelector, tags, 'button')
+    public tag: CardProps['tag'] = 'button';
+
+    @property()
+    @validPropertyValues(componentSelector, variants, 'default')
+    public variant: CardProps['variant'] = 'default';
+
+    @property({ type: String, reflect: true })
+    public href?: string;
+
+    @property({ type: String, reflect: true })
+    public target?: string;
+
+    @property({ type: String, reflect: true })
+    public rel?: string;
+
+    @property({ type: Boolean })
+    public disabled = false;
+
+    @property({ type: Object })
+    public aria: CardProps['aria'];
+
+    @property({ type: Boolean })
+    public isDraggable = false;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, paddingValues, undefined)
+    public padding?: CardProps['padding'];
+
+    /**
+     * Renders the card as an anchor element.
+     *
+     * @private
+     */
+    private renderAnchor (): TemplateResult {
+        const paddingCSS = this.generatePaddingCSS();
+
+        return html`
+            <a
+                class="c-card"
+                data-test-id="pie-card"
+                tag=${this.tag}
+                ?isDraggable="${this.isDraggable}"
+                variant=${this.variant}
+                ?disabled=${this.disabled}
+                href=${this.href || nothing}
+                target=${this.target || nothing}
+                rel=${this.rel || nothing}
+                role="link"
+                aria-label=${this.aria?.label || nothing}
+                aria-disabled=${this.disabled ? 'true' : 'false'}
+                style=${paddingCSS || nothing}>
+                    <slot></slot>
+                </div>
+            </a>`;
+    }
+
+    /**
+     * Generates padding for the component based on `padding` values passed
+     * by the consumer.
+     *
+     *
+     * Example: 'a' or 'a, b'
+     * Single values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right
+     *
+     * @private
+     */
+    private generatePaddingCSS (): string {
+        const { padding } = this;
+        let paddingCSS = '';
+
+        // Check if padding is empty (null, undefined, or an empty string)
+        if (!padding) {
+            return '';
+        }
+
+        const paddingArray = padding
+            .split(',')
+            .map((item) => item.trim())
+            .filter((value) => /^[a-g]$/.test(value));
+
+        if (paddingArray.length > 0 && paddingArray.length <= 2) {
+            paddingCSS += `var(--dt-spacing-${paddingArray[0]})`;
+
+            if (paddingArray.length > 1) {
+                paddingCSS += ` var(--dt-spacing-${paddingArray[1]})`;
+            }
+        }
+
+        if (!paddingCSS) {
+            return '';
+        }
+
+        return `padding: ${paddingCSS}`;
+    }
+
+    render () {
+        const {
+            variant,
+            disabled,
+            tag,
+            aria,
+            isDraggable,
+        } = this;
+
+        const paddingCSS = this.generatePaddingCSS();
+
+        if (tag === 'a') return this.renderAnchor();
+
+        return html`
+                <div
+                    class="c-card"
+                    data-test-id="pie-card"
+                    tag=${tag}
+                    ?isDraggable="${isDraggable}"
+                    variant=${variant}
+                    ?disabled=${disabled}
+                    role="button"
+                    tabindex="0"
+                    aria-label=${aria?.label || nothing}
+                    aria-disabled=${disabled ? 'true' : 'false'}
+                    style=${paddingCSS || nothing}>
+                        <slot></slot>
+                    </div>
+                </div>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+defineCustomElement(componentSelector, PieCard);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieCard;
+    }
+}