@justeattakeaway/pie-button 0.3.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -0,0 +1,7 @@
+@justeattakeaway/pie-button:build: cache hit, replaying output 4b675d127813f9f5
+@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

package/CHANGELOG.md

@@ -1,29 +1,46 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- [Changed] - Set TSconfig target to ES6 to allow modern syntax such as property accessors ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] Create decorator for validating property values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - `variant` property to decide how we style the button ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Lit `classmap` directive to handle conditional css class logic and rendering ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Refactored props to include validation based on enums and add console errors for invalid values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Renamed `actionType` property to `type` ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-v0.3.0
----------------------
-*January 24, 2023*
+## v0.3.0
+
+_January 24, 2023_
 
 ### Added
+
 - Button default styling (medium).
 - JET font family to html file.
 
+## v0.2.0
 
-v0.2.0
----------------------
-*January 23, 2023*
+_January 23, 2023_
 
 ### Added
+
 - `actionType` property mapped to `type` attribute.
 
+## v0.1.0
 
-v0.1.0
----------------------
-*January 19, 2023*
+_January 19, 2023_
 
 ### Added
+
 - Basic button using Lit
 - Initial TypeScript and Vite config

package/declaration.d.ts

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

package/dist/pie-button.js

@@ -0,0 +1,59 @@
+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, {
+    get() {
+      return t[n];
+    },
+    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(" | ")}.`,
+        `Falling back to default value: "${r}"`
+      ), t[n] = r), this.requestUpdate(e, b);
+    }
+  });
+};
+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;
+};
+let a = class extends g {
+  constructor() {
+    super(...arguments), this.type = d.SUBMIT, this.variant = l.PRIMARY;
+  }
+  render() {
+    const { type: o, variant: r } = this, t = m({
+      ["o-btn"]: !0,
+      [`o-btn--${r}`]: r
+    });
+    return f`
+            <button
+                class="${t}"
+                type=${o}>
+                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);
+export {
+  d as BUTTON_TYPE,
+  l as BUTTON_VARIANT,
+  a as PieButton
+};

package/index.html

@@ -1,37 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<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>
+    <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>
+</head>
+
+<body>
     <!-- This is a temporary file for testing until Storybook is in place -->
     <!-- Run `yarn dev` to serve this file -->
-    <pie-button />
+    <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' });
+            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) {
@@ -40,10 +45,11 @@
                         });
                     })
                     .then(function () {
-                        document.documentElement.classList.add   ('webfonts-loaded');
+                        document.documentElement.classList.add('webfonts-loaded');
                     });
             }
         })();
     </script>
-  </body>
+</body>
+
 </html>

package/package.json

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

package/src/button.scss

@@ -0,0 +1,3 @@
+@use '@justeat/fozzie/src/scss/fozzie' as f;
+
+@include f.buttons();

package/src/decorators.ts

@@ -0,0 +1,34 @@
+/**
+ * A decorator for specifying a list of valid values for a property.
+ * If this property's setter is called with an invalid value, an error is logged and the default value will be assigned instead.
+ * @param validValues - The array of valid values
+ * @param defaultValue - The value to fall back on
+ * @returns
+ */
+export const validPropertyValues = (validValues: any[], defaultValue: any) => {
+    return function (target: any, propertyKey: string) : void {
+        const privatePropertyKey = `_${propertyKey}`;
+
+        Object.defineProperty(target, propertyKey, {
+            get () : any {
+                return target[privatePropertyKey];
+            },
+            set (value: any) : void {
+                const oldValue = target[privatePropertyKey];
+
+                if (!validValues.includes(value)) {
+                    console.error(
+                        `[pie-button] Invalid value "${value}" provided for property "${propertyKey}".`,
+                        `Must be one of: ${validValues.join(' | ')}.`,
+                        `Falling back to default value: "${defaultValue}"`
+                    );
+                    target[privatePropertyKey] = defaultValue;
+                } else {
+                    target[privatePropertyKey] = value;
+                }
+
+                this.requestUpdate(propertyKey, oldValue);
+            }
+        });
+    }
+};

package/src/defs.ts

@@ -0,0 +1,49 @@
+/**
+ * Button style variants
+ */
+export enum BUTTON_VARIANT {
+    /**
+     * Primary button.
+     */
+    PRIMARY = 'primary',
+
+    /**
+     * Secondary button.
+     */
+    SECONDARY = 'secondary',
+
+    /**
+     * Outline button.
+     */
+    OUTLINE = 'outline',
+
+    /**
+     * Ghost button.
+     */
+    GHOST = 'ghost'
+}
+
+/**
+ * Button style variants
+ */
+export enum BUTTON_TYPE {
+    /**
+     * Submit button.
+     */
+    SUBMIT = 'submit',
+
+    /**
+     * Standard button.
+     */
+    BUTTON = 'button',
+
+    /**
+     * Reset button.
+     */
+    RESET = 'reset',
+
+    /**
+     * Menu button.
+     */
+    MENU = 'menu'
+}

package/src/index.ts

@@ -1,29 +1,46 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 
+import styles from './button.scss?inline';
+import { validPropertyValues } from './decorators';
+import { BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+
+// Valid values available to consumers
+export { BUTTON_TYPE, BUTTON_VARIANT };
+
 @customElement('pie-button')
 export class PieButton extends LitElement {
-    @property() actionType = 'submit';
-
-    static styles = [css`
-      button {
-        background-color: var(--dt-color-interactive-brand);
-        border-radius: var(--dt-radius-rounded-e);
-        border: none;
-        color: var(--dt-color-content-interactive-primary);
-        font-size: 20px; // A future ticket will pull in a helper for font size & line height.
-        line-height: 1.4;
-        font-family: var(--dt-font-interactive-m-family);
-        font-weight: var(--dt-font-interactive-m-weight);
-        padding: 10px var(--dt-spacing-e);
-        min-height: 48px;
-      }
-    `];
+    /**
+     * The Button type to use
+     */
+    @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 classes = classMap({
+            ['o-btn']: true,
+            [`o-btn--${variant}`]: variant
+        });
+
         return html`
-        <button type=${this.actionType}>
-            I'm a PIE button
-        </button>`;
+            <button
+                class="${classes}"
+                type=${type}>
+                I'm a PIE button
+            </button>`;
     }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
 }

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "target": "ES6",
         "module": "ES2022",
         "lib": ["es2020", "DOM", "DOM.Iterable"],
         "declaration": true,
@@ -20,6 +21,6 @@
         "experimentalDecorators": true,
         "forceConsistentCasingInFileNames": true
     },
-    "include": ["src/**/*.ts"],
+    "include": ["src/**/*.ts","./declaration.d.ts"],
     "exclude": []
-  }
+  }