@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/collection/components/ontario-page-alert/ontario-page-alert.css

@@ -0,0 +1,499 @@
+@charset "UTF-8";
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/*** 1 - Breakpoint sizes for media queries ***/ /* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+h6,
+.ontario-h6,
+h5,
+.ontario-h5,
+h4,
+.ontario-h4,
+h3,
+.ontario-h3,
+h2,
+.ontario-h2,
+h1,
+.ontario-h1 {
+	font-style: normal;
+	font-weight: 700;
+	text-rendering: optimizeLegibility;
+	margin-bottom: 1rem;
+	font-feature-settings: normal;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+h1,
+.ontario-h1 {
+	font-size: 2rem;
+	letter-spacing: 0.04rem;
+	line-height: 1.29;
+	margin: 2.5rem 0 1.5rem 0;
+	max-width: 70rem;
+}
+@media screen and (min-width: 40em) {
+	h1,
+	.ontario-h1 {
+		font-size: 2.5rem;
+		letter-spacing: 0.04rem;
+		line-height: 1.2;
+	}
+}
+
+h2,
+.ontario-h2 {
+	font-size: 1.6875rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.37;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h2,
+	.ontario-h2 {
+		font-size: 2.0625rem;
+		letter-spacing: 0.02rem;
+		line-height: 1.33;
+	}
+}
+
+h3,
+.ontario-h3 {
+	font-size: 1.4375rem;
+	letter-spacing: 0.02rem;
+	line-height: 1.39;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h3,
+	.ontario-h3 {
+		font-size: 1.75rem;
+		letter-spacing: 0.02rem;
+		line-height: 1.43;
+	}
+}
+
+h4,
+.ontario-h4 {
+	font-size: 1.25rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.5;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h4,
+	.ontario-h4 {
+		font-size: 1.5rem;
+		letter-spacing: 0.0313rem;
+		line-height: 1.5;
+	}
+}
+
+h5,
+.ontario-h5 {
+	font-size: 1.125rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.56;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h5,
+	.ontario-h5 {
+		font-size: 1.1875rem;
+		letter-spacing: 0.025rem;
+		line-height: 1.5;
+	}
+}
+
+h6,
+.ontario-h6 {
+	font-size: 1rem;
+	line-height: 1.56;
+	letter-spacing: 0.03rem;
+	max-width: 48rem;
+	margin: 0 0 0.75rem 0;
+}
+@media screen and (min-width: 40em) {
+	h6,
+	.ontario-h6 {
+		font-size: 1rem;
+		letter-spacing: 0.025rem;
+		line-height: 1.5;
+	}
+}
+
+.ontario-lead-statement {
+	font-size: 1.25rem;
+	line-height: 1.6;
+	max-width: 70rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-lead-statement {
+		font-size: 1.375rem;
+	}
+}
+
+/*
+*  Global elements
+*
+*  1 - Unclassed elements
+*    1.1 - Base
+*    1.2 - Typography
+*    1.3 - Forms
+*    1.4 - Horizontal Rule
+*    1.5 - Lists
+*/
+/*** 1 - Unclassed Elements ***/
+/* Base */
+html {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+}
+
+body {
+	font-size: 1rem;
+	line-height: 1.6;
+	background-color: #ffffff;
+	color: #1a1a1a;
+	margin: 0;
+}
+
+/* Typography */
+p {
+	font-size: inherit;
+	margin-bottom: 1.25rem;
+	text-rendering: optimizeLegibility;
+	margin: 0 0 1.5rem 0;
+}
+
+cite {
+	font-style: italic;
+	line-height: inherit;
+}
+
+strong {
+	font-weight: 700;
+	line-height: inherit;
+}
+
+/* everything - including before and after - should inherit their box sizing */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+main p,
+main p:not(.ontario-lead-statement),
+main dd,
+main li {
+	max-width: 48rem;
+}
+
+hr {
+	border: 0;
+	padding: 0;
+	margin: 2.5rem 0;
+	border-bottom: 4px solid #cccccc;
+}
+
+/* Horizontal Rule */
+hr.ontario-hr--dark {
+	border-bottom: 4px solid #1a1a1a;
+}
+
+a {
+	color: #0066cc;
+	text-decoration: underline;
+}
+a:visited {
+	color: #551a8b;
+}
+a:hover {
+	color: #00478f;
+}
+a:active {
+	color: #002142;
+}
+a:focus {
+	-moz-box-shadow: 0 0 0 4px #009adb;
+	-webkit-box-shadow: 0 0 0 4px #009adb;
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: all 0.1s ease-in-out;
+}
+
+​p {
+	margin: 0 0 1.5rem 0;
+}
+
+​p + h1,
+p + h2,
+p + h3,
+p + h4,
+p + h5,
+p + h6,
+ul + h1,
+ul + h2,
+ul + h3,
+ul + h4,
+ul + h5,
+ul + h6,
+ol + h1,
+ol + h2,
+ol + h3,
+ol + h4,
+ol + h5,
+ol + h6,
+h1 + h2,
+h2 + h3,
+h3 + h4,
+h4 + h5,
+h5 + h6 {
+	margin-top: 2rem;
+}
+
+p code,
+td code,
+li code {
+	line-height: 2.25rem;
+}
+
+/* Forms */
+input[type='text'],
+input[type='number'],
+input[type='email'],
+input[type='date'],
+input[type='color'],
+input[type='search'],
+input[type='tel'],
+textarea {
+	background-origin: initial;
+	height: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+input[type='checkbox'] + label,
+input[type='radio'] + label {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+	font-weight: 400;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	page-break-inside: avoid;
+}
+
+legend,
+label {
+	display: block;
+	margin: 0;
+}
+
+select {
+	background-origin: initial;
+	height: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+/* Lists */
+ul,
+ol {
+	padding: 0;
+}
+
+ul {
+	margin-left: 2rem;
+}
+
+ul li {
+	padding: 0 0 0.75rem 0;
+}
+
+ol {
+	margin-left: 1.75rem;
+}
+
+ol li {
+	padding: 0 0 0.75rem 0.25rem;
+}
+
+ul li:last-child,
+ol li:last-child {
+	padding-bottom: 0;
+}
+
+ul[class*='columns-'] li:last-child,
+ol[class*='columns-'] li:last-child {
+	padding-bottom: 0.75rem;
+}
+
+ul ul,
+ol ul {
+	margin: 0.5rem 0 0.5rem 2rem;
+}
+
+ul ol,
+ol ol {
+	margin: 0.5rem 0 0.5rem 1.75rem;
+}
+
+p + ul,
+p + ol {
+	margin-top: -0.75rem;
+}
+
+@media screen and (min-width: 40em) {
+	ul {
+		margin: 0.5rem 0 1.5rem 3rem;
+	}
+	ol {
+		margin: 0.5rem 0 1.5rem 2.75rem;
+	}
+	ul ul,
+	ol ul {
+		margin: 0.5rem 0 0.5rem 3rem;
+	}
+	ul ol,
+	ol ol {
+		margin: 0.5rem 0 0.5rem 2.75rem;
+	}
+}
+.ontario-alert {
+	border-width: 0 0 0 0.25rem;
+	border-style: solid;
+	padding: 1.5rem;
+	margin: 2rem 0 2.5rem 0;
+}
+
+.ontario-alert__header {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.ontario-alert__header-icon {
+	display: inline-block;
+	vertical-align: top;
+	margin-right: 0.95rem;
+}
+
+.ontario-alert__header-title {
+	margin-bottom: 0.75rem;
+	padding-top: 0.125rem;
+}
+
+.ontario-alert__body {
+	margin-left: 3.25rem;
+	max-width: 48rem;
+}
+@media screen and (max-width: 40em) {
+	.ontario-alert__body {
+		margin-left: 0;
+	}
+}
+
+.ontario-alert__body p {
+	margin-top: 0;
+}
+.ontario-alert__body p:last-of-type {
+	margin-bottom: 0.5rem;
+}
+
+.ontario-alert__body p:last-of-type + ul {
+	margin-top: 1rem;
+}
+
+.ontario-alert__body ul:last-of-type {
+	margin-bottom: 0.5rem;
+}
+
+.ontario-alert--error ul {
+	margin-left: 1.25rem;
+}
+
+.ontario-alert--error ul:last-of-type {
+	margin-bottom: 0.5rem;
+}
+
+.ontario-alert--informational {
+	border-color: #1080a6;
+	background-color: #e2f0f4;
+}
+
+.ontario-alert--warning {
+	border-color: #ffd440;
+	background-color: #fef6dc;
+}
+
+.ontario-alert--success {
+	border-color: #118847;
+	background-color: #e5f0e9;
+}
+
+.ontario-alert--error {
+	border-color: #cd0000;
+	background-color: #fceff0;
+}
+
+.ontario-alert--error a {
+	color: #cd0000;
+}
+.ontario-alert--error a:hover,
+.ontario-alert--error a:focus {
+	color: #6b0000;
+}
+.ontario-alert--error a:active {
+	color: #280000;
+}

package/dist/collection/components/ontario-page-alert/ontario-page-alert.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ontario-page-alert.interface.js.map

package/dist/collection/components/ontario-page-alert/ontario-page-alert.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-page-alert.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-page-alert/ontario-page-alert.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type PageAlertType = 'informational' | 'warning' | 'success' | 'error';\n\nexport interface PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\ttype?: PageAlertType;\n\n\t/**\n\t * The heading for the page alert\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\theading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\tcontent: string | HTMLElement;\n}\n"]}

package/dist/collection/components/ontario-page-alert/ontario-page-alert.js

@@ -0,0 +1,149 @@
+import { h } from '@stencil/core';
+export class OntarioPageAlert {
+	constructor() {
+		this.type = 'informational';
+		this.heading = undefined;
+		this.content = undefined;
+	}
+	/**
+	 * @returns the classes of the page alert container based on the alert `type`.
+	 */
+	getClass() {
+		return `ontario-alert ontario-alert--${this.type}`;
+	}
+	renderIcon() {
+		const iconProps = { 'icon-width': 36 };
+		switch (this.type) {
+			case 'informational':
+				return h('ontario-icon-alert-information', Object.assign({}, iconProps));
+			case 'success':
+				return h('ontario-icon-alert-success', Object.assign({}, iconProps));
+			case 'warning':
+				return h('ontario-icon-alert-warning', Object.assign({}, iconProps));
+			case 'error':
+				return h('ontario-icon-alert-error', Object.assign({}, iconProps));
+		}
+	}
+	renderContent() {
+		const body = this.content;
+		if (typeof body === 'string') {
+			return h('p', null, body);
+		}
+		return h('slot', null);
+	}
+	render() {
+		return h(
+			'div',
+			{ key: '8d9ce139b254b12b7b718695fa033ca38370a49c', class: this.getClass() },
+			h(
+				'div',
+				{ key: '1a64f71f87f6f21da11d9354f800a2bcb4ddbeda', class: 'ontario-alert__header' },
+				h(
+					'div',
+					{ key: '1a5566b6f44fa1fbf8a6358d9670bd9d85ebf569', class: 'ontario-alert__header-icon' },
+					this.renderIcon(),
+				),
+				h(
+					'h2',
+					{ key: '19f4f2ae3faa8b8c9ab1281b46b653d2b2a43d46', class: 'ontario-alert__header-title ontario-h4' },
+					this.heading,
+				),
+			),
+			h('div', { key: 'cebd1ecddd5419b454dcd36512dbc4e1a3dcb684', class: 'ontario-alert__body' }, this.renderContent()),
+		);
+	}
+	static get is() {
+		return 'ontario-page-alert';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-page-alert.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-page-alert.css'],
+		};
+	}
+	static get properties() {
+		return {
+			type: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'PageAlertType',
+					resolved: '"error" | "informational" | "success" | "warning"',
+					references: {
+						PageAlertType: {
+							location: 'import',
+							path: './ontario-page-alert.interface',
+							id: 'src/components/ontario-page-alert/ontario-page-alert.interface.ts::PageAlertType',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-page-alert type="error">\n</ontario-page-alert>',
+						},
+					],
+					text: 'The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\nThere are four possible values for page alert: `informational`, `warning`, `success` or `error`.',
+				},
+				attribute: 'type',
+				reflect: false,
+				defaultValue: "'informational'",
+			},
+			heading: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-page-alert heading="Licence plates">\n</ontario-page-alert>',
+						},
+					],
+					text: 'The heading for the page alert.',
+				},
+				attribute: 'heading',
+				reflect: false,
+			},
+			content: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-page-alert content="Please look out for an email confirmation with your receipt and order number.">\n</ontario-page-alert>\n\nor\n\n<ontario-page-alert>\n <p>This is a sample page alert component using slots. <a href="#">Learn more</a>.</p>\n</ontario-page-alert>',
+						},
+					],
+					text: 'The main content for the page alert. This can be rendered as either string or HTML content.',
+				},
+				attribute: 'content',
+				reflect: false,
+			},
+		};
+	}
+}
+//# sourceMappingURL=ontario-page-alert.js.map

package/dist/collection/components/ontario-page-alert/ontario-page-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-page-alert.js","sourceRoot":"","sources":["../../../src/components/ontario-page-alert/ontario-page-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,gBAAgB;;oBAUE,eAAe;;;;IA0B7C;;OAEG;IACK,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;IACpD,CAAC;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,eAAe;gBACnB,OAAO,sDAAoC,SAAS,EAAI,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,gDAA8B,SAAS,EAAI,CAAC;QACrD,CAAC;IACF,CAAC;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,aAAI,IAAI,CAAK,CAAC;QACtB,CAAC;QAED,OAAO,eAAQ,CAAC;IACjB,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC1B,4DAAK,KAAK,EAAC,uBAAuB;gBACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO;gBACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/**\n\t * The heading for the page alert.\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() heading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-page-alert/test/ontario-page-alert.e2e.js

@@ -0,0 +1,52 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-page-alert', () => {
+	it('renders default informational page alert', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-page-alert heading="This is informational page alert"></ontario-page-alert>');
+		const component = await page.find('ontario-page-alert');
+		const element = await page.find('ontario-page-alert >>> div');
+		const iconElement = await page.find('ontario-page-alert >>> ontario-icon-alert-information');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-alert', 'ontario-alert--informational']);
+		expect(iconElement).not.toBeNull();
+		expect(element.textContent).toEqual('This is informational page alert');
+	});
+	it('renders error page alert', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-page-alert type="error" heading="This is error page alert"></ontario-page-alert>');
+		const component = await page.find('ontario-page-alert');
+		const element = await page.find('ontario-page-alert >>> div');
+		const iconElement = await page.find('ontario-page-alert >>> ontario-icon-alert-error');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-alert', 'ontario-alert--error']);
+		expect(iconElement).not.toBeNull();
+		expect(element.textContent).toEqual('This is error page alert');
+	});
+	it('renders warning page alert', async () => {
+		const page = await newE2EPage();
+		await page.setContent(
+			'<ontario-page-alert type="warning" heading="This is warning page alert"></ontario-page-alert>',
+		);
+		const component = await page.find('ontario-page-alert');
+		const element = await page.find('ontario-page-alert >>> div');
+		const iconElement = await page.find('ontario-page-alert >>> ontario-icon-alert-warning');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-alert', 'ontario-alert--warning']);
+		expect(iconElement).not.toBeNull();
+		expect(element.textContent).toEqual('This is warning page alert');
+	});
+	it('renders success page alert', async () => {
+		const page = await newE2EPage();
+		await page.setContent(
+			'<ontario-page-alert type="success" heading="This is success page alert"></ontario-page-alert>',
+		);
+		const component = await page.find('ontario-page-alert');
+		const element = await page.find('ontario-page-alert >>> div');
+		const iconElement = await page.find('ontario-page-alert >>> ontario-icon-alert-success');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-alert', 'ontario-alert--success']);
+		expect(iconElement).not.toBeNull();
+		expect(element.textContent).toEqual('This is success page alert');
+	});
+});
+//# sourceMappingURL=ontario-page-alert.e2e.js.map