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

package/src/components/ontario-form-container/readme.md

@@ -0,0 +1,208 @@
+import { OntarioFormContainer, OntarioFieldset, OntarioInput, OntarioDropdownList, OntarioTextarea, OntarioButton } from '@ongov/ontario-design-system-component-library-react';
+
+# ontario-form-container
+
+The `ontario-form-container` component defines vertical spacing (referred to as _gap_) between child form elements within a container. It ensures consistent and accessible spacing between form elements, aligning with design tokens from the Ontario Design System.
+
+## Usage Guidance
+
+### When to use this component
+
+Use the `ontario-form-container` component when:
+
+- You need to apply consistent vertical spacing between form elements
+- A clear visual hierarchy is required within a form
+- Different elements require varying spacing levels (`default` or `condensed`)
+
+### When not to use this component
+
+Avoid using this component if:
+
+- You need horizontal spacing between elements
+- The spacing is purely decorative
+
+## Technical Specifications
+
+The component uses a single default slot to render child elements. It is designed to be used with the following form components: `ontario-fieldset`, `ontario-input`, `ontario-textarea`, `ontario-checkboxes`, `ontario-dropdown-list`, `ontario-radio-buttons`, `ontario-date-input` and `ontario-button`.
+
+By default, the above components do not have built-in margins to separate them from one another. The ontario form container component should be used for maintaining readability and creating visual hierarchy.
+
+**Spacing options:**
+
+- **Default** (`40px`) corresponds to $spacing-7.
+- **Condensed** (`16px`) corresponds to $spacing-4.
+
+**Styling:**
+
+- Applies `margin-bottom` values to all child elements except the last one
+- Supports nested usage, allowing smaller spacing within larger spacing containers. Nested spacing should be used when elements are closely linked and require reduced spacing
+
+## Examples
+
+### Default gap example
+
+No `gap` prop is required when using the default gap option.
+
+```html
+<form>
+	<ontario-form-container>
+		<ontario-fieldset legend-size="large" legend="What is your delivery address?">
+			<ontario-input
+				id="delivery-address-form-line-1"
+				caption="Address line 1"
+				required
+				name="delivery-address-form-line-1"
+				hint-text="Street and number or P.O. Box."
+				enable-live-validation
+				required-validation-message="Please enter your address"
+			></ontario-input>
+			<ontario-input
+				caption="Address line 2"
+				name="delivery-address-form-line-2"
+				hint-text="Apartment, suite, unit, building, etc."
+			></ontario-input>
+			<ontario-dropdown-list
+				caption="Province/territory"
+				name="delivery-address-form-province-selection-form"
+				element-id="delivery-address-form-province-territory"
+				required
+				is-empty-start-option="true"
+				options='[
+					{ "value": "ON", "label": "Ontario" },
+					{ "value": "QC", "label": "Quebec" },
+					{ "value": "SK", "label": "Saskatchewan" }
+				]'
+			></ontario-dropdown-list>
+		</ontario-fieldset>
+	</ontario-form-container>
+</form>
+```
+
+<div>
+	<form>
+		<OntarioFormContainer>
+			<OntarioFieldset legendSize="large" legend="What is your delivery address?">
+				<OntarioInput
+					id="delivery-address-form-line-1"
+					caption="Address line 1"
+					required
+					name="delivery-address-form-line-1"
+					hint-text="Street and number or P.O. Box."
+					enable-live-validation
+					required-validation-message="Please enter your address"
+				>
+				</OntarioInput>
+				<OntarioInput
+					caption="Address line 2"
+					name="delivery-address-form-line-2"
+					hint-text="Apartment, suite, unit, building, etc."
+				>
+				</OntarioInput>
+				<OntarioDropdownList
+					caption="Province/territory"
+					name="delivery-address-form-province-selection-form"
+					element-id="delivery-address-form-province-territory"
+					required
+					is-empty-start-option="true"
+					options='[
+						{ "value": "ON", "label": "Ontario" },
+						{ "value": "QC", "label": "Quebec" },
+						{ "value": "SK", "label": "Saskatchewan" }
+					]'
+				>
+				</OntarioDropdownList>
+			</OntarioFieldset>
+		</OntarioFormContainer>
+	</form>
+</div>
+
+### Mixed gap example
+
+This example uses both default and condensed gaps.
+
+```html
+<form>
+	<ontario-form-container>
+		<ontario-fieldset legend-size="large" legend="What is your delivery address?">
+			<ontario-input
+				name="email"
+				input-width="20-char-width"
+				caption='{
+                    "captionText": "Email",
+                    "captionType": "large"
+                }'
+				required="true"
+			></ontario-input>
+			<ontario-form-container gap="condensed">
+				<ontario-textarea
+					name="comments"
+					caption='{
+                        "captionText": "Comments",
+                        "captionType": "large"
+                    }'
+					required="true"
+				></ontario-textarea>
+				<ontario-button type="secondary">✅ Share my feedback</ontario-button>
+			</ontario-form-container>
+		</ontario-fieldset>
+	</ontario-form-container>
+</form>
+```
+
+<div>
+	<form>
+		<OntarioFormContainer>
+			<OntarioFieldset legendSize="large" legend="What is your delivery address?">
+				<OntarioInput
+					name="email"
+					input-width="20-char-width"
+					caption='{
+						"captionText": "Email",
+						"captionType": "large"
+					}'
+					required="true"
+				></OntarioInput>
+				<OntarioFormContainer gap="condensed">
+					<OntarioTextarea
+						name="comments"
+						caption='{
+							"captionText": "Comments",
+							"captionType": "large"
+						}'
+						required="true"
+					></OntarioTextarea>
+					<OntarioButton type="secondary">✅ Share my feedback</OntarioButton>
+				</OntarioFormContainer>
+			</OntarioFieldset>
+		</OntarioFormContainer>
+	</form>
+</div>
+
+## Best Practices
+
+- Use the **default gap** spacing for standard forms
+- Use the **condensed gap** spacing when form elements are closely related but of different types
+- Limit the number of nested spacing levels to avoid complex and unreadable layouts
+
+## Accessibility considerations
+
+- **Readability and Usability**: Ensure that spacing choices support clear and structured layouts
+- **Focus Order**: Spacing should not disrupt the expected focus order when navigating with a keyboard or screen reader
+- **Visual Hierarchy**: Appropriate spacing improves visual hierarchy, reducing cognitive load
+- **Semantic Markup**: When using condensed spacing sections, consider using semantic elements to group items together, such as the `<ontario-fieldset>`
+
+## Configuration
+
+Once the component package has been installed (see the Ontario Design System Component Library for installation instructions), the `ontario-form-container` component can be added directly into the project's code and customized using the `gap` property.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description                                                                                                              | Type                       | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ----------- |
+| `gap`    | `gap`     | Defines the gap (bottom margin) between slotted form elements. If no gap prop is provided, it will default to 'default'. | `"condensed" \| "default"` | `'default'` |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

