@justeattakeaway/pie-button 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -0,0 +1,7 @@
+@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  2.73 kB │ gzip: 1.29 kB

package/CHANGELOG.md

@@ -1,29 +1,56 @@
 # 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
+
+- [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,9 @@
+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,65 @@
+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 e[o];
+    },
+    set(i) {
+      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}"`
+      ), e[o] = r), this.requestUpdate(n, p);
+    }
+  });
+};
+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 s = class extends m {
+  constructor() {
+    super(...arguments), this.size = l.MEDIUM, this.type = a.SUBMIT, this.variant = u.PRIMARY;
+  }
+  render() {
+    const { size: t, type: r, variant: e } = this, n = {
+      "o-btn": !0,
+      [`o-btn--${t}`]: t,
+      [`o-btn--${e}`]: e
+    };
+    return h`
+            <button
+                class=${x(n)}
+                type=${r}>
+                I'm a PIE button
+            </button>`;
+  }
+};
+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 {
+  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.3.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

@@ -0,0 +1,60 @@
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+
+.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/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,29 @@
+/**
+ * Button size variants
+ */
+export enum BUTTON_SIZE {
+    XSMALL = 'xsmall',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large'
+}
+
+/**
+ * Button style variants
+ */
+export enum BUTTON_TYPE {
+    SUBMIT = 'submit',
+    BUTTON = 'button',
+    RESET = 'reset',
+    MENU = 'menu'
+}
+
+/**
+ * Button style variants
+ */
+export enum BUTTON_VARIANT {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    OUTLINE = 'outline',
+    GHOST = 'ghost'
+}

package/src/index.ts

@@ -1,29 +1,45 @@
-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_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+
+// Valid values available to consumers
+export { BUTTON_SIZE, 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;
-      }
-    `];
+    @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;
+
+    @property()
+    @validPropertyValues(Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
+    variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
 
     render () {
+        const { size, type, variant } = this;
+
+        const classes = {
+            'o-btn': true,
+            [`o-btn--${size}`]: size,
+            [`o-btn--${variant}`]: variant
+        };
+
         return html`
-        <button type=${this.actionType}>
-            I'm a PIE button
-        </button>`;
+            <button
+                class=${classMap(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": []
-  }
+  }

package/index.html

@@ -1,49 +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 />
-
-    <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>