@justeattakeaway/pie-button 0.5.0 → 0.6.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-@justeattakeaway/pie-button:build: cache hit, replaying output 21df156a0b013060
+@justeattakeaway/pie-button:build: cache hit, replaying output 95e9489059d5a6b7
 @justeattakeaway/pie-button:build: vite v4.0.4 building for production...
 @justeattakeaway/pie-button:build: transforming...
 @justeattakeaway/pie-button:build: ✓ 4 modules transformed.
 @justeattakeaway/pie-button:build: rendering chunks...
 @justeattakeaway/pie-button:build: computing gzip size...
-@justeattakeaway/pie-button:build: dist/pie-button.js  2.73 kB │ gzip: 1.29 kB
+@justeattakeaway/pie-button:build: dist/pie-button.js  3.52 kB │ gzip: 1.49 kB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+### Patch Changes
+
+- [Changed] - Replaced hard-coded font values with scss variables ([#226](https://github.com/justeattakeaway/pie/pull/226)) by [@LTurns](https://github.com/LTurns)
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/pie-button.js

@@ -1,65 +1,70 @@
-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
             </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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/pie-button.js",

package/src/button.scss

@@ -5,56 +5,106 @@
     border: none;
     font-family: dt.$font-interactive-m-family;
     font-weight: dt.$font-interactive-m-weight;
-}
 
-// TODO - Use latest design tokens for font size and line height
-//        once fozzie has been updated to handle them.
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+
+    &:focus-visible {
+        outline: 2px solid dt.$color-focus;
+    }
+}
 
 .o-btn--xsmall {
     padding: 6px dt.$spacing-b;
     min-height: 32px;
-    font-size: 14px;
-    line-height: 20px;
+    font-size: dt.$font-size-14 * 1px;
+    line-height: dt.$font-size-14-line-height * 1px;
 }
 
 .o-btn--small {
     padding: 8px dt.$spacing-d;
     min-height: 40px;
-    font-size: 19px;
-    line-height: 28px;
+    font-size: dt.$font-size-19 * 1px;
+    line-height: dt.$font-size-19-line-height * 1px;
 }
 
 .o-btn--medium {
     padding: 10px dt.$spacing-e;
     min-height: 48px;
-    font-size: 20px;
-    line-height: 28px;
+    font-size: dt.$font-size-20 * 1px;
+    line-height: dt.$font-size-20-line-height * 1px;
 }
 
 .o-btn--large {
     padding: 14px dt.$spacing-e;
     min-height: 56px;
-    font-size: 20px;
-    line-height: 28px;
+    font-size: dt.$font-size-20 * 1px;
+    line-height: dt.$font-size-20-line-height * 1px;
 }
 
 .o-btn--primary {
     background-color: dt.$color-interactive-brand;
     color: dt.$color-content-interactive-primary;
+
+    &:hover {
+        background-color: darken(dt.$color-interactive-brand, dt.$color-hover-01);
+    }
+
+    &:active {
+        background-color: darken(dt.$color-interactive-brand, dt.$color-active-01);
+    }
 }
 
 .o-btn--secondary {
     background-color: dt.$color-interactive-secondary;
     color: dt.$color-content-interactive-secondary;
+
+    &:hover {
+        background-color: darken(dt.$color-interactive-secondary, dt.$color-hover-01);
+    }
+
+    &:active {
+        background-color: darken(dt.$color-interactive-secondary, dt.$color-active-01);
+    }
 }
 
 .o-btn--outline {
-    border: 1px solid dt.$color-border-strong;
+    outline: 1px solid dt.$color-border-strong;
     background-color: dt.$color-container-default;
     color: dt.$color-content-interactive-tertiary;
+
+    &:hover {
+        background-color: darken(dt.$color-container-default, dt.$color-hover-01);
+    }
+
+    &:active {
+        background-color: darken(dt.$color-container-default, dt.$color-active-01);
+    }
 }
 
 .o-btn--ghost {
     background-color: dt.$color-container-default;
     color: dt.$color-content-link;
+
+    &:hover {
+        background-color: darken(dt.$color-container-default, dt.$color-hover-01);
+    }
+
+    &:active {
+        background-color: darken(dt.$color-container-default, dt.$color-active-01);
+    }
 }
+
+.o-btn.o-btn--is-disabled {
+    background-color: dt.$color-disabled-01;
+    color: dt.$color-content-disabled;
+    outline: 1px solid dt.$color-disabled-01;
+
+    cursor: default;
+
+    &.o-btn--ghost {
+        background-color: dt.$color-container-default;
+        outline: none;
+    }
+}

package/src/index.ts

@@ -23,23 +23,28 @@ export class PieButton extends LitElement {
     @validPropertyValues(Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
     variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
 
+    @property()
+    disabled : boolean = false;
+
     render () {
-        const { size, type, variant } = this;
+        const { size, type, variant, disabled } = this;
 
         const classes = {
             'o-btn': true,
             [`o-btn--${size}`]: size,
-            [`o-btn--${variant}`]: variant
+            [`o-btn--${variant}`]: variant,
+            'o-btn--is-disabled': disabled,
         };
 
         return html`
             <button
                 class=${classMap(classes)}
-                type=${type}>
+                type=${type}
+                ?disabled=${disabled}>
                 I'm a PIE button
             </button>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
-}
+}