@ongov/ontario-design-system-component-library 4.2.0 → 4.3.0-alpha.2

package/dist/cjs/ontario-icon-youtube.cjs.entry.js

@@ -94,14 +94,14 @@ const OntarioIconYoutube = class {
 		return index.h(
 			'div',
 			{
-				key: 'd745e71e0de0acef20e24a129839c151ba3b1bbe',
+				key: '29fe33f05f26188c97d21729f1d2a959c86255df',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			index.h(
 				'svg',
 				{
-					key: 'bb375227821f18429e3c31005252b634e9d58bf6',
+					key: '42b7b9df17ce043ba91cdeac7e1f4583cfd1e3a6',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -110,7 +110,7 @@ const OntarioIconYoutube = class {
 					id: 'youtube',
 				},
 				index.h('path', {
-					key: '1491080c661d074c52f66896b7bda12d43e8d4de',
+					key: '1c0d0a5cedfce971dca6b7b8245b6d0846fd0523',
 					d: 'M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z',
 				}),
 			),

package/dist/collection/components/ontario-aside/ontario-aside.js

@@ -9,7 +9,7 @@ import { ConsoleMessageClass } from '../../utils/console-message/console-message
 export class OntarioAside {
 	constructor() {
 		this.headingType = undefined;
-		this.headingContentType = undefined;
+		this.headingContentType = 'string';
 		this.headingContent = undefined;
 		this.content = undefined;
 		this.highlightColour = 'teal';
@@ -20,15 +20,17 @@ export class OntarioAside {
 	 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
 	 */
 	validateHeadingType() {
-		if (isValidHeadingLevel(this.headingType)) return this.headingType;
-		const message = new ConsoleMessageClass();
-		return message
-			.addDesignSystemTag()
-			.addMonospaceText(` headingType ${this.headingType} `)
-			.addRegularText('for')
-			.addMonospaceText(' <ontario-aside> ')
-			.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
-			.printMessage();
+		if (!!this.headingType) {
+			if (isValidHeadingLevel(this.headingType)) return this.headingType;
+			const message = new ConsoleMessageClass();
+			return message
+				.addDesignSystemTag()
+				.addMonospaceText(` headingType ${this.headingType} `)
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-aside> ')
+				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+				.printMessage();
+		}
 	}
 	/**
 	 * Watch for changes in the `headingContentType` prop for validation purposes.
@@ -44,23 +46,6 @@ export class OntarioAside {
 			return this.warnDefaultType();
 		}
 	}
-	/**
-	 * Watch for changes in the `headingContent` prop for validation purposes.
-	 *
-	 * If no `headingContent` value is provided, a warning message will be printed.
-	 */
-	validateHeadingContent() {
-		if (!this.headingContent) {
-			const message = new ConsoleMessageClass();
-			message
-				.addDesignSystemTag()
-				.addMonospaceText(' headingContent ')
-				.addRegularText('for')
-				.addMonospaceText(' <ontario-aside> ')
-				.addRegularText('was not provided.')
-				.printMessage();
-		}
-	}
 	/**
 	 * Watch for changes to the `highlightColour` prop.
 	 *
@@ -106,15 +91,14 @@ export class OntarioAside {
 	}
 	componentWillLoad() {
 		this.validateHighlightColour();
-		this.validateHeadingContent();
 		this.validateHeadingType();
 		this.validateHeadingContentType();
 	}
 	render() {
 		return generateCalloutAside(
 			'aside',
-			this.headingType,
 			this.headingContentType,
+			this.headingType,
 			this.headingContent,
 			this.content,
 			this.highlightColour,
@@ -143,7 +127,7 @@ export class OntarioAside {
 				mutable: true,
 				complexType: {
 					original: 'HeadingLevelOptions',
-					resolved: '"h2" | "h3" | "h4" | "h5" | "h6"',
+					resolved: '"h2" | "h3" | "h4" | "h5" | "h6" | undefined',
 					references: {
 						HeadingLevelOptions: {
 							location: 'import',
@@ -153,7 +137,7 @@ export class OntarioAside {
 					},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
 					text: 'The heading level of the aside heading.',
@@ -183,17 +167,18 @@ export class OntarioAside {
 				},
 				attribute: 'heading-content-type',
 				reflect: false,
+				defaultValue: "'string'",
 			},
 			headingContent: {
 				type: 'string',
 				mutable: false,
 				complexType: {
 					original: 'string',
-					resolved: 'string',
+					resolved: 'string | undefined',
 					references: {},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
 					text: 'Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.',
@@ -259,10 +244,6 @@ export class OntarioAside {
 				propName: 'headingContentType',
 				methodName: 'validateHeadingContentType',
 			},
-			{
-				propName: 'headingContent',
-				methodName: 'validateHeadingContent',
-			},
 			{
 				propName: 'highlightColour',
 				methodName: 'validateHighlightColour',

package/dist/collection/components/ontario-aside/ontario-aside.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-aside.js","sourceRoot":"","sources":["../../../src/components/ontario-aside/ontario-aside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAIN,mBAAmB,GAEnB,MAAM,8DAA8D,CAAC;AACtE,OAAO,EACN,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,GACnB,MAAM,4DAA4D,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,YAAY;;;;;;+BA6B4C,MAAM;;IAE1E;;;;OAIG;IAEH,mBAAmB;QAClB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO,OAAO;aACZ,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;aACrD,cAAc,CAAC,KAAK,CAAC;aACrB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,4FAA4F,CAAC;aAC5G,YAAY,EAAE,CAAC;IAClB,CAAC;IAED;;;;;OAKG;IAEH,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,IAAI,CAAC,kBAAkB,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;QAC/B,CAAC;IACF,CAAC;IAED;;;;OAIG;IAEH,sBAAsB;QACrB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,mBAAmB,CAAC;iBACnC,YAAY,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAED;;;;OAIG;IAEH,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE,CAAC;gBACL,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;YAClB,CAAC;QACF,CAAC;QAED,kDAAkD;QAClD,OAAO,MAAM,CAAC;IACf,CAAC;IAED;;;OAGG;IACK,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,mBAAmB,CAAC;aACrC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,OAAO,CAAC,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,OAAO,EACP,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingContent();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-aside.js","sourceRoot":"","sources":["../../../src/components/ontario-aside/ontario-aside.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-aside/test/ontario-aside.spec.js

@@ -86,6 +86,41 @@ describe('ontario-aside', () => {
 			</ontario-aside>
 		`);
 	});
+	it('should render html in the heading content if the headingContentType prop is set to `html`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>" heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h2 class="ontario-aside__title ontario-h5">
+							<a href="#">Quick fact:</a>
+						</h2>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+	it('should not render the heading if headingContent prop is set to `undefined`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside>
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
 	it('should reflect attributes/props being set', async () => {
 		const page = await newSpecPage({
 			components: [OntarioAside],

package/dist/collection/components/ontario-aside/test/ontario-aside.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-aside.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-aside/test/ontario-aside.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;gBAC1B,IAAI,EAAE,uQAAuQ;aAC7Q,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,4PAA4P;SAClQ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,sPAAsP;SAC5P,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,sMAAsM;SAC5M,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2FAA2F,EAAE,KAAK,IAAI,EAAE;QAC1G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,kPAAkP;SACxP,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,kSAAkS;SACxS,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC7E,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CACrC,kIAAkI,CAClI,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioAside } from '../ontario-aside';\n\ndescribe('ontario-aside', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioAside],\n\t\t\t\thtml: `<ontario-aside heading-type=\"h3\" heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</ontario-aside>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the h2 heading level if no headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--gold\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render the expected heading level when a headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h5 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render a string heading if no headingContentType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Quick fact:</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h4\" heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" highlight-colour=\"purple\" content=\"As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.\"></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.rootInstance.headingType).toBe('h4');\n\t\texpect(page.rootInstance.headingContentType).toBe('html');\n\t\texpect(page.rootInstance.headingContent).toBe(\"<a href='#'>Quick fact:</a>\");\n\t\texpect(page.rootInstance.highlightColour).toBe('purple');\n\t\texpect(page.rootInstance.content).toBe(\n\t\t\t'As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.',\n\t\t);\n\t});\n});\n"]}
+{"version":3,"file":"ontario-aside.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-aside/test/ontario-aside.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioAside } from '../ontario-aside';\n\ndescribe('ontario-aside', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioAside],\n\t\t\t\thtml: `<ontario-aside heading-type=\"h3\" heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</ontario-aside>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the h2 heading level if no headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--gold\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render the expected heading level when a headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h5 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render a string heading if no headingContentType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Quick fact:</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Quick fact:</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should not render the heading if headingContent prop is set to `undefined`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h4\" heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" highlight-colour=\"purple\" content=\"As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.\"></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.rootInstance.headingType).toBe('h4');\n\t\texpect(page.rootInstance.headingContentType).toBe('html');\n\t\texpect(page.rootInstance.headingContent).toBe(\"<a href='#'>Quick fact:</a>\");\n\t\texpect(page.rootInstance.highlightColour).toBe('purple');\n\t\texpect(page.rootInstance.content).toBe(\n\t\t\t'As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.',\n\t\t);\n\t});\n});\n"]}

package/dist/collection/components/ontario-callout/ontario-callout.js

@@ -19,15 +19,17 @@ export class OntarioCallout {
 	 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
 	 */
 	validateHeadingType() {
-		if (isValidHeadingLevel(this.headingType)) return this.headingType;
-		const message = new ConsoleMessageClass();
-		return message
-			.addDesignSystemTag()
-			.addMonospaceText(` headingType ${this.headingType} `)
-			.addRegularText('for')
-			.addMonospaceText(' <ontario-callout> ')
-			.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
-			.printMessage();
+		if (!!this.headingType) {
+			if (isValidHeadingLevel(this.headingType)) return this.headingType;
+			const message = new ConsoleMessageClass();
+			return message
+				.addDesignSystemTag()
+				.addMonospaceText(` headingType ${this.headingType} `)
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-callout> ')
+				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+				.printMessage();
+		}
 	}
 	/**
 	 * Watch for changes in the `headingContentType` variable for validation purposes.
@@ -43,23 +45,6 @@ export class OntarioCallout {
 			return this.warnDefaultType();
 		}
 	}
-	/**
-	 * Watch for changes in the `headingContent` prop for validation purposes.
-	 *
-	 * If no `headingContent` value is provided, a warning message will be printed.
-	 */
-	validateHeadingContent() {
-		if (!this.headingContent) {
-			const message = new ConsoleMessageClass();
-			message
-				.addDesignSystemTag()
-				.addMonospaceText(' headingContent ')
-				.addRegularText('for')
-				.addMonospaceText(' <ontario-callout> ')
-				.addRegularText('was not provided.')
-				.printMessage();
-		}
-	}
 	/**
 	 * Watch for changes to the `highlightColour` prop.
 	 *
@@ -105,15 +90,14 @@ export class OntarioCallout {
 	}
 	componentWillLoad() {
 		this.validateHighlightColour();
-		this.validateHeadingContent();
 		this.validateHeadingType();
 		this.validateHeadingContentType();
 	}
 	render() {
 		return generateCalloutAside(
 			'callout',
-			this.headingType,
 			this.headingContentType,
+			this.headingType,
 			this.headingContent,
 			this.content,
 			this.highlightColour,
@@ -142,7 +126,7 @@ export class OntarioCallout {
 				mutable: true,
 				complexType: {
 					original: 'HeadingLevelOptions',
-					resolved: '"h2" | "h3" | "h4" | "h5" | "h6"',
+					resolved: '"h2" | "h3" | "h4" | "h5" | "h6" | undefined',
 					references: {
 						HeadingLevelOptions: {
 							location: 'import',
@@ -152,7 +136,7 @@ export class OntarioCallout {
 					},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
 					text: 'The heading level of the callout heading.',
@@ -189,11 +173,11 @@ export class OntarioCallout {
 				mutable: false,
 				complexType: {
 					original: 'string',
-					resolved: 'string',
+					resolved: 'string | undefined',
 					references: {},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
 					text: 'Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.',
@@ -259,10 +243,6 @@ export class OntarioCallout {
 				propName: 'headingContentType',
 				methodName: 'validateHeadingContentType',
 			},
-			{
-				propName: 'headingContent',
-				methodName: 'validateHeadingContent',
-			},
 			{
 				propName: 'highlightColour',
 				methodName: 'validateHighlightColour',

package/dist/collection/components/ontario-callout/ontario-callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-callout.js","sourceRoot":"","sources":["../../../src/components/ontario-callout/ontario-callout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingContent();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-callout.js","sourceRoot":"","sources":["../../../src/components/ontario-callout/ontario-callout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-callout/test/ontario-callout.spec.js

@@ -94,6 +94,24 @@ describe('ontario-callout', () => {
 			</ontario-callout>
 		`);
 	});
+	it('should not render the heading if headingContent prop is set to `undefined`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCallout],
+			html: `<ontario-callout ><p><a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-callout >
+				<mock:shadow-root>
+					<div class="ontario-callout ontario-border-highlight--teal">
+						<slot></slot>
+					</div>
+				</mock:shadow-root>
+				<p>
+					<a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.
+				</p>
+			</ontario-callout>
+		`);
+	});
 	it('should reflect attributes/props being set', async () => {
 		const page = await newSpecPage({
 			components: [OntarioCallout],

package/dist/collection/components/ontario-callout/test/ontario-callout.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-callout.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-callout/test/ontario-callout.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAChC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;gBAC5B,IAAI,EAAE,+PAA+P;aACrQ,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,6OAA6O;SACnP,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;GAc7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uOAAuO;SAC7O,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;GAc7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uLAAuL;SAC7L,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;GAc7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2FAA2F,EAAE,KAAK,IAAI,EAAE;QAC1G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,mOAAmO;SACzO,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;GAc7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,mQAAmQ;SACzQ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAC9E,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CACrC,8FAA8F,CAC9F,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioCallout } from '../ontario-callout';\n\ndescribe('ontario-callout', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioCallout],\n\t\t\t\thtml: `<ontario-callout heading-type=\"h3\" heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the h2 heading level if no headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--gold\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render the expected heading level when a headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Get notified\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h5 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render a string heading if no headingContentType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content=\"Get notified\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\" heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Get notified</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-type=\"h4\" heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\" highlight-colour=\"purple\" content=\"Sign up for email reminders and we'll notify you 60 and 30 days before your licence expires.\"></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.rootInstance.headingType).toBe('h4');\n\t\texpect(page.rootInstance.headingContentType).toBe('html');\n\t\texpect(page.rootInstance.headingContent).toBe(\"<a href='#'>Get notified</a>\");\n\t\texpect(page.rootInstance.highlightColour).toBe('purple');\n\t\texpect(page.rootInstance.content).toBe(\n\t\t\t\"Sign up for email reminders and we'll notify you 60 and 30 days before your licence expires.\",\n\t\t);\n\t});\n});\n"]}
+{"version":3,"file":"ontario-callout.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-callout/test/ontario-callout.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioCallout } from '../ontario-callout';\n\ndescribe('ontario-callout', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioCallout],\n\t\t\t\thtml: `<ontario-callout heading-type=\"h3\" heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the h2 heading level if no headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content-type=\"string\" heading-content=\"Get notified\" highlight-colour=\"gold\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--gold\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render the expected heading level when a headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Get notified\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h5 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render a string heading if no headingContentType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content=\"Get notified\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\tGet notified\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\"><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\" heading-content=\"Get notified\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-callout__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Get notified</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should not render the heading if headingContent prop is set to `undefined`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout ><p><a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-callout >\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-callout ontario-border-highlight--teal\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>\n\t\t\t\t\t<a href=\"#\">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.\n\t\t\t\t</p>\n\t\t\t</ontario-callout>\n\t\t`);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCallout],\n\t\t\thtml: `<ontario-callout heading-type=\"h4\" heading-content-type=\"html\" heading-content=\"<a href='#'>Get notified</a>\" highlight-colour=\"purple\" content=\"Sign up for email reminders and we'll notify you 60 and 30 days before your licence expires.\"></ontario-callout>`,\n\t\t});\n\n\t\texpect(page.rootInstance.headingType).toBe('h4');\n\t\texpect(page.rootInstance.headingContentType).toBe('html');\n\t\texpect(page.rootInstance.headingContent).toBe(\"<a href='#'>Get notified</a>\");\n\t\texpect(page.rootInstance.highlightColour).toBe('purple');\n\t\texpect(page.rootInstance.content).toBe(\n\t\t\t\"Sign up for email reminders and we'll notify you 60 and 30 days before your licence expires.\",\n\t\t);\n\t});\n});\n"]}

package/dist/collection/components/ontario-card/ontario-card.css

@@ -78,6 +78,11 @@
 	border-radius: 4px;
 	margin: 0 2.5rem 2.5rem 0;
 	padding: 0;
+	/* 
+   * Required for cards to stay the same height regardless of content size.
+   * Without subtracting the margin-bottom amount the cards will be too large.
+   */
+	height: calc(100% - 2.5rem);
 	list-style-type: none;
 	transition: all 0.3s ease-in-out;
 	position: relative;

package/dist/collection/components/ontario-card-collection/ontario-card-collection.css

@@ -5,6 +5,9 @@
 .ontario-card-collection__container {
 	display: flex;
 	flex-wrap: wrap;
+	justify-content: flex-start;
+	margin: 0;
+	padding: 0;
 }
 
 .ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
@@ -21,6 +24,11 @@
 		margin-right: 0;
 	}
 }
+@media screen and (max-width: 40em) {
+	.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
+		width: calc(100% - 0.5rem);
+	}
+}
 
 .ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
 	width: calc(33.3% - 1.75rem);
@@ -28,6 +36,11 @@
 .ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n) {
 	margin-right: 0;
 }
+@media screen and (max-width: 40em) {
+	.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
+		width: calc(100% - 0.5rem);
+	}
+}
 
 .ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
 	width: calc(50% - 1.25rem);
@@ -35,3 +48,8 @@
 .ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n) {
 	margin-right: 0;
 }
+@media screen and (max-width: 40em) {
+	.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
+		width: calc(100% - 0.5rem);
+	}
+}