This website coveralls.io/builds/61793787/source?filename=src%2Fcomponents%2Fids-hyperlink%2Fids-hyperlink.ts is currently offline. Cloudflare's Always Online™ shows a snapshot of this web page from the Internet Archive's Wayback Machine. To check for the live version, click Refresh.

5764208744

pending completion

Build # 5764208744

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #1421 from infor-design/1327-card-box-widget

1327 - Add Card, Box, Stats and related components

Run Details

11090 of 14437 branches covered (76.82%)

Branch coverage included in aggregate %.

360 of 360 new or added lines in 15 files covered. (100.0%)

24791 of 29244 relevant lines covered (84.77%)

3007.75 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.0

/src/components/ids-hyperlink/ids-hyperlink.ts

import fontSizes from 'ids-identity/dist/theme-new/tokens/web/ui.config.font-sizes';
import { customElement, scss } from '../../core/ids-decorators';
import { attributes } from '../../core/ids-attributes';
import IdsEventsMixin from '../../mixins/ids-events-mixin/ids-events-mixin';
import IdsColorVariantMixin from '../../mixins/ids-color-variant-mixin/ids-color-variant-mixin';
import IdsHitboxMixin from '../../mixins/ids-hitbox-mixin/ids-hitbox-mixin';
import IdsElement from '../../core/ids-element';

import { stringToBool } from '../../utils/ids-string-utils/ids-string-utils';

import styles from './ids-hyperlink.scss';

const Base = IdsHitboxMixin(
  IdsColorVariantMixin(
    IdsEventsMixin(
      IdsElement
    )
  )
);

/**
 * IDS Hyperlink Component
 * @type {IdsHyperlink}
 * @inherits IdsElement
 * @mixes IdsHitboxMixin
 * @mixes IdsEventsMixin
 * @part link - the link element
 */
