@justeattakeaway/pie-button 0.4.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-@justeattakeaway/pie-button:build: cache hit, replaying output 4b675d127813f9f5
+@justeattakeaway/pie-button:build: cache hit, replaying output 21df156a0b013060
 @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  6.70 kB │ gzip: 2.18 kB
+@justeattakeaway/pie-button:build: dist/pie-button.js  2.73 kB │ gzip: 1.29 kB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- [Changed] - Bring button styles into the component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+- [Added] - Size property to pie-button component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+- [Removed] - index.html file in favour of Storybook ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
 ## 0.4.0
 
 ### Minor Changes

package/declaration.d.ts

@@ -3,7 +3,6 @@ declare module '*.scss' {
     export default content;
 }
 
-
 declare module '*.scss?inline' {
     const content: Record<string, string>;
     export default content;

package/dist/pie-button.js

@@ -1,59 +1,65 @@
-import { unsafeCSS as u, LitElement as g, html as f } from "lit";
-import { classMap as m } from "lit/directives/class-map.js";
-import { property as c, customElement as h } from "lit/decorators.js";
-const v = `@charset "UTF-8";.o-btn--icon{background-color:transparent;background-repeat:no-repeat;border:0;direction:ltr;display:block;overflow:hidden;text-align:left;text-indent:-999em}.o-btn--icon br{display:none}@keyframes skeleton-gradient{0%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.c-spinner-wrapper{position:absolute;right:0}.c-spinner{border:3px solid #f36805;border-top:3px solid rgba(243,109,0,.2);border-right:3px solid rgba(243,109,0,.2)}.c-spinner{margin-right:20px;border-radius:50%;animation:spin 1s linear 0s infinite;width:20px;height:20px}.c-spinner{margin:0 auto;position:absolute;left:calc(50% - 10px);top:calc(50% - 10px)}.o-btn{display:inline-block;vertical-align:middle;font-size:20px;font-size:1.25rem;line-height:1.4;cursor:pointer;margin:0;padding:10px 24px;text-align:center;font-weight:700;background-color:#f36805;border-radius:50rem;border:1px solid transparent;user-select:none;color:#fff;text-decoration:none}.o-btn:focus{box-shadow:0 0 0 2px #4996fd}.o-btn:hover{background-color:#df5f05}.o-btn:active{background-color:#b74e04}.o-btn:hover:not(.o-btn--link),.o-btn:active:not(.o-btn--link){outline:0}.o-btn,.o-btn:hover,.o-btn:active,.o-btn:focus,.o-btn:visited{text-decoration:none}p+.o-btn{margin-top:16px}.o-btn .note{display:none}@media (min-width: 48em){.o-btn .note{display:block}}.o-btn[type=submit]{margin-top:16px}.o-btn--primary{background-color:#f36805}.o-btn--primary,.o-btn--primary:link,.o-btn--primary:visited{color:#fff}.o-btn--primary:hover,.o-btn--primary:active,.o-btn--primary:focus{color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active,.o-btn--primary.o-btn--loading{background-color:#b74e04}.o-btn--primary .c-spinner{border:3px solid #fff;border-top:3px solid rgba(255,255,255,.35);border-right:3px solid rgba(255,255,255,.35)}.o-btn--primary.o-btn--sizeSmall,.o-btn--primary.o-btn--sizeXSmall{background-color:#262626}.o-btn--primary.o-btn--sizeSmall:hover,.o-btn--primary.o-btn--sizeXSmall:hover{background-color:#3a3a3a}.o-btn--primary.o-btn--sizeSmall:active,.o-btn--primary.o-btn--sizeSmall.o-btn--loading,.o-btn--primary.o-btn--sizeXSmall:active,.o-btn--primary.o-btn--sizeXSmall.o-btn--loading{background-color:#595959}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover,.o-btn--secondary:active,.o-btn--secondary:focus{color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active,.o-btn--secondary.o-btn--loading{background-color:#dcd4cd}.o-btn--secondary .c-spinner{border:3px solid #242e30;border-top:3px solid rgba(36,46,48,.35);border-right:3px solid rgba(36,46,48,.35)}.o-btn--outline{background-color:transparent;color:#303d3f;border-color:#efedea}.o-btn--outline:hover,.o-btn--outline:active,.o-btn--outline:focus{color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active,.o-btn--outline.o-btn--loading{background-color:#e0e0e0}.o-btn--outline .c-spinner{border:3px solid #303d3f;border-top:3px solid rgba(48,61,63,.35);border-right:3px solid rgba(48,61,63,.35)}.o-btn--ghost{background-color:transparent;color:#242e30}.o-btn--ghost:hover,.o-btn--ghost:active,.o-btn--ghost:focus{color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active,.o-btn--ghost.o-btn--loading{background-color:#e0e0e0}.o-btn--ghost .c-spinner{border:3px solid #242e30;border-top:3px solid rgba(36,46,48,.35);border-right:3px solid rgba(36,46,48,.35)}.o-btn--sizeLarge{padding:14px 24px}.o-btn--sizeSmall{font-size:16px;font-size:1rem;line-height:1.5;padding:8px 16px}.o-btn--sizeXSmall{font-size:14px;font-size:.875rem;line-height:1.43;padding:6px 8px}.o-btn--icon{background-color:transparent;padding:0}.o-btn--icon:hover{background-color:transparent}input[type=submit].o-btn--block,input[type=reset].o-btn--block,input[type=button].o-btn--block{width:100%}.o-btn--fullWidth{display:block;width:100%}.o-btn--fullWidth+.o-btn--fullWidth{margin-top:8px}.o-btn--disabled,.o-btn.disabled,.o-btn.is-disabled,.o-btn[disabled]{cursor:not-allowed;color:#8c999b}.o-btn--disabled,.o-btn--disabled:hover,.o-btn.disabled,.o-btn.disabled:hover,.o-btn.is-disabled,.o-btn.is-disabled:hover,.o-btn[disabled],.o-btn[disabled]:hover{background-color:#efedea;color:#8c999b}.o-btn--disabled.o-btn--link,.o-btn.disabled.o-btn--link,.o-btn.is-disabled.o-btn--link,.o-btn[disabled].o-btn--link{background-color:transparent}.o-btn--link{border:0;background-color:transparent;padding:0;margin:0;color:#242e30;font-weight:700;text-decoration:underline}.o-btn--link:hover{cursor:pointer;color:#1b2324;background-color:transparent}.o-btn--link:active,.o-btn--link:focus{color:#0a0c0d;background-color:transparent}.o-btn--link .c-spinner{border:3px solid #242e30;border-top:3px solid rgba(36,46,48,.35);border-right:3px solid rgba(36,46,48,.35)}
-`, p = (o, r) => function(t, e) {
-  const n = `_${e}`;
-  Object.defineProperty(t, e, {
+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, {
     get() {
-      return t[n];
+      return e[o];
     },
     set(i) {
-      const b = t[n];
-      o.includes(i) ? t[n] = i : (console.error(
-        `[pie-button] Invalid value "${i}" provided for property "${e}".`,
-        `Must be one of: ${o.join(" | ")}.`,
+      const p = e[o];
+      t.includes(i) ? e[o] = i : (console.error(
+        `[pie-button] Invalid value "${i}" provided for property "${n}".`,
+        `Must be one of: ${t.join(" | ")}.`,
         `Falling back to default value: "${r}"`
-      ), t[n] = r), this.requestUpdate(e, b);
+      ), e[o] = r), this.requestUpdate(n, p);
     }
   });
 };
-var l = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(l || {}), d = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(d || {}), y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (o, r, t, e) => {
-  for (var n = e > 1 ? void 0 : e ? x(r, t) : r, i = o.length - 1, b; i >= 0; i--)
-    (b = o[i]) && (n = (e ? b(r, t, n) : b(n)) || n);
-  return e && n && y(r, t, n), n;
+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;
 };
-let a = class extends g {
+let s = class extends m {
   constructor() {
-    super(...arguments), this.type = d.SUBMIT, this.variant = l.PRIMARY;
+    super(...arguments), this.size = l.MEDIUM, this.type = a.SUBMIT, this.variant = u.PRIMARY;
   }
   render() {
-    const { type: o, variant: r } = this, t = m({
-      ["o-btn"]: !0,
-      [`o-btn--${r}`]: r
-    });
-    return f`
+    const { size: t, type: r, variant: e } = this, n = {
+      "o-btn": !0,
+      [`o-btn--${t}`]: t,
+      [`o-btn--${e}`]: e
+    };
+    return h`
             <button
-                class="${t}"
-                type=${o}>
+                class=${x(n)}
+                type=${r}>
                 I'm a PIE button
             </button>`;
   }
 };
-a.styles = u(v);
-s([
-  c(),
-  p(Object.values(d), d.SUBMIT)
-], a.prototype, "type", 2);
-s([
-  c(),
-  p(Object.values(l), l.PRIMARY)
-], a.prototype, "variant", 2);
-a = s([
-  h("pie-button")
-], a);
+s.styles = d(v);
+c([
+  b(),
+  f(Object.values(l), l.MEDIUM)
+], s.prototype, "size", 2);
+c([
+  b(),
+  f(Object.values(a), a.SUBMIT)
+], s.prototype, "type", 2);
+c([
+  b(),
+  f(Object.values(u), u.PRIMARY)
+], s.prototype, "variant", 2);
+s = c([
+  g("pie-button")
+], s);
 export {
-  d as BUTTON_TYPE,
-  l as BUTTON_VARIANT,
-  a as PieButton
+  l as BUTTON_SIZE,
+  a as BUTTON_TYPE,
+  u as BUTTON_VARIANT,
+  s as PieButton
 };

package/package.json

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

package/src/button.scss

@@ -1,3 +1,60 @@
-@use '@justeat/fozzie/src/scss/fozzie' as f;
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
 
-@include f.buttons();
+.o-btn {
+    border-radius: dt.$radius-rounded-e;
+    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.
+
+.o-btn--xsmall {
+    padding: 6px dt.$spacing-b;
+    min-height: 32px;
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.o-btn--small {
+    padding: 8px dt.$spacing-d;
+    min-height: 40px;
+    font-size: 19px;
+    line-height: 28px;
+}
+
+.o-btn--medium {
+    padding: 10px dt.$spacing-e;
+    min-height: 48px;
+    font-size: 20px;
+    line-height: 28px;
+}
+
+.o-btn--large {
+    padding: 14px dt.$spacing-e;
+    min-height: 56px;
+    font-size: 20px;
+    line-height: 28px;
+}
+
+.o-btn--primary {
+    background-color: dt.$color-interactive-brand;
+    color: dt.$color-content-interactive-primary;
+}
+
+.o-btn--secondary {
+    background-color: dt.$color-interactive-secondary;
+    color: dt.$color-content-interactive-secondary;
+}
+
+.o-btn--outline {
+    border: 1px solid dt.$color-border-strong;
+    background-color: dt.$color-container-default;
+    color: dt.$color-content-interactive-tertiary;
+}
+
+.o-btn--ghost {
+    background-color: dt.$color-container-default;
+    color: dt.$color-content-link;
+}

package/src/defs.ts

@@ -1,49 +1,29 @@
 /**
- * Button style variants
+ * Button size variants
  */
-export enum BUTTON_VARIANT {
-    /**
-     * Primary button.
-     */
-    PRIMARY = 'primary',
-
-    /**
-     * Secondary button.
-     */
-    SECONDARY = 'secondary',
-
-    /**
-     * Outline button.
-     */
-    OUTLINE = 'outline',
-
-    /**
-     * Ghost button.
-     */
-    GHOST = 'ghost'
+export enum BUTTON_SIZE {
+    XSMALL = 'xsmall',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large'
 }
 
 /**
  * Button style variants
  */
 export enum BUTTON_TYPE {
-    /**
-     * Submit button.
-     */
     SUBMIT = 'submit',
-
-    /**
-     * Standard button.
-     */
     BUTTON = 'button',
-
-    /**
-     * Reset button.
-     */
     RESET = 'reset',
-
-    /**
-     * Menu button.
-     */
     MENU = 'menu'
 }
+
+/**
+ * Button style variants
+ */
+export enum BUTTON_VARIANT {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    OUTLINE = 'outline',
+    GHOST = 'ghost'
+}

package/src/index.ts

@@ -4,38 +4,37 @@ import { customElement, property } from 'lit/decorators.js';
 
 import styles from './button.scss?inline';
 import { validPropertyValues } from './decorators';
-import { BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 
 // Valid values available to consumers
-export { BUTTON_TYPE, BUTTON_VARIANT };
+export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
 
 @customElement('pie-button')
 export class PieButton extends LitElement {
-    /**
-     * The Button type to use
-     */
+    @property()
+    @validPropertyValues(Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
+    size : BUTTON_SIZE = BUTTON_SIZE.MEDIUM;
+
     @property()
     @validPropertyValues(Object.values(BUTTON_TYPE), BUTTON_TYPE.SUBMIT)
     type : BUTTON_TYPE = BUTTON_TYPE.SUBMIT;
 
-    /**
-     * The Button style variant to use
-     */
     @property()
     @validPropertyValues(Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
     variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
 
     render () {
-        const { type, variant } = this;
+        const { size, type, variant } = this;
 
-        const classes = classMap({
-            ['o-btn']: true,
+        const classes = {
+            'o-btn': true,
+            [`o-btn--${size}`]: size,
             [`o-btn--${variant}`]: variant
-        });
+        };
 
         return html`
             <button
-                class="${classes}"
+                class=${classMap(classes)}
                 type=${type}>
                 I'm a PIE button
             </button>`;

package/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://unpkg.com/@justeat/pie-design-tokens@latest/dist/jet.css">
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2"
-        as="font" type="font/woff2" crossorigin>
-    <style>
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
-                url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
-            font-weight: 400;
-            font-display: swap;
-        }
-
-        body {
-            font-feature-settings: "tnum";
-            /* Enable tabular numbers */
-        }
-    </style>
-    <script type="module" src="/src/index.ts"></script>
-</head>
-
-<body>
-    <!-- This is a temporary file for testing until Storybook is in place -->
-    <!-- Run `yarn dev` to serve this file -->
-    <pie-button type="button" variant="primary" />
-
-    <script>
-        (function () {
-            var boldFontUrls = 'url("https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2") format("woff2"), url("https://d30v2pzvrfyzpo.cloudfront.net/fonts/   JETSansDigital-Bold-optimised.woff") format("woff")';
-            var extraboldFontUrls = 'url("https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2") format("woff2"), url("https://d30v2pzvrfyzpo.cloudfront.net/fonts/   JETSansDigital-ExtraBold-optimised.woff") format("woff")';
-
-            if ('fonts' in document) {
-                var bold = new FontFace('JETSansDigital', boldFontUrls, { weight: '700' });
-                var extrabold = new FontFace('JETSansDigital', extraboldFontUrls, { weight: '800' });
-
-                Promise.all([bold.load(), extrabold.load()])
-                    .then(function (fonts) {
-                        fonts.forEach(function (font) {
-                            document.fonts.add(font);
-                        });
-                    })
-                    .then(function () {
-                        document.documentElement.classList.add('webfonts-loaded');
-                    });
-            }
-        })();
-    </script>
-</body>
-
-</html>