@justeattakeaway/pie-divider 0.13.8 → 0.13.9

package/custom-elements.json

@@ -76,18 +76,12 @@
             {
               "kind": "field",
               "name": "variant",
-              "type": {
-                "text": "DividerProps['variant']"
-              },
               "privacy": "public",
               "attribute": "variant"
             },
             {
               "kind": "field",
               "name": "orientation",
-              "type": {
-                "text": "DividerProps['orientation']"
-              },
               "privacy": "public",
               "attribute": "orientation"
             }
@@ -95,16 +89,10 @@
           "attributes": [
             {
               "name": "variant",
-              "type": {
-                "text": "DividerProps['variant']"
-              },
               "fieldName": "variant"
             },
             {
               "name": "orientation",
-              "type": {
-                "text": "DividerProps['orientation']"
-              },
               "fieldName": "orientation"
             }
           ],

package/dist/index.d.ts

@@ -24,8 +24,8 @@ export declare const orientations: readonly ["horizontal", "vertical"];
  * @tagname pie-divider
  */
 export declare class PieDivider extends LitElement implements DividerProps {
-    variant: DividerProps['variant'];
-    orientation: DividerProps['orientation'];
+    variant: "default" | "inverse";
+    orientation: "horizontal" | "vertical";
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/index.js

@@ -1,46 +1,48 @@
 import { unsafeCSS as h, LitElement as f, html as u } from "lit";
 import { property as c } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.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 = {
+const b = `*,*: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.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}
+`, y = ["default", "inverse"], P = ["horizontal", "vertical"], o = {
   variant: "default",
   orientation: "horizontal"
 };
-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;
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (n, r, e, t) => {
+  for (var i = t > 1 ? void 0 : t ? _(r, e) : r, a = n.length - 1, v; a >= 0; a--)
+    (v = n[a]) && (i = (t ? v(r, e, i) : v(i)) || i);
+  return t && i && w(r, e, i), i;
 };
 const s = "pie-divider";
-class n extends f {
+class d extends f {
   constructor() {
     super(...arguments), this.variant = o.variant, this.orientation = o.orientation;
   }
   render() {
-    const { variant: r, orientation: t } = this;
+    const { variant: r, orientation: e } = this;
     return u`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
-                class="c-divider"
-                variant=${r}
-                orientation=${t}
-            />`;
+                class="${m({
+      "c-divider": !0,
+      "c-divider--inverse": r === "inverse",
+      "c-divider--vertical": e === "vertical"
+    })}" />`;
   }
 }
-n.styles = h(m);
+d.styles = h(b);
 p([
   c({ type: String }),
-  l(s, b, o.variant)
-], n.prototype, "variant", 2);
+  l(s, y, o.variant)
+], d.prototype, "variant", 2);
 p([
   c({ type: String }),
-  l(s, y, o.orientation)
-], n.prototype, "orientation", 2);
-g(s, n);
+  l(s, P, o.orientation)
+], d.prototype, "orientation", 2);
+g(s, d);
 export {
-  n as PieDivider,
+  d as PieDivider,
   o as defaultProps,
-  y as orientations,
-  b as variants
+  P as orientations,
+  y as variants
 };

package/dist/react.d.ts

@@ -27,8 +27,8 @@ export declare const PieDivider: React_2.ForwardRefExoticComponent<DividerProps
  * @tagname pie-divider
  */
 declare class PieDivider_2 extends LitElement implements DividerProps {
-    variant: DividerProps['variant'];
-    orientation: DividerProps['orientation'];
+    variant: "default" | "inverse";
+    orientation: "horizontal" | "vertical";
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/react.js

@@ -1,9 +1,10 @@
 import * as e from "react";
 import { createComponent as i } from "@lit/react";
 import { PieDivider as r } from "./index.js";
-import { defaultProps as c, orientations as P, variants as f } from "./index.js";
+import { defaultProps as P, orientations as f, variants as D } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-webc-core";
 const t = i({
   displayName: "PieDivider",
@@ -11,10 +12,10 @@ const t = i({
   react: e,
   tagName: "pie-divider",
   events: {}
-}), d = t;
+}), n = t;
 export {
-  d as PieDivider,
-  c as defaultProps,
-  P as orientations,
-  f as variants
+  n as PieDivider,
+  P as defaultProps,
+  f as orientations,
+  D 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.8",
+  "version": "0.13.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs-react.ts

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

package/src/divider.scss

@@ -11,19 +11,11 @@
     height: var(--divider-height);
     background-color: var(--divider-bg-color);
 
-    &[variant='default'] {
-        /* Same as default styles */
-    }
-
-    &[variant='inverse'] {
+    &.c-divider--inverse {
         --divider-bg-color: var(--dt-color-divider-inverse);
     }
 
-    &[orientation='horizontal'] {
-        /* Same as default styles */
-    }
-
-    &[orientation='vertical'] {
+    &.c-divider--vertical {
         --divider-width: 1px;
         --divider-height: 100%;
     }

package/src/index.ts

@@ -1,9 +1,10 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { classMap } from 'lit/directives/class-map.js';
+import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
 import {
-    DividerProps, variants, orientations, defaultProps,
+    type DividerProps, defaultProps, orientations, variants,
 } from './defs';
 
 // Valid values available to consumers
@@ -17,23 +18,26 @@ const componentSelector = 'pie-divider';
 export class PieDivider extends LitElement implements DividerProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant: DividerProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
 
     @property({ type: String })
     @validPropertyValues(componentSelector, orientations, defaultProps.orientation)
-    public orientation : DividerProps['orientation'] = defaultProps.orientation;
+    public orientation = defaultProps.orientation;
 
     render () {
         const { variant, orientation } = this;
 
+        const classes = {
+            'c-divider': true,
+            'c-divider--inverse': variant === 'inverse',
+            'c-divider--vertical': orientation === 'vertical',
+        };
+
         return html`
             <hr
                 data-test-id="pie-divider"
                 aria-hidden="true"
-                class="c-divider"
-                variant=${variant}
-                orientation=${orientation}
-            />`;
+                class="${classMap(classes)}" />`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite