@justeattakeaway/pie-tag 0.1.0 → 0.2.0

package/README.md

@@ -19,7 +19,7 @@
 
 ## pie-tag
 
-`pie-tag` is a Web Component built using the Lit library.
+`pie-tag` is a Web Component built using the Lit library. A tag is a small visual element used to represent and categorize information within a user interface. 
 
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
@@ -74,16 +74,40 @@ import { PieTag } from '@justeattakeaway/pie-tag/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| size | `String` | `large` | Size of the tag. Can be either `large` or `small` |
+| variant | `String` | `neutral` | Variant of the tag, one of `variants` - `neutral-alternative`, `neutral`, `outline`, `ghost`, `blue`, `green`, `yellow`, `red`, `brand` |
+| isStrong | `Boolean` | `false` | If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants'|
+
+Since the component is not interactive it doesn't have a disabled property. To give the Tag a disabled look please use `--tag-opacity` css variable. Recommended opacity level for disabled tag is 0.5.
 
 In your markup or JSX, you can then use these to set the properties for the `pie-tag` component:
 
 ```html
 <!-- Native HTML -->
-<pie-tag></pie-tag>
+<pie-tag>Label</pie-tag>
 
 <!-- JSX -->
-<PieTag></PieTag>
+<PieTag>Label</PieTag>
+```
+## Slots
+
+| Slot | Description |
+| Default slot | Used to pass text into the tag component. |
+| icon | Used to pass in an icon to the tag 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-tag` 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-tag 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-tag>
+    <icon-vegan slot="icon"></icon-vegan>
+    Vegan
+</pie-tag>
 ```
 
 ## Contributing

package/dist/index.d.ts

@@ -4,13 +4,34 @@ import type { TemplateResult } from 'lit-html';
 
 /**
  * @tagname pie-tag
+ * @slot icon - The icon slot
+ * @slot - Default slot
  */
 export declare class PieTag extends LitElement implements TagProps {
+    variant: TagProps['variant'];
+    size: TagProps['size'];
+    isStrong: boolean;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+export declare const sizes: readonly ["small", "large"];
+
 export declare interface TagProps {
+    /**
+     * What style variant the tag should be such as neutral/ghost etc.
+     */
+    variant: typeof variants[number];
+    /**
+     * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     */
+    isStrong: boolean;
+    /**
+     * What size the tag should be.
+     */
+    size: typeof sizes[number];
 }
 
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];
+
 export { }

package/dist/index.js

@@ -1,13 +1,52 @@
-import { unsafeCSS as t, LitElement as o, html as s } from "lit";
-import { defineCustomElement as n } from "@justeattakeaway/pie-webc-core";
-const r = "", l = "pie-tag";
-class e extends o {
+import { unsafeCSS as p, LitElement as u, html as s, nothing as h } from "lit";
+import { property as l } from "lit/decorators.js";
+import { validPropertyValues as v, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
+const f = `.c-tag{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse);--tag-padding: 2px var(--dt-spacing-b);--tag-height: 24px;--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-transparent-bg-color: transparent;--tag-height-large: 24px;--tag-height-small: 16px;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);height:var(--tag-height);padding:var(--tag-padding);border:none;border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);opacity:var(--tag-opacity, 1)}.c-tag[size=small]{--tag-height: var(--tag-height-small);--tag-padding: 0 var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag[size=large]{--tag-height: var(--tag-height-large);--tag-padding: 2px var(--dt-spacing-b);--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px)}.c-tag[variant=neutral]{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral][isStrong]{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=blue]{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=blue][isStrong]{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-light)}.c-tag[variant=green]{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=green][isStrong]{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-light)}.c-tag[variant=yellow]{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=yellow][isStrong]{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=red]{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=red][isStrong]{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag[variant=brand]{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral-alternative]{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag[variant=outline]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);border:1px solid var(--dt-color-border-strong)}.c-tag[variant=outline][size=small]{--tag-padding: 0 3px}.c-tag[variant=outline][size=large]{--tag-padding: 1px 7px}.c-tag[variant=ghost]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
+`, y = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], m = ["small", "large"];
+var z = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (n, a, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? x(a, r) : a, g = n.length - 1, i; g >= 0; g--)
+    (i = n[g]) && (t = (o ? i(a, r, t) : i(t)) || t);
+  return o && t && z(a, r, t), t;
+};
+const d = "pie-tag";
+class e extends u {
+  constructor() {
+    super(...arguments), this.variant = "neutral", this.size = "large", this.isStrong = !1;
+  }
   render() {
-    return s`<h1 data-test-id="pie-tag">Hello world!</h1>`;
+    const {
+      variant: a,
+      size: r,
+      isStrong: o
+    } = this;
+    return s`
+            <div
+                class="c-tag"
+                variant=${a}
+                size=${r}
+                ?isStrong=${o}
+                data-test-id="pie-tag"
+            >
+                ${r === "large" ? s`<slot name="icon"></slot>` : h}
+                <slot></slot>
+            </div>`;
   }
 }
-e.styles = t(r);
-n(l, e);
+e.styles = p(f);
+c([
+  l({ type: String }),
+  v(d, y, "neutral")
+], e.prototype, "variant", 2);
+c([
+  l({ type: String }),
+  v(d, m, "large")
+], e.prototype, "size", 2);
+c([
+  l({ type: Boolean })
+], e.prototype, "isStrong", 2);
+b(d, e);
 export {
-  e as PieTag
+  e as PieTag,
+  m as sizes,
+  y as variants
 };

package/dist/react.d.ts

@@ -7,13 +7,34 @@ export declare const PieTag: ReactWebComponent<PieTag_2, {}>;
 
 /**
  * @tagname pie-tag
+ * @slot icon - The icon slot
+ * @slot - Default slot
  */
 declare class PieTag_2 extends LitElement implements TagProps {
+    variant: TagProps['variant'];
+    size: TagProps['size'];
+    isStrong: boolean;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+export declare const sizes: readonly ["small", "large"];
+
 export declare interface TagProps {
+    /**
+     * What style variant the tag should be such as neutral/ghost etc.
+     */
+    variant: typeof variants[number];
+    /**
+     * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     */
+    isStrong: boolean;
+    /**
+     * What size the tag should be.
+     */
+    size: typeof sizes[number];
 }
 
+export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];
+
 export { }

package/dist/react.js

@@ -1,15 +1,19 @@
 import * as e from "react";
