@rededor/cura 0.4.6 → 0.4.8

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js

@@ -0,0 +1,199 @@
+import { Host, h } from '@stencil/core';
+export class CuraAccordionItem {
+  constructor() {
+    this.label = '';
+    this.iconSize = 32;
+    this.openIcon = 'down';
+    this.closeIcon = 'up';
+    this.iconColor = '';
+    this.iconActiveColor = '';
+    this.colorMode = 'dark';
+    this.opened = false;
+    this.styles = {};
+  }
+  getIconColor() {
+    const inverted = this.colorMode === 'light';
+    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
+    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
+    return this.opened ? iconActiveColor : iconColor;
+  }
+  getClasses() {
+    const classes = {};
+    classes['accordion-item'] = true;
+    classes['active'] = this.opened;
+    classes['inverted'] = this.colorMode === 'light';
+    return classes;
+  }
+  accordionItemClick(_) {
+    this.opened = !this.opened;
+  }
+  render() {
+    return (h(Host, { slot: "accordion-item" }, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { class: "label-container" }, h("span", null, this.label), h("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { class: 'content' }, h("div", { class: "content-wrapper" }, h("slot", null))))));
+  }
+  static get is() { return "cura-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-accordion-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-accordion-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text label for accordion item"
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "iconSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accordion items icons"
+        },
+        "attribute": "icon-size",
+        "reflect": true,
+        "defaultValue": "32"
+      },
+      "openIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-icon",
+        "reflect": true,
+        "defaultValue": "'down'"
+      },
+      "closeIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-icon",
+        "reflect": true,
+        "defaultValue": "'up'"
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
+        },
+        "attribute": "icon-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "iconActiveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-active-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "colorMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the color mode to dark or light"
+        },
+        "attribute": "color-mode",
+        "reflect": false,
+        "defaultValue": "'dark'"
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+}
+//# sourceMappingURL=cura-accordion-item.js.map

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,iBAAiB;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;EACnD,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;QAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACzD,WAAK,KAAK,EAAC,iBAAiB;YAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF;QACN,WAAK,KAAK,EAAC,SAAS;UAClB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,eAAa,CACT,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -35,47 +35,126 @@ export default {
 </cura-button>`;
   },
   argTypes: {
-    label: { control: 'text' },
-    disabled: { control: 'boolean' },
-    isLoading: { control: 'boolean' },
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Label'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Estado desabilitado.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'is-loading'
+    },
     size: {
       control: { type: 'inline-radio' },
       options: ['small', 'medium', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
     },
     color: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral']
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' }
+      }
     },
     fontColor: {
       control: { type: 'inline-radio' },
-      options: ['dark', 'light']
+      options: ['dark', 'light'],
+      description: 'Define cor clara ou escura de acordo com contexto.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'font-color'
     },
     textAlign: {
       control: { type: 'inline-radio' },
-      options: ['left', 'center', 'right']
+      options: ['left', 'center', 'right'],
+      description: 'Alinha texto de múltiplas linhas.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'text-align'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
     },
-    fullWidth: { control: 'boolean' },
     iconName: {
       control: { type: 'select' },
-      options: iconNames
+      options: iconNames,
+      description: 'Nome do ícone a ser utilizado no iconset.',
+      table: {
+        category: 'Icons'
+      },
+      name: 'icon-name'
     },
     iconPosition: {
       control: { type: 'inline-radio' },
-      options: ['left', 'right']
+      options: ['left', 'right'],
+      description: 'Posição do ícone no botão.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'left' }
+      },
+      name: 'icon-position'
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Oculta o label do botão exibindo somente o ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'false' }
+      },
+      name: 'icon-only'
     },
-    iconOnly: { control: 'boolean' },
-    href: { control: 'text' },
-    target: { control: 'text' }
+    href: {
+      control: 'text',
+      description: `Se definido o elemento de ação renderizado internamente será um link.`,
+      table: {
+        category: 'Properties'
+      }
+    },
+    target: {
+      control: 'text',
+      description: 'Define o comportamento de abertura do link quando href for informado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '_self' }
+      }
+    }
   },
 };
-export const Primary = {
+export const Button = {
   args: {
     label: 'Button',
     size: 'medium',
     color: 'primary',
     fontColor: 'light',
     textAlign: 'left',
-    fullWidth: false,
     iconName: iconNames[0],
     iconPosition: 'left',
     iconOnly: false,
@@ -83,40 +162,7 @@ export const Primary = {
     isLoading: false,
     href: '',
     target: '_self',
-  },
-};
-export const Secondary = {
-  args: {
-    label: 'Button',
-    size: 'medium',
-    color: 'secondary',
-    fontColor: 'dark',
-    textAlign: 'left',
     fullWidth: false,
-    iconName: iconNames[0],
-    iconPosition: 'left',
-    iconOnly: false,
-    disabled: false,
-    isLoading: false,
-    href: '',
-    target: '_self',
-  },
-};
-export const Accent = {
-  args: {
-    label: 'Button',
-    size: 'medium',
-    color: 'accent',
-    fontColor: 'dark',
-    textAlign: 'left',
-    fullWidth: false,
-    iconName: iconNames[0],
-    iconPosition: 'left',
-    iconOnly: false,
-    disabled: false,
-    isLoading: false,
-    href: '',
-    target: '_self',
   },
 };
 //# sourceMappingURL=cura-button.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-button.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button',\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\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>`;\n  },\n  argTypes: {\n    label: { control: 'text' },\n    disabled: { control: 'boolean' },\n    isLoading: { control: 'boolean' },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral']\n    },\n    fontColor: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light']\n    },\n    textAlign: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'center', 'right']\n    },\n    fullWidth: { control: 'boolean' },\n    iconName: {\n      control: {type: 'select' },\n      options: iconNames\n    },\n    iconPosition: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right']\n    },\n    iconOnly: { control: 'boolean' },\n    href: { control: 'text' },\n    target: { control: 'text'}\n  },\n};\n\nexport const Primary = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'light',\n    textAlign: 'left',\n    fullWidth: false,\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n  },\n};\n\nexport const Secondary = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'secondary',\n    fontColor: 'dark',\n    textAlign: 'left',\n    fullWidth: false,\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n  },\n};\n\nexport const Accent = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'accent',\n    fontColor: 'dark',\n    textAlign: 'left',\n    fullWidth: false,\n    iconName: iconNames[0],\n    iconPosition: 'left',\n    iconOnly: false,\n    disabled: false,\n    isLoading: false,\n    href: '',\n    target: '_self',\n  },\n};\n"]}
