@justeattakeaway/pie-divider 0.13.4 → 0.13.6

package/README.md

@@ -20,16 +20,14 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-divider` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-divider
+npm i @justeattakeaway/pie-divider
 
-# yarn
-$ yarn add @justeattakeaway/pie-divider
+yarn add @justeattakeaway/pie-divider
 ```
 
 ## Documentation
 
-Visit  [Divider | PIE Design System](https://pie.design/components/divider/overview) to view more information on this component.
+Visit  [Divider | PIE Design System](https://pie.design/components/divider) to view more information on this component.
 
 ## Questions
 

package/custom-elements.json

@@ -27,6 +27,14 @@
             "text": "['horizontal', 'vertical']"
           },
           "default": "['horizontal', 'vertical']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    variant: 'default',\n    orientation: 'horizontal',\n}"
         }
       ],
       "exports": [
@@ -45,6 +53,14 @@
             "name": "orientations",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -64,7 +80,6 @@
                 "text": "DividerProps['variant']"
               },
               "privacy": "public",
-              "default": "'default'",
               "attribute": "variant"
             },
             {
@@ -74,7 +89,6 @@
                 "text": "DividerProps['orientation']"
               },
               "privacy": "public",
-              "default": "'horizontal'",
               "attribute": "orientation"
             }
           ],
@@ -84,7 +98,6 @@
               "type": {
                 "text": "DividerProps['variant']"
               },
-              "default": "'default'",
               "fieldName": "variant"
             },
             {
@@ -92,7 +105,6 @@
               "type": {
                 "text": "DividerProps['orientation']"
               },
-              "default": "'horizontal'",
               "fieldName": "orientation"
             }
           ],

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<DividerProps, 'variant' | 'orientation'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare interface DividerProps {
     /**
      * What style variant the divider should be such as default or vertical.

package/dist/index.js

@@ -1,42 +1,46 @@
-import { unsafeCSS as h, LitElement as p, html as f } from "lit";
-import { property as s } from "lit/decorators.js";
-import { validPropertyValues as l, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
-const g = `*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
-`, m = ["default", "inverse"], b = ["horizontal", "vertical"];
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (d, r, e, t) => {
-  for (var i = t > 1 ? void 0 : t ? w(r, e) : r, n = d.length - 1, a; n >= 0; n--)
-    (a = d[n]) && (i = (t ? a(r, e, i) : a(i)) || i);
-  return t && i && y(r, e, i), i;
+import { unsafeCSS as h, LitElement as f, html as u } from "lit";
+import { property as c } from "lit/decorators.js";
+import { validPropertyValues as l, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+const m = `*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
+`, b = ["default", "inverse"], y = ["horizontal", "vertical"], o = {
+  variant: "default",
+  orientation: "horizontal"
 };
-const v = "pie-divider";
-class o extends p {
+var P = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (a, r, t, e) => {
+  for (var i = e > 1 ? void 0 : e ? w(r, t) : r, d = a.length - 1, v; d >= 0; d--)
+    (v = a[d]) && (i = (e ? v(r, t, i) : v(i)) || i);
+  return e && i && P(r, t, i), i;
+};
+const s = "pie-divider";
+class n extends f {
   constructor() {
-    super(...arguments), this.variant = "default", this.orientation = "horizontal";
+    super(...arguments), this.variant = o.variant, this.orientation = o.orientation;
   }
   render() {
-    const { variant: r, orientation: e } = this;
-    return f`
+    const { variant: r, orientation: t } = this;
+    return u`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
                 class="c-divider"
-                variant=${r || "default"}
-                orientation=${e || "horizontal"}
+                variant=${r}
+                orientation=${t}
             />`;
   }
 }
-o.styles = h(g);
-c([
-  s({ type: String }),
-  l(v, m, "default")
-], o.prototype, "variant", 2);
-c([
-  s({ type: String }),
-  l(v, b, "horizontal")
-], o.prototype, "orientation", 2);
-u(v, o);
+n.styles = h(m);
+p([
+  c({ type: String }),
+  l(s, b, o.variant)
+], n.prototype, "variant", 2);
+p([
+  c({ type: String }),
+  l(s, y, o.orientation)
+], n.prototype, "orientation", 2);
+g(s, n);
 export {
-  o as PieDivider,
-  b as orientations,
-  m as variants
+  n as PieDivider,
+  o as defaultProps,
+  y as orientations,
+  b 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<DividerProps, 'variant' | 'orientation'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare interface DividerProps {
     /**
      * What style variant the divider should be such as default or vertical.

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as i } from "@lit/react";
 import { PieDivider as r } from "./index.js";
-import { orientations as c, variants as D } from "./index.js";
+import { defaultProps as c, orientations as P, variants as f } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
@@ -11,9 +11,10 @@ const t = i({
   react: e,
   tagName: "pie-divider",
   events: {}
-}), n = t;
+}), d = t;
 export {
-  n as PieDivider,
-  c as orientations,
-  D as variants
+  d as PieDivider,
+  c as defaultProps,
+  P as orientations,
+  f as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.13.4",
+  "version": "0.13.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,11 +37,11 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "@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 = ['default', 'inverse'] as const;
 export const orientations = ['horizontal', 'vertical'] as const;
 
@@ -11,3 +13,10 @@ export interface DividerProps {
      */
    orientation?: typeof orientations[number];
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<DividerProps, 'variant' | 'orientation'>;
+
+export const defaultProps: DefaultProps = {
+    variant: 'default',
+    orientation: 'horizontal',
+};

package/src/index.ts

@@ -2,7 +2,9 @@ import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
-import { DividerProps, variants, orientations } from './defs';
+import {
+    DividerProps, variants, orientations, defaultProps,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -14,12 +16,12 @@ const componentSelector = 'pie-divider';
  */
 export class PieDivider extends LitElement implements DividerProps {
     @property({ type: String })
-    @validPropertyValues(componentSelector, variants, 'default')
-    public variant: DividerProps['variant'] = 'default';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: DividerProps['variant'] = defaultProps.variant;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, orientations, 'horizontal')
-    public orientation : DividerProps['orientation'] = 'horizontal';
+    @validPropertyValues(componentSelector, orientations, defaultProps.orientation)
+    public orientation : DividerProps['orientation'] = defaultProps.orientation;
 
     render () {
         const { variant, orientation } = this;
@@ -29,8 +31,8 @@ export class PieDivider extends LitElement implements DividerProps {
                 data-test-id="pie-divider"
                 aria-hidden="true"
                 class="c-divider"
-                variant=${variant || 'default'}
-                orientation=${orientation || 'horizontal'}
+                variant=${variant}
+                orientation=${orientation}
             />`;
     }