@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/collection/components/titles-text/bds-typography/bds-typography.js

@@ -17,12 +17,12 @@ import { FILENAME, getAttributesByTag, VARIANT_CONFIG } from "./utils/bds-typogr
  * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
  * @attr {string} align - The text alignment. Options: start, center, end, inherit
  * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @attr {boolean} is-required - Shows a required indicator when used with `label` variant.
+ * @attr {boolean} required - Shows a required indicator when used with `label` variant.
  * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
  * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
  * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
  * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @attr {boolean} is-downloadable - Makes the `link` download a file.
+ * @attr {boolean} downloadable - Makes the `link` download a file.
  * @attr {string} filename - Suggested filename when downloading a file from the `link`.
  * @attr {string} html-for - The for attribute when rendered as a label
  * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -33,12 +33,12 @@ import { FILENAME, getAttributesByTag, VARIANT_CONFIG } from "./utils/bds-typogr
  * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
  * @property {string} align - The text alignment. Options: start, center, end, inherit
  * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @property {boolean} isRequired - Shows a required indicator when used with `label` variant.
+ * @property {boolean} required - Shows a required indicator when used with `label` variant.
  * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
  * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
  * @property {string} href - URL when the typography is an `a` element and a `link` variant.
  * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @property {boolean} isDownloadable - Makes the `link` download a file.
+ * @property {boolean} downloadable - Makes the `link` download a file.
  * @property {string} filename - Suggested filename when downloading a file from the `link`.
  * @property {string} htmlFor - The for attribute when rendered as a label
  * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
@@ -49,12 +49,12 @@ import { FILENAME, getAttributesByTag, VARIANT_CONFIG } from "./utils/bds-typogr
  * @default 'start' - Default align value
  * @default 'md' - Default size value
  * @default 'default' - Default state value
- * @default false - Default isRequired state
+ * @default false - Default required state
  * @default false - Default ellipsis state
  * @default 1 - Default maxLines value
  * @default '' - Default href value
  * @default '' - Default target value
- * @default false - Default isDownloadable state
+ * @default false - Default downloadable state
  * @default 'download' - Default filename value
  * @default '' - Default tooltipText value
  */
@@ -80,7 +80,7 @@ export class BdsTypography {
         /** Tooltip text (variant must support it). */
         this.tooltipText = '';
         /** Marks the field as required. */
-        this.isRequired = false;
+        this.required = false;
         /** For attribute when rendered as a label. */
         this.htmlFor = undefined;
         /** Link href when rendered as anchor. */
@@ -88,7 +88,7 @@ export class BdsTypography {
         /** Anchor target. */
         this.target = null;
         /** Enables download behavior for anchor. */
-        this.isDownloadable = false;
+        this.downloadable = false;
         /** Suggested download filename. */
         this.filename = FILENAME;
         /** Sanitized href for security. */
@@ -118,10 +118,10 @@ export class BdsTypography {
         return VARIANT_CONFIG[this.variant] ?? {};
     }
     getAccessibilityTags() {
-        const { isRequired = null } = this.getVariantConfig();
+        const { required = false } = this.getVariantConfig();
         const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
         return {
-            'aria-required': this.isRequired && isRequired,
+            'aria-required': this.required && required,
             'aria-disabled': this.state === COMPONENT_STATES.DISABLED && isInteractiveTag,
         };
     }
@@ -132,7 +132,7 @@ export class BdsTypography {
             [`bds-typography--align-${this.align}`]: true,
             [`bds-typography--${this.state}`]: !!(config?.states && config?.states.includes(this.state)),
             [`bds-typography--size-${this.size}`]: !!(config?.size && config?.size.includes(this.size)),
-            'bds-typography--required': !!(config?.isRequired && this.isRequired),
+            'bds-typography--required': !!(config?.required && this.required),
             'bds-typography--ellipsis': this.ellipsis && this.maxLines <= 1,
             'bds-typography--ellipsis-multiline': this.ellipsis && this.maxLines > 1,
             [this.customClass]: this.customClass !== '',
@@ -146,8 +146,9 @@ export class BdsTypography {
             ...this.getAccessibilityTags(),
         };
         const classes = this.getVariantStateStyles();
-        const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
-        return (h(Host, { key: '98e236475142f2be85fcc227cd507d6cb8648928', class: "bds-typography" }, h(TagName, { key: 'eed74e216dc0832b5f4808ba72e1374198f60e1a', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: 'cc073f2d2a3840970c62296379514884564c3473' }), this.isRequired && isRequired && (h("em", { key: '299a88d69856603b6e73af9567fa91b1a1e7434f', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (h("span", { key: 'c8fa478a8fbd4a70d0869b4c9d523a8a0e9803bf' }, h("em", { key: '0f6869a6dd7ab04b19acee773e54687dbd070af0', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), h("bds-tooltip", { key: 'ec2dfc33b119bc3f60ec52e8bd10fdb16ea5cc2a' }, this.tooltipText))))));
+        const { canUseTooltip = null, required = null } = this.getVariantConfig();
+        const isDisabledState = this.state === COMPONENT_STATES.DISABLED;
+        return (h(Host, { key: 'd29b535edeb7ede877c979ea812eb6c273affc0d', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, h(TagName, { key: '3a36a1c47026a20d9c95e4c2d38e92caaa89b072', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '8a0ccd7824ac358e937dd6e2fb1c3eb592e27721' }), this.required && required && (h("em", { key: '5ce4cc221efcf9d5a71bbc39dbc449a3a29c16a6', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (h("span", { key: '33dcca730b5a484aac8f6ddda383f7adb7dcee95', class: "bds-typography__info" }, h("span", { key: 'ff08b5e744d9584cff3b69f5eaa74238ad364e19', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), h("bds-tooltip", { key: 'a88a158668a40ee3ff00ddeb4da496115e22558d' }, this.tooltipText))))));
     }
     static get is() { return "bds-typography"; }
     static get originalStyleUrls() {
@@ -398,11 +399,11 @@ export class BdsTypography {
                 "attribute": "tooltip-text",
                 "defaultValue": "''"
             },
-            "isRequired": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "ITypography['isRequired']",
+                    "original": "ITypography['required']",
                     "resolved": "boolean",
                     "references": {
                         "ITypography": {
@@ -422,7 +423,7 @@ export class BdsTypography {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "is-required",
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "htmlFor": {
@@ -506,11 +507,11 @@ export class BdsTypography {
                 "attribute": "target",
                 "defaultValue": "null"
             },
-            "isDownloadable": {
+            "downloadable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "ITypography['isDownloadable']",
+                    "original": "ITypography['downloadable']",
                     "resolved": "boolean",
                     "references": {
                         "ITypography": {
@@ -530,7 +531,7 @@ export class BdsTypography {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-downloadable",
+                "attribute": "downloadable",
                 "defaultValue": "false"
             },
             "filename": {

package/dist/collection/components/titles-text/bds-typography/utils/bds-typography-utils.js

@@ -14,7 +14,7 @@ export const VARIANT_CONFIG = {
     },
     label: {
         states: [COMPONENT_STATES.DISABLED],
-        isRequired: true,
+        required: true,
         canUseTooltip: true,
     },
     heading: { canUseTooltip: true },
@@ -30,7 +30,7 @@ export const getAttributesByTag = (comp, tagName) => {
         a: {
             href: comp.state !== COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
             target: comp.target,
-            download: comp.isDownloadable ? comp.filename : null,
+            download: comp.downloadable ? comp.filename : null,
             rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
         },
         label: {