@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

 # 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.json

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

src/index.ts

@@ -1,29 +0,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';
+    /**
+     * The Button type to use
+     */
+    @property()
+    @validPropertyValues(Object.values(BUTTON_TYPE), BUTTON_TYPE.SUBMIT)
+    type : BUTTON_TYPE = BUTTON_TYPE.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 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);
 }

tsconfig.json

 {
     "compilerOptions": {
+        "target": "ES6",
         "module": "ES2022",
@@ -23,4 +24,4 @@ "lib": ["es2020", "DOM", "DOM.Iterable"],
     },
-    "include": ["src/**/*.ts"],
+    "include": ["src/**/*.ts","./declaration.d.ts"],
     "exclude": []
-  }
+  }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17320

increased by178.19%

Number of package files

14

increased by75%

Lines of code

236

increased by274.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes