@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

CHANGELOG.md

 # Changelog
 
+## 0.6.0
+
+### Minor Changes
+
+- [Added] - state styling to button (focus/hover/active/disabled) ([#234](https://github.com/justeattakeaway/pie/pull/234)) by [@raoufswe](https://github.com/raoufswe)
+
 ## 0.5.1
@@ -4,0 +10,0 @@

dist/pie-button.js

@@ -1,40 +0,42 @@
-import { unsafeCSS as d, LitElement as m, html as h } from "lit";
-import { classMap as x } from "lit/directives/class-map.js";
-import { property as b, customElement as g } from "lit/decorators.js";
-const v = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--outline{border:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--ghost{background-color:#fff;color:#242e30}
-`, f = (t, r) => function(e, n) {
-  const o = `_${n}`;
-  Object.defineProperty(e, n, {
+import { unsafeCSS as f, LitElement as g, html as h } from "lit";
+import { classMap as m } from "lit/directives/class-map.js";
+import { property as p, customElement as v } from "lit/decorators.js";
+const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{outline:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
+`, u = (o, r) => function(t, n) {
+  const e = `_${n}`;
+  Object.defineProperty(t, n, {
     get() {
-      return e[o];
+      return t[e];
     },
     set(i) {
-      const p = e[o];
-      t.includes(i) ? e[o] = i : (console.error(
+      const l = t[e];
+      o.includes(i) ? t[e] = i : (console.error(
         `[pie-button] Invalid value "${i}" provided for property "${n}".`,
-        `Must be one of: ${t.join(" | ")}.`,
+        `Must be one of: ${o.join(" | ")}.`,
         `Falling back to default value: "${r}"`
-      ), e[o] = r), this.requestUpdate(n, p);
+      ), t[e] = r), this.requestUpdate(n, l);
     }
   });
 };
-var l = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL = "small", t.MEDIUM = "medium", t.LARGE = "large", t))(l || {}), a = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(a || {}), u = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(u || {}), M = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (t, r, e, n) => {
-  for (var o = n > 1 ? void 0 : n ? y(r, e) : r, i = t.length - 1, p; i >= 0; i--)
-    (p = t[i]) && (o = (n ? p(r, e, o) : p(o)) || o);
-  return n && o && M(r, e, o), o;
+var c = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(c || {}), b = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(b || {}), d = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(d || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (o, r, t, n) => {
+  for (var e = n > 1 ? void 0 : n ? M(r, t) : r, i = o.length - 1, l; i >= 0; i--)
+    (l = o[i]) && (e = (n ? l(r, t, e) : l(e)) || e);
+  return n && e && y(r, t, e), e;
 };
-let s = class extends m {
+let s = class extends g {
   constructor() {
-    super(...arguments), this.size = l.MEDIUM, this.type = a.SUBMIT, this.variant = u.PRIMARY;
+    super(...arguments), this.size = c.MEDIUM, this.type = b.SUBMIT, this.variant = d.PRIMARY, this.disabled = !1;
   }
   render() {
-    const { size: t, type: r, variant: e } = this, n = {
+    const { size: o, type: r, variant: t, disabled: n } = this, e = {
       "o-btn": !0,
+      [`o-btn--${o}`]: o,
       [`o-btn--${t}`]: t,
-      [`o-btn--${e}`]: e
+      "o-btn--is-disabled": n
     };
     return h`
             <button
-                class=${x(n)}
-                type=${r}>
+                class=${m(e)}
+                type=${r}
+                ?disabled=${n}>
                 I'm a PIE button
@@ -44,23 +46,26 @@ </button>`;
 };
-s.styles = d(v);
-c([
-  b(),
-  f(Object.values(l), l.MEDIUM)
+s.styles = f(x);
+a([
+  p(),
+  u(Object.values(c), c.MEDIUM)
 ], s.prototype, "size", 2);
-c([
-  b(),
-  f(Object.values(a), a.SUBMIT)
+a([
+  p(),
+  u(Object.values(b), b.SUBMIT)
 ], s.prototype, "type", 2);
-c([
-  b(),
-  f(Object.values(u), u.PRIMARY)
+a([
+  p(),
+  u(Object.values(d), d.PRIMARY)
 ], s.prototype, "variant", 2);
-s = c([
-  g("pie-button")
+a([
+  p()
+], s.prototype, "disabled", 2);
+s = a([
+  v("pie-button")
 ], s);
 export {
-  l as BUTTON_SIZE,
-  a as BUTTON_TYPE,
-  u as BUTTON_VARIANT,
+  c as BUTTON_SIZE,
+  b as BUTTON_TYPE,
+  d as BUTTON_VARIANT,
   s as PieButton
 };

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "PIE design system button built using web components",
@@ -5,0 +5,0 @@ "type": "module",

src/index.ts

@@ -26,4 +26,7 @@ import { LitElement, html, unsafeCSS } from 'lit';
 
+    @property()
+    disabled : boolean = false;
+
     render () {
-        const { size, type, variant } = this;
+        const { size, type, variant, disabled } = this;
 
@@ -33,3 +36,4 @@ const classes = {
             [`o-btn--${size}`]: size,
-            [`o-btn--${variant}`]: variant
+            [`o-btn--${variant}`]: variant,
+            'o-btn--is-disabled': disabled,
         };
@@ -40,3 +44,4 @@
                 class=${classMap(classes)}
-                type=${type}>
+                type=${type}
+                ?disabled=${disabled}>
                 I'm a PIE button
@@ -48,2 +53,2 @@ </button>`;
     static styles = unsafeCSS(styles);
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15350

increased by18.56%

Lines of code

220

increased by5.26%

No dependency changes