@justeattakeaway/pie-tag 0.9.5 → 0.9.7

package/README.md

@@ -20,16 +20,14 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-tag` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-tag
+npm i @justeattakeaway/pie-tag
 
-# yarn
-$ yarn add @justeattakeaway/pie-tag
+yarn add @justeattakeaway/pie-tag
 ```
 
 ## Documentation
 
-Visit  [Tag | PIE Design System](https://pie.design/components/tag/overview) to view more information on this component.
+Visit  [Tag | PIE Design System](https://pie.design/components/tag) to view more information on this component.
 
 ## Questions
 
@@ -37,4 +35,4 @@ Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/
 
 ## 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).
+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

@@ -27,6 +27,14 @@
             "text": "['small', 'large']"
           },
           "default": "['small', 'large']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    variant: 'neutral',\n    size: 'large',\n    isStrong: false,\n    isDimmed: false,\n}"
         }
       ],
       "exports": [
@@ -45,6 +53,14 @@
             "name": "sizes",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -74,7 +90,6 @@
                 "text": "TagProps['variant']"
               },
               "privacy": "public",
-              "default": "'neutral'",
               "attribute": "variant"
             },
             {
@@ -84,27 +99,18 @@
                 "text": "TagProps['size']"
               },
               "privacy": "public",
-              "default": "'large'",
               "attribute": "size"
             },
             {
               "kind": "field",
               "name": "isStrong",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isStrong"
             },
             {
               "kind": "field",
               "name": "isDimmed",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isDimmed"
             }
           ],
@@ -114,7 +120,6 @@
               "type": {
                 "text": "TagProps['variant']"
               },
-              "default": "'neutral'",
               "fieldName": "variant"
             },
             {
@@ -122,23 +127,14 @@
               "type": {
                 "text": "TagProps['size']"
               },
-              "default": "'large'",
               "fieldName": "size"
             },
             {
               "name": "isStrong",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isStrong"
             },
             {
               "name": "isDimmed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isDimmed"
             }
           ],

package/dist/index.d.ts

@@ -1,7 +1,12 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<TagProps, 'variant' | 'size' | 'isStrong' | 'isDimmed'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-tag
  * @slot icon - The icon slot

package/dist/index.js

@@ -1,57 +1,63 @@
-import { unsafeCSS as p, LitElement as u, html as d, nothing as f } from "lit";
-import { property as n } from "lit/decorators.js";
-import { validPropertyValues as v, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
+import { unsafeCSS as f, LitElement as u, html as v, nothing as b } from "lit";
+import { property as i } from "lit/decorators.js";
+import { validPropertyValues as p, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
 const h = `*,*:after,*:before{box-sizing:inherit}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-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;--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);padding:var(--tag-padding-block) var(--tag-padding-inline);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)}.c-tag[size=small]{--tag-padding-block: 0;--tag-padding-inline: 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[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-inverse)}.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-inverse)}.c-tag[variant=yellow]{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.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);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag[variant=ghost]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag[isDimmed]{opacity:.5}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
-`, m = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], y = ["small", "large"];
-var z = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (l, r, o, a) => {
-  for (var t = a > 1 ? void 0 : a ? S(r, o) : r, g = l.length - 1, c; g >= 0; g--)
-    (c = l[g]) && (t = (a ? c(r, o, t) : c(t)) || t);
-  return a && t && z(r, o, t), t;
+`, y = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], z = ["small", "large"], e = {
+  variant: "neutral",
+  size: "large",
+  isStrong: !1,
+  isDimmed: !1
 };
-const s = "pie-tag";
-class e extends u {
+var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (g, o, r, a) => {
+  for (var t = a > 1 ? void 0 : a ? w(o, r) : o, c = g.length - 1, s; c >= 0; c--)
+    (s = g[c]) && (t = (a ? s(o, r, t) : s(t)) || t);
+  return a && t && S(o, r, t), t;
+};
+const d = "pie-tag";
+class n extends u {
   constructor() {
-    super(...arguments), this.variant = "neutral", this.size = "large", this.isStrong = !1, this.isDimmed = !1;
+    super(...arguments), this.variant = e.variant, this.size = e.size, this.isStrong = e.isStrong, this.isDimmed = e.isDimmed;
   }
   render() {
     const {
-      variant: r,
-      size: o,
+      variant: o,
+      size: r,
       isStrong: a,
       isDimmed: t
     } = this;
-    return d`
+    return v`
             <div
                 class="c-tag"
-                variant=${r || "neutral"}
-                size=${o || "large"}
+                variant=${o}
+                size=${r}
                 ?isStrong=${a}
                 ?isDimmed=${t}
                 data-test-id="pie-tag"
             >
-                ${o === "large" ? d`<slot name="icon"></slot>` : f}
+                ${r === "large" ? v`<slot name="icon"></slot>` : b}
                 <slot></slot>
             </div>`;
   }
 }
-e.styles = p(h);
-i([
-  n({ type: String }),
-  v(s, m, "neutral")
-], e.prototype, "variant", 2);
-i([
-  n({ type: String }),
-  v(s, y, "large")
-], e.prototype, "size", 2);
-i([
-  n({ type: Boolean })
-], e.prototype, "isStrong", 2);
-i([
-  n({ type: Boolean })
-], e.prototype, "isDimmed", 2);
-b(s, e);
+n.styles = f(h);
+l([
+  i({ type: String }),
+  p(d, y, e.variant)
+], n.prototype, "variant", 2);
+l([
+  i({ type: String }),
+  p(d, z, e.size)
+], n.prototype, "size", 2);
+l([
+  i({ type: Boolean })
+], n.prototype, "isStrong", 2);
+l([
+  i({ type: Boolean })
+], n.prototype, "isDimmed", 2);
+m(d, n);
 export {
-  e as PieTag,
-  y as sizes,
-  m as variants
+  n as PieTag,
+  e as defaultProps,
+  z as sizes,
+  y as variants
 };

package/dist/react.d.ts

@@ -1,8 +1,13 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<TagProps, 'variant' | 'size' | 'isStrong' | 'isDimmed'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
 
 /**

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieTag as a } from "./index.js";
-import { sizes as P, variants as T } from "./index.js";
+import { defaultProps as P, sizes as f, variants as T } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
@@ -14,6 +14,7 @@ const o = t({
 }), g = o;
 export {
   g as PieTag,
-  P as sizes,
+  P as defaultProps,
+  f as sizes,
   T as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tag",
   "description": "PIE Design System Tag built using Web Components",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "@justeattakeaway/pie-icons-webc": "0.24.1",
+    "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const variants = ['neutral-alternative', 'neutral', 'outline', 'ghost', 'blue', 'green', 'yellow', 'red', 'brand'] as const;
 export const sizes = ['small', 'large'] as const;
 
@@ -22,3 +24,12 @@ export interface TagProps {
      */
     size?: typeof sizes[number];
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<TagProps, 'variant' | 'size' | 'isStrong' | 'isDimmed'>;
+
+export const defaultProps: DefaultProps = {
+    variant: 'neutral',
+    size: 'large',
+    isStrong: false,
+    isDimmed: false,
+};

package/src/index.ts

@@ -4,7 +4,9 @@ import {
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './tag.scss?inline';
-import { TagProps, variants, sizes } from './defs';
+import {
+    TagProps, variants, sizes, defaultProps,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -18,18 +20,18 @@ const componentSelector = 'pie-tag';
  */
 export class PieTag extends LitElement implements TagProps {
     @property({ type: String })
-    @validPropertyValues(componentSelector, variants, 'neutral')
-    public variant: TagProps['variant'] = 'neutral';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: TagProps['variant'] = defaultProps.variant;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, sizes, 'large')
-    public size : TagProps['size'] = 'large';
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size : TagProps['size'] = defaultProps.size;
 
     @property({ type: Boolean })
-    public isStrong = false;
+    public isStrong = defaultProps.isStrong;
 
     @property({ type: Boolean })
-    public isDimmed = false;
+    public isDimmed = defaultProps.isDimmed;
 
     render () {
         const {
@@ -41,8 +43,8 @@ export class PieTag extends LitElement implements TagProps {
         return html`
             <div
                 class="c-tag"
-                variant=${variant || 'neutral'}
-                size=${size || 'large'}
+                variant=${variant}
+                size=${size}
                 ?isStrong=${isStrong}
                 ?isDimmed=${isDimmed}
                 data-test-id="pie-tag"