@rededor/cura 0.5.0-alpha.0 → 0.5.0

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

@@ -0,0 +1,80 @@
+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;
+};
+export default {
+  title: 'Components/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>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      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: 'primary' }
+      }
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 6, step: 1 },
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  },
+};
+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,
+  },
+};
+//# sourceMappingURL=cura-display.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-display.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,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;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;IACvB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,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,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Display',\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-display\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\">\n  ${label}\n</cura-display>\n<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>`;\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: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\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: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Display = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}

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

@@ -0,0 +1,92 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * 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() { ... }
+ */
+:host {
+  display: block;
+  font-size: var(--font-size);
+}
+:host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+  font-family: var(--font-family);
+  font-size: 1.71em;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-body);
+  line-height: 130%;
+  letter-spacing: 0%;
+  margin-block-start: var(--block-margin);
+  margin-block-end: var(--block-margin);
+}
+:host h1.bold-weight, :host h2.bold-weight, :host h3.bold-weight, :host h4.bold-weight, :host h5.bold-weight, :host h6.bold-weight {
+  font-weight: var(--font-weight-medium);
+}
+:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
+  font-size: 2.07em;
+  letter-spacing: -2%;
+}
+:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+  font-size: 1.214em;
+  line-height: 150%;
+  letter-spacing: 0%;
+}
+:host h1.small.bold-weight, :host h2.small.bold-weight, :host h3.small.bold-weight, :host h4.small.bold-weight, :host h5.small.bold-weight, :host h6.small.bold-weight {
+  font-weight: var(--font-weight-bold);
+}
+@media (min-width: 768px) and (max-width: 1365px) {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+    font-size: 2em;
+  }
+  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
+    font-size: 2.357em;
+  }
+  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 1.357em;
+  }
+}
+@media (min-width: 1366px) {
+  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
+    font-size: 2.5em;
+    line-height: 135%;
+    letter-spacing: -2%;
+  }
+  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
+    font-size: 2.92em;
+  }
+  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 1.71em;
+    line-height: 160%;
+    letter-spacing: 0%;
+  }
+}
+:host ::slotted(b), :host ::slotted(strong) {
+  font-weight: var(--font-weight-bold);
+}
+:host ::slotted(a) {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-link);
+  text-decoration: none;
+  text-underline-offset: 10%;
+  cursor: pointer;
+}
+:host ::slotted(abbr) {
+  color: var(--color-link);
+  text-decoration: underline dashed 1px var(--color-link);
+  text-underline-offset: 10%;
+  cursor: default;
+}

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

@@ -0,0 +1,168 @@
+import { Host, h } from '@stencil/core';
+export class CuraHeading {
+  constructor() {
+    this.level = 1;
+    this.size = 'regular';
+    this.weight = 'regular';
+    this.inverted = false;
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    classes[`${this.weight.toLowerCase()}-weight`] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    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`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  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))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, null, this.getHeadingTag()));
+  }
+  static get is() { return "cura-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "level": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level for semantics.\nValues: 1(default)-6."
+        },
+        "attribute": "level",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading style size.\nValues: small | regular(default) | large."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      },
+      "weight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading font weight.\nValues: regular(default) | bold."
+        },
+        "attribute": "weight",
+        "reflect": true,
+        "defaultValue": "'regular'"
+      },
+      "inverted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply light color to text in dark background.\nValues: boolean."
+        },
+        "attribute": "inverted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "spotColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "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."
+        },
+        "attribute": "spot-color",
+        "reflect": true,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=cura-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;;iBAMS,CAAC;gBAKF,SAAS;kBAKP,SAAS;oBAKP,KAAK;qBAKJ,SAAS;;EAa5C,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAI,IAAI,CAAC;IACzC,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACtD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;MACvC,qBAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;KAC1C,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;EAClD,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;MAC7B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;MACvD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAClG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ;MACzC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU,CAAC;MACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC;EACrE,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,aAAa;IACX,MAAM,IAAI,GAAG;MACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;MACzE,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;QAAE,eAAa,CAAK;KAChF,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;EAClD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACD,IAAI,CAAC,aAAa,EAAE,CACjB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\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   * Heading font weight.\n   * Values: regular(default) | bold.\n   */\n  @Prop({reflect: true}) weight = '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    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\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"]}

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

@@ -0,0 +1,91 @@
+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;
+};
+export default {
+  title: 'Components/Text/Heading',
+  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-heading
+  level="${args.level}"
+  spot-color="${args.spotColor}"
+  size="${args.size}"
+  inverted="${args.inverted}"
+  weight="${args.weight}">
+  ${label}
+</cura-heading>
+<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>`;
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+      name: 'Content'
+    },
+    inverted: {
+      control: 'boolean',
+      description: 'Inverte cores do texto para aplicação em fundo escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'false' }
+      }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'regular', 'large'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    weight: {
+      control: { type: 'inline-radio' },
+      options: ['regular', 'bold'],
+      description: 'Espessura de fonte',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    spotColor: {
+      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: 'primary' }
+      }
+    },
+    level: {
+      control: { type: 'number', min: 1, max: 6, step: 1 },
+      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  },
+};
+export const Heading = {
+  args: {
+    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+    size: 'regular',
+    weight: 'regular',
+    level: 1,
+    spotColor: 'primary',
+    inverted: false,
+  },
+};
+//# sourceMappingURL=cura-heading.stories.js.map

