@justeattakeaway/pie-tag 0.3.0 → 0.4.1

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/defs.js",

package/dist/index.d.ts

@@ -21,15 +21,15 @@ export declare interface TagProps {
     /**
      * What style variant the tag should be such as neutral/ghost etc.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
      */
-    isStrong: boolean;
+    isStrong?: boolean;
     /**
      * What size the tag should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
 }
 
 export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];

package/dist/index.js

@@ -22,8 +22,8 @@ class e extends u {
     return s`
             <div
                 class="c-tag"
-                variant=${a}
-                size=${r}
+                variant=${a || "neutral"}
+                size=${r || "large"}
                 ?isStrong=${o}
                 data-test-id="pie-tag"
             >

package/dist/react.d.ts

@@ -1,9 +1,9 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
-export declare const PieTag: ReactWebComponent<PieTag_2, {}>;
+export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_2.RefAttributes<PieTag_2> & ReactBaseType>;
 
 /**
  * @tagname pie-tag
@@ -18,21 +18,23 @@ declare class PieTag_2 extends LitElement implements TagProps {
     static styles: CSSResult;
 }
 
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLSpanElement>;
+
 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];
+    variant?: typeof variants[number];
     /**
      * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
      */
-    isStrong: boolean;
+    isStrong?: boolean;
     /**
      * What size the tag should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
 }
 
 export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"];

package/dist/react.js

@@ -1,19 +1,19 @@
 import * as e from "react";
 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 { sizes as P, variants as T } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const s = t({
+const o = t({
   displayName: "PieTag",
   elementClass: a,
   react: e,
   tagName: "pie-tag",
   events: {}
-});
+}), g = o;
 export {
-  s as PieTag,
-  c as sizes,
-  f as variants
+  g as PieTag,
+  P 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.3.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.8.0",
-    "@justeattakeaway/pie-wrapper-react": "0.12.0",
+    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.16.0"
+    "@justeattakeaway/pie-webc-core": "0.17.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>

package/src/defs.ts

@@ -5,15 +5,15 @@ export interface TagProps {
     /**
      * What style variant the tag should be such as neutral/ghost etc.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
 
     /**
      * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
      */
-    isStrong: boolean;
+    isStrong?: boolean;
 
     /**
      * What size the tag should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
 }

package/src/index.ts

@@ -37,8 +37,8 @@ export class PieTag extends LitElement implements TagProps {
         return html`
             <div
                 class="c-tag"
-                variant=${variant}
-                size=${size}
+                variant=${variant || 'neutral'}
+                size=${size || 'large'}
                 ?isStrong=${isStrong}
                 data-test-id="pie-tag"
             >

package/src/react.ts

@@ -1,14 +1,19 @@
-
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import { PieTag as PieTagReact } from './index';
+import { PieTag as PieTagLit } from './index';
+import { TagProps } from './defs';
 
 export * from './defs';
 
-export const PieTag = createComponent({
+const PieTagReact = createComponent({
     displayName: 'PieTag',
-    elementClass: PieTagReact,
+    elementClass: PieTagLit,
     react: React,
     tagName: 'pie-tag',
     events: {},
 });
+
+type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>
+
+export const PieTag = PieTagReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps>
+    & React.RefAttributes<PieTagLit> & ReactBaseType>;