@customElement('ids-hyperlink')
@scss(styles)
export default class IdsHyperlink extends Base {
  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();
    if (!(this.getAttribute('role'))) this.setAttribute('role', 'link');
  }

  /**
   * Return the attributes we handle as getters/setters
   * @returns {Array} The attributes in an array
   */
  static get attributes() {
    return [
      ...super.attributes,
      attributes.ALLOW_EMPTY_HREF,
      attributes.COLOR,
      attributes.COL_SPAN,
      attributes.DISABLED,
      attributes.FONT_SIZE,
      attributes.FONT_WEIGHT,
      attributes.HREF,
      attributes.TARGET,
      attributes.TEXT_DECORATION
    ];
  }

  /**
   * Inner template contents
   * @returns {string} The template
   */
  template(): string {
    const disabledAttr = this.disabled ? ' disabled' : '';
    const hrefAttr = this.href ? ` href="${this.href}"` : '';
    const tabIndexAttr = this.disabled ? ' tabindex="-1"' : '';
    const targetAttr = this.target ? ` target="${this.target}"` : '';

    const colorClass = this.color === 'unset' ? ' ids-hyperlink-color-unset' : '';
    const fontSizeClass = this.fontSize ? ` ids-text-${this.fontSize}` : '';
    const fontWeightClass = this.fontWeight ? ` ${this.fontWeight}` : '';
    const textDecorationClass = this.textDecoration ? ` ids-text-decoration-${this.textDecoration}"` : '';

    return `<a
      class="ids-hyperlink${colorClass}${fontSizeClass}${fontWeightClass}${textDecorationClass}"
      ${disabledAttr}
      ${hrefAttr}
      ${tabIndexAttr}
      ${targetAttr}
      part="link">
        <slot></slot>
    </a>`;
  }

  /**
   *
   */
  colorVariants = ['breadcrumb', 'alternate'];

  /**
   * Set the link href
   * @param {string} value Set the link's href to some link
   */
  set href(value: string | null) {
    if (value) {
      this.setAttribute(attributes.HREF, value);
      this.container?.setAttribute(attributes.HREF, value);
      return;
    }
    this.removeAttribute(attributes.HREF);
    this.container?.removeAttribute(attributes.HREF);
  }

  get href(): string | null {
    return this.getAttribute(attributes.HREF);
  }

  /**
   * Set the link target attribute
   * @param {string} value Set the link's href to some link
   */
  set target(value: string | null) {
    if (value) {
      this.setAttribute(attributes.TARGET, value);
      this.container?.setAttribute(attributes.TARGET, value);
      return;
    }
    this.removeAttribute(attributes.TARGET);
    this.container?.removeAttribute(attributes.TARGET);
  }

  get target(): string | null {
    return this.getAttribute(attributes.TARGET);
  }

  /**
   * Set the link text decoration styling
   * @param {string} value If 'none', removes text decoration, If hover then just on hover it
   * is shown.
   */
  set textDecoration(value: string | null) {
    if (value?.toLowerCase() === 'none') {
      this.setAttribute(attributes.TEXT_DECORATION, value);
      this.container?.classList.add('ids-text-decoration-none');
      return;
    }
    if (value?.toLowerCase() === 'hover') {
      this.setAttribute(attributes.TEXT_DECORATION, value);
      this.container?.classList.add('ids-text-decoration-hover');
      return;
    }
    this.removeAttribute(attributes.TEXT_DECORATION);
    this.container?.classList.remove('ids-text-decoration-none', 'ids-text-decoration-hover');
  }

  get textDecoration(): string | null {
    return this.getAttribute(attributes.TEXT_DECORATION);
  }

  /**
   * Set the text to disabled color.
   * @param {boolean} value True if disabled
   */
  set disabled(value: boolean) {
    const val = stringToBool(value);
    if (val) {
      this.setAttribute(attributes.DISABLED, '');
      this.container?.setAttribute(attributes.DISABLED, '');
      this.container?.setAttribute('tabindex', '-1');
      return;
    }
    this.removeAttribute(attributes.DISABLED);
    this.container?.removeAttribute(attributes.DISABLED);
    this.container?.removeAttribute('tabindex');
  }

  get disabled(): boolean {
    return this.hasAttribute(attributes.DISABLED);
  }

  /**
   *
   * If set to "unset", color can be controlled by parent container
   * @param {string | null} value  "unset" or undefined/null
   */
  set color(value: string | null) {
    if (value === 'unset') {
      this.setAttribute(attributes.COLOR, value);
      this.container?.classList.add('ids-hyperlink-color-unset');
    } else {
      this.removeAttribute(attributes.COLOR);
      this.container?.classList.remove('ids-hyperlink-color-unset');
    }
  }

  get color(): string | null {
    return this.getAttribute(attributes.COLOR);
  }

  /**
   * Set the font size/style of the text with a class.
   * @param {string | null} value The font size in the font scheme
   * i.e. 10, 12, 16 or xs, sm, base, lg, xl
   */
  set fontSize(value: string | null) {
    fontSizes?.forEach((size: string) => {
      this.container?.classList.remove(`ids-text-${Object.keys(size)}`);
    });

    if (value) {
      this.setAttribute(attributes.FONT_SIZE, value);
      this.container?.classList.add(`ids-text-${value}`);
      return;
    }

    this.removeAttribute(attributes.FONT_SIZE);
  }

  get fontSize(): string | null { return this.getAttribute(attributes.FONT_SIZE); }

  /**
   * Adjust font weight; can be either "bold" "lighter" or not present
   * since font supports 300, 400, 600
   * @param {string | null} value (if bold)
   */
  set fontWeight(value: string | null) {
    this.container?.classList.remove('bold', 'lighter');

    if (value === 'bold' || value === 'lighter') {
      this.setAttribute(attributes.FONT_WEIGHT, value);
      this.container?.classList.add(value);
      return;
    }

    this.removeAttribute(attributes.FONT_WEIGHT);
  }

  get fontWeight(): string | null {
    return this.getAttribute(attributes.FONT_WEIGHT);
  }

  /**
   * Allows underline and styling of the link when href attribute is empty
   * @param {string | boolean | null} value whether or not to allow underline when href attribute is empty
   */
  set allowEmptyHref(value: string | boolean | null) {
    const boolVal = stringToBool(value);
    this.setAttribute(attributes.ALLOW_EMPTY_HREF, String(boolVal));
  }

  get allowEmptyHref(): boolean {
    const attrVal = this.getAttribute(attributes.ALLOW_EMPTY_HREF);
    if (attrVal) {
      return stringToBool(attrVal);
    }

    return true;
  }

  /**
   * Set the col-span attribute
   * @param {string | null} value If 2 will span 2 columns, nothing else is valid
   */
  set colSpan(value: string | null) {
    if (value !== null) {
      this.setAttribute(attributes.COL_SPAN, value);
      this.container?.classList.add('colspan');
    } else {
      this.removeAttribute(attributes.COL_SPAN);
      this.container?.classList.remove('colspan');
    }
  }

  /**
   * Get col-span attribute
   * @returns {string | null} The number value for the columns to span in the grid
   */
  get colSpan(): string | null {
    return this.getAttribute(attributes.COL_SPAN);
  }
}

