@rededor/cura 1.0.0-alpha.7 → 1.0.0

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/forms/cura-input-text/cura-input-text.js",
     "components/accordion/cura-accordion/cura-accordion.js",
     "components/accordion/cura-accordion-item/cura-accordion-item.js",
+    "components/badges/cura-badge-distance/cura-badge-distance.js",
     "components/buttons/cura-button/cura-button.js",
     "components/buttons/cura-button-outline/cura-button-outline.js",
     "components/buttons/cura-button-select/cura-button-select.js",

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.css

@@ -0,0 +1,28 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+:host .container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: calc(var(--base-spacing) * 8px);
+  height: calc(var(--base-spacing) * 8px);
+  border-radius: calc(var(--base-spacing) * 1px);
+  background: var(--neutral-pale);
+}

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js

@@ -0,0 +1,94 @@
+import { Host, h } from "@stencil/core";
+export class CuraDistance {
+    constructor() {
+        this.isThousandRounded = false;
+        this.theme = window.CuraAPI.theme;
+        this.distance = 0;
+        this.label = 'km';
+        this.styles = {};
+        this.displayDistance = 0;
+    }
+    formatDistance() {
+        const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance;
+        this.isThousandRounded = Math.abs(roundedDistance) >= 1000;
+        this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;
+    }
+    connectedCallback() {
+        this.setCssProperties();
+        this.formatDistance();
+    }
+    render() {
+        return (h(Host, { key: 'afc9605f43777e15c026ee00b0ca3fc18b648489' }, h("div", { key: '5e970213baad148605f9fcd0e0f0307f32a99375', class: "container", style: this.styles }, h("cura-label", { key: 'd56a580850734dedf9d7e72c0dce45d05be26119', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: 'e0ec3d1a6919b3931d807f75054b5d861e6015b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
+    }
+    setCssProperties() {
+        this.styles = {
+            '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),
+            '--base-spacing': this.theme.spacing.getSpacing()
+        };
+    }
+    static get is() { return "cura-badge-distance"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-badge-distance.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-badge-distance.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "distance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "distance",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "'km'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {},
+            "displayDistance": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "distance",
+                "methodName": "formatDistance"
+            }];
+    }
+}
+//# sourceMappingURL=cura-badge-distance.js.map

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-distance.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-distance/cura-badge-distance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,YAAY;;QAMvB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;wBANV,CAAC;qBACa,IAAI;sBACnB,EAAE;+BACO,CAAC;;IAM5B,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;IACpH,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBACvC,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;oBAC1D,IAAI,CAAC,eAAe;oBAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAC7C;gBACb,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,KAAK,CACA,CACT,CACD,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SAClD,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-distance',\n  styleUrl: 'cura-badge-distance.scss',\n  shadow: true,\n})\nexport class CuraDistance {\n\n  @Prop() distance = 0;\n  @Prop({ reflect: true }) label = 'km';\n  @State() styles = {};\n  @State() displayDistance = 0;\n  isThousandRounded = false;\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('distance')\n  formatDistance() {\n    const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance;    \n    this.isThousandRounded = Math.abs(roundedDistance) >= 1000;\n    this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;\n  }\n\n\n  connectedCallback(){\n    this.setCssProperties();\n    this.formatDistance();    \n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label size='xsmall' weight='bold' color='neutral-black'>\n            {this.displayDistance}{this.isThousandRounded ? 'K' : ''}\n          </cura-label>\n          <cura-label size='xsmall' weight='bold' color='neutral-dark'>\n            {this.label}\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n\n  setCssProperties() {\n    this.styles = {\n      '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),\n      '--base-spacing': this.theme.spacing.getSpacing()\n    }\n  }\n\n}\n"]}

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const renderCuraBadgeDistance = (args) => {
+    const block = `
+  <cura-badge-distance ${args.distance ? `
+  distance="${args.distance}"` : ''}${args.label && args.label !== 'km' ? `
+  label="${args.label}"` : ''}>
+</cura-badge-distance>
+
+`;
+    return `${block}`;
+};
+export default {
+    title: 'Componentes/Badges/Badge Distance',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraBadgeDistance(args);
+    },
+    argTypes: {
+        distance: {
+            control: 'number',
+            description: 'Distancia que será exibida.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 1 },
+            },
+        },
+        label: {
+            control: { type: 'select' },
+            options: ['m', 'km'],
+            description: 'Unidade de medida a ser exibida',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'km' },
+            },
+        },
+    },
+};
+export const CuraBadgeDistance = {
+    args: {
+        distance: 1,
+        label: 'km',
+    },
+};
+//# sourceMappingURL=cura-badge-distance.stories.js.map

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-distance.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-distance/cura-badge-distance.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,MAAM,uBAAuB,GAAG,CAAC,IAAS,EAAE,EAAE;IAC5C,MAAM,KAAK,GAAG;yBACS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;cAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAA;WAC9D,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;;;CAG5B,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC7B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC;YACpB,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAC","sourcesContent":["\nconst renderCuraBadgeDistance = (args: any) => {\n  const block = `\n  <cura-badge-distance ${args.distance ?`\n  distance=\"${args.distance}\"` : ''}${args.label && args.label !== 'km' ?`\n  label=\"${args.label}\"` : ''}>\n</cura-badge-distance>\n\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Badges/Badge Distance',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraBadgeDistance(args);\n  },\n  argTypes: {\n    distance: {\n      control: 'number',\n      description: 'Distancia que será exibida.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 1 },\n      },\n    },\n    label: {\n      control: { type: 'select' },\n      options: ['m', 'km'],\n      description: 'Unidade de medida a ser exibida',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'km' },\n      },\n    },\n  },\n};\n\nexport const CuraBadgeDistance = {\n  args: {\n    distance: 1,\n    label: 'km',\n  },\n};\n"]}

package/dist/collection/components/buttons/cura-button/cura-button.css

@@ -7,6 +7,27 @@
  * --font-weight-medium
  * --text-align
  */
+/**
+ * Spacing sass vars
+ */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
 /**
  * Buttons Host element definitions.
  * Use: @include button-host() { ... }
@@ -74,25 +95,43 @@
   position: relative;
   background-color: var(--color-base-neutral-purewhite);
   box-sizing: border-box;
-  border: 2px solid transparent;
+  border: none;
 }
 :host button:focus,
 :host a:focus {
   outline: 2px solid #6EA8FF;
 }
-:host button:not(.disabled):not(.isLoading),
-:host a:not(.disabled):not(.isLoading) {
+:host button::before,
+:host a::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  border-radius: var(--border-radius);
+}
+:host button:not(.disabled):not(.isLoading)::before,
+:host a:not(.disabled):not(.isLoading)::before {
   border: 2px solid var(--color-base-color-light);
 }
 :host button:not(.disabled):hover,
 :host a:not(.disabled):hover {
-  border-color: var(--color-dark-color-base);
   background: var(--color-base-color-light);
   box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
 }
+:host button:not(.disabled):not(.isLoading):hover::before,
+:host a:not(.disabled):not(.isLoading):hover::before {
+  border-color: var(--color-dark-color-base);
+}
 :host button:not(.isLoading):not(.disabled):active,
 :host a:not(.isLoading):not(.disabled):active {
   background-color: var(--color-dark-color-light);
+}
+:host button:not(.isLoading):not(.disabled):active::before,
+:host a:not(.isLoading):not(.disabled):active::before {
   border-color: var(--color-dark-color-light);
 }
 :host button:hover,
@@ -115,39 +154,18 @@
 }
 :host button.large,
 :host a.large {
-  padding: calc(var(--base-spacing) * 6.12px) calc(var(--base-spacing) * 9.96px);
-  min-height: calc(var(--base-spacing) * 13px);
-  min-width: calc(var(--base-spacing) * 33.7px);
+  padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);
+  min-height: calc(var(--base-spacing) * 11px);
 }
 :host button.medium,
 :host a.medium {
-  padding: calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);
-  min-height: calc(var(--base-spacing) * 11px);
-  min-width: calc(var(--base-spacing) * 29.95px);
+  padding: calc(var(--base-spacing) * 3px);
+  min-height: calc(var(--base-spacing) * 10px);
 }
 :host button.small,
 :host a.small {
-  padding: calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);
-  min-height: calc(var(--base-spacing) * 8px);
-  min-width: calc(var(--base-spacing) * 21.67px);
-}
-:host button:not(.isLoading).large,
-:host a:not(.isLoading).large {
-  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 13px);
-  min-width: calc(var(--base-spacing) * 13px);
-}
-:host button:not(.isLoading).medium,
-:host a:not(.isLoading).medium {
-  padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 11px);
-  min-width: calc(var(--base-spacing) * 11px);
-}
-:host button:not(.isLoading).small,
-:host a:not(.isLoading).small {
-  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
+  padding: calc(var(--base-spacing) * 2px);
   min-height: calc(var(--base-spacing) * 8px);
-  min-width: calc(var(--base-spacing) * 8px);
 }
 :host button .button-container,
 :host a .button-container {
@@ -161,23 +179,15 @@
 :host a.icon-right .button-container {
   flex-direction: row-reverse;
 }
+:host button.justify .button-container,
+:host a.justify .button-container {
+  width: 100%;
+}
 :host button cura-label,
 :host a cura-label {
   flex: 1;
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-medium);
-  font-size: 1.43em;
-  line-height: 1.2em;
   text-align: var(--text-align, "left");
 }
-:host button.medium cura-label,
-:host a.medium cura-label {
-  font-size: 1.14em;
-}
-:host button.small cura-label,
-:host a.small cura-label {
-  font-size: 1em;
-}
 :host button.icon-left cura-icon,
 :host a.icon-left cura-icon {
   margin-right: calc(var(--base-spacing) * 3px);
@@ -186,21 +196,15 @@
 :host a.icon-right cura-icon {
   margin-left: calc(var(--base-spacing) * 3px);
 }
-:host button.medium.icon-left cura-icon,
-:host a.medium.icon-left cura-icon {
-  margin-right: calc(var(--base-spacing) * 2.7px);
-}
-:host button.medium.icon-right cura-icon,
-:host a.medium.icon-right cura-icon {
-  margin-left: calc(var(--base-spacing) * 2.7px);
-}
-:host button.small.icon-left cura-icon,
+:host button.medium.icon-left cura-icon, :host button.small.icon-left cura-icon,
+:host a.medium.icon-left cura-icon,
 :host a.small.icon-left cura-icon {
-  margin-right: calc(var(--base-spacing) * 2.5px);
+  margin-right: calc(var(--base-spacing) * 2px);
 }
-:host button.small.icon-right cura-icon,
+:host button.medium.icon-right cura-icon, :host button.small.icon-right cura-icon,
+:host a.medium.icon-right cura-icon,
 :host a.small.icon-right cura-icon {
-  margin-left: calc(var(--base-spacing) * 2.5px);
+  margin-left: calc(var(--base-spacing) * 2px);
 }
 :host button.disabled,
 :host a.disabled {
@@ -209,7 +213,7 @@
 }
 :host button.icon-only,
 :host a.icon-only {
-  padding: calc(var(--base-spacing) * 3.5px);
+  padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px);
 }
 :host button.icon-only cura-label,
 :host a.icon-only cura-label {
@@ -222,11 +226,11 @@
 }
 :host button.icon-only.medium,
 :host a.icon-only.medium {
-  padding: calc(var(--base-spacing) * 2.75px);
+  padding: calc(var(--base-spacing) * 3px);
 }
 :host button.icon-only.small,
 :host a.icon-only.small {
-  padding: calc(var(--base-spacing) * 1.5px);
+  padding: calc(var(--base-spacing) * 2px);
 }
 :host button cura-loader-circle,
 :host a cura-loader-circle {
@@ -239,17 +243,9 @@
 }
 :host button.isLoading .button-container,
 :host a.isLoading .button-container {
-  opacity: 0.3;
-}
-:host button.isLoading.icon-only .button-container,
-:host a.isLoading.icon-only .button-container {
   opacity: 0;
 }
 :host button.isLoading cura-loader-circle,
 :host a.isLoading cura-loader-circle {
   display: block;
-}
-:host button.isLoading cura-label,
-:host a.isLoading cura-label {
-  display: none;
 }

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { labelSizes } from "../cura-button.definitions";
 export class CuraButton {
     constructor() {
         this.type = 'button';
@@ -15,6 +16,7 @@ export class CuraButton {
         this.background = 'light';
         this.fontColor = 'dark';
         this.textAlign = 'left';
+        this.justify = false;
         this.styles = {};
         this.hovered = false;
     }
@@ -54,12 +56,13 @@ export class CuraButton {
         classes[`icon-only`] = this.iconOnly;
         classes['disabled'] = this.disabled;
         classes['isLoading'] = this.isLoading;
+        classes['justify'] = this.justify;
         return classes;
     }
     getIcon() {
-        if (!this.iconName || this.isLoading)
+        if (!this.iconName)
             return '';
-        const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+        const iconSize = this.size === 'large' ? 20 : 16;
         return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
     }
     getSymbolColor() {
@@ -83,7 +86,9 @@ export class CuraButton {
         }
     }
     render() {
-        return (h(Host, { key: '5a7c983dcae745239e7f81bc172a2aa52b5de8de' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+        const symbolColor = this.getSymbolColor();
+        const labelSize = labelSizes[this.size] || labelSizes["default"];
+        return (h(Host, { key: '33ee4706d79aae1ea11e804e59919f5e3afcf336' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get is() { return "cura-button"; }
     static get encapsulation() { return "shadow"; }
@@ -349,6 +354,24 @@ export class CuraButton {
                 "attribute": "text-align",
                 "reflect": true,
                 "defaultValue": "'left'"
+            },
+            "justify": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Justify icons and label inside the button.\nVales: false (default) | true."
+                },
+                "attribute": "justify",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/buttons/cura-button/cura-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\n\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName || this.isLoading) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAQxD,MAAM,OAAO,UAAU;;oBAO0C,QAAQ;oBAKT,OAAO;wBAKjC,KAAK;yBAIJ,KAAK;;uBASP,SAAS;4BAIc,MAAM;wBAI5B,KAAK;;sBASP,OAAO;qBAKzB,QAAQ;0BAKgC,OAAO;yBAKR,MAAM;yBAMK,MAAM;uBAMrC,KAAK;sBAEtB,EAAE;uBAED,KAAK;;IAKxB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAID,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,gCAAgC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE;YAC3H,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,UAAU,EAAE,EAAE;YAC9H,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE,EAAE;YAC5H,EAAE,IAAI,EAAE,yBAAyB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE,EAAE;YAC1H,EAAE,IAAI,EAAE,8BAA8B,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE;SACrH,CAAA;QAED,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACrG,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,UAAU;;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC;QAC9C,OAAO,CAAC,QAAQ,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC;QAC3D,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACrC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QAElC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,OAAO,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,GAAc,CAAC;IAC3H,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;YACpF,OAAO,IAAI,CAAC,QAAQ;gBAClB,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO;oBAC1B,CAAC,CAAC,eAAe;oBACjB,CAAC,CAAC,eAAe,CAAC;IACxB,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI;gBAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAChF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI;gBAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAChF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC;QACjE,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACrC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC3C,YAAM,KAAK,EAAC,kBAAkB;gBAC3B,IAAI,CAAC,OAAO,EAAE;gBACf,kBAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,WAAW;oBAAE,eAAa,CAAa,CACtG;YACP,0BAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,GAAuB,CAC5E,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAC9B,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,YAAM,KAAK,EAAC,kBAAkB;gBAC3B,IAAI,CAAC,OAAO,EAAE;gBACf,kBAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,WAAW;oBAAE,eAAa,CAAa,CACtG;YACP,0BAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,GAAuB,CACvE,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\n\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/buttons/cura-button/cura-button.stories.js

@@ -12,6 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import iconNames from "../../../assets/icons/iconset-default-list";
 const renderCuraButton = (label, args) => {
+    const style = args.borderRadius && args.borderRadius !== '4px' ? `<style>
+  cura-button {
+    --border-radius: ${args.borderRadius} !important;
+  }
+</style>
+` : '';
     const block = `<cura-button${args.size && args.size !== 'large' ? `
   size="${args.size}"` : ''}${args.color ? `
   type="${args.type}"
@@ -25,11 +31,12 @@ const renderCuraButton = (label, args) => {
   icon-only` : ''}${args.href ? `
   href="${args.href}"` : ''}${args.target ? `
   target="${args.target}"` : ''}${args.textAlign && args.textAlign !== 'left' ? `
-  text-align="${args.textAlign}"` : ''}${args.fullWidth ? `
+  text-align="${args.textAlign}"` : ''}${args.justify ? `
+  justify="${args.justify}"` : ''}${args.fullWidth ? `
   style="width: 100%;"` : ''}>
   ${label}
 </cura-button>`;
-    return `${block}`;
+    return `${style}${block}`;
 };
 export default {
     title: 'Componentes/Buttons/Button',
@@ -118,6 +125,23 @@ export default {
             },
             name: 'text-align'
         },
+        justify: {
+            control: 'boolean',
+            description: 'Expande os elementos internos para a dimensão do botão.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false }
+            }
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Personaliza a propriedade border-radius do botão.',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: '4px' }
+            },
+            name: '--border-radius'
+        },
         fullWidth: {
             control: 'boolean',
             description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
@@ -180,6 +204,7 @@ export const Button = {
         fontColor: 'dark',
         background: 'light',
         textAlign: 'left',
+        justify: false,
         iconName: '',
         iconPosition: 'left',
         iconOnly: false,
@@ -187,6 +212,7 @@ export const Button = {
         isLoading: false,
         href: '',
         target: '_self',
+        borderRadius: '4px',
         fullWidth: false,
     },
 };