@rededor/cura 0.5.0-alpha.0 → 0.5.0

package/dist/collection/components/cura-page-template/cura-page-template.css

@@ -0,0 +1,105 @@
+/* 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;
+}
+:host .grid-template {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  grid-template-areas: "sub-header" "header" "pre-content" "content-container" "post-body" "footer" "sub-footer";
+}
+:host .grid-template #sub-header {
+  grid-area: sub-header;
+}
+:host .grid-template #header {
+  grid-area: header;
+}
+:host .grid-template #pre-content {
+  grid-area: pre-content;
+}
+:host .grid-template #content-container {
+  grid-area: content-container;
+}
+:host .grid-template #post-body {
+  grid-area: post-body;
+}
+:host .grid-template #footer {
+  grid-area: footer;
+}
+:host .grid-template #sub-footer {
+  grid-area: sub-footer;
+}
+@media (max-width: 360px) {
+  :host .grid-template {
+    padding: 0px;
+  }
+}
+@media (min-width: 768px) and (max-width: 1365px) {
+  :host .grid-template {
+    padding: 0px;
+  }
+}
+@media (min-width: 1366px) and (max-width: 1919px) {
+  :host .grid-template {
+    padding: 0px;
+  }
+  :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
+    margin-right: calc(var(--spacing) * 5px);
+  }
+  :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
+    margin-left: calc(var(--spacing) * 5px);
+  }
+  :host .grid-template #content-container {
+    display: flex;
+  }
+  :host .grid-template #content-container #content {
+    flex-grow: 1;
+  }
+  :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
+    max-width: 20%;
+  }
+}
+@media (min-width: 1920px) {
+  :host .grid-template {
+    padding: 0px;
+  }
+  :host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]) {
+    margin-right: calc(var(--spacing) * 7px);
+  }
+  :host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]) {
+    margin-left: calc(var(--spacing) * 7px);
+  }
+  :host .grid-template #content-container {
+    display: flex;
+  }
+  :host .grid-template #content-container #content {
+    flex-grow: 1;
+  }
+  :host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right {
+    max-width: 20%;
+  }
+  :host .grid-template #content-container.centered {
+    max-width: 1920px;
+    justify-self: center;
+  }
+}

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -0,0 +1,55 @@
+import { Host, h } from '@stencil/core';
+export class CuraPageTemplate {
+  constructor() {
+    this.contentwidth = 'default';
+  }
+  connectedCallback() {
+    this.styles = {
+      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+    };
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.contentwidth.toLowerCase()] = true;
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
+  }
+  static get is() { return "cura-page-template"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-page-template.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-page-template.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contentwidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'centered'",
+          "resolved": "\"centered\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "contentwidth",
+        "reflect": true,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=cura-page-template.js.map

package/dist/collection/components/cura-page-template/cura-page-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-page-template.js","sourceRoot":"","sources":["../../../src/components/cura-page-template/cura-page-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;;wBAEmC,SAAS;;EAMvE,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KACvD,CAAA;EACH,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAChD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe;QAC5C,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,aAAa;UACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;QACN,WAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;UAClD,WAAK,EAAE,EAAC,cAAc;YACpB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;UACN,WAAK,EAAE,EAAC,SAAS;YACf,YAAM,IAAI,EAAC,SAAS,GAAQ;YAC5B,eAAa,CACT;UACN,WAAK,EAAE,EAAC,eAAe;YACrB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;QACN,WAAK,EAAE,EAAC,WAAW;UACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.css

@@ -0,0 +1,33 @@
+:host {
+  display: inline-block;
+  width: var(--size);
+  height: var(--size);
+}
+:host svg {
+  width: var(--size);
+  height: var(--size);
+  animation: rotate 0.7s linear infinite;
+}
+:host circle, :host path {
+  stroke-miterlimit: 10;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+:host path {
+  stroke: var(--color);
+}
+:host stop {
+  stop-color: var(--color);
+}
+:host linearGradient stop:first-child {
+  stop-opacity: 0.14;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js

@@ -0,0 +1,77 @@
+import { Host, h } from '@stencil/core';
+export class CuraLoaderCircle {
+  constructor() {
+    this.sizes = {
+      xlarge: 32,
+      large: 24,
+      medium: 20,
+      small: 16,
+      default: 16,
+    };
+    this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
+    this.size = 'medium';
+    this.color = 'neutral-white';
+  }
+  getStyles() {
+    return {
+      '--size': `${this.getPxSize()}px`,
+      '--color': window.CuraAPI.theme.colors.getColor(this.color)
+    };
+  }
+  render() {
+    return (h(Host, { style: this.getStyles() }, h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", null, h("circle", { cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", null, h("linearGradient", { id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", null), h("stop", { offset: "1" }))))));
+  }
+  static get is() { return "cura-loader-circle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-loader-circle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-loader-circle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large' | 'xlarge'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Loader size. Values: small, medium or large."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One from color scheme. Default: neutral-white."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "'neutral-white'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=cura-loader-circle.js.map

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-loader-circle.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;IAW3B,UAAK,GAAG;MACN,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,MAAM,EAAE,EAAE;MACV,KAAK,EAAE,EAAE;MACT,OAAO,EAAE,EAAE;KACZ,CAAC;IAEF,cAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;gBAdM,QAAQ;iBAIhD,eAAe;;EAY9C,SAAS;IACP,OAAO;MACL,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;MACjC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;KAC5D,CAAA;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE;MAC3B,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;QACrE;UACE,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,iCAAiC,kBAAc,GAAG,GAAE;UACvF,YAAM,CAAC,EAAC,iHAAiH,kBAAc,GAAG,GAAE,CAC1I;QACJ;UACE,sBAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,aAAa,EAAC,gBAAgB;YAClH,eAAO;YACP,YAAM,MAAM,EAAC,GAAG,GAAE,CACH,CACZ,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-loader-circle',\n  styleUrl: 'cura-loader-circle.scss',\n  shadow: true,\n})\nexport class CuraLoaderCircle {\n\n  /**\n   * Loader size. Values: small, medium or large.\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n  /**\n   * One from color scheme. Default: neutral-white.\n   */\n  @Prop({reflect: true}) color = 'neutral-white';\n\n  sizes = {\n    xlarge: 32,\n    large: 24,\n    medium: 20,\n    small: 16,\n    default: 16,\n  };\n\n  getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n  getStyles() {\n    return {\n      '--size': `${this.getPxSize()}px`,\n      '--color': window.CuraAPI.theme.colors.getColor(this.color)\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.getStyles()}>\n        <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g>\n            <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n            <path d=\"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5\" stroke-width=\"2\"/>\n          </g>\n          <defs>\n            <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n              <stop/>\n              <stop offset=\"1\"/>\n            </linearGradient>\n          </defs>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+export default {
+  title: 'Components/Loaders/Loader Circle',
+  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-loader-circle
+  name="${args.name}"
+  color="${args.color}"
+  size="${args.size}"
+  disabled="${args.disabled}">
+</cura-loader-circle>`;
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large', 'xlarge'],
+      description: 'Tamanhos disponíveis.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Cor e profundidade (ex: primary-dark). Se nenhuma profundidade informada assumirá a base como padrão.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'neutral-white' }
+      }
+    }
+  },
+};
+export const LoaderCircle = {
+  args: {
+    size: 'medium',
+    color: 'primary'
+  },
+};
+//# sourceMappingURL=cura-loader-circle.stories.js.map

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-loader-circle.stories.js","sourceRoot":"","sources":["../../../../src/components/loaders/cura-loader-circle/cura-loader-circle.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,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;sBACL,CAAC;EACrB,CAAC;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC;MAC/C,WAAW,EAAE,uBAAuB;MACpC,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;OACnC;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,uGAAuG;MACpH,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,eAAe,EAAC;OAC1C;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;EAC1B,IAAI,EAAE;IACJ,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,SAAS;GACjB;CACF,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Components/Loaders/Loader Circle',\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-loader-circle\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-loader-circle>`;\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large', 'xlarge'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\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-white'}\n      }\n    }\n  },\n};\n\nexport const LoaderCircle = {\n  args: {\n    size: 'medium',\n    color: 'primary'\n  },\n};\n"]}

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

@@ -0,0 +1,84 @@
+/* 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);
+  text-transform: uppercase;
+}
+: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);
+}
+@media (min-width: 768px) and (max-width: 1365px) {
+  :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;
+  }
+}
+@media (min-width: 1366px) {
+  :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%;
+  }
+}
+: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-display/cura-display.js

@@ -0,0 +1,146 @@
+import { Host, h } from '@stencil/core';
+export class CuraDisplay {
+  constructor() {
+    this.level = 1;
+    this.size = '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;
+    return classes;
+  }
+  setFontProperties() {
+    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
+    };
+    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-display"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-display.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-display.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'"
+      },
+      "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-display.js.map

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

@@ -0,0 +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"]}