1	import fontSizes from 'ids-identity/dist/theme-new/tokens/web/ui.config.font-sizes';	22✔
2	import { customElement, scss } from '../../core/ids-decorators';	22✔
3	import { attributes } from '../../core/ids-attributes';	22✔
4	import IdsEventsMixin from '../../mixins/ids-events-mixin/ids-events-mixin';	22✔
5	import IdsColorVariantMixin from '../../mixins/ids-color-variant-mixin/ids-color-variant-mixin';	22✔
6	import IdsHitboxMixin from '../../mixins/ids-hitbox-mixin/ids-hitbox-mixin';	22✔
7	import IdsElement from '../../core/ids-element';	22✔
8
9	import { stringToBool } from '../../utils/ids-string-utils/ids-string-utils';	22✔
10
11	import styles from './ids-hyperlink.scss';	22✔
12
13	const Base = IdsHitboxMixin(	22✔
14	IdsColorVariantMixin(
15	IdsEventsMixin(
16	IdsElement
17	)
18	)
19	);
20
21	/**
22	* IDS Hyperlink Component
23	* @type {IdsHyperlink}
24	* @inherits IdsElement
25	* @mixes IdsHitboxMixin
26	* @mixes IdsEventsMixin
27	* @part link - the link element
28	*/
29	@customElement('ids-hyperlink')	22✔
30	@scss(styles)
31	export default class IdsHyperlink extends Base {	22✔
32	constructor() {
33	super();	3,475✔
34	}
35
36	connectedCallback() {
37	super.connectedCallback();	3,464✔
38	if (!(this.getAttribute('role'))) this.setAttribute('role', 'link');	3,464✔
39	}
40
41	/**
42	* Return the attributes we handle as getters/setters
43	* @returns {Array} The attributes in an array
44	*/
45	static get attributes() {
46	return [	22✔
47	...super.attributes,
48	attributes.ALLOW_EMPTY_HREF,
49	attributes.COLOR,
50	attributes.COL_SPAN,
51	attributes.DISABLED,
52	attributes.FONT_SIZE,
53	attributes.FONT_WEIGHT,
54	attributes.HREF,
55	attributes.TARGET,
56	attributes.TEXT_DECORATION
57	];
58	}
59
60	/**
61	* Inner template contents
62	* @returns {string} The template
63	*/
64	template(): string {
65	const disabledAttr = this.disabled ? ' disabled' : '';	3,435✔
66	const hrefAttr = this.href ? ` href="${this.href}"` : '';	3,435✔
67	const tabIndexAttr = this.disabled ? ' tabindex="-1"' : '';	3,435✔
68	const targetAttr = this.target ? ` target="${this.target}"` : '';	3,435✔
69
70	const colorClass = this.color === 'unset' ? ' ids-hyperlink-color-unset' : '';	3,435!
71	const fontSizeClass = this.fontSize ? ` ids-text-${this.fontSize}` : '';	3,435✔
72	const fontWeightClass = this.fontWeight ? ` ${this.fontWeight}` : '';	3,435!
73	const textDecorationClass = this.textDecoration ? ` ids-text-decoration-${this.textDecoration}"` : '';	3,435✔
74
75	return `<a	3,435✔
76	class="ids-hyperlink${colorClass}${fontSizeClass}${fontWeightClass}${textDecorationClass}"
77	${disabledAttr}
78	${hrefAttr}
79	${tabIndexAttr}
80	${targetAttr}
81	part="link">
82	<slot></slot>
83	</a>`;
84	}
85
86	/**
87	*
88	*/
89	colorVariants = ['breadcrumb', 'alternate'];	3,475✔
90
91	/**
92	* Set the link href
93	* @param {string} value Set the link's href to some link
94	*/
95	set href(value: string \| null) {
96	if (value) {	3,416✔
97	this.setAttribute(attributes.HREF, value);	3,414✔
98	this.container?.setAttribute(attributes.HREF, value);	3,414✔
99	return;	3,414✔
100	}
101	this.removeAttribute(attributes.HREF);	2✔
102	this.container?.removeAttribute(attributes.HREF);	2✔
103	}
104
105	get href(): string \| null {
106	return this.getAttribute(attributes.HREF);	6,806✔
107	}
108
109	/**
110	* Set the link target attribute
111	* @param {string} value Set the link's href to some link
112	*/
113	set target(value: string \| null) {
114	if (value) {	123✔
115	this.setAttribute(attributes.TARGET, value);	121✔
116	this.container?.setAttribute(attributes.TARGET, value);	121✔
117	return;	121✔
118	}
119	this.removeAttribute(attributes.TARGET);	2✔
120	this.container?.removeAttribute(attributes.TARGET);	2✔
121	}
122
123	get target(): string \| null {
124	return this.getAttribute(attributes.TARGET);	3,527✔
125	}
126
127	/**
128	* Set the link text decoration styling
129	* @param {string} value If 'none', removes text decoration, If hover then just on hover it
130	* is shown.
131	*/
132	set textDecoration(value: string \| null) {
133	if (value?.toLowerCase() === 'none') {	134✔
134	this.setAttribute(attributes.TEXT_DECORATION, value);	6✔
135	this.container?.classList.add('ids-text-decoration-none');	6✔
136	return;	6✔
137	}
138	if (value?.toLowerCase() === 'hover') {	128✔
139	this.setAttribute(attributes.TEXT_DECORATION, value);	6✔
140	this.container?.classList.add('ids-text-decoration-hover');	6✔
141	return;	6✔
142	}
143	this.removeAttribute(attributes.TEXT_DECORATION);	122✔
144	this.container?.classList.remove('ids-text-decoration-none', 'ids-text-decoration-hover');	122✔
145	}
146
147	get textDecoration(): string \| null {
148	return this.getAttribute(attributes.TEXT_DECORATION);	3,445✔
149	}
150
151	/**
152	* Set the text to disabled color.
153	* @param {boolean} value True if disabled
154	*/
155	set disabled(value: boolean) {
156	const val = stringToBool(value);	50✔
157	if (val) {	50✔
158	this.setAttribute(attributes.DISABLED, '');	44✔
159	this.container?.setAttribute(attributes.DISABLED, '');	44✔
160	this.container?.setAttribute('tabindex', '-1');	44✔
161	return;	44✔
162	}
163	this.removeAttribute(attributes.DISABLED);	6✔
164	this.container?.removeAttribute(attributes.DISABLED);	6✔
165	this.container?.removeAttribute('tabindex');	6✔
166	}
167
168	get disabled(): boolean {
169	return this.hasAttribute(attributes.DISABLED);	6,874✔
170	}
171
172	/**
173	*
174	* If set to "unset", color can be controlled by parent container
175	* @param {string \| null} value "unset" or undefined/null
176	*/
177	set color(value: string \| null) {
178	if (value === 'unset') {	3✔
179	this.setAttribute(attributes.COLOR, value);	2✔
180	this.container?.classList.add('ids-hyperlink-color-unset');	2✔
181	} else {
182	this.removeAttribute(attributes.COLOR);	1✔
183	this.container?.classList.remove('ids-hyperlink-color-unset');	1✔
184	}
185	}
186
187	get color(): string \| null {
188	return this.getAttribute(attributes.COLOR);	3,437✔
189	}
190
191	/**
192	* Set the font size/style of the text with a class.
193	* @param {string \| null} value The font size in the font scheme
194	* i.e. 10, 12, 16 or xs, sm, base, lg, xl
195	*/
196	set fontSize(value: string \| null) {
197	fontSizes?.forEach((size: string) => {	9✔
198	this.container?.classList.remove(`ids-text-${Object.keys(size)}`);	108✔
199	});
200
201	if (value) {	9✔
202	this.setAttribute(attributes.FONT_SIZE, value);	8✔
203	this.container?.classList.add(`ids-text-${value}`);	8✔
204	return;	8✔
205	}
206
207	this.removeAttribute(attributes.FONT_SIZE);	1✔
208	}
209
210	get fontSize(): string \| null { return this.getAttribute(attributes.FONT_SIZE); }	3,442✔
211
212	/**
213	* Adjust font weight; can be either "bold" "lighter" or not present
214	* since font supports 300, 400, 600
215	* @param {string \| null} value (if bold)
216	*/
217	set fontWeight(value: string \| null) {
218	this.container?.classList.remove('bold', 'lighter');	21✔
219
220	if (value === 'bold' \|\| value === 'lighter') {	21✔
221	this.setAttribute(attributes.FONT_WEIGHT, value);	16✔
222	this.container?.classList.add(value);	16✔
223	return;	16✔
224	}
225
226	this.removeAttribute(attributes.FONT_WEIGHT);	5✔
227	}
228
229	get fontWeight(): string \| null {
230	return this.getAttribute(attributes.FONT_WEIGHT);	3,437✔
231	}
232
233	/**
234	* Allows underline and styling of the link when href attribute is empty
235	* @param {string \| boolean \| null} value whether or not to allow underline when href attribute is empty
236	*/
237	set allowEmptyHref(value: string \| boolean \| null) {
238	const boolVal = stringToBool(value);	2✔
239	this.setAttribute(attributes.ALLOW_EMPTY_HREF, String(boolVal));	2✔
240	}
241
242	get allowEmptyHref(): boolean {
243	const attrVal = this.getAttribute(attributes.ALLOW_EMPTY_HREF);	2✔
244	if (attrVal) {	2✔
245	return stringToBool(attrVal);	1✔
246	}
247
248	return true;	1✔
249	}
250
251	/**
252	* Set the col-span attribute
253	* @param {string \| null} value If 2 will span 2 columns, nothing else is valid
254	*/
255	set colSpan(value: string \| null) {
256	if (value !== null) {	×
257	this.setAttribute(attributes.COL_SPAN, value);	×
258	this.container?.classList.add('colspan');	×
259	} else {
260	this.removeAttribute(attributes.COL_SPAN);	×
261	this.container?.classList.remove('colspan');	×
262	}
263	}
264
265	/**
266	* Get col-span attribute
267	* @returns {string \| null} The number value for the columns to span in the grid
268	*/
269	get colSpan(): string \| null {
270	return this.getAttribute(attributes.COL_SPAN);	×
271	}
272	}

infor-design / enterprise-wc / 5764208744

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous