@rededor/cura 0.5.2 → 0.5.4

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

@@ -0,0 +1,139 @@
+/**
+ * Global Button Definitions.
+ * Required CSS Properties:
+ * --font-size
+ * --base-spacing
+ * --font-family
+ * --font-weight-medium
+ * --text-align
+ */
+/**
+ * Buttons Host element definitions.
+ * Use: @include button-host() { ... }
+ */
+/**
+ * Buttons base definitions.
+ * Use: @include button-element() { ... }
+ */
+/**
+ * Button sizes definitions.
+ * Use: @include button-sizes() { ... }
+ */
+/**
+ * Button container definitions.
+ * Use: @include button-container() { ... }
+ */
+/**
+ * Button label definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button shadow definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button disabled state definitions
+ * Use: @include button-disabled() { ... }
+ */
+/**
+ * Button selected state definitions
+ * Use: @include button-selected() { ... }
+ */
+/**
+ * Button loading state definitions
+ * Use: @include button-loading() { ... }
+ */
+/**
+ * Button icon definitions
+ * Use: @include button-icon() { ... }
+ */
+/**
+ * Button icon only behavior definitions
+ * Use: @include button-icon-only-behavior() { ... }
+ */
+:host {
+  --border-radius: 4px;
+  display: inline-block;
+  vertical-align: middle;
+}
+:host button, :host a {
+  outline: none;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none !important;
+  font-size: var(--font-size);
+  cursor: pointer;
+  transition: background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;
+  border-radius: var(--border-radius);
+  background-color: var(--neutral-purewhite);
+  border: none;
+  box-shadow: inset 0px 0px 0px 2px var(--primary-base);
+  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(.disabled):hover, :host a:not(.disabled):hover {
+  background-color: var(--color-lighter);
+  box-shadow: inset 0px 0px 0px 2px var(--color-base);
+}
+:host button:not(.disabled):hover .label, :host a:not(.disabled):hover .label {
+  color: var(--neutral-purewhite-black);
+}
+:host button:focus, :host a:focus {
+  box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;
+}
+:host button.medium, :host a.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.small, :host a.small {
+  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
+  min-height: calc(var(--base-spacing) * 8px);
+  min-width: calc(var(--base-spacing) * 8px);
+}
+:host button .label, :host a .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");
+  color: var(--primary-base);
+}
+:host button.medium .label, :host a.medium .label {
+  font-size: 1.14em;
+}
+:host button.small .label, :host a.small .label {
+  font-size: 1em;
+}
+:host button .button-container, :host a .button-container {
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.2s linear;
+  gap: 5px;
+}
+:host button.icon-right .button-container, :host a.icon-right .button-container {
+  flex-direction: row-reverse;
+}
+:host button.selected, :host a.selected {
+  cursor: pointer;
+  background-color: var(--color-base);
+  box-shadow: inset 0px 0px 0px 2px var(--color-darker);
+}
+:host button.selected .label, :host a.selected .label {
+  color: var(--neutral-purewhite-black);
+}
+:host button.disabled, :host a.disabled {
+  cursor: not-allowed;
+  background-color: var(--neutral-white-primary-darker);
+  box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);
+}
+:host button.disabled .label, :host a.disabled .label {
+  color: var(--neutral-medium-primary-base);
+}

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

