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

package/src/index.html

@@ -109,23 +109,16 @@
 					</div>
 
 					<!-- Buttons -->
-					<div>
+					<ontario-form-container>
 						<h2 id="buttons">Buttons</h2>
-						<div>
-							<h3 class="ontario-h4">Primary button</h3>
-							<ontario-button aria-label-text="Primary Button" type="primary"> Primary </ontario-button>
-						</div>
-						<div>
-							<h3 class="ontario-h4">Secondary button</h3>
-							<ontario-button aria-label-text="Secondary Button" htmlType="reset"> Secondary </ontario-button>
-						</div>
-						<div>
-							<h3 class="ontario-h4">Tertiary button</h3>
-							<ontario-button aria-label-text="Tertiary Button" type="tertiary"> Tertiary </ontario-button>
-						</div>
-
+						<h3 class="ontario-h4">Primary button</h3>
+						<ontario-button aria-label-text="Primary Button" type="primary">Primary</ontario-button>
+						<h3 class="ontario-h4">Secondary button</h3>
+						<ontario-button aria-label-text="Secondary Button" htmlType="reset">Secondary</ontario-button>
+						<h3 class="ontario-h4">Tertiary button</h3>
+						<ontario-button aria-label-text="Tertiary Button" type="tertiary">Tertiary</ontario-button>
 						<hr />
-					</div>
+					</ontario-form-container>
 
 					<!-- Callouts & Asides -->
 					<div>
@@ -469,6 +462,7 @@
 								</ontario-card>
 							</ontario-card-collection>
 						</div>
+						<hr />
 					</div>
 
 					<!-- Checkboxes -->
@@ -565,7 +559,7 @@
 							});
 						});
 					</script>
-					<div>
+					<ontario-form-container>
 						<h2 id="fieldsets">Fieldsets</h2>
 						<ontario-fieldset legend-size="large" legend="What is your delivery address?">
 							<ontario-input
@@ -647,8 +641,8 @@
 								enable-live-validation
 							></ontario-input>
 						</ontario-fieldset>
-						<hr />
-					</div>
+					</ontario-form-container>
+					<hr />
 
 					<!-- Buttons -->
 					<div>
@@ -1085,7 +1079,7 @@
 					</div>
 
 					<!-- Textareas -->
-					<div>
+					<ontario-form-container>
 						<h2 id="textareas">Textareas</h2>
 						<ontario-textarea
 							name="comments"
@@ -1119,12 +1113,11 @@
 							}'
 							element-id="response"
 						></ontario-textarea>
-
-						<hr />
-					</div>
+					</ontario-form-container>
+					<hr />
 
 					<!-- Text inputs -->
-					<div>
+					<ontario-form-container>
 						<h2 id="text-inputs">Text inputs</h2>
 						<ontario-input
 							name="email"
@@ -1152,7 +1145,7 @@
 								"content": "This is the content, yup this is the content"
 							}'
 						></ontario-input>
-					</div>
+					</ontario-form-container>
 					<hr />
 
 					<!-- Date Input -->
@@ -1231,10 +1224,11 @@
 					</div>
 
 					<hr />
-					<div>
-						<!-- Form -->
-						<form id="sample-form">
-							<h2 id="form">Form example</h2>
+
+					<!-- Form -->
+					<form id="sample-form">
+						<h2 id="form">Form example</h2>
+						<ontario-form-container>
 							<ontario-fieldset legend-size="large" legend="What is your delivery address?">
 								<ontario-input
 									id="delivery-address-form-line-1"
@@ -1322,7 +1316,7 @@
 												"elementId": "radio-2",
 												"label": "Text message"
 											},
