@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.5

package/src/components/ontario-hint-expander/ontario-hint-expander.tsx

@@ -182,10 +182,10 @@ export class OntarioHintExpander implements HintExpander {
 					data-toggle="ontario-collapse"
 				>
 					<span class="ontario-hint-expander__button-icon--close ontario-icon">
-						<ontario-icon-chevron-up colour="inherit"></ontario-icon-chevron-up>
+						<ontario-icon-chevron-up colour="inherit" aria-hidden="true"></ontario-icon-chevron-up>
 					</span>
 					<span class="ontario-hint-expander__button-icon--open">
-						<ontario-icon-chevron-down colour="inherit"></ontario-icon-chevron-down>
+						<ontario-icon-chevron-down colour="inherit" aria-hidden="true"></ontario-icon-chevron-down>
 					</span>
 					{this.hint}
 				</button>

package/src/components/ontario-hint-expander/test/ontario-hint-expander.spec.tsx

@@ -20,8 +20,8 @@ describe('ontario-hint-expander', () => {
             aria-expanded="false"
             data-toggle="ontario-collapse"
           >
-            <span class="ontario-hint-expander__button-icon--close ontario-icon"><ontario-icon-chevron-up colour="inherit"></ontario-icon-chevron-up></span>
-            <span class="ontario-hint-expander__button-icon--open"><ontario-icon-chevron-down colour="inherit"></ontario-icon-chevron-down></span>
+            <span class="ontario-hint-expander__button-icon--close ontario-icon"><ontario-icon-chevron-up aria-hidden="true" colour="inherit"></ontario-icon-chevron-up></span>
+            <span class="ontario-hint-expander__button-icon--open"><ontario-icon-chevron-down aria-hidden="true" colour="inherit"></ontario-icon-chevron-down></span>
             This is the hint
           </button>
           <div class="ontario-hint-expander__content" id="hint-expander-content-elementId" aria-labelledby="hint-expander-button-elementId" aria-hidden="true" data-toggle="ontario-expander-content">

package/src/components/ontario-hint-text/ontario-hint-text.scss

@@ -1,6 +1,6 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 
 .ontario-hint {
 	color: colours.$ontario-greyscale-70;

package/src/components/ontario-icon/assets/ontario-icon-sort-alphabetical-ascending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z"/>
+</svg>

package/src/components/ontario-icon/assets/ontario-icon-sort-alphabetical-descending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 7H22L18 3L14 7H17V21H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z"/>
+</svg>

package/src/components/ontario-icon/assets/ontario-icon-sort-ascending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"/>
+</svg>

package/src/components/ontario-icon/assets/ontario-icon-sort-descending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"/>
+</svg>

package/src/components/ontario-icon/assets/ontario-icon-sort-variant.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13H15V11H3M3 6V8H21V6M3 18H9V16H3V18Z"/>
+</svg>

package/src/components/ontario-icon/assets/ontario-icon-sort.svg

@@ -1 +1,3 @@
-<svg class="svg-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z"/>
+</svg>

package/src/components/ontario-icon/ontario-icon-sort-alphabetical-ascending.tsx

@@ -0,0 +1,139 @@
+// content automatically generated by `generate-icons.js` begins
+import { Component, Prop, h, Watch, State } from '@stencil/core';
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour, IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+
+@Component({
+	tag: 'ontario-icon-sort-alphabetical-ascending',
+	styleUrl: 'ontario-icon.scss',
+	shadow: true,
+})
+export class OntarioIconSortAlphabeticalAscending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	@Prop() iconWidth: IconSize = 24;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	@State() iconWidthState: number;
+
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	@Watch('iconWidth')
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+
+	/**
+	 * Set the icon's colour.
+	 */
+	@Prop() colour: IconColour = 'black';
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconColourState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconCustomColourState: string;
+
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	@Watch('colour')
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour(): IconColour {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-alphabetical-ascending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return (
+			<div
+				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
+				style={{ width: `${this.iconWidthState}px` }}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					id="sort-alphabetical-ascending"
+				>
+					<path d="M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z" />
+				</svg>
+			</div>
+		);
+	}
+}
+// content automatically generated by `generate-icons.js` ends

package/src/components/ontario-icon/ontario-icon-sort-alphabetical-descending.tsx

@@ -0,0 +1,139 @@
+// content automatically generated by `generate-icons.js` begins
+import { Component, Prop, h, Watch, State } from '@stencil/core';
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour, IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+
+@Component({
+	tag: 'ontario-icon-sort-alphabetical-descending',
+	styleUrl: 'ontario-icon.scss',
+	shadow: true,
+})
+export class OntarioIconSortAlphabeticalDescending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	@Prop() iconWidth: IconSize = 24;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	@State() iconWidthState: number;
+
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	@Watch('iconWidth')
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+
+	/**
+	 * Set the icon's colour.
+	 */
+	@Prop() colour: IconColour = 'black';
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconColourState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconCustomColourState: string;
+
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	@Watch('colour')
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour(): IconColour {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-alphabetical-descending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return (
+			<div
+				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
+				style={{ width: `${this.iconWidthState}px` }}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					id="sort-alphabetical-descending"
+				>
+					<path d="M19 7H22L18 3L14 7H17V21H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z" />
+				</svg>
+			</div>
+		);
+	}
+}
+// content automatically generated by `generate-icons.js` ends

package/src/components/ontario-icon/ontario-icon-sort-ascending.tsx

@@ -0,0 +1,139 @@
+// content automatically generated by `generate-icons.js` begins
+import { Component, Prop, h, Watch, State } from '@stencil/core';
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour, IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+
+@Component({
+	tag: 'ontario-icon-sort-ascending',
+	styleUrl: 'ontario-icon.scss',
+	shadow: true,
+})
+export class OntarioIconSortAscending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	@Prop() iconWidth: IconSize = 24;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	@State() iconWidthState: number;
+
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	@Watch('iconWidth')
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-ascending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+
+	/**
+	 * Set the icon's colour.
+	 */
+	@Prop() colour: IconColour = 'black';
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconColourState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconCustomColourState: string;
+
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	@Watch('colour')
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour(): IconColour {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-ascending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return (
+			<div
+				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
+				style={{ width: `${this.iconWidthState}px` }}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					id="sort-ascending"
+				>
+					<path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
+				</svg>
+			</div>
+		);
+	}
+}
+// content automatically generated by `generate-icons.js` ends

package/src/components/ontario-icon/ontario-icon-sort-descending.tsx

@@ -0,0 +1,139 @@
+// content automatically generated by `generate-icons.js` begins
+import { Component, Prop, h, Watch, State } from '@stencil/core';
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour, IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+
+@Component({
+	tag: 'ontario-icon-sort-descending',
+	styleUrl: 'ontario-icon.scss',
+	shadow: true,
+})
+export class OntarioIconSortDescending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	@Prop() iconWidth: IconSize = 24;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	@State() iconWidthState: number;
+
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	@Watch('iconWidth')
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-descending> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+
+	/**
+	 * Set the icon's colour.
+	 */
+	@Prop() colour: IconColour = 'black';
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconColourState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconCustomColourState: string;
+
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	@Watch('colour')
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour(): IconColour {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-descending> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return (
+			<div
+				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
+				style={{ width: `${this.iconWidthState}px` }}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					id="sort-descending"
+				>
+					<path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
+				</svg>
+			</div>
+		);
+	}
+}
+// content automatically generated by `generate-icons.js` ends