@justeattakeaway/pie-card 0.16.0 → 0.17.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

@@ -14,7 +14,7 @@ export declare interface CardProps {
     /**
      * When true, the card is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * The URL that the card should point to (this will not take effect unless the card is a link).
      */
@@ -30,11 +30,11 @@ export declare interface CardProps {
     /**
      * What style variant the card should be such as default or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
      */
-    isDraggable: boolean;
+    isDraggable?: boolean;
     /**
      * What HTML element the card should be such as `a` or `button`.
      */

package/dist/index.js

@@ -25,9 +25,9 @@ class t extends p {
             <a
                 class="c-card"
                 data-test-id="pie-card"
-                tag=${this.tag}
+                tag=${this.tag || "a"}
                 ?isDraggable="${this.isDraggable}"
-                variant=${this.variant}
+                variant=${this.variant || "default"}
                 ?disabled=${this.disabled}
                 href=${this.href || i}
                 target=${this.target || i}
@@ -70,9 +70,9 @@ class t extends p {
                 <div
                     class="c-card"
                     data-test-id="pie-card"
-                    tag=${e}
+                    tag=${e || "button"}
                     ?isDraggable="${n}"
-                    variant=${o}
+                    variant=${o || "default"}
                     ?disabled=${a}
                     role="button"
                     tabindex="0"

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 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';
 
 export declare type AriaProps = {
@@ -15,7 +15,7 @@ export declare interface CardProps {
     /**
      * When true, the card is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * The URL that the card should point to (this will not take effect unless the card is a link).
      */
@@ -31,11 +31,11 @@ export declare interface CardProps {
     /**
      * What style variant the card should be such as default or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
      */
-    isDraggable: boolean;
+    isDraggable?: boolean;
     /**
      * What HTML element the card should be such as `a` or `button`.
      */
@@ -52,7 +52,7 @@ declare type PaddingValue = typeof spacingTokens[number];
 
 export declare const paddingValues: string[];
 
-export declare const PieCard: ReactWebComponent<PieCard_2, {}>;
+export declare const PieCard: React_2.ForwardRefExoticComponent<CardProps & React_2.RefAttributes<PieCard_2> & React_2.AnchorHTMLAttributes<HTMLAnchorElement> & React_2.ButtonHTMLAttributes<HTMLButtonElement>>;
 
 /**
  * @tagname pie-card

package/dist/react.js

@@ -1,20 +1,20 @@
 import * as a from "react";
 import { createComponent as e } from "@lit/react";
 import { PieCard as r } from "./index.js";
-import { paddingValues as C, tags as c, variants as f } from "./index.js";
+import { paddingValues as C, tags as P, variants as f } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const s = e({
+const t = e({
   displayName: "PieCard",
   elementClass: r,
   react: a,
   tagName: "pie-card",
   events: {}
-});
+}), d = t;
 export {
-  s as PieCard,
+  d as PieCard,
   C as paddingValues,
-  c as tags,
+  P as tags,
   f as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "PIE Design System Card built using Web Components",
   "type": "module",
   "main": "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.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>

package/src/defs.ts

@@ -19,7 +19,7 @@ export interface CardProps {
     /**
      * When true, the card is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
 
     /**
      * The URL that the card should point to (this will not take effect unless the card is a link).
@@ -39,12 +39,12 @@ export interface CardProps {
     /**
      * What style variant the card should be such as default or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
 
     /**
      * Allows the consumer to set draggable css styles (grab/grabbing cursor styles).
      */
-    isDraggable: boolean;
+    isDraggable?: boolean;
 
     /**
      * What HTML element the card should be such as `a` or `button`.

package/src/index.ts

@@ -62,9 +62,9 @@ export class PieCard extends LitElement implements CardProps {
             <a
                 class="c-card"
                 data-test-id="pie-card"
-                tag=${this.tag}
+                tag=${this.tag || 'a'}
                 ?isDraggable="${this.isDraggable}"
-                variant=${this.variant}
+                variant=${this.variant || 'default'}
                 ?disabled=${this.disabled}
                 href=${this.href || nothing}
                 target=${this.target || nothing}
@@ -134,9 +134,9 @@ export class PieCard extends LitElement implements CardProps {
                 <div
                     class="c-card"
                     data-test-id="pie-card"
-                    tag=${tag}
+                    tag=${tag || 'button'}
                     ?isDraggable="${isDraggable}"
-                    variant=${variant}
+                    variant=${variant || 'default'}
                     ?disabled=${disabled}
                     role="button"
                     tabindex="0"

package/src/react.ts

@@ -1,14 +1,19 @@
-
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import { PieCard as PieCardReact } from './index';
+import { PieCard as PieCardLit } from './index';
+import { CardProps } from './defs';
 
 export * from './defs';
 
-export const PieCard = createComponent({
+const PieCardReact = createComponent({
     displayName: 'PieCard',
-    elementClass: PieCardReact,
+    elementClass: PieCardLit,
     react: React,
     tagName: 'pie-card',
     events: {},
 });
+
+type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+export const PieCard = PieCardReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CardProps>
+    & React.RefAttributes<PieCardLit> & ReactBaseType>;