-
+	
 											{
 												"value": "phone",
 												"elementId": "radio-3",
@@ -1360,48 +1354,49 @@
 								></ontario-textarea>
 							</ontario-fieldset>
 							<ontario-button type="primary" html-type="submit">Submit</ontario-button>
-						</form>
-						<h2 style="display: none" id="form-results">Form Results</h2>
-						<div id="form-results-data"></div>
-						<script>
-							window.addEventListener('load', () => {
-								console.log('Loaded Form Event Listener');
-								const form = document.getElementById('sample-form');
-								const formResults = document.getElementById('form-results');
-								const formResultsDataDisplay = document.getElementById('form-results-data');
-								form.addEventListener('submit', (event) => {
-									// Avoid an actual submission
-									event.preventDefault();
+						</ontario-form-container>
+					</form>
 
-									// Get the data from the form to be submitted
-									const formData = new FormData(event.target);
-									const formResultsArray = [...formData.entries()];
+					<h2 style="display: none" id="form-results">Form Results</h2>
+					<div id="form-results-data"></div>
+					<script>
+						window.addEventListener('load', () => {
+							console.log('Loaded Form Event Listener');
+							const form = document.getElementById('sample-form');
+							const formResults = document.getElementById('form-results');
+							const formResultsDataDisplay = document.getElementById('form-results-data');
+							form.addEventListener('submit', (event) => {
+								// Avoid an actual submission
+								event.preventDefault();
 
-									if (validateForm()) return;
+								// Get the data from the form to be submitted
+								const formData = new FormData(event.target);
+								const formResultsArray = [...formData.entries()];
 
-									// Display the form data
-									formResults.style.display = 'block';
-									console.log('Form Content:', formResultsArray);
-									const formResultsHtml = formResultsArray.map((x) => `<li><strong>${x[0]}</strong>: ${x[1]}</li>`);
-									formResultsDataDisplay.innerHTML = `<p class="ontario-columns ontario-small-12"><ul>\n${formResultsHtml.join(
-										'\n',
-									)}\n</ul></p>`;
-								});
+								if (validateForm()) return;
 
-								const validateForm = () => {
-									let error = false;
-									const address1 = document.getElementById('delivery-address-form-line-1');
-									if (address1.value == undefined || address1.value == '') {
-										address1.errorMessage = 'Please enter your address';
-										address1.scrollIntoView();
-										error = true;
-									}
-
-									return error;
-								};
+								// Display the form data
+								formResults.style.display = 'block';
+								console.log('Form Content:', formResultsArray);
+								const formResultsHtml = formResultsArray.map((x) => `<li><strong>${x[0]}</strong>: ${x[1]}</li>`);
+								formResultsDataDisplay.innerHTML = `<p class="ontario-columns ontario-small-12"><ul>\n${formResultsHtml.join(
+									'\n',
+								)}\n</ul></p>`;
 							});
-						</script>
-					</div>
+
+							const validateForm = () => {
+								let error = false;
+								const address1 = document.getElementById('delivery-address-form-line-1');
+								if (address1.value == undefined || address1.value == '') {
+									address1.errorMessage = 'Please enter your address';
+									address1.scrollIntoView();
+									error = true;
+								}
+
+								return error;
+							};
+						});
+					</script>
 				</div>
 			</div>
 		</main>

package/src/styles/fieldsets.scss

@@ -0,0 +1,60 @@
+@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/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@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/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/letter-spacing.variables' as
+	letterSpacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeight;
+
+.ontario-fieldset__legend {
+	color: colours.$ontario-colour-black;
+	font-family: fonts.$ontario-font-raleway-modified;
+	font-size: 1.1875rem;
+	font-weight: fontWeights.$ontario-font-weights-bold;
+	margin: 0 0 spacing.$spacing-4 0;
+	line-height: globalVariables.$line-height-default;
+	max-width: globalVariables.$narrow-width;
+	white-space: normal;
+	width: globalVariables.$full-width;
+	hyphens: auto;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		font-size: 1.125rem;
+		line-height: lineHeight.$ontario-line-height-8;
+	}
+}
+
+.ontario-fieldset__legend--large,
+.ontario-fieldset__legend--heading {
+	letter-spacing: letterSpacing.$ontario-letter-spacing-xsmall;
+	line-height: lineHeight.$ontario-line-height-1;
+
+	h1 {
+		display: inline-block;
+		margin: spacing.$spacing-0;
+		@extend %h1-styles;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		font-size: 1.4375rem;
+		line-height: lineHeight.$ontario-line-height-5;
+	}
+}
+
+.ontario-fieldset__legend--large {
+	font-size: 1.75rem;
+}
+
+.ontario-fieldset__legend-required-flag,
+.ontario-fieldset__legend-optional-flag {
+	font-family: fonts.$ontario-font-open-sans;
+	font-size: 1rem;
+	font-weight: fontWeights.$ontario-font-weights-normal;
+
+	&:before {
+		content: '\a0';
+	}
+}

package/src/styles/labels.scss

@@ -0,0 +1,56 @@
+@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/1-variables/typography.variables' as typography;
+@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/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as global;
+@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/letter-spacing.variables' as
+	letterSpacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeight;
+
+.ontario-label {
+	cursor: pointer;
+	color: colours.$ontario-colour-black;
+	font-family: fonts.$ontario-font-raleway-modified;
+	font-size: 1.1875rem;
+	font-weight: 700;
+	line-height: global.$line-height-default;
+	margin: 0 0 spacing.$spacing-4 0;
+	max-width: global.$narrow-width;
+	white-space: normal;
+	width: 100%;
+	hyphens: auto;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		font-size: 1.125rem;
+		line-height: lineHeight.$ontario-line-height-8;
+	}
+}
+
+.ontario-label--large {
+	font-size: 1.75rem;
+	letter-spacing: letterSpacing.$ontario-letter-spacing-xsmall;
+	line-height: lineHeight.$ontario-line-height-1;
+	max-width: 26.25em;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		font-size: 1.4375rem;
+		line-height: lineHeight.$ontario-line-height-5;
+	}
+}
+
+h1 > .ontario-label--heading {
+	display: inline-block;
+	margin: spacing.$spacing-0;
+	@extend %h1-styles;
+}
+
+.ontario-label__flag {
+	font-family: fonts.$ontario-font-open-sans;
+	font-size: 1rem;
+	font-weight: 400;
+
+	&:before {
+		content: '\a0';
+	}
+}

package/src/styles/slotted-styles/callouts-asides.scss

@@ -0,0 +1,11 @@
+@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;
+
+ontario-aside *,
+ontario-callout * {
+	max-width: globalVariables.$standard-width;
+
+	&:last-of-type {
+		margin-bottom: spacing.$spacing-2;
+	}
+}

package/src/styles/slotted-styles/page-alerts.scss

@@ -0,0 +1,46 @@
+@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-page-alert__error-link--hover: #6b0000;
+$ontario-page-alert__error-link--active: #280000;
+
+ontario-page-alert {
+	p {
+		margin-top: spacing.$spacing-0;
+
+		&:last-of-type {
+			margin-bottom: spacing.$spacing-2;
+		}
+
+		&:last-of-type + ul {
+			margin-top: spacing.$spacing-4;
+		}
+	}
+
+	ul:last-of-type {
+		margin-bottom: spacing.$spacing-2;
+	}
+}
+
+ontario-page-alert[type='error'] {
+	ul {
+		margin-left: (spacing.$spacing-2 + spacing.$spacing-4);
+
+		&:last-of-type {
+			margin-bottom: spacing.$spacing-2;
+		}
+	}
+
+	a {
+		color: colours.$ontario-colour-alert;
+
+		&:hover,
+		&:focus {
+			color: $ontario-page-alert__error-link--hover;
+		}
+
+		&:active {
+			color: $ontario-page-alert__error-link--active;
+		}
+	}
+}

package/src/styles/text-inputs.scss

@@ -0,0 +1,56 @@
+@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/1-variables/typography.variables' as typography;
+@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/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as global;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+
+.ontario-input {
+	border: global.$border-size-standard solid colours.$ontario-colour-black;
+	border-radius: global.$global-radius;
+	box-sizing: border-box;
+	color: colours.$ontario-colour-black;
+	display: block;
+	font-size: 1rem;
+	font-family: fonts.$ontario-font-open-sans;
+	line-height: global.$line-height-default;
+	margin: spacing.$spacing-0;
+	max-width: global.$standard-width;
+	width: global.$full-width;
+	padding: 0.625rem spacing.$spacing-4;
+	transition: focusPlaceholders.$ontario-focus-transition;
+
+	&:focus,
+	&:active {
+		@extend %ontario-focus;
+	}
+}
+
+.ontario-input--2-char-width {
+	max-width: 8ex;
+}
+
+.ontario-input--3-char-width {
+	max-width: 10ex;
+}
+
+.ontario-input--4-char-width {
+	max-width: 12ex;
+}
+
+.ontario-input--5-char-width {
+	max-width: 14ex;
+}
+
+.ontario-input--7-char-width {
+	max-width: 17ex;
+}
+
+.ontario-input--10-char-width {
+	max-width: 23ex;
+}
+
+.ontario-input--20-char-width {
+	max-width: 41ex;
+}

package/src/utils/common/common.form-elements.scss

@@ -0,0 +1,10 @@
+// List of common form elements
+$form-elements: (
+	'ontario-input',
+	'ontario-checkboxes',
+	'ontario-dropdown-list',
+	'ontario-textarea',
+	'ontario-radio-buttons',
+	'ontario-button',
+	'ontario-date-input'
+);

package/src/utils/components/error-message/error-message.scss

@@ -1,6 +1,7 @@
-@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/spacing.variables' as spacing;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'sass:math';
+@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/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
 
 .ontario-error-messaging {
 	display: flex;
@@ -12,6 +13,7 @@
 
 .ontario-error-messaging__content {
 	margin-left: spacing.$spacing-2;
+	margin-top: math.div(spacing.$spacing-1, 2);
 }
 
 .ontario-input__error {

package/src/utils/components/form-container/form-container.interface.ts

@@ -0,0 +1,8 @@
+export enum FormGap {
+	Default = 40,
+	Condensed = 16,
+}
+
+export interface OntarioFormContainer extends HTMLElement {
+	gap: 'default' | 'condensed';
+}