package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-heading.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,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;WACA,IAAI,CAAC,KAAK;gBACL,IAAI,CAAC,SAAS;UACpB,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;YACf,IAAI,CAAC,MAAM;IACnB,KAAK;;8gBAEqgB,CAAC;EAC7gB,CAAC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,qFAAqF;MAClG,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;MACtC,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,MAAM,EAAE;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;MACjC,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;MAC5B,WAAW,EAAE,oBAAoB;MACjC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,SAAS,EAAE;MACT,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,SAAS,EAAC;OACpC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;MACpD,WAAW,EAAE,wDAAwD;MACrE,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;EACrB,IAAI,EAAE;IACJ,KAAK,EAAE,8GAA8G;IACrH,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Text/Heading',\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-heading\n  level=\"${args.level}\"\n  spot-color=\"${args.spotColor}\"\n  size=\"${args.size}\"\n  inverted=\"${args.inverted}\"\n  weight=\"${args.weight}\">\n  ${label}\n</cura-heading>\n<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>`;\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: 'Content'\n    },\n    inverted: {\n      control: 'boolean',\n      description: 'Inverte cores do texto para aplicação em fundo escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'regular', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    weight: {\n      control: { type: 'inline-radio' },\n      options: ['regular', 'bold'],\n      description: 'Espessura de fonte',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    spotColor: {\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: 'primary'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      }\n    }\n  },\n};\n\nexport const Heading = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    size: 'regular',\n    weight: 'regular',\n    level: 1,\n    spotColor: 'primary',\n    inverted: false,\n  },\n};\n"]}

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

@@ -0,0 +1,115 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * 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() { ... }
+ */
+:host {
+  display: block;
+  font-size: var(--font-size);
+}
+:host p {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-body);
+  line-height: var(--line-height);
+  /* letter-spacing: 0.02em; */
+  margin-block-start: var(--block-margin);
+  margin-block-end: var(--block-margin);
+}
+:host p.large {
+  font-size: 1.21em;
+  line-height: calc(var(--line-height) + 10%);
+  /* line-height: 150%; */
+  /* letter-spacing: normal; */
+}
+:host p.small {
+  font-size: 0.85em;
+  line-height: calc(var(--line-height) - 5%);
+  /* line-height: 135%; */
+  /* letter-spacing: 0.04em; */
+}
+:host p.caption {
+  font-size: 0.71em;
+  line-height: calc(var(--line-height) - 5%);
+  /* line-height: 135%; */
+  /* letter-spacing: 0.06em; */
+}
+@media (min-width: 768px) and (max-width: 1365px) {
+  :host p {
+    font-size: 1.14em;
+    line-height: calc(var(--line-height) + 5%);
+    /* line-height: 145%; */
+  }
+  :host p.large {
+    font-size: 1.35em;
+    line-height: calc(var(--line-height) + 10%);
+    /* line-height: 150%; */
+  }
+  :host p.small {
+    font-size: 1em;
+    line-height: calc(var(--line-height) - 5%);
+    /* line-height: 135%; */
+  }
+  :host p.caption {
+    font-size: 0.85em;
+    line-height: calc(var(--line-height) - 5%);
+    /* line-height: 135%; */
+    /* letter-spacing: 0.06em; */
+  }
+}
+@media (min-width: 1366px) {
+  :host p {
+    font-size: 1.42em;
+    line-height: calc(var(--line-height) + 10%);
+    /* line-height: 150%; */
+    /* letter-spacing: normal; */
+  }
+  :host p.large {
+    font-size: 1.71em;
+    line-height: calc(var(--line-height) + 20%);
+    /* line-height: 160%; */
+  }
+  :host p.small {
+    font-size: 1.21em;
+    line-height: calc(var(--line-height) + 5%);
+    /* line-height: 145%; */
+    /* letter-spacing: normal; */
+  }
+  :host p.caption {
+    font-size: 1em;
+    line-height: calc(var(--line-height) + 5%);
+    /* line-height: 145%; */
+    /* letter-spacing: 0.02em; */
+  }
+}
+:host ::slotted(b), :host ::slotted(strong) {
+  font-weight: var(--font-weight-bold);
+}
+:host ::slotted(a) {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-link);
+  text-underline-offset: 10%;
+}
+:host ::slotted(abbr) {
+  color: var(--color-link);
+  text-decoration: underline dashed 1px var(--color-link);
+  text-underline-offset: 10%;
+  cursor: default;
+}