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

package/www/build/p-ff75bd0d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconNext","constructor","hostRef","this","iconWidth","colour","validateWidth","isNaN","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","iconWidthState","validateColour","isValid","validateValueAgainstArray","IconColours","iconColourState","validateColor","iconCustomColourState","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-next&encapsulation=shadow","src/components/ontario-icon/ontario-icon-next.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-next',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconNext implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-next> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-next> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"next\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M22 12a10 10 0 0 1-10 10 10 10 0 0 1-7.071-2.929 10 10 0 0 1 0-14.142 10 10 0 0 1 10.898-2.168 10 10 0 0 1 5.412 5.412A10 10 0 0 1 22 12zm-12 6l6-6-6-6-1.4 1.4 4.6 4.6-4.6 4.6L10 18z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"mappings":"iIAAA,MAAMA,EAAiB,0Z,MCaVC,EAAe,MAL5B,WAAAC,CAAAC,G,UAUSC,KAASC,UAAa,GAsCtBD,KAAME,OAAe,OAmF7B,CA5GA,aAAAC,GACC,GAAIC,MAAMJ,KAAKC,aAAgBG,MAAMJ,KAAKC,YAAcD,KAAKC,WAAa,EAAI,CAC7E,MAAMI,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,yBACjBC,eACA,GACCL,MAAMJ,KAAKC,WAAa,iCAAmC,0FAG5DO,iBAAiB,UACjBC,eAAe,gBACfC,eACFV,KAAKW,eAAiB,E,KAChB,CACNX,KAAKW,eAAiBX,KAAKC,S,EA2B7B,cAAAW,GACC,MAAMC,EAAUC,EAA0Bd,KAAKE,OAAQa,GACvD,GAAIF,EAAS,CACZb,KAAKgB,gBAAkBhB,KAAKE,M,KACtB,CACN,GAAIe,EAAcjB,KAAKE,QAAS,CAC/BF,KAAKkB,sBAAwBlB,KAAKE,M,KAC5B,CACNF,KAAKgB,gBAAkBhB,KAAKmB,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,yBACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACCpB,KAAKY,iBACLZ,KAAKG,e,CAMN,MAAAkB,GACC,OACCC,EACC,OAAAC,IAAA,2CAAAC,MAAO,8BAA8BxB,KAAKgB,uCAAuChB,KAAKW,iBACtFc,MAAO,CAAEC,MAAO,GAAG1B,KAAKW,qBAExBW,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAG3B,KAAKkB,wBAAyBU,OAAQ,GAAG5B,KAAKkB,yBAChEW,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,QAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,4L","ignoreList":[]}

package/www/index.html

@@ -1,17 +1,17 @@
 <!doctype html>
 <html dir="ltr" lang="en">
 	<head>
-		<link rel="stylesheet" href="/build/p-a661bec6.css" />
+		<link rel="stylesheet" href="/build/p-37359b42.css" />
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 		<title>Ontario Design System - component samples</title>
-		<link rel="modulepreload" href="/build/p-cd291f03.js" />
+		<link rel="modulepreload" href="/build/p-d6dabb1a.js" />
+		<link rel="modulepreload" href="/build/p-B0__ICHj.js" />
 		<link rel="modulepreload" href="/build/p-Cdm-Ot0O.js" />
 		<link rel="modulepreload" href="/build/p-_eQ6Jzc4.js" />
-		<link rel="modulepreload" href="/build/p-sKE6XOGY.js" />
 		<script
 			type="module"
-			src="/build/p-cd291f03.js"
+			src="/build/p-d6dabb1a.js"
 			data-stencil
 			data-resources-url="/build/"
 			data-stencil-namespace="ontario-design-system-components"
@@ -110,22 +110,16 @@
 						<hr />
 					</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>
 						<h2 id="callout-aside">Callouts and Asides</h2>
@@ -434,6 +428,7 @@
 								></ontario-card>
 							</ontario-card-collection>
 						</div>
+						<hr />
 					</div>
 					<!-- Checkboxes -->
 					<div>
@@ -525,7 +520,7 @@
 							});
 						});
 					</script>
-					<div>
+					<ontario-form-container>
 						<h2 id="fieldsets">Fieldsets</h2>
 						<ontario-fieldset legend-size="large" legend="What is your delivery address?">
 							<ontario-input
@@ -607,8 +602,8 @@
 								enable-live-validation=""
 							></ontario-input>
 						</ontario-fieldset>
-						<hr />
-					</div>
+					</ontario-form-container>
+					<hr />
 					<!-- Buttons -->
 					<div>
 						<h2 id="header">Header</h2>
@@ -1038,7 +1033,7 @@
 						<hr />
 					</div>
 					<!-- Textareas -->
-					<div>
+					<ontario-form-container>
 						<h2 id="textareas">Textareas</h2>
 						<ontario-textarea
 							name="comments"
@@ -1072,10 +1067,10 @@
 							}'
 							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"
@@ -1103,7 +1098,7 @@
 								"content": "This is the content, yup this is the content"
 							}'
 						></ontario-input>
-					</div>
+					</ontario-form-container>
 					<hr />
 					<!-- Date Input -->
 					<div>
@@ -1177,10 +1172,10 @@
 						></ontario-search-box>
 					</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"
@@ -1267,7 +1262,7 @@
 												"elementId": "radio-2",
 												"label": "Text message"
 											},
-
+	
 											{
 												"value": "phone",
 												"elementId": "radio-3",
@@ -1304,48 +1299,48 @@
 								></ontario-textarea>
 							</ontario-fieldset>
 							<ontario-button type="primary" html-type="submit">Submit</ontario-button>
-						</form>
-						<h2 id="form-results" style="display: none">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>
+					<h2 id="form-results" style="display: none">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();
 
-									// Get the data from the form to be submitted
-									const formData = new FormData(event.target);
-									const formResultsArray = [...formData.entries()];
+								// Get the data from the form to be submitted
+								const formData = new FormData(event.target);
+								const formResultsArray = [...formData.entries()];
 
-									if (validateForm()) return;
+								if (validateForm()) return;
 
-									// 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>`;
-								});
+								// 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>`;
+							});
 
-								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;
-									}
+							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>
+								return error;
+							};
+						});
+					</script>
 				</div>
 			</div>
 		</main>

package/www/scss/theme.scss

@@ -0,0 +1,19 @@
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/theme.scss';
+
+/**
+ * The following styles (for slotted content in StencilJS components) are added here for the `globalStyle` configuration within the stencil config doc.
+ *
+ * Slotted elements are rendered outside of the component's Shadow DOM, which means scoped styles
+ * defined within the component cannot directly target them. While the `::slotted` pseudo-element can
+ * style direct children of slots, it does not support deeper descendant styling.
+ *
+ * To ensure styling for slotted content works, these styles are defined in a
+ * separate global stylesheet (i.e: `styles/slotted-styles`) and included in the build process via the `globalStyle` config
+ * option. This approach ensures:
+ *
+ * 1. Slotted elements are styled automatically without requiring consumers to add additional classes or external styles.
+ * 2. All styles are centralized within the component library for better maintainability.
+ *
+ */
+@forward './styles/slotted-styles/callouts-asides';
+@forward './styles/slotted-styles/page-alerts';