@@ -0,0 +1,263 @@
+import { Host, h } from '@stencil/core';
+export class CuraButtonOutline {
+  constructor() {
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.disabled = false;
+    this.selected = false;
+    this.iconPosition = 'right';
+    this.color = 'accent';
+    this.background = 'light';
+    this.fontcolor = 'dark';
+    this.hovered = false;
+    this.styles = {};
+  }
+  setColors() {
+    const colors = [
+      { name: '--color-base', theme: `${this.color}-base` },
+      { name: '--color-darker', theme: `${this.color}-darker` },
+      { name: '--color-lighter', theme: `${this.color}-lighter` },
+      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },
+      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },
+      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },
+    ];
+    colors.forEach(color => {
+      this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) });
+    });
+  }
+  setStyles() {
+    this.weights = this.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+    this.styles['--font-size'] = this.theme.fonts.getSize();
+    this.styles['--font-family'] = this.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--neutral-purewhite'] = this.theme.colors.getColor("neutral-purewhite");
+    this.styles['--neutral-black'] = this.theme.colors.getColor("neutral-black");
+    this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
+    this.styles['--info-base'] = this.theme.colors.getColor("info-base");
+  }
+  connectedCallback() {
+    this.setStyles();
+    this.setColors();
+  }
+  handleMouseEnter() {
+    if (this.disabled)
+      return;
+    this.hovered = true;
+  }
+  handleMouseLeave() {
+    this.hovered = false;
+  }
+  getIcon() {
+    if (!this.selected)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
+    const fontcolor = this.disabled
+      ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
+      : this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
+    return h("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: fontcolor });
+  }
+  handleClick(e) {
+    if (this.disabled)
+      e.preventDefault();
+    this.selected = !this.selected;
+    this.onclick.emit({ selected: this.selected });
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['disabled'] = this.disabled;
+    classes['selected'] = this.selected;
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: "button-container" }, this.getIcon(), h("span", { class: "label" }, h("slot", null))))));
+  }
+  static get is() { return "cura-button-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-button-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-button-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button size: small | medium (default) | large  = medium"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state. Boolean."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "selected state. Boolean."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position: left (default) | right."
+        },
+        "attribute": "icon-position",
+        "reflect": true,
+        "defaultValue": "'right'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color base from color scheme. Default: accent."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      },
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the font color to dark or light."
+        },
+        "attribute": "background",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "fontcolor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "fontcolor theme of the checkbox.\nCan be 'dark' or 'light'."
+        },
+        "attribute": "fontcolor",
+        "reflect": false,
+        "defaultValue": "'dark'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hovered": {},
+      "styles": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onclick",
+        "name": "onclick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ selected: boolean; }",
+          "resolved": "{ selected: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "background",
+        "methodName": "setColors"
+      }, {
+        "propName": "color",
+        "methodName": "setColors"
+      }, {
+        "propName": "fontcolor",
+        "methodName": "setColors"
+      }, {
+        "propName": "background",
+        "methodName": "getIcon"
+      }, {
+        "propName": "fontcolor",
+        "methodName": "getIcon"
+      }];
+  }
+}
+//# sourceMappingURL=cura-button-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  getIcon() {\n    if (!this.selected) return '';\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <span class=\"label\"><slot></slot></span>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -35,6 +35,10 @@
  * Button disabled state definitions
  * Use: @include button-disabled() { ... }
  */
+/**
+ * Button selected state definitions
+ * Use: @include button-selected() { ... }
+ */
 /**
  * Button loading state definitions
  * Use: @include button-loading() { ... }

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

@@ -105,7 +105,7 @@ export default {
     },
     iconName: {
       control: { type: 'select' },
-      options: iconNames,
+      options: ['', ...iconNames],
       description: 'Nome do ícone a ser utilizado no iconset.',
       table: {
         category: 'Icons'
@@ -155,7 +155,7 @@ export const ButtonTransparent = {
     color: 'primary',
     fontColor: 'dark',
     textAlign: 'left',
-    iconName: iconNames[0],
+    iconName: '',
     iconPosition: 'left',
     iconOnly: false,
     disabled: false,

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

@@ -1 +1 @@
-{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Componentes/Buttons/Button Transparent',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button-transparent\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%;' : ''}\">\n    ${label}\n</cura-button-transparent>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const ButtonTransparent = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Componentes/Buttons/Button Transparent',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-button-transparent\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\"\n  is-loading=\"${args.isLoading}\"\n  color=\"${args.color}\"\n  font-color=\"${args.fontColor}\"\n  icon-name=\"${args.iconName}\"\n  icon-position=\"${args.iconPosition}\"\n  icon-only=\"${args.iconOnly}\"\n  href=\"${args.href}\"\n  target=\"${args.target}\"\n  text-align=\"${args.textAlign}\"\n  style=\"${args.fullWidth ? 'width: 100%;' : ''}\">\n    ${label}\n</cura-button-transparent>`;\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n      name: 'Label'\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    isLoading: {\n      control: 'boolean',\n      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'is-loading'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      }\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Define cor clara ou escura de acordo com contexto.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'font-color'\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right'],\n      description: 'Alinha texto de múltiplas linhas.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'text-align'\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    iconName: {\n      control: {type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone a ser utilizado no iconset.',\n      table: {\n        category: 'Icons'\n      },\n      name: 'icon-name'\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do ícone no botão.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'left'}\n      },\n      name: 'icon-position'\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Oculta o label do botão exibindo somente o ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'false'}\n      },\n      name: 'icon-only'\n    },\n    href: {\n      control: 'text',\n      description: `Se definido o elemento de ação renderizado internamente será um link.`,\n      table: {\n        category: 'Properties'\n      }\n    },\n    target: {\n      control: 'text',\n      description: 'Define o comportamento de abertura do link quando href for informado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '_self'}\n      }\n    }\n  },\n};\n\nexport const ButtonTransparent = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    iconName: '',\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n    fullWidth: false,\n  },\n};\n"]}

package/dist/collection/components/cura-alert/cura-alert.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+:host .conteiner {
+  display: flex;
+  box-sizing: border-box;
+  padding: 12px;
+  gap: 12px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-base);
+  border-radius: 4px;
+  background-color: var(--color-lighter);
+}
+:host .conteiner.floating {
+  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+}
+:host .icon-left {
+  margin-right: 5px;
+}
+:host .icon-right {
+  margin-left: auto;
+  cursor: pointer;
+}
+:host .text {
+  margin-top: 3px;
+}
+:host .actions {
+  margin-top: 5px;
+}