package/src/components/ontario-form-container/test/__snapshots__/ontario-form-container.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ontario-form-container snapshot should render the expected html 1`] = `
+<ontario-form-container>
+  <template shadowrootmode="open">
+    <div class="ontario-form-container--gap-40">
+      <slot></slot>
+    </div>
+  </template>
+</ontario-form-container>
+`;

package/src/components/ontario-form-container/test/ontario-form-container.e2e.ts

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ontario-form-container)', () => {
+	it('renders with the default gap', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-form-container></ontario-form-container>');
+
+		const div = await page.find('ontario-form-container >>> div');
+		expect(div).toHaveClass('ontario-form-container--gap-40');
+	});
+
+	it('renders with the condensed gap', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-form-container gap="condensed"></ontario-form-container>');
+
+		const div = await page.find('ontario-form-container >>> div');
+		expect(div).toHaveClass('ontario-form-container--gap-16');
+	});
+});

package/src/components/ontario-form-container/test/ontario-form-container.spec.tsx

@@ -0,0 +1,32 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioFormContainer } from '../ontario-form-container';
+
+describe('ontario-form-container', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioFormContainer],
+				html: `<ontario-form-container></ontario-form-container>`,
+			});
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+
+	it('should render with default gap if no gap prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioFormContainer],
+			html: `<ontario-form-container></ontario-form-container>`,
+		});
+
+		expect(page.root?.shadowRoot?.querySelector('div')).toHaveClass('ontario-form-container--gap-40');
+	});
+
+	it('should render with condensed gap if the `condensed` spacing gap is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioFormContainer],
+			html: `<ontario-form-container gap="condensed"></ontario-form-container>`,
+		});
+
+		expect(page.root?.shadowRoot?.querySelector('div')).toHaveClass('ontario-form-container--gap-16');
+	});
+});

package/src/components/ontario-header/ontario-application-header.scss

@@ -1,18 +1,20 @@
 @use 'sass:math';
-@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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@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;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+@use '../../styles/text-inputs.scss';
 
 $navigation-link-bg--hover: #e5e5e5;
 $navigation-max-width: 72rem;

package/src/components/ontario-header/ontario-header.scss

@@ -1,18 +1,20 @@
 @use 'sass:math';
-@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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@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;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+@use '../../styles/text-inputs.scss';
 
 $ontario-search-padding: 7.2rem;
 $ontario-search-padding--mobile: 6.4rem;

package/src/components/ontario-header/service-ontario-header.scss

@@ -1,13 +1,14 @@
 @use 'sass:math';
-@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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
+@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;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
 @use './ontario-application-header.scss';
 
 .ontario-service-header {

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

@@ -1,12 +1,12 @@
-@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 '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@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;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	placeholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 
 .ontario-hint-expander__container {
 	max-width: globalVariables.$standard-width;

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