@rededor/cura 0.5.2 → 0.5.3

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

@@ -0,0 +1,167 @@
+import { Host, h } from '@stencil/core';
+export class CuraAlert {
+  constructor() {
+    this.handleClose = () => {
+      this.close.emit();
+      this.host.remove();
+    };
+    this.type = 'info';
+    this.floating = false;
+    this.label = undefined;
+    this.closeable = true;
+    this.styles = {};
+  }
+  setColors() {
+    const colors = [
+      { name: '--color-lighter', theme: `${this.type}-lighter` },
+      { name: '--neutral-black', theme: 'neutral-black' },
+      { name: '--color-light', theme: `${this.type}-light` },
+      { name: '--color-base', theme: `${this.type}-base` },
+    ];
+    colors.forEach(color => {
+      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
+    });
+    this.styles = Object.assign({}, this.styles);
+  }
+  connectedCallback() {
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes['conteiner'] = true;
+    classes['floating'] = this.floating;
+    return classes;
+  }
+  getNameIcon() {
+    const iconMapping = {
+      info: 'infoCircle',
+      success: 'checkCircle',
+      warning: 'alertCircle',
+      error: 'alertTriangle',
+    };
+    return iconMapping[this.type];
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("cura-icon", { name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { class: "content" }, h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), this.closeable ?
+      (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
+      : '')));
+  }
+  static get is() { return "cura-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'info' | 'success' | 'warning' | 'error'",
+          "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'info'"
+      },
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "closeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "closeable",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "type",
+        "methodName": "setColors"
+      }];
+  }
+}
+//# sourceMappingURL=cura-alert.js.map

package/dist/collection/components/cura-alert/cura-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({reflect: true}) closeable = true;\n  @State()\n  styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-alert/cura-alert.stories.js

@@ -0,0 +1,95 @@
+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 renderCuraAlert = (label, args) => {
+  const block = `<cura-alert${label ? `
+  label="${label}"` : ''}${args.type && args.type !== 'info' ? `
+  type="${args.type}"` : ''}${args.closeable === false ? `
+  closeable="${args.closeable}"` : ''}${args.floating ? `
+  floating="${args.floating}"` : ''}>
+  ${args.content}${args.actions ? `
+  <cura-paragraph slot="actions" margin-block="0" spot-color="${args.type}-dark" size="xsmall">${args.actions}</cura-paragraph>` : ''}
+</cura-alert>
+`;
+  return `${block}`;
+};
+export default {
+  title: 'Componentes/Feedback/Alert',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    return renderCuraAlert(label, args);
+  },
+  argTypes: {
+    floating: {
+      control: 'boolean',
+      description: 'Define se o alerta é flutuante e aplica o sombreamento.',
+      table: {
+        category: 'State',
+        defaultValue: { summary: false },
+      },
+    },
+    closeable: {
+      control: 'boolean',
+      description: 'Define se o alerta pode ser fechado.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: true },
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['', 'info', 'success', 'warning', 'error'],
+      description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'info' },
+      },
+      name: 'type',
+    },
+    label: {
+      control: 'text',
+      description: 'Título do alerta.',
+      table: {
+        category: 'Properties',
+      },
+      name: 'label',
+    },
+    actions: {
+      control: 'text',
+      description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',
+      defaultValue: '',
+      table: {
+        category: 'Slot',
+      },
+    },
+    content: {
+      control: 'text',
+      description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',
+      defaultValue: '',
+      table: {
+        category: 'Slot',
+      },
+    },
+  },
+};
+export const Alert = {
+  args: {
+    label: 'Título do alerta',
+    type: 'info',
+    closeable: true,
+    floating: false,
+    content: 'Texto explicativo para o alert.',
+    actions: '<a href="https://www.rededorsaoluiz.com.br" target="_blank">Link</a>',
+  },
+};
+//# sourceMappingURL=cura-alert.stories.js.map