-import { createComponent as a } from "@lit/react";
-import { PieTag as t } from "./index.js";
+import { createComponent as t } from "@lit/react";
+import { PieTag as a } from "./index.js";
+import { sizes as c, variants as f } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const p = a({
+const s = t({
   displayName: "PieTag",
-  elementClass: t,
+  elementClass: a,
   react: e,
   tagName: "pie-tag",
   events: {}
 });
 export {
-  p as PieTag
+  s as PieTag,
+  c as sizes,
+  f as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.1"
+    "@justeattakeaway/pie-components-config": "0.7.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.13.0"
+    "@justeattakeaway/pie-webc-core": "0.15.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,19 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface TagProps {}
+export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand'] as const;
+export const sizes = ['small', 'large'] as const;
+
+export interface TagProps {
+    /**
+     * What style variant the tag should be such as neutral/ghost etc.
+     */
+    variant: typeof variants[number];
+
+    /**
+     * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
+     */
+    isStrong: boolean;
+
+    /**
+     * What size the tag should be.
+     */
+    size: typeof sizes[number];
+}

package/src/index.ts

@@ -1,8 +1,10 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement, html, unsafeCSS, nothing,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './tag.scss?inline';
-import { TagProps } from './defs';
+import { TagProps, variants, sizes } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -11,10 +13,38 @@ const componentSelector = 'pie-tag';
 
 /**
  * @tagname pie-tag
+ * @slot icon - The icon slot
+ * @slot - Default slot
  */
 export class PieTag extends LitElement implements TagProps {
+    @property({ type: String })
+    @validPropertyValues(componentSelector, variants, 'neutral')
+    public variant: TagProps['variant'] = 'neutral';
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, 'large')
+    public size : TagProps['size'] = 'large';
+
+    @property({ type: Boolean })
+    public isStrong = false;
+
     render () {
-        return html`<h1 data-test-id="pie-tag">Hello world!</h1>`;
+        const {
+            variant,
+            size,
+            isStrong,
+        } = this;
+        return html`
+            <div
+                class="c-tag"
+                variant=${variant}
+                size=${size}
+                ?isStrong=${isStrong}
+                data-test-id="pie-tag"
+            >
+                ${size === 'large' ? html`<slot name="icon"></slot>` : nothing}
+                <slot></slot>
+            </div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/tag.scss

@@ -1 +1,147 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+// Base tag styles
+.c-tag {
+    // The following values set to a default tag (neutral large)
+    --tag-bg-color: var(--dt-color-container-inverse);
+    --tag-color: var(--dt-color-content-inverse);
+    --tag-padding: 2px var(--dt-spacing-b);
+    --tag-height: 24px;
+    --tag-border-radius: var(--dt-radius-rounded-b);
+    --tag-font-family: var(--dt-font-body-s-family);
+    --tag-font-weight: var(--dt-font-body-s-weight);
+    --tag-font-size: #{p.font-size(--dt-font-body-s-size)};
+    --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+
+    // transparent to variable to function properly in component tests
+    --tag-transparent-bg-color: transparent;
+
+    // Heights for the different tag sizes
+    --tag-height-large: 24px;
+    --tag-height-small: 16px;
+
+    // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
+    --icon-display-override: block;
+    --icon-size-override: 16px;
+
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dt-spacing-a);
+    height: var(--tag-height);
+    padding: var(--tag-padding);
+    border: none;
+    border-radius: var(--tag-border-radius);
+    background-color: var(--tag-bg-color);
+    color: var(--tag-color);
+    font-family: var(--tag-font-family);
+    font-weight: var(--tag-font-weight);
+    font-size: var(--tag-font-size);
+    line-height: var(--tag-line-height);
+    opacity: var(--tag-opacity, 1); // we don't specify --tag-opacity variable here to let consumers override a default value that we set
+
+    // Size
+    &[size='small'] {
+        --tag-height: var(--tag-height-small);
+        --tag-padding: 0 var(--dt-spacing-a);
+        --tag-border-radius: var(--dt-radius-rounded-a);
+        --tag-font-size: #{p.font-size(--dt-font-caption-size)};
+        --tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
+    }
+
+    &[size='large'] {
+        --tag-height: var(--tag-height-large);
+        --tag-padding: 2px var(--dt-spacing-b);
+        --tag-border-radius: var(--dt-radius-rounded-b);
+        --tag-font-size: #{p.font-size(--dt-font-body-s-size)};
+        --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+    }
+
+    // Variant
+    &[variant='neutral'] {
+        --tag-bg-color: var(--dt-color-container-strong);
+        --tag-color: var(--dt-color-content-default);
+
+        &[isStrong] {
+            --tag-bg-color: var(--dt-color-container-inverse);
+            --tag-color: var(--dt-color-content-inverse);
+        }
+    }
+
+    &[variant='blue'] {
+        --tag-bg-color: var(--dt-color-support-info-02);
+        --tag-color: var(--dt-color-content-default);
+
+        &[isStrong] {
+            --tag-bg-color: var(--dt-color-support-info);
+            --tag-color: var(--dt-color-content-light);
+        }
+    }
+
+    &[variant='green'] {
+        --tag-bg-color: var(--dt-color-support-positive-02);
+        --tag-color: var(--dt-color-content-default);
+
+        &[isStrong] {
+            --tag-bg-color: var(--dt-color-support-positive);
+            --tag-color: var(--dt-color-content-light);
+        }
+    }
+
+    &[variant='yellow'] {
+        --tag-bg-color: var(--dt-color-support-warning-02);
+        --tag-color: var(--dt-color-content-dark);
+
+        &[isStrong] {
+            --tag-bg-color: var(--dt-color-support-warning);
+            --tag-color: var(--dt-color-content-dark);
+        }
+    }
+
+    &[variant='red'] {
+        --tag-bg-color: var(--dt-color-support-error-02);
+        --tag-color: var(--dt-color-content-default);
+
+        &[isStrong] {
+            --tag-bg-color: var(--dt-color-support-error);
+            --tag-color: var(--dt-color-content-light);
+        }
+    }
+
+    &[variant='brand'] {
+        --tag-bg-color: var(--dt-color-support-brand-02);
+        --tag-color: var(--dt-color-content-default);
+    }
+
+    &[variant='neutral-alternative'] {
+        --tag-bg-color: var(--dt-color-container-default);
+        --tag-color: var(--dt-color-content-default);
+    }
+
+    &[variant='outline'] {
+        --tag-bg-color: var(--tag-transparent-bg-color);
+        --tag-color: var(--dt-color-content-default);
+        border: 1px solid var(--dt-color-border-strong);
+
+        &[size='small'] {
+            --tag-padding: 0 3px; // small tag padding minus 1px of the border
+        }
+
+        &[size='large'] {
+            --tag-padding: 1px 7px; // large tag padding minus 1px of the border
+        }
+    }
+
+    &[variant='ghost'] {
+        --tag-bg-color: var(--tag-transparent-bg-color);
+        --tag-color: var(--dt-color-content-default);
+    }
+}
+
+// Used to size an SVG if one is passed in (when not using the component icons)
+::slotted(svg) {
+    display: block;
+    height: var(--icon-size-override);
+    width: var(--icon-size-override);
+}