@rededor/cura 0.5.1 → 0.5.3

package/dist/collection/components/forms/cura-switch/cura-switch.stories.js

@@ -0,0 +1,137 @@
+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 renderCuraSwitch = (label, message, args) => {
+  const block = `<cura-switch${args.checked ? `
+  checked` : ''}${args.size && args.size !== 'medium' ? `
+  size="${args.size}"` : ''}${args.disabled ? `
+  disabled` : ''}${args.position && args.position !== 'left' ? `
+  position="${args.position}"` : ''}${args.ontabindex !== 0 ? `
+  ontabindex="${args.ontabindex}"` : ''}${args.background && args.background !== 'light' ? `
+  background="${args.background}"` : ''}${args.color && args.color !== 'accent' ? `
+  color="${args.color}"` : ''}${label ? `
+  label="${label}"` : ''}>${message ? `
+  ${message}` : ''}
+</cura-switch>
+`;
+  return `${block}`;
+};
+export default {
+  title: 'Componentes/Forms/Switch',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label, message } = _a, args = __rest(_a, ["label", "message"]);
+    return renderCuraSwitch(label, message, args);
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto do label do switch.',
+      name: 'label',
+      table: {
+        category: 'Properties',
+      },
+    },
+    message: {
+      control: 'text',
+      description: 'Texto adicional de ajuda ou mensagem.',
+      name: 'Content',
+      table: {
+        category: 'Slots',
+      },
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Define se o switch está checado.',
+      table: {
+        category: 'States',
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Desabilita o switch.',
+      table: {
+        category: 'States',
+        defaultValue: { summary: false },
+      },
+    },
+    ontabindex: {
+      control: 'number',
+      description: 'Define o tabIndex do switch.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 0 },
+      },
+      name: 'ontabindex',
+    },
+    position: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'Posição do label em relação ao switch.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'left' },
+      },
+      name: 'position',
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'Tamanho do switch.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' },
+      },
+    },
+    background: {
+      control: { type: 'inline-radio' },
+      options: ['dark', 'light'],
+      description: 'Background do switch.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'light' },
+      },
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor do switch.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent' },
+      },
+    },
+    onchange: {
+      control: 'none',
+      description: 'Emite evento via Listener quando o estado do Switch é alterado. `{ checked: boolean }`',
+      table: {
+        category: 'Event',
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+export const CuraSwitchStory = {
+  args: {
+    label: 'Switch',
+    color: 'accent',
+    message: 'Mensagem do switch',
+    checked: false,
+    size: 'medium',
+    disabled: false,
+    position: 'left',
+    background: 'light',
+    ontabindex: 0,
+  },
+};
+//# sourceMappingURL=cura-switch.stories.js.map

package/dist/collection/components/forms/cura-switch/cura-switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-switch.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSwitch = (label, message, args) => {\n  const block = `<cura-switch${args.checked ? `\n  checked` : ''}${args.size && args.size !== 'medium' ? `\n  size=\"${args.size}\"` : ''}${args.disabled ? `\n  disabled` : ''}${args.position && args.position !== 'left' ? `\n  position=\"${args.position}\"` : ''}${args.ontabindex !== 0 ? `\n  ontabindex=\"${args.ontabindex}\"` : ''}${args.background && args.background !== 'light' ? `\n  background=\"${args.background}\"` : ''}${args.color && args.color !== 'accent' ? `\n  color=\"${args.color}\"` : ''}${label ? `\n  label=\"${label}\"` : ''}>${message ? `\n  ${message}` : ''}\n</cura-switch>\n`;\n  return `${block}`;\n};\n\nexport default {\n  title: 'Componentes/Forms/Switch',\n  tags: ['autodocs'],\n  render: ({ label, message, ...args }) => {\n    return renderCuraSwitch(label, message, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto do label do switch.',\n      name: 'label',\n      table: {\n        category: 'Properties',\n      },\n    },\n    message: {\n      control: 'text',\n      description: 'Texto adicional de ajuda ou mensagem.',\n      name: 'Content',\n      table: {\n        category: 'Slots',\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Define se o switch está checado.',\n      table: {\n        category: 'States',\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Desabilita o switch.',\n      table: {\n        category: 'States',\n        defaultValue: { summary: false },\n      },\n    },\n    ontabindex: {\n      control: 'number',\n      description: 'Define o tabIndex do switch.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 0 },\n      },\n      name: 'ontabindex',\n    },\n    position: {\n      control: { type: 'inline-radio' },\n      options: ['left', 'right'],\n      description: 'Posição do label em relação ao switch.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'left' },\n      },\n      name: 'position',\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanho do switch.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    background: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Background do switch.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor do switch.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent' },\n      },\n    },\n    onchange: {\n      control: 'none',\n      description: 'Emite evento via Listener quando o estado do Switch é alterado. `{ checked: boolean }`',\n      table: {\n        category: 'Event',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const CuraSwitchStory = {\n  args: {\n    label: 'Switch',\n    color: 'accent',\n    message: 'Mensagem do switch',\n    checked: false,\n    size: 'medium',\n    disabled: false,\n    position: 'left',\n    background: 'light',\n    ontabindex: 0,\n  },\n};\n"]}

package/dist/collection/components/text/cura-display/cura-display.css

@@ -11,59 +11,40 @@
  * Responsive media for large only.
  * Use: @include large-only() { ... }
  */
-/**
- * Responsive media for large and up.
- * Use: @include large-up() { ... }
- */
 /**
  * Responsive media for xlarge only.
  * Use: @include xlarge-only() { ... }
  */
+/**
+ * Responsive media for medium to large.
+ * Use: @include medium-large() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
 :host {
   display: block;
-  font-size: var(--font-size);
-  text-transform: uppercase;
+  font-size: var(--font-size-base);
 }
 :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
   font-family: var(--font-family);
-  font-size: 4.285em;
-  font-weight: var(--font-weight-black);
-  color: var(--color-body);
-  line-height: 120%;
-  letter-spacing: -4%;
-  margin-block-start: var(--block-margin);
-  margin-block-end: var(--block-margin);
-}
-:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-  font-size: 6.21em;
-}
-:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
   font-size: 3em;
   font-weight: var(--font-weight-bold);
+  color: var(--color-body);
+  line-height: var(--line-height);
+  margin-block: var(--margin-block);
+  letter-spacing: 0px;
 }
-@media (min-width: 768px) and (max-width: 1365px) {
+@media (min-width: 769px) and (max-width: 1920px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-    font-size: 4.92em;
-  }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-    font-size: 7.07em;
-  }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
-    font-size: 3.428em;
+    font-size: 3.429em;
   }
 }
-@media (min-width: 1366px) {
+@media (min-width: 1921px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-    font-size: 6.14em;
-    line-height: 125%;
-  }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-    font-size: 8.857em;
-    letter-spacing: -6%;
-  }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
-    font-size: 4.285em;
-    letter-spacing: -2%;
+    font-size: 4.286em;
+    line-height: calc(var(--line-height) + 5%);
   }
 }
 :host ::slotted(b), :host ::slotted(strong) {
@@ -72,10 +53,12 @@
 :host ::slotted(a) {
   font-weight: var(--font-weight-bold);
   color: var(--color-link);
-  text-decoration: none;
   text-underline-offset: 10%;
   cursor: pointer;
 }
+:host ::slotted(u) {
+  text-underline-offset: 10%;
+}
 :host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);

package/dist/collection/components/text/cura-display/cura-display.js

@@ -1,57 +1,57 @@
 import { Host, h } from '@stencil/core';
 export class CuraDisplay {
   constructor() {
+    this.theme = window.CuraAPI.theme;
     this.level = 1;
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '120%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
   }
   connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.setFontProperties();
     this.setColors();
   }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    return classes;
-  }
   setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
     this.styles = {
       '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
       '--font-size': window.CuraAPI.theme.fonts.getSize(),
-      '--font-weight-bold': this.weights.bold,
-      '--font-weight-black': this.weights.black
+      '--font-weight-bold': this.weights.bold
     };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
   }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
   }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
+  setColors() {
+    const fontColor = this.color
+      ? this.theme.colors.getColor(this.color)
+      : this.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
   }
   getHeadingTag() {
     const tags = {
-      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+      '1': h("h1", { style: this.styles }, h("slot", null)),
+      '2': h("h2", { style: this.styles }, h("slot", null)),
+      '3': h("h3", { style: this.styles }, h("slot", null)),
+      '4': h("h4", { style: this.styles }, h("slot", null)),
+      '5': h("h5", { style: this.styles }, h("slot", null)),
+      '6': h("h6", { style: this.styles }, h("slot", null)),
+      'default': h("h1", { style: this.styles }, h("slot", null))
     };
     return tags[`${this.level}`] || tags['default'];
   }
   render() {
-    return (h(Host, null, this.getHeadingTag()));
+    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
   }
   static get is() { return "cura-display"; }
   static get encapsulation() { return "shadow"; }
@@ -71,21 +71,21 @@ export class CuraDisplay {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "1 | 2 | 3 | 4 | 5 | 6",
+          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading level for semantics.\nValues: 1(default)-6."
+          "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1(default) to 6."
         },
         "attribute": "level",
         "reflect": true,
         "defaultValue": "1"
       },
-      "size": {
+      "spotColor": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -97,31 +97,48 @@ export class CuraDisplay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading style size.\nValues: small | regular(default) | large."
+          "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
         },
-        "attribute": "size",
+        "attribute": "spot-color",
         "reflect": true,
-        "defaultValue": "'regular'"
+        "defaultValue": "'accent-dark'"
       },
-      "inverted": {
-        "type": "boolean",
+      "color": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Apply light color to text in dark background.\nValues: boolean."
+          "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
         },
-        "attribute": "inverted",
+        "attribute": "color",
+        "reflect": false
+      },
+      "marginBlock": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS margin-block property values.\nDefault to 1.25em"
+        },
+        "attribute": "margin-block",
         "reflect": true,
-        "defaultValue": "false"
+        "defaultValue": "'1.25em'"
       },
-      "spotColor": {
+      "lineHeight": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -133,14 +150,28 @@ export class CuraDisplay {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
+          "text": "CSS line-height property values.\nDefault to 140%"
         },
-        "attribute": "spot-color",
+        "attribute": "line-height",
         "reflect": true,
-        "defaultValue": "'primary'"
+        "defaultValue": "'120%'"
       }
     };
   }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }, {
+        "propName": "spotColor",
+        "methodName": "handleChangeColor"
+      }];
+  }
 }
 //# sourceMappingURL=cura-display.js.map

package/dist/collection/components/text/cura-display/cura-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics.\n   * Values: 1(default)-6.\n   */\n  @Prop({reflect: true}) level = 1;\n  /**\n  * Heading style size.\n  * Values: small | regular(default) | large.\n  */\n  @Prop({reflect: true}) size = 'regular';\n  /**\n  * Apply light color to text in dark background.\n  * Values: boolean.\n  */\n  @Prop({reflect: true}) inverted = false;\n  /**\n  * Apply base system color to elements like <a> and <abbr>.\n  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n  */\n  @Prop({reflect: true}) spotColor = 'primary';\n \n   /**\n    * Host element <cura-heading>\n    */\n   @Element() host: HTMLElement;\n \n   /**\n    * Internal Props\n    */\n   weights: any;\n   styles: any;\n\n   connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.size.toLowerCase()] =  true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '0.5em');\n  }\n\n  setColors() {\n    const fontColor = this.inverted \n      ? window.CuraAPI.theme.colors.getColor('neutral-white') \n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n    this.styles['--color-link'] = this.inverted \n      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '120%';\n\n  /**\n   * Host element <cura-display>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  theme = window.CuraAPI.theme;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles}><slot></slot></h1>,\n      '2': <h2 style={this.styles}><slot></slot></h2>,\n      '3': <h3 style={this.styles}><slot></slot></h3>,\n      '4': <h4 style={this.styles}><slot></slot></h4>,\n      '5': <h5 style={this.styles}><slot></slot></h5>,\n      '6': <h6 style={this.styles}><slot></slot></h6>,\n      'default': <h1 style={this.styles}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-display/cura-display.stories.js

@@ -10,71 +10,116 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraDisplay = (label, args) => {
+  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+  cura-display { ${args.cssMarginBlock ? `
+    --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
+    --line-height: ${args.cssLineHeight} !important;` : ``}
+  }
+</style>
+
+` : '';
+  const block = `<cura-display${args.level ? `
+  level="${args.level}"` : ''}${args.color ? `
+  color="${args.color}"` : ''}${args.spotColor ? `
+  spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
+  margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
+  line-height="${args.lineHeight}"` : ''}>
+  ${label}
+</cura-display>
+`;
+  return `${styles}${block}${block}${block}`;
+};
 export default {
   title: 'Componentes/Text/Display',
   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-display
-  level="${args.level}"
-  spot-color="${args.spotColor}"
-  size="${args.size}"
-  inverted="${args.inverted}">
-  ${label}
-</cura-display>
-<cura-paragraph>Proin quis turpis et turpis efficitur dictum. Suspendisse egestas posuere libero. Sed non dapibus urna. Sed luctus tincidunt nibh, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. Quisque sed nibh in odio blandit mollis at quis dolor. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.</cura-paragraph>`;
+    return renderCuraDisplay(label, args);
   },
   argTypes: {
     label: {
       control: 'text',
-      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      description: 'Define o texto do componente diretamente.',
       name: 'Content'
     },
-    inverted: {
-      control: 'boolean',
-      description: 'Inverte cores do texto para aplicação em fundo escuro.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'false' }
-      }
-    },
-    size: {
+    color: {
       control: { type: 'select' },
-      options: ['small', 'regular', 'large'],
-      description: 'Tamanhos disponíveis.',
+      options: ['', ...colors],
+      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'regular' }
+        defaultValue: { summary: 'Cor de texto padrão do tema' }
       }
     },
     spotColor: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-      description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+      options: ['', ...colors],
+      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',
+      name: 'spot-color',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'primary' }
+        defaultValue: { summary: 'accent-dark' }
       }
     },
     level: {
       control: { type: 'number', min: 1, max: 6, step: 1 },
-      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',
       table: {
         category: 'Properties',
-        defaultValue: { summary: 'primary' }
+        defaultValue: { summary: 1 }
       }
-    }
+    },
+    marginBlock: {
+      control: 'text',
+      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
+      name: 'margin-block',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '1.25em' }
+      }
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
+      name: 'line-height',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '130%' }
+      }
+    },
+    cssMarginBlock: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--margin-block',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '1.25em' }
+      }
+    },
+    cssLineHeight: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--line-height',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '130%' }
+      }
+    },
   },
 };
 export const Display = {
   args: {
     label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
-    size: 'regular',
-    level: 1,
-    spotColor: 'primary',
-    inverted: false,
+    level: '',
+    color: '',
+    spotColor: '',
+    marginBlock: '',
+    lineHeight: '',
+    cssMarginBlock: '',
+    cssLineHeight: ''
   },
 };
 //# sourceMappingURL=cura-display.stories.js.map