package/dist/collection/components/cura-alert/cura-alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-alert.stories.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,IAAS,EAAE,EAAE;EACnD,MAAM,KAAK,GAAG,cAAc,KAAK,CAAC,CAAC,CAAC;WAC3B,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;UACrD,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC;eAC1C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cAC1C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;IAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;gEAC8B,IAAI,CAAC,IAAI,wBAAwB,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,EAAE;;CAEpI,CAAC;EACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAA;AAED,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,OAAO,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACtC,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,yDAAyD;MACtE,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,SAAS,EAAE;MACT,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,sCAAsC;MACnD,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACpD,WAAW,EAAE,0FAA0F;MACvG,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;MACD,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,mBAAmB;MAChC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;MACD,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;MACP,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,6EAA6E;MAC1F,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;OACjB;KACF;IACD,OAAO,EAAE;MACP,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,2FAA2F;MACxG,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;OACjB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;EACnB,IAAI,EAAE;IACJ,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,sEAAsE;GAChF;CACF,CAAC","sourcesContent":["const renderCuraAlert = (label: string, args: any) => {\n  const block = `<cura-alert${label ? `\n  label=\"${label}\"` : ''}${args.type && args.type !== 'info' ? `\n  type=\"${args.type}\"` : ''}${args.closeable === false ? `\n  closeable=\"${args.closeable}\"` : ''}${args.floating ? `\n  floating=\"${args.floating}\"` : ''}>\n  ${args.content}${args.actions ? `\n  <cura-paragraph slot=\"actions\" margin-block=\"0\" spot-color=\"${args.type}-dark\" size=\"xsmall\">${args.actions}</cura-paragraph>` : ''}\n</cura-alert>\n`;\n  return `${block}`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Alert',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraAlert(label, args);\n  },\n  argTypes: {\n    floating: {\n      control: 'boolean',\n      description: 'Define se o alerta é flutuante e aplica o sombreamento.',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false },\n      },\n    },\n    closeable: {\n      control: 'boolean',\n      description: 'Define se o alerta pode ser fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['', 'info', 'success', 'warning', 'error'],\n      description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'info' },\n      },\n      name: 'type',\n    },\n    label: {\n      control: 'text',\n      description: 'Título do alerta.',\n      table: {\n        category: 'Properties',\n      },\n      name: 'label',\n    },\n    actions: {\n      control: 'text',\n      description: 'Conteúdo de itens de ação do alerta. É projetado no slot nomeado `actions`.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    content: {\n      control: 'text',\n      description: 'Conteúdo do texto principal do alerta. É projetado automaticamente dentro do slot padrão.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n  },\n};\n\nexport const Alert = {\n  args: {\n    label: 'Título do alerta',\n    type: 'info',\n    closeable: true,\n    floating: false,\n    content: 'Texto explicativo para o alert.',\n    actions: '<a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">Link</a>',\n  },\n};\n"]}

package/dist/collection/components/cura-icon/cura-icon.definitions.js

@@ -0,0 +1,15 @@
+export const microIcons = ['arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'check', 'checkDouble', 'close', 'closeCircle', 'collapse', 'down', 'expand', 'linkExternal', 'link', 'left', 'minus', 'minusCircle', 'minusSquare', 'order', 'subItem', 'right', 'plus', 'plusCircle', 'plusSquare', 'up', 'filter', 'swap'];
+export const iconSizes = {
+  "128": { size: 128, stroke: 5.25 },
+  "72": { size: 72, stroke: 3.5 },
+  "64": { size: 64, stroke: 3.25 },
+  "48": { size: 48, stroke: 2.75 },
+  "40": { size: 40, stroke: 2.5 },
+  "32": { size: 32, stroke: 2.25 },
+  "24": { size: 24, stroke: 2 },
+  "20": { size: 20, stroke: 1.75 },
+  "16": { size: 16, stroke: 1.5 },
+  "micro": { size: 12, stroke: 1.5 },
+  "default": { size: 24, stroke: 2 }
+};
+//# sourceMappingURL=cura-icon.definitions.js.map

package/dist/collection/components/cura-icon/cura-icon.definitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-icon.definitions.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAW,EAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAC,aAAa,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,YAAY,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,CAAC,CAAC;AAEnS,MAAM,CAAC,MAAM,SAAS,GAAG;EACvB,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;EAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;EAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;EAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;EAC7B,OAAO,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;EACjC,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;CACjC,CAAC","sourcesContent":["export const microIcons = ['arrowDown','arrowLeft','arrowRight','arrowUp','check','checkDouble','close','closeCircle','collapse','down','expand','linkExternal','link','left','minus','minusCircle','minusSquare','order','subItem','right','plus','plusCircle','plusSquare','up','filter','swap'];\n\nexport const iconSizes = {\n  \"128\": {size: 128, stroke: 5.25},\n  \"72\": {size: 72, stroke: 3.5},\n  \"64\": {size: 64, stroke: 3.25},\n  \"48\": {size: 48, stroke: 2.75},\n  \"40\": {size: 40, stroke: 2.5},\n  \"32\": {size: 32, stroke: 2.25},\n  \"24\": {size: 24, stroke: 2},\n  \"20\": {size: 20, stroke: 1.75},\n  \"16\": {size: 16, stroke: 1.5},\n  \"micro\": {size: 12, stroke: 1.5 },\n  \"default\": {size: 24, stroke: 2}\n};\n"]}

package/dist/collection/components/cura-icon/cura-icon.js

@@ -1,18 +1,7 @@
 import { Host, h } from '@stencil/core';
+import { microIcons, iconSizes } from './cura-icon.definitions';
 export class CuraIcon {
   constructor() {
-    this.sizes = {
-      "128": { size: 128, stroke: 5.25 },
-      "72": { size: 72, stroke: 3.5 },
-      "64": { size: 64, stroke: 3.25 },
-      "48": { size: 48, stroke: 2.75 },
-      "40": { size: 40, stroke: 2.5 },
-      "32": { size: 32, stroke: 2.25 },
-      "24": { size: 24, stroke: 2 },
-      "20": { size: 20, stroke: 1.75 },
-      "16": { size: 16, stroke: 1.5 },
-      "default": { size: 24, stroke: 2 }
-    };
     this.name = '';
     this.color = 'neutral-base';
     this.size = undefined;
@@ -20,14 +9,18 @@ export class CuraIcon {
     this.disabled = false;
   }
   sizeHandler(size) {
+    if (size === 'micro' && !microIcons.includes(this.name)) {
+      size = 16;
+      console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);
+    }
     const scaledStroke = (iconSize) => {
-      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
+      return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;
     };
-    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
-    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
+    this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);
+    this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
   }
   colorHandler() {
-    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));
   }
   connectedCallback() {
     this.assetsPath = window.CuraAPI.localAssetsPath;

package/dist/collection/components/cura-icon/cura-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  sizes = {\n    \"128\": {size: 128, stroke: 5.25},\n    \"72\": {size: 72, stroke: 3.5},\n    \"64\": {size: 64, stroke: 3.25},\n    \"48\": {size: 48, stroke: 2.75},\n    \"40\": {size: 40, stroke: 2.5},\n    \"32\": {size: 32, stroke: 2.25},\n    \"24\": {size: 24, stroke: 2},\n    \"20\": {size: 20, stroke: 1.75},\n    \"16\": {size: 16, stroke: 1.5},\n    \"default\": {size: 24, stroke: 2}\n  };\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    const scaledStroke = (iconSize: string | number) => {\n      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,QAAQ;;gBAEW,EAAE;iBAChB,cAAc;;mBAEG,SAAS;oBACvB,KAAK;;EAKxB,WAAW,CAAC,IAAqB;IAC/B,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG;MACxD,IAAI,GAAG,EAAE,CAAC;MACV,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,sEAAsE,CAAC,CAAC;KACvG;IACD,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;MACjD,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACjG,CAAC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;IACnH,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;EACxG,CAAC;EAID,YAAY;IACV,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC;EACnI,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;IACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;QAClC,WACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\nimport { microIcons, iconSizes } from './cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    if (size === 'micro' && !microIcons.includes(this.name) ) {\n      size = 16;\n      console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);\n    }\n    const scaledStroke = (iconSize: string | number) => {\n      return `${iconSizes[iconSize].stroke * (iconSizes.default.size / iconSizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);\n    this.setHostProperty('--stroke', iconSizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color || 'neutral'));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icon/cura-icon.stories.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import iconNames from '../../assets/icons/iconset-default-list';
 import { getColorsWithDepths } from "../../utils/utils";
+import { iconSizes } from './cura-icon.definitions';
 const colors = getColorsWithDepths();
 export default {
   title: 'Componentes/Icons/Icon',
@@ -38,8 +39,8 @@ export default {
     },
     size: {
       control: { type: 'select' },
-      options: ["128", "72", "64", "48", "40", "32", "24", "20", "16"],
-      description: 'Tamanhos disponíveis.',
+      options: Object.keys(iconSizes).filter(key => key !== 'default'),
+      description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',
       table: {
         category: 'Properties',
         defaultValue: { summary: '24' }
@@ -47,8 +48,8 @@ export default {
     },
     color: {
       control: { type: 'select' },
-      options: colors,
-      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      options: ['', ...colors],
+      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',
       table: {
         category: 'Properties',
         defaultValue: { summary: 'neutral' }
@@ -57,7 +58,7 @@ export default {
     name: {
       control: { type: 'select' },
       options: iconNames,
-      description: 'Nome do ícone no iconset.',
+      description: 'Define o ícone pelo seu nome no iconset.',
       table: {
         category: 'Properties'
       }
@@ -68,7 +69,7 @@ export const Icon = {
   args: {
     name: iconNames[0],
     size: '24',
-    color: 'neutral',
+    color: '',
     disabled: false,
   },
 };

package/dist/collection/components/cura-icon/cura-icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,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;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAChE,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,2BAA2B;MACxC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\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-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: colors,\n      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Nome do ícone no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: 'neutral',\n    disabled: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,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;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;MAChE,WAAW,EAAE,yHAAyH;MACtI,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;MACxB,WAAW,EAAE,oFAAoF;MACjG,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,0CAA0C;MACvD,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\nimport { iconSizes } from './cura-icon.definitions';\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\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-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(iconSizes).filter(key => key !== 'default'),\n      description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Define o ícone pelo seu nome no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: '',\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.css

@@ -16,6 +16,7 @@
   display: flex;
   flex-direction: column;
   text-align: center;
+  align-items: center;
   margin-right: 9px;
   padding: 8px;
 }
@@ -24,12 +25,13 @@
 }
 .iconSizes .size span {
   font-size: 10px;
+  margin: 8px 0;
 }
 .iconSizes.invert {
   margin-top: 12px;
 }
 .iconSizes.invert .size {
-  background-color: #262626;
+  background-color: #2d2d2d;
   color: #F6F6F6;
   border-radius: 3px;
 }
@@ -46,23 +48,20 @@
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.2s linear;
-}
-.icons .icon span {
-  font-size: 12px;
-  padding: 6px;
+  width: 105px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  margin-bottom: 16px;
   box-sizing: border-box;
-  background: #000;
-  color: #FFF;
-  border-radius: 2px;
-  position: absolute;
-  top: -2px;
-  left: 50%;
-  transform: translateX(-50%) translateY(-100%);
-  display: none;
+  /* &.selected {
+    transform: scale(1.2);
+  } */
 }
-.icons .icon:hover {
-  opacity: 1;
+.icons .icon cura-label {
+  margin-top: 8px;
 }
-.icons .icon:hover span {
-  display: block;
+.icons .icon cura-paragraph {
+  margin-top: 4px;
 }

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -1,16 +1,23 @@
 import { Host, h } from '@stencil/core';
 import iconsetdefaulticons from '../../assets/icons/iconset-default-list';
+import { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';
 export class CuraIconsView {
   constructor() {
-    this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
+    this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
     this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
     this.setSelected = (icon) => {
       this.selected = icon;
     };
-    this.selected = '360';
+    this.selected = iconsetdefaulticons[0];
+  }
+  connectedCallback() {
+    this.sizes.unshift(this.sizes.pop());
   }
   render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
+    return (h(Host, null, h("div", { class: "iconDetail" }, h("cura-heading", { size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", null, this.selected)), h("div", { class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+      h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
   }
   static get is() { return "cura-icons-view"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAO1E,MAAM,OAAO,aAAa;;IAExB,UAAK,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAC9C,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAG9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAA;oBAJmB,KAAK;;EAMzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,cAAM,IAAI,CAAC,QAAQ,CAAO;QAC1B,WAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;UACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;UAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,WAAW;UAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAK,CAAC,EAAE,CACzB,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAc;YAC1D,gBAAQ,KAAK,CAAS,CAClB,CACP;UACD,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,SAAa;YACrD,2BAAqB,CACjB,CACF,CACF;MACN,WAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACrD,iBAAW,IAAI,EAAE,IAAI,GAAc;QACnC,gBAAO,IAAI,CAAQ,CACf,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = '360';\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <h4>{ this.selected }</h4>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes\">\n            { this.colors.map( color =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} color={color}></cura-icon>\n                <span>{ color }</span>\n              </div>\n            )}\n            <div class=\"size\">\n              <cura-icon name={this.selected} disabled></cura-icon>\n              <span>Disabled</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n              <cura-icon name={icon}></cura-icon>\n              <span>{icon}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAO3E,MAAM,OAAO,aAAa;;IAExB,UAAK,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC;IAChE,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAO9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAA;oBARmB,mBAAmB,CAAC,CAAC,CAAC;;EAE1C,iBAAiB;IACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;EACvC,CAAC;EAMD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,oBAAc,IAAI,EAAC,OAAO,kBAAc,QAAQ;;UAAO,aAAK,IAAI,CAAC,QAAQ,CAAM,CAAe;QAC9F,WAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CACvB,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;UAC9D,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;YACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CACvB,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;UAC9D,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;YAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG,CACF;MACN,WAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAChG,iBACE,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAAc;QAC9E,kBACE,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,IAAG,IAAI,CAAc;QACnF,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;UACjC,sBACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,kBACA,KAAK,iBACN,MAAM,YAAuB,CAEzC,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}