+{"version":3,"file":"cura-button.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;gBACX,IAAI,CAAC,SAAS;WACnB,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;eACf,IAAI,CAAC,QAAQ;mBACT,IAAI,CAAC,YAAY;eACrB,IAAI,CAAC,QAAQ;UAClB,IAAI,CAAC,IAAI;YACP,IAAI,CAAC,MAAM;gBACP,IAAI,CAAC,SAAS;WACnB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;MACxC,KAAK;eACI,CAAC;EACd,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,sBAAsB;MACnC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,kHAAkH;MAC/H,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;MACD,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;MACrC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MAC7F,WAAW,EAAE,kEAAkE;MAC/E,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,WAAW,EAAE,oDAAoD;MACjE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;OACjC;MACD,IAAI,EAAE,YAAY;KACnB;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;MACpC,WAAW,EAAE,mCAAmC;MAChD,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;OACjC;MACD,IAAI,EAAE,YAAY;KACnB;IACD,SAAS,EAAE;MACT,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,8GAA8G;MAC3H,KAAK,EAAE;QACL,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,2CAA2C;MACxD,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;MACD,IAAI,EAAE,WAAW;KAClB;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,WAAW,EAAE,4BAA4B;MACzC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;OACjC;MACD,IAAI,EAAE,eAAe;KACtB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,mDAAmD;MAChE,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;MACD,IAAI,EAAE,WAAW;KAClB;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uEAAuE;MACpF,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;IACD,MAAM,EAAE;MACN,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uEAAuE;MACpF,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;EACpB,IAAI,EAAE;IACJ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IACtB,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,OAAO;IACf,SAAS,EAAE,KAAK;GACjB;CACF,CAAC","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button',\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\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>`;\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 Button = {\n  args: {\n    label: 'Button',\n    size: 'medium',\n    color: 'primary',\n    fontColor: 'light',\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"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-outline.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-outline/cura-button-outline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Components/Buttons/Button Outline',\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-outline\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-outline>`;\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 ButtonOutline = {\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"]}