@duetds/components - npm Package Compare versions

Comparing version 0.0.1-alpha.18 to 0.0.1-alpha.19

lib/collection/collection-manifest.json

@@ -17,5 +17,60 @@ {
         {
-          "name": "label",
+          "name": "ariaControls",
           "type": "String",
-          "attr": "label"
+          "attr": "aria-controls"
+        },
+        {
+          "name": "ariaExpanded",
+          "type": "Boolean",
+          "attr": "aria-expanded"
+        },
+        {
+          "name": "ariaLabel",
+          "type": "String",
+          "attr": "aria-label"
+        },
+        {
+          "name": "ariaPressed",
+          "type": "Boolean",
+          "attr": "aria-pressed"
+        },
+        {
+          "name": "disabled",
+          "type": "Boolean",
+          "attr": "disabled"
+        },
+        {
+          "name": "expand",
+          "type": "Boolean",
+          "attr": "expand"
+        },
+        {
+          "name": "external",
+          "type": "Boolean",
+          "attr": "external"
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "attr": "id"
+        },
+        {
+          "name": "submit",
+          "type": "Boolean",
+          "attr": "submit"
+        },
+        {
+          "name": "theme",
+          "type": "String",
+          "attr": "theme"
+        },
+        {
+          "name": "url",
+          "type": "String",
+          "attr": "url"
+        },
+        {
+          "name": "variation",
+          "type": "String",
+          "attr": "variation"
         }
@@ -22,0 +77,0 @@ ]

lib/collection/components/duet-button/duet-button.js

@@ -0,11 +1,105 @@
+import classNames from "classnames";
 export class DuetButton {
+    constructor() {
+        /**
+         * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        this.ariaExpanded = false;
+        /**
+         * Tells screen reader the element is pressed.
+         */
+        this.ariaPressed = false;
+        /**
+         * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
+         */
+        this.variation = "default";
+        /**
+         * Theme of the button. Can be one of: default, turva.
+         */
+        this.theme = "default";
+        /**
+         * Expands the button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to submit a form.
+         */
+        this.submit = false;
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
     render() {
-        return (h("button", { class: "duet-button" },
-            h("slot", null)));
+        const type = this.submit ? "submit" : "button";
+        const classes = classNames("duet-button", `${this.variation}`, {
+            expand: this.expand,
+            "duet-theme-turva": this.theme === "turva",
+        });
+        if (this.url) {
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-label": this.ariaLabel },
+                h("slot", null)));
+        }
+        else {
+            return (h("button", { type: type, class: classes, "aria-controls": this.ariaControls, "aria-label": this.ariaLabel, "aria-expanded": this.ariaExpanded, "aria-pressed": this.ariaPressed, disabled: this.disabled },
+                h("slot", null)));
+        }
     }
     static get is() { return "duet-button"; }
     static get properties() { return {
-        "label": {
+        "ariaControls": {
             "type": String,
-            "attr": "label"
+            "attr": "aria-controls"
+        },
+        "ariaExpanded": {
+            "type": Boolean,
+            "attr": "aria-expanded"
+        },
+        "ariaLabel": {
+            "type": String,
+            "attr": "aria-label"
+        },
+        "ariaPressed": {
+            "type": Boolean,
+            "attr": "aria-pressed"
+        },
+        "disabled": {
+            "type": Boolean,
+            "attr": "disabled"
+        },
+        "expand": {
+            "type": Boolean,
+            "attr": "expand"
+        },
+        "external": {
+            "type": Boolean,
+            "attr": "external"
+        },
+        "id": {
+            "type": String,
+            "attr": "id"
+        },
+        "submit": {
+            "type": Boolean,
+            "attr": "submit"
+        },
+        "theme": {
+            "type": String,
+            "attr": "theme"
+        },
+        "url": {
+            "type": String,
+            "attr": "url"
+        },
+        "variation": {
+            "type": String,
+            "attr": "variation"
         }
@@ -12,0 +106,0 @@ }; }

lib/duet.js

@@ -134,2 +134,2 @@
 
-  })(window, document, "Duet","duet",0,"duet.core.js","es5-build-disabled.js","hydrated","duet-button",HTMLElement.prototype);
+  })(window, document, "Duet","duet",0,"duet.core.js","duet.core.pf.js","hydrated","duet-button",HTMLElement.prototype);

lib/duet/duet-button.entry.js

 const h = window.Duet.h;
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs');
+}
+
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x;
+}
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+function getCjsExportFromNamespace (n) {
+	return n && n.default || n;
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+	'use strict';
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if ('object' !== 'undefined' && module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) {
+		// register as 'classnames', consistent with npm package name
+		undefined('classnames', [], function () {
+			return classNames;
+		});
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
 class DuetButton {
+    constructor() {
+        /**
+         * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+         */
+        this.ariaExpanded = false;
+        /**
+         * Tells screen reader the element is pressed.
+         */
+        this.ariaPressed = false;
+        /**
+         * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
+         */
+        this.variation = "default";
+        /**
+         * Theme of the button. Can be one of: default, turva.
+         */
+        this.theme = "default";
+        /**
+         * Expands the button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to submit a form.
+         */
+        this.submit = false;
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
     render() {
-        return (h("button", { class: "duet-button" },
-            h("slot", null)));
+        const type = this.submit ? "submit" : "button";
+        const classes = classnames("duet-button", `${this.variation}`, {
+            expand: this.expand,
+            "duet-theme-turva": this.theme === "turva",
+        });
+        if (this.url) {
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-label": this.ariaLabel },
+                h("slot", null)));
+        }
+        else {
+            return (h("button", { type: type, class: classes, "aria-controls": this.ariaControls, "aria-label": this.ariaLabel, "aria-expanded": this.ariaExpanded, "aria-pressed": this.ariaPressed, disabled: this.disabled },
+                h("slot", null)));
+        }
     }
     static get is() { return "duet-button"; }
     static get properties() { return {
-        "label": {
+        "ariaControls": {
             "type": String,
-            "attr": "label"
+            "attr": "aria-controls"
+        },
+        "ariaExpanded": {
+            "type": Boolean,
+            "attr": "aria-expanded"
+        },
+        "ariaLabel": {
+            "type": String,
+            "attr": "aria-label"
+        },
+        "ariaPressed": {
+            "type": Boolean,
+            "attr": "aria-pressed"
+        },
+        "disabled": {
+            "type": Boolean,
+            "attr": "disabled"
+        },
+        "expand": {
+            "type": Boolean,
+            "attr": "expand"
+        },
+        "external": {
+            "type": Boolean,
+            "attr": "external"
+        },
+        "id": {
+            "type": String,
+            "attr": "id"
+        },
+        "submit": {
+            "type": Boolean,
+            "attr": "submit"
+        },
+        "theme": {
+            "type": String,
+            "attr": "theme"
+        },
+        "url": {
+            "type": String,
+            "attr": "url"
+        },
+        "variation": {
+            "type": String,
+            "attr": "variation"
         }
     }; }
-    static get style() { return "/* DUET DESIGN SYSTEM SPACING HELPERS\n--------------------------------------------- */\n/*\n  INSET-SPACE: For interface containers.\n  INSET-SQUISH-SPACE: For buttons, form elements, cells.\n  STACK-SPACE: For vertically stacked content.\n  INLINE-SPACE: For things displayed inline.\n*/\n.duet-button {\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: #0077b3;\n  color: white;\n  border-radius: 20rem;\n  font-weight: 400;\n  line-height: 1;\n  padding: 12px 28px;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button:hover {\n  background: #004d80;\n}"; }
+    static get style() { return ".duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  padding: 16px 28px 17px;\n  margin-right: 12px;\n  margin-bottom: 12px;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  position: relative;\n  display: inline-block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n  min-width: 6.875rem;\n}\n.duet-theme-turva .duet-button, .duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-theme-turva .duet-button.default, .duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-theme-turva .duet-button.default:hover, .duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-theme-turva .duet-button.default[disabled], .duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-theme-turva .duet-button.primary, .duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-theme-turva .duet-button.primary:hover, .duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-theme-turva .duet-button.primary[disabled], .duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-theme-turva .duet-button.secondary[disabled], .duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n}\n.duet-button.loading {\n  background: #004d80;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-theme-turva .duet-button.loading, .duet-button.loading.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-theme-turva .duet-button.negative, .duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: rgba(255, 255, 255, 0.5);\n  color: rgba(0, 41, 77, 0.75);\n}\n.duet-theme-turva .duet-button.negative[disabled], .duet-button.negative[disabled].duet-theme-turva {\n  color: rgba(17, 17, 17, 0.75);\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-theme-turva .duet-button.destructive, .duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-theme-turva .duet-button.destructive:hover, .duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-theme-turva .duet-button.destructive[disabled], .duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  padding: 9px 16px 10px;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-theme-turva .duet-button.plain, .duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-theme-turva .duet-button.plain:hover, .duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
 }
 
 export { DuetButton };

lib/esm/index.js

@@ -1,1 +0,6 @@
-export * from './es2017/index.js';
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./es5/index.js"));

lib/types/components.d.ts

@@ -16,6 +16,100 @@ /* tslint:disable */
   interface DuetButton {
-    'label': string;
+    /**
+    * Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.
+    */
+    'ariaControls': string;
+    /**
+    * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+    */
+    'ariaExpanded': boolean;
+    /**
+    * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+    */
+    'ariaLabel': string;
+    /**
+    * Tells screen reader the element is pressed.
+    */
+    'ariaPressed': boolean;
+    /**
+    * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
+    */
+    'disabled': boolean;
+    /**
+    * Expands the button to fill 100% of the container width.
+    */
+    'expand': boolean;
+    /**
+    * Forces URL to open in a new browser tab. Used together with URL prop.
+    */
+    'external': boolean;
+    /**
+    * Adds a unique identifier for the button.
+    */
+    'id': string;
+    /**
+    * Allows the button to submit a form.
+    */
+    'submit': boolean;
+    /**
+    * Theme of the button. Can be one of: default, turva.
+    */
+    'theme': string;
+    /**
+    * A destination to link to, rendered in the href attribute of a link.
+    */
+    'url': string;
+    /**
+    * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
+    */
+    'variation': string;
   }
   interface DuetButtonAttributes extends StencilHTMLAttributes {
-    'label'?: string;
+    /**
+    * Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.
+    */
+    'ariaControls'?: string;
+    /**
+    * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+    */
+    'ariaExpanded'?: boolean;
+    /**
+    * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+    */
+    'ariaLabel'?: string;
+    /**
+    * Tells screen reader the element is pressed.
+    */
+    'ariaPressed'?: boolean;
+    /**
+    * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
+    */
+    'disabled'?: boolean;
+    /**
+    * Expands the button to fill 100% of the container width.
+    */
+    'expand'?: boolean;
+    /**
+    * Forces URL to open in a new browser tab. Used together with URL prop.
+    */
+    'external'?: boolean;
+    /**
+    * Adds a unique identifier for the button.
+    */
+    'id'?: string;
+    /**
+    * Allows the button to submit a form.
+    */
+    'submit'?: boolean;
+    /**
+    * Theme of the button. Can be one of: default, turva.
+    */
+    'theme'?: string;
+    /**
+    * A destination to link to, rendered in the href attribute of a link.
+    */
+    'url'?: string;
+    /**
+    * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
+    */
+    'variation'?: string;
   }
@@ -22,0 +116,0 @@ }

lib/types/components/duet-button/duet-button.d.ts

 import '../../stencil.core';
 export declare class DuetButton {
-    label: string;
+    /**
+     * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+     */
+    ariaLabel: string;
+    /**
+     * Use this prop to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.
+     */
+    ariaControls: string;
+    /**
+     * If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
+     */
+    ariaExpanded: boolean;
+    /**
+     * Tells screen reader the element is pressed.
+     */
+    ariaPressed: boolean;
+    /**
+     * Style variation of the button. Can be one of: default, primary, secondary, negative, loading, destructive, plain.
+     */
+    variation: string;
+    /**
+     * Theme of the button. Can be one of: default, turva.
+     */
+    theme: string;
+    /**
+     * Expands the button to fill 100% of the container width.
+     */
+    expand: boolean;
+    /**
+     * Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
+     */
+    disabled: boolean;
+    /**
+     * Adds a unique identifier for the button.
+     */
+    id: string;
+    /**
+     * Allows the button to submit a form.
+     */
+    submit: boolean;
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    external: boolean;
+    /**
+     * A destination to link to, rendered in the href attribute of a link.
+     */
+    url: string;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
     render(): JSX.Element;
 }

package.json

 {
   "name": "@duetds/components",
-  "version": "0.0.1-alpha.18",
+  "version": "0.0.1-alpha.19",
   "description": "This package includes Duet Components and related tools.",
@@ -24,8 +24,10 @@ "author": "Viljami Salminen <[e-mail]>",
     "build": "copyfiles --flat src/*.js lib",
-    "start": "npm-run-all copy:fonts stencil:start",
-    "stencil:build": "stencil build --docs",
-    "stencil:start": "stencil build --dev --watch --serve",
+    "start": "npm-run-all --parallel copy:fonts copy:build stencil:onchange stencil:start",
+    "stencil:build": "stencil build --docs --es5",
+    "stencil:start": "stencil build --dev --es5 --docs --watch --serve",
     "stencil:test": "stencil test --spec --e2e",
     "stencil:test.watch": "stencil test --spec --e2e --watchAll",
-    "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts"
+    "stencil:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build",
+    "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts",
+    "copy:build": "copyfiles --up 2 \"./www/build/**/*\" \"../../docs/src/docs/components\" && echo 'Build copied over to docs'"
   },
@@ -35,6 +37,6 @@ "bugs": {
   },
-  "gitHead": "b5e360b0a7d1ab4245e9839784e1408ad3a76f58",
+  "gitHead": "2872efd314b7177113fda0848cb404cdddf93a3c",
   "devDependencies": {
     "@duetds/fonts": "^1.0.6",
-    "@duetds/tokens": "1.1.1",
+    "@duetds/tokens": "^1.1.2",
     "@stencil/core": "^0.18.1",
@@ -44,4 +46,10 @@ "@stencil/sass": "^0.2.1",
     "copyfiles": "^2.1.0",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "onchange": "^5.2.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

1700762

increased by57.04%

Number of package files

92

increased by35.29%

Lines of code

15561

increased by252.86%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

10

increased by42.86%

Number of low supply chain risk alerts

8

increased by700%

Number of medium supply chain risk alerts

10

increased by66.67%

Dependency changes

• + Addedclassnames@^2.2.6

• + Addedclassnames@2.5.1(transitive)