@ongov/ontario-design-system-component-library 5.0.0-alpha.4 → 5.0.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ontario-accordion_44.cjs.entry.js +36 -6
- package/dist/cjs/ontario-accordion_44.cjs.entry.js.map +1 -1
- package/dist/collection/components/ontario-card/ontario-card.css +8 -3
- package/dist/collection/components/ontario-card-collection/ontario-card-collection.css +8 -20
- package/dist/collection/components/ontario-footer/components/simple-footer.js +21 -1
- package/dist/collection/components/ontario-footer/components/simple-footer.js.map +1 -1
- package/dist/collection/components/ontario-footer/ontario-footer-interface.js.map +1 -1
- package/dist/collection/components/ontario-footer/ontario-footer.js +10 -4
- package/dist/collection/components/ontario-footer/ontario-footer.js.map +1 -1
- package/dist/collection/i18n/global.i18n.json +10 -0
- package/dist/components/global.i18n.js +11 -0
- package/dist/components/global.i18n.js.map +1 -1
- package/dist/components/ontario-card-collection.js +1 -1
- package/dist/components/ontario-card-collection.js.map +1 -1
- package/dist/components/ontario-card.js +1 -1
- package/dist/components/ontario-card.js.map +1 -1
- package/dist/components/ontario-footer.js +23 -4
- package/dist/components/ontario-footer.js.map +1 -1
- package/dist/esm/ontario-accordion_44.entry.js +36 -6
- package/dist/esm/ontario-accordion_44.entry.js.map +1 -1
- package/dist/ontario-design-system-components/i18n/global.i18n.json +10 -0
- package/dist/ontario-design-system-components/ontario-design-system-components.esm.js +1 -1
- package/dist/ontario-design-system-components/{p-ac4e76b2.entry.js → p-150ea034.entry.js} +583 -557
- package/dist/ontario-design-system-components/p-150ea034.entry.js.map +1 -0
- package/dist/types/components/ontario-footer/ontario-footer-interface.d.ts +10 -8
- package/dist/types/components/ontario-footer/ontario-footer.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/package.json +2 -2
- package/src/components/ontario-card/ontario-card.scss +8 -3
- package/src/components/ontario-card-collection/ontario-card-collection.scss +8 -24
- package/src/components/ontario-footer/components/simple-footer.tsx +8 -0
- package/src/components/ontario-footer/ontario-footer-interface.tsx +10 -8
- package/src/components/ontario-footer/ontario-footer.tsx +10 -3
- package/src/components/ontario-footer/readme.md +12 -7
- package/src/components.d.ts +2 -2
- package/src/index.html +6 -2
- package/src/translations/global.i18n.json +10 -0
- package/www/build/ontario-design-system-components.esm.js +1 -1
- package/www/build/{p-ac4e76b2.entry.js → p-150ea034.entry.js} +583 -557
- package/www/build/p-150ea034.entry.js.map +1 -0
- package/www/build/{p-c9a9b857.js → p-4140c6bb.js} +1 -1
- package/www/i18n/global.i18n.json +10 -0
- package/www/index.html +8 -4
- package/dist/ontario-design-system-components/p-ac4e76b2.entry.js.map +0 -1
- package/www/build/p-ac4e76b2.entry.js.map +0 -1
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
.ontario-card {
|
|
77
77
|
box-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);
|
|
78
78
|
border-radius: 4px;
|
|
79
|
-
margin:
|
|
79
|
+
margin-bottom: 2.5rem;
|
|
80
80
|
padding: 0;
|
|
81
81
|
/*
|
|
82
82
|
* Required for cards to stay the same height regardless of content size.
|
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
transition: all 0.3s ease-in-out;
|
|
88
88
|
position: relative;
|
|
89
89
|
cursor: pointer;
|
|
90
|
+
background: #ffffff;
|
|
90
91
|
}
|
|
91
92
|
.ontario-card:hover {
|
|
92
93
|
box-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);
|
|
@@ -162,7 +163,11 @@
|
|
|
162
163
|
.ontario-card--image-true .ontario-card__heading {
|
|
163
164
|
border-radius: 0;
|
|
164
165
|
}
|
|
165
|
-
.ontario-
|
|
166
|
+
.ontario-card__image-right .ontario-card--image-true .ontario-card__heading {
|
|
167
|
+
border-radius: 4px 0 0 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.ontario-card__image-left .ontario-card--image-true .ontario-card__heading {
|
|
166
171
|
border-radius: 0 4px 0 0;
|
|
167
172
|
}
|
|
168
173
|
|
|
@@ -434,7 +439,7 @@
|
|
|
434
439
|
}
|
|
435
440
|
|
|
436
441
|
.ontario-card__card-type--horizontal .ontario-card__text-container {
|
|
437
|
-
width: 66.
|
|
442
|
+
width: 66.6666666667%;
|
|
438
443
|
}
|
|
439
444
|
.ontario-card__image-size-one-fourth .ontario-card__text-container {
|
|
440
445
|
width: 75%;
|
|
@@ -5,51 +5,39 @@
|
|
|
5
5
|
.ontario-card-collection__container {
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-wrap: wrap;
|
|
8
|
-
|
|
8
|
+
gap: 2rem;
|
|
9
9
|
margin: 0;
|
|
10
10
|
padding: 0;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
|
|
14
|
-
width: calc(25% -
|
|
15
|
-
}
|
|
16
|
-
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n) {
|
|
17
|
-
margin-right: 0;
|
|
14
|
+
width: calc(25% - 1.5rem);
|
|
18
15
|
}
|
|
19
16
|
@media screen and (max-width: 73em) {
|
|
20
17
|
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
|
|
21
|
-
width: calc(50% -
|
|
22
|
-
}
|
|
23
|
-
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n) {
|
|
24
|
-
margin-right: 0;
|
|
18
|
+
width: calc(50% - 1rem);
|
|
25
19
|
}
|
|
26
20
|
}
|
|
27
21
|
@media screen and (max-width: 40em) {
|
|
28
22
|
.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
|
|
29
|
-
width:
|
|
23
|
+
width: 100%;
|
|
30
24
|
}
|
|
31
25
|
}
|
|
32
26
|
|
|
33
27
|
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
|
|
34
|
-
width: calc(33.3% - 1.
|
|
35
|
-
}
|
|
36
|
-
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n) {
|
|
37
|
-
margin-right: 0;
|
|
28
|
+
width: calc(33.3% - 1.33rem);
|
|
38
29
|
}
|
|
39
30
|
@media screen and (max-width: 40em) {
|
|
40
31
|
.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
|
|
41
|
-
width:
|
|
32
|
+
width: 100%;
|
|
42
33
|
}
|
|
43
34
|
}
|
|
44
35
|
|
|
45
36
|
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
|
|
46
|
-
width: calc(50% -
|
|
47
|
-
}
|
|
48
|
-
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n) {
|
|
49
|
-
margin-right: 0;
|
|
37
|
+
width: calc(50% - 1rem);
|
|
50
38
|
}
|
|
51
39
|
@media screen and (max-width: 40em) {
|
|
52
40
|
.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
|
|
53
|
-
width:
|
|
41
|
+
width: 100%;
|
|
54
42
|
}
|
|
55
43
|
}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
const enDash = '\u2013';
|
|
3
|
-
export const SimpleFooter = ({
|
|
3
|
+
export const SimpleFooter = ({
|
|
4
|
+
accessibilityLink,
|
|
5
|
+
privacyLink,
|
|
6
|
+
contactLink,
|
|
7
|
+
printerLink,
|
|
8
|
+
className,
|
|
9
|
+
termsOfUseLink,
|
|
10
|
+
}) => {
|
|
4
11
|
return h(
|
|
5
12
|
'div',
|
|
6
13
|
{ class: `ontario-row ${className !== null && className !== void 0 ? className : ''}` },
|
|
@@ -25,6 +32,19 @@ export const SimpleFooter = ({ accessibilityLink, privacyLink, contactLink, prin
|
|
|
25
32
|
contactLink === null || contactLink === void 0 ? void 0 : contactLink.text,
|
|
26
33
|
),
|
|
27
34
|
),
|
|
35
|
+
termsOfUseLink &&
|
|
36
|
+
h(
|
|
37
|
+
'li',
|
|
38
|
+
null,
|
|
39
|
+
h(
|
|
40
|
+
'a',
|
|
41
|
+
{
|
|
42
|
+
class: 'ontario-footer__link',
|
|
43
|
+
href: termsOfUseLink === null || termsOfUseLink === void 0 ? void 0 : termsOfUseLink.href,
|
|
44
|
+
},
|
|
45
|
+
termsOfUseLink === null || termsOfUseLink === void 0 ? void 0 : termsOfUseLink.text,
|
|
46
|
+
),
|
|
47
|
+
),
|
|
28
48
|
),
|
|
29
49
|
h(
|
|
30
50
|
'div',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-footer.js","sourceRoot":"","sources":["../../../../src/components/ontario-footer/components/simple-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,GAAG,QAAQ,CAAC;AAMxB,MAAM,CAAC,MAAM,YAAY,GAA2C,CAAC,EACpE,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,
|
|
1
|
+
{"version":3,"file":"simple-footer.js","sourceRoot":"","sources":["../../../../src/components/ontario-footer/components/simple-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,GAAG,QAAQ,CAAC;AAMxB,MAAM,CAAC,MAAM,YAAY,GAA2C,CAAC,EACpE,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,EACT,cAAc,GACd,EAAE,EAAE;IACJ,OAAO,CACN,WAAK,KAAK,EAAE,eAAe,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EAAE;QAC3C,WAAK,KAAK,EAAC,kCAAkC;YAC5C,UAAI,KAAK,EAAC,yEAAyE;gBAClF;oBACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,IAC1D,iBAAiB,CAAC,IAAI,CACpB,CACA;gBACL;oBACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,WAAW,CAAC,IAAI,IACpD,WAAW,CAAC,IAAI,CACd,CACA;gBACJ,WAAW,IAAI,CACf;oBACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,IACrD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CACf,CACA,CACL;gBACA,cAAc,IAAI,CAClB;oBACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,IACxD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAClB,CACA,CACL,CACG;YACL,WAAK,KAAK,EAAC,2BAA2B;gBACrC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI;+BAC9C,WAAW,aAAX,WAAW;oBAAX,WAAW,CAAE,IAAI;oBAAE,GAAG;oBAC9B,YAAM,KAAK,EAAC,cAAc;;wBACpB,MAAM;wBACV,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrC,CACJ,CACC,CACD,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { SimpleFooterLinks } from '../ontario-footer-interface';\n\nconst enDash = '\\u2013';\n\ntype SimpleFooterProps = SimpleFooterLinks & {\n\tclassName?: string;\n};\n\nexport const SimpleFooter: FunctionalComponent<SimpleFooterProps> = ({\n\taccessibilityLink,\n\tprivacyLink,\n\tcontactLink,\n\tprinterLink,\n\tclassName,\n\ttermsOfUseLink,\n}) => {\n\treturn (\n\t\t<div class={`ontario-row ${className ?? ''}`}>\n\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t<ul class=\"ontario-footer__links-container ontario-footer__links-container--inline\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={accessibilityLink.href}>\n\t\t\t\t\t\t\t{accessibilityLink.text}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={privacyLink.href}>\n\t\t\t\t\t\t\t{privacyLink.text}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t{contactLink && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={contactLink?.href}>\n\t\t\t\t\t\t\t\t{contactLink?.text}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{termsOfUseLink && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={termsOfUseLink?.href}>\n\t\t\t\t\t\t\t\t{termsOfUseLink?.text}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</ul>\n\t\t\t\t<div class=\"ontario-footer__copyright\">\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={printerLink?.href}>\n\t\t\t\t\t\t© {printerLink?.text}{' '}\n\t\t\t\t\t\t<span class=\"ontario-nbsp\">\n\t\t\t\t\t\t\t2012{enDash}\n\t\t\t\t\t\t\t{String(new Date().getFullYear()).slice(-2)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ontario-footer-interface.js","sourceRoot":"","sources":["../../../src/components/ontario-footer/ontario-footer-interface.tsx"],"names":[],"mappings":"","sourcesContent":["export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';\n\nexport interface FooterLink {\n\ttext
|
|
1
|
+
{"version":3,"file":"ontario-footer-interface.js","sourceRoot":"","sources":["../../../src/components/ontario-footer/ontario-footer-interface.tsx"],"names":[],"mappings":"","sourcesContent":["export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';\n\nexport interface FooterLink {\n\ttext: string;\n\thref: string;\n}\n\n// External interface to be passed to the Footer component\nexport interface FooterLinks {\n\taccessibilityLink?: FooterLink;\n\tprivacyLink?: FooterLink;\n\tcontactLink?: FooterLink;\n\tprinterLink?: FooterLink;\n\ttermsOfUseLink?: FooterLink;\n}\n\n// Internal interface for SimpleFooter Component\nexport interface SimpleFooterLinks {\n\taccessibilityLink: FooterLink;\n\tprivacyLink: FooterLink;\n\tprinterLink: FooterLink;\n\tcontactLink?: FooterLink;\n\ttermsOfUseLink?: FooterLink;\n}\n\nexport type FooterContentType = 'text' | 'list' | 'html';\n\nexport type HeadingLevelType = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface FooterColumnContent {\n\theading?: string;\n\theadingLevel?: HeadingLevelType;\n\ttype: FooterContentType;\n\ttext?: string;\n\thtml?: string | HTMLElement;\n\tlist?: string[];\n}\n\nexport interface FooterColumnData {\n\ttitle: string;\n\theadingLevel?: HeadingLevelType;\n\tcontent: Array<FooterColumnContent>;\n\tbutton?: {\n\t\ttext: string;\n\t\tlink: string;\n\t};\n}\nexport interface TwoColumnOptions {\n\tcolumn1: FooterColumnData;\n\tcolumn2: FooterColumnData;\n}\n\nexport interface ThreeColumnOptions extends TwoColumnOptions {\n\tcolumn3: FooterColumnData;\n}\n"]}
|
|
@@ -129,9 +129,9 @@ export class OntarioFooter {
|
|
|
129
129
|
return classes;
|
|
130
130
|
}
|
|
131
131
|
getFooterLinks() {
|
|
132
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
132
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
133
133
|
const { language, translations, footerLinksState } = this;
|
|
134
|
-
const { accessibilityLink, privacyLink, contactLink, printerLink } =
|
|
134
|
+
const { accessibilityLink, privacyLink, contactLink, termsOfUseLink, printerLink } =
|
|
135
135
|
footerLinksState !== null && footerLinksState !== void 0 ? footerLinksState : {};
|
|
136
136
|
const links = {
|
|
137
137
|
accessibilityLink: {
|
|
@@ -168,11 +168,17 @@ export class OntarioFooter {
|
|
|
168
168
|
},
|
|
169
169
|
};
|
|
170
170
|
if (contactLink) {
|
|
171
|
-
links
|
|
171
|
+
links.contactLink = {
|
|
172
172
|
href: contactLink.href,
|
|
173
173
|
text: (_g = contactLink.text) !== null && _g !== void 0 ? _g : translations.contactUs[language],
|
|
174
174
|
};
|
|
175
175
|
}
|
|
176
|
+
if (termsOfUseLink) {
|
|
177
|
+
links.termsOfUseLink = {
|
|
178
|
+
href: termsOfUseLink.href,
|
|
179
|
+
text: (_h = termsOfUseLink.text) !== null && _h !== void 0 ? _h : translations.termsOfUse[language],
|
|
180
|
+
};
|
|
181
|
+
}
|
|
176
182
|
return links;
|
|
177
183
|
}
|
|
178
184
|
componentWillLoad() {
|
|
@@ -294,7 +300,7 @@ export class OntarioFooter {
|
|
|
294
300
|
optional: false,
|
|
295
301
|
docs: {
|
|
296
302
|
tags: [],
|
|
297
|
-
text: "A prop that stores the required links for all footers.\nAvailable options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'",
|
|
303
|
+
text: "A prop that stores the required links for all footers.\nAvailable options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'",
|
|
298
304
|
},
|
|
299
305
|
attribute: 'footer-links',
|
|
300
306
|
reflect: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ontario-footer.js","sourceRoot":"","sources":["../../../src/components/ontario-footer/ontario-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AASvF,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAA0B,YAAY,EAAE,MAAM,cAAc,CAAC;AACzG,OAAO,EAAE,yBAAyB,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAEjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAC;AAE/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAQ/D,MAAM,OAAO,aAAa;;QA6FjB,sBAAiB,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;QAC7D,wBAAmB,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC;QACjE,qBAAgB,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;;oBArF/D,SAAS;;;;;yBA4Bd,IAAI;;4BAOJ,YAAY;;;;;;IAUzC;;;OAGG;IAEH,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAGO,kBAAkB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAGO,kBAAkB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAGO,uBAAuB;QAC9B,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClE,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC/B,CAAC;IAGO,yBAAyB;QAChC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACtE,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,yBAAyB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YAChF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,oBAAoB,CAAC;iBACtC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,oBAAoB,CAAC;iBACtC,cAAc,CAAC,+EAA+E,CAAC;iBAC/F,YAAY,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAEO,wBAAwB;QAC/B,IAAI,IAAI,CAAC,mBAAmB,EAAE,IAAI,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACtF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,oBAAoB,CAAC;iBACtC,cAAc,CAAC,+EAA+E,CAAC;iBAC/F,YAAY,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAEO,YAAY,CAAC,UAAe;QACnC,MAAM,OAAO,GAAG,UAAU,CAAC;QAC3B,MAAM,QAAQ,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC;QAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,IAAI,CAAC;YACJ,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;gBAClC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YAClE,CAAC;iBAAM,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YAClE,CAAC;iBAAM,IAAI,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC9C,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YAChE,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YAClE,CAAC;QACF,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YAChB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,cAAc,CAAC,6BAA6B,CAAC;iBAC7C,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CAAC,MAAM,CAAC;iBACtB,gBAAgB,CAAC,gBAAgB,CAAC;iBAClC,cAAc,CAAC,aAAa,CAAC;iBAC7B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC;iBAC7B,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED;;;;OAIG;IACK,oBAAoB,CAAC,SAAiB;QAC7C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,SAAS,EAAE,CAAC;IAC7F,CAAC;IAED;;;OAGG;IACK,sBAAsB;QAC7B,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE;YACnD,CAAC,CAAC,uCAAuC;YACzC,CAAC,CAAC,sCAAsC,CAAC;QAE1C,OAAO,OAAO,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,GAAG,CAAC;IAClE,CAAC;IAEO,gBAAgB;QACvB,IAAI,OAAO,GAAG,wCAAwC,CAAC;QAEvD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACrB,OAAO,GAAG,GAAG,OAAO,0BAA0B,CAAC;QAChD,CAAC;QAED,OAAO,OAAO,CAAC;IAChB,CAAC;IAEO,cAAc;;QACrB,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,EAAE,CAAC;QAE5F,MAAM,KAAK,GAAsB;YAChC,iBAAiB,EAAE;gBAClB,IAAI,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,mCAAI,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC9E,IAAI,EAAE,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,mCAAI,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC9E;YACD,WAAW,EAAE;gBACZ,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAClE,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;aAClE;YACD,WAAW,EAAE;gBACZ,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAClE,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;aAClE;SACD,CAAC;QAEF,IAAI,WAAW,EAAE,CAAC;YACjB,KAAK,CAAC,aAAa,CAAC,GAAG;gBACtB,IAAI,EAAE,WAAW,CAAC,IAAI;gBACtB,IAAI,EAAE,MAAA,WAAW,CAAC,IAAI,mCAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC;aAC1D,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACd,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAEjC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACL,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC/E,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC9B,OAAO,CACN,EAAC,qBAAqB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,IAAI,CAAC,sBAAsB,EAAE;gBAElD,EAAC,YAAY,IAAC,IAAI,EAAE,cAAc,CAAC,OAAO,GAAI;gBAC9C,EAAC,YAAY,IAAC,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,gBAAgB,GAAI,CACtD,CACxB,CAAC;QACH,CAAC;QAED,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;YAChC,OAAO,CACN,EAAC,qBAAqB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,IAAI,CAAC,sBAAsB,EAAE;gBAElD,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,QAAC,yBAAyB,SAAG;gBAC3F,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,SAAG;gBACjE,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,SAAG,CACzE,CACxB,CAAC;QACH,CAAC;QAED,OAAO,CACN,cAAQ,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE;YAC9F,EAAC,YAAY,oBAAK,WAAW,EAAI,CACzB,CACT,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, State, Watch, Listen, getAssetPath } from '@stencil/core';\n\nimport {\n\tFooterLinks,\n\tOntarioFooterType,\n\tThreeColumnOptions,\n\tTwoColumnOptions,\n\tSimpleFooterLinks,\n} from './ontario-footer-interface';\nimport { ExpandedFooterWrapper, FooterColumn, FooterSocialLinksProps, SimpleFooter } from './components';\nimport { isInvalidTwoColumnOptions, isInvalidThreeColumnOptions } from './utils';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-footer',\n\tstyleUrl: 'ontario-footer.scss',\n\tshadow: true,\n\tassetsDirs: ['assets'],\n})\nexport class OntarioFooter {\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language: Language;\n\n\t/**\n\t * The type of footer to be rendered. If no prop is provided, it will default to the 'default' type.\n\t */\n\t@Prop() type: OntarioFooterType = 'default';\n\n\t/**\n\t * A prop that stores the required links for all footers.\n\t * Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'\n\t */\n\t@Prop() footerLinks: FooterLinks | string;\n\n\t/**\n\t * Social media links to render in the footer.\n\t * Available options are 'facebook', 'twitter', 'instagram' and 'youtube'\n\t */\n\t@Prop() socialLinks: FooterSocialLinksProps | string;\n\n\t/**\n\t * Stores the titles and content for the expanded two column footer.\n\t */\n\t@Prop() twoColumnOptions?: TwoColumnOptions | string;\n\n\t/**\n\t * Stores the titles and content for the expanded three column footer.\n\t */\n\t@Prop() threeColumnOptions?: ThreeColumnOptions | string;\n\n\t/**\n\t * Top margin for the footer. By default, this prop is set to `true`, which adds a margin top value of `5rem`.\n\t * If set to `false`, the top margin value will be set to zero.\n\t */\n\t@Prop() topMargin: boolean = true;\n\n\t/**\n\t * The base path to an assets folder containing the Design System assets\n\t */\n\t@Prop() assetBasePath: string;\n\n\t@State() translations: any = translations;\n\n\t@State() private footerLinksState: FooterLinks;\n\n\t@State() private socialLinksState: FooterSocialLinksProps;\n\n\t@State() private twoColumnState: TwoColumnOptions;\n\n\t@State() private threeColumnState: ThreeColumnOptions;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is\n\t * connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@Watch('footerLinks')\n\tprivate processFooterLinks() {\n\t\tthis.parseOptions(this.footerLinks);\n\t}\n\n\t@Watch('socialLinks')\n\tprivate processSocialLinks() {\n\t\tthis.parseOptions(this.socialLinks);\n\t}\n\n\t@Watch('twoColumnOptions')\n\tprivate processTwoColumnOptions() {\n\t\tthis.twoColumnOptions && this.parseOptions(this.twoColumnOptions);\n\t\tthis.verifyTwoColumnOptions();\n\t}\n\n\t@Watch('threeColumnOptions')\n\tprivate processThreeColumnOptions() {\n\t\tthis.threeColumnOptions && this.parseOptions(this.threeColumnOptions);\n\t\tthis.verifyThreeColumnOptions();\n\t}\n\n\tprivate isTwoColumnLayout = (): boolean => this.type === 'twoColumn';\n\tprivate isThreeColumnLayout = (): boolean => this.type === 'threeColumn';\n\tprivate isExpandedLayout = (): boolean => this.isTwoColumnLayout() || this.isThreeColumnLayout();\n\n\tprivate verifyTwoColumnOptions() {\n\t\tif (this.isTwoColumnLayout() && isInvalidTwoColumnOptions(this.twoColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' twoColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate verifyThreeColumnOptions() {\n\t\tif (this.isThreeColumnLayout() && isInvalidThreeColumnOptions(this.threeColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' threeColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate parseOptions(optionType: any) {\n\t\tconst options = optionType;\n\t\tconst isString = typeof options === 'string';\n\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.footerLinks) {\n\t\t\t\tthis.footerLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.socialLinks) {\n\t\t\t\tthis.socialLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.twoColumnOptions) {\n\t\t\t\tthis.twoColumnState = isString ? JSON.parse(options) : options;\n\t\t\t} else {\n\t\t\t\tthis.threeColumnState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-footer>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\t/**\n\t * Generate a link to the given image based on the base asset path.\n\t * @param imageName Name of the image to build the path to\n\t * @returns Path to image with asset path\n\t */\n\tprivate getImageAssetSrcPath(imageName: string): string {\n\t\treturn `${this.assetBasePath ? this.assetBasePath : getAssetPath('./assets')}/${imageName}`;\n\t}\n\n\t/**\n\t * Generate CSS url to the background image\n\t * @returns path to the background image\n\t */\n\tprivate getBackgroundImagePath(): string {\n\t\tconst supergraphicLogoFile = this.isExpandedLayout()\n\t\t\t? 'footer-expanded-supergraphic-logo.svg'\n\t\t\t: 'footer-default-supergraphic-logo.svg';\n\n\t\treturn `url(${this.getImageAssetSrcPath(supergraphicLogoFile)})`;\n\t}\n\n\tprivate getFooterClasses() {\n\t\tlet classes = 'ontario-footer ontario-footer--default';\n\n\t\tif (!this.topMargin) {\n\t\t\tclasses = `${classes} ontario-margin-top-0-!`;\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tprivate getFooterLinks(): SimpleFooterLinks {\n\t\tconst { language, translations, footerLinksState } = this;\n\t\tconst { accessibilityLink, privacyLink, contactLink, printerLink } = footerLinksState ?? {};\n\n\t\tconst links: SimpleFooterLinks = {\n\t\t\taccessibilityLink: {\n\t\t\t\thref: accessibilityLink?.href ?? translations.accessibilityLink.link[language],\n\t\t\t\ttext: accessibilityLink?.text ?? translations.accessibilityLink.text[language],\n\t\t\t},\n\t\t\tprivacyLink: {\n\t\t\t\thref: privacyLink?.href ?? translations.privacyLink.link[language],\n\t\t\t\ttext: privacyLink?.text ?? translations.privacyLink.text[language],\n\t\t\t},\n\t\t\tprinterLink: {\n\t\t\t\thref: printerLink?.href ?? translations.printerLink.link[language],\n\t\t\t\ttext: printerLink?.text ?? translations.printerLink.text[language],\n\t\t\t},\n\t\t};\n\n\t\tif (contactLink) {\n\t\t\tlinks['contactLink'] = {\n\t\t\t\thref: contactLink.href,\n\t\t\t\ttext: contactLink.text ?? translations.contactUs[language],\n\t\t\t};\n\t\t}\n\n\t\treturn links;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processFooterLinks();\n\t\tthis.processSocialLinks();\n\t\tthis.processTwoColumnOptions();\n\t\tthis.processThreeColumnOptions();\n\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst { socialLinksState, twoColumnState, threeColumnState, topMargin } = this;\n\t\tconst footerLinks = this.getFooterLinks();\n\n\t\tif (this.isTwoColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={twoColumnState.column1} />\n\t\t\t\t\t<FooterColumn data={twoColumnState.column2} socialLinks={socialLinksState} />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\tif (this.isThreeColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={threeColumnState.column1} isThreeColLayout isFullWidthInMediumLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column2} isThreeColLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column3} socialLinks={socialLinksState} isThreeColLayout />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<footer class={this.getFooterClasses()} style={{ '--imagePath': this.getBackgroundImagePath() }}>\n\t\t\t\t<SimpleFooter {...footerLinks} />\n\t\t\t</footer>\n\t\t);\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ontario-footer.js","sourceRoot":"","sources":["../../../src/components/ontario-footer/ontario-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Watch, Listen, getAssetPath } from '@stencil/core';\n\nimport {\n\tFooterLinks,\n\tOntarioFooterType,\n\tThreeColumnOptions,\n\tTwoColumnOptions,\n\tSimpleFooterLinks,\n} from './ontario-footer-interface';\nimport { ExpandedFooterWrapper, FooterColumn, FooterSocialLinksProps, SimpleFooter } from './components';\nimport { isInvalidTwoColumnOptions, isInvalidThreeColumnOptions } from './utils';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-footer',\n\tstyleUrl: 'ontario-footer.scss',\n\tshadow: true,\n\tassetsDirs: ['assets'],\n})\nexport class OntarioFooter {\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language: Language;\n\n\t/**\n\t * The type of footer to be rendered. If no prop is provided, it will default to the 'default' type.\n\t */\n\t@Prop() type: OntarioFooterType = 'default';\n\n\t/**\n\t * A prop that stores the required links for all footers.\n\t * Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'\n\t */\n\t@Prop() footerLinks: FooterLinks | string;\n\n\t/**\n\t * Social media links to render in the footer.\n\t * Available options are 'facebook', 'twitter', 'instagram' and 'youtube'\n\t */\n\t@Prop() socialLinks: FooterSocialLinksProps | string;\n\n\t/**\n\t * Stores the titles and content for the expanded two column footer.\n\t */\n\t@Prop() twoColumnOptions?: TwoColumnOptions | string;\n\n\t/**\n\t * Stores the titles and content for the expanded three column footer.\n\t */\n\t@Prop() threeColumnOptions?: ThreeColumnOptions | string;\n\n\t/**\n\t * Top margin for the footer. By default, this prop is set to `true`, which adds a margin top value of `5rem`.\n\t * If set to `false`, the top margin value will be set to zero.\n\t */\n\t@Prop() topMargin: boolean = true;\n\n\t/**\n\t * The base path to an assets folder containing the Design System assets\n\t */\n\t@Prop() assetBasePath: string;\n\n\t@State() translations: any = translations;\n\n\t@State() private footerLinksState: FooterLinks;\n\n\t@State() private socialLinksState: FooterSocialLinksProps;\n\n\t@State() private twoColumnState: TwoColumnOptions;\n\n\t@State() private threeColumnState: ThreeColumnOptions;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is\n\t * connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@Watch('footerLinks')\n\tprivate processFooterLinks() {\n\t\tthis.parseOptions(this.footerLinks);\n\t}\n\n\t@Watch('socialLinks')\n\tprivate processSocialLinks() {\n\t\tthis.parseOptions(this.socialLinks);\n\t}\n\n\t@Watch('twoColumnOptions')\n\tprivate processTwoColumnOptions() {\n\t\tthis.twoColumnOptions && this.parseOptions(this.twoColumnOptions);\n\t\tthis.verifyTwoColumnOptions();\n\t}\n\n\t@Watch('threeColumnOptions')\n\tprivate processThreeColumnOptions() {\n\t\tthis.threeColumnOptions && this.parseOptions(this.threeColumnOptions);\n\t\tthis.verifyThreeColumnOptions();\n\t}\n\n\tprivate isTwoColumnLayout = (): boolean => this.type === 'twoColumn';\n\tprivate isThreeColumnLayout = (): boolean => this.type === 'threeColumn';\n\tprivate isExpandedLayout = (): boolean => this.isTwoColumnLayout() || this.isThreeColumnLayout();\n\n\tprivate verifyTwoColumnOptions() {\n\t\tif (this.isTwoColumnLayout() && isInvalidTwoColumnOptions(this.twoColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' twoColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate verifyThreeColumnOptions() {\n\t\tif (this.isThreeColumnLayout() && isInvalidThreeColumnOptions(this.threeColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' threeColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate parseOptions(optionType: any) {\n\t\tconst options = optionType;\n\t\tconst isString = typeof options === 'string';\n\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.footerLinks) {\n\t\t\t\tthis.footerLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.socialLinks) {\n\t\t\t\tthis.socialLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.twoColumnOptions) {\n\t\t\t\tthis.twoColumnState = isString ? JSON.parse(options) : options;\n\t\t\t} else {\n\t\t\t\tthis.threeColumnState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-footer>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\t/**\n\t * Generate a link to the given image based on the base asset path.\n\t * @param imageName Name of the image to build the path to\n\t * @returns Path to image with asset path\n\t */\n\tprivate getImageAssetSrcPath(imageName: string): string {\n\t\treturn `${this.assetBasePath ? this.assetBasePath : getAssetPath('./assets')}/${imageName}`;\n\t}\n\n\t/**\n\t * Generate CSS url to the background image\n\t * @returns path to the background image\n\t */\n\tprivate getBackgroundImagePath(): string {\n\t\tconst supergraphicLogoFile = this.isExpandedLayout()\n\t\t\t? 'footer-expanded-supergraphic-logo.svg'\n\t\t\t: 'footer-default-supergraphic-logo.svg';\n\n\t\treturn `url(${this.getImageAssetSrcPath(supergraphicLogoFile)})`;\n\t}\n\n\tprivate getFooterClasses() {\n\t\tlet classes = 'ontario-footer ontario-footer--default';\n\n\t\tif (!this.topMargin) {\n\t\t\tclasses = `${classes} ontario-margin-top-0-!`;\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tprivate getFooterLinks(): SimpleFooterLinks {\n\t\tconst { language, translations, footerLinksState } = this;\n\t\tconst { accessibilityLink, privacyLink, contactLink, termsOfUseLink, printerLink } = footerLinksState ?? {};\n\n\t\tconst links: SimpleFooterLinks = {\n\t\t\taccessibilityLink: {\n\t\t\t\thref: accessibilityLink?.href ?? translations.accessibilityLink.link[language],\n\t\t\t\ttext: accessibilityLink?.text ?? translations.accessibilityLink.text[language],\n\t\t\t},\n\t\t\tprivacyLink: {\n\t\t\t\thref: privacyLink?.href ?? translations.privacyLink.link[language],\n\t\t\t\ttext: privacyLink?.text ?? translations.privacyLink.text[language],\n\t\t\t},\n\t\t\tprinterLink: {\n\t\t\t\thref: printerLink?.href ?? translations.printerLink.link[language],\n\t\t\t\ttext: printerLink?.text ?? translations.printerLink.text[language],\n\t\t\t},\n\t\t};\n\n\t\tif (contactLink) {\n\t\t\tlinks.contactLink = {\n\t\t\t\thref: contactLink.href,\n\t\t\t\ttext: contactLink.text ?? translations.contactUs[language],\n\t\t\t};\n\t\t}\n\n\t\tif (termsOfUseLink) {\n\t\t\tlinks.termsOfUseLink = {\n\t\t\t\thref: termsOfUseLink.href,\n\t\t\t\ttext: termsOfUseLink.text ?? translations.termsOfUse[language],\n\t\t\t};\n\t\t}\n\n\t\treturn links;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processFooterLinks();\n\t\tthis.processSocialLinks();\n\t\tthis.processTwoColumnOptions();\n\t\tthis.processThreeColumnOptions();\n\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst { socialLinksState, twoColumnState, threeColumnState, topMargin } = this;\n\t\tconst footerLinks = this.getFooterLinks();\n\n\t\tif (this.isTwoColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={twoColumnState.column1} />\n\t\t\t\t\t<FooterColumn data={twoColumnState.column2} socialLinks={socialLinksState} />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\tif (this.isThreeColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={threeColumnState.column1} isThreeColLayout isFullWidthInMediumLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column2} isThreeColLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column3} socialLinks={socialLinksState} isThreeColLayout />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<footer class={this.getFooterClasses()} style={{ '--imagePath': this.getBackgroundImagePath() }}>\n\t\t\t\t<SimpleFooter {...footerLinks} />\n\t\t\t</footer>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -23,6 +23,16 @@
|
|
|
23
23
|
"fr": "Accessibilité"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
|
+
"termsOfUse": {
|
|
27
|
+
"link": {
|
|
28
|
+
"en": "https://www.ontario.ca/page/terms-use",
|
|
29
|
+
"fr": "https://www.ontario.ca/fr/page/conditions-dutilisation"
|
|
30
|
+
},
|
|
31
|
+
"text": {
|
|
32
|
+
"en": "Terms of Use",
|
|
33
|
+
"fr": "Conditions d’utilisation"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
26
36
|
"accordion": {
|
|
27
37
|
"collapse": {
|
|
28
38
|
"en": "Collapse all",
|
|
@@ -22,6 +22,16 @@ const accessibilityLink = {
|
|
|
22
22
|
fr: 'Accessibilité',
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
|
+
const termsOfUse = {
|
|
26
|
+
link: {
|
|
27
|
+
en: 'https://www.ontario.ca/page/terms-use',
|
|
28
|
+
fr: 'https://www.ontario.ca/fr/page/conditions-dutilisation',
|
|
29
|
+
},
|
|
30
|
+
text: {
|
|
31
|
+
en: 'Terms of Use',
|
|
32
|
+
fr: 'Conditions d’utilisation',
|
|
33
|
+
},
|
|
34
|
+
};
|
|
25
35
|
const accordion = {
|
|
26
36
|
collapse: {
|
|
27
37
|
en: 'Collapse all',
|
|
@@ -239,6 +249,7 @@ const required = {
|
|
|
239
249
|
const translations = {
|
|
240
250
|
accessibility: accessibility,
|
|
241
251
|
accessibilityLink: accessibilityLink,
|
|
252
|
+
termsOfUse: termsOfUse,
|
|
242
253
|
accordion: accordion,
|
|
243
254
|
backToTop: backToTop,
|
|
244
255
|
contactUs: contactUs,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"global.i18n.js","mappings":"
|
|
1
|
+
{"file":"global.i18n.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
|
|
|
2
2
|
import { C as ConsoleMessageClass } from './console-message.js';
|
|
3
3
|
|
|
4
4
|
const ontarioCardCollectionCss =
|
|
5
|
-
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;
|
|
5
|
+
'.ontario-card-collection__container{display:flex;flex-wrap:wrap;gap:2rem;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 1.5rem)}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1rem)}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.33rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:100%}}';
|
|
6
6
|
const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
|
|
7
7
|
|
|
8
8
|
const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,
|
|
1
|
+
{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,6zBAA6zB,CAAC;AAC/1B,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: spacing.$spacing-6;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n ontario-card-collection__container\n ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -34,7 +34,7 @@ const HeaderColours = [
|
|
|
34
34
|
];
|
|
35
35
|
|
|
36
36
|
const ontarioCardCss =
|
|
37
|
-
'.ontario-card__heading{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}.ontario-card__heading{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){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:
|
|
37
|
+
'.ontario-card__heading{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}.ontario-card__heading{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){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin-bottom:2.5rem;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer;background:#FFFFFF}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal .ontario-card--image-true{margin-top:0}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF;max-width:none}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__image-right .ontario-card--image-true .ontario-card__heading{border-radius:4px 0 0 0}.ontario-card__image-left .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__background--light-accent{background-color:#f2f2f2}.ontario-card__heading--light-accent{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:#1a1a1a}.ontario-card__heading--dark-accent{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-gold{background-color:#F0E7CC}.ontario-card__heading--light-gold{background-color:#F0E7CC;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-yellow{background-color:#F8E5C3}.ontario-card__heading--light-yellow{background-color:#F8E5C3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-taupe{background-color:#EBE7DB}.ontario-card__heading--light-taupe{background-color:#EBE7DB;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-green{background-color:#D1EFD4}.ontario-card__heading--light-green{background-color:#D1EFD4;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-lime{background-color:#DDEDC7}.ontario-card__heading--light-lime{background-color:#DDEDC7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-teal{background-color:#CFEDED}.ontario-card__heading--light-teal{background-color:#CFEDED;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-sky{background-color:#C5EEFA}.ontario-card__heading--light-sky{background-color:#C5EEFA;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-purple{background-color:#F1E3F2}.ontario-card__heading--light-purple{background-color:#F1E3F2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-orange{background-color:#FEE1D9}.ontario-card__heading--light-orange{background-color:#FEE1D9;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-red{background-color:#FFE0E2}.ontario-card__heading--light-red{background-color:#FFE0E2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-magenta{background-color:#FEDFF0}.ontario-card__heading--light-magenta{background-color:#FEDFF0;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--gold{background-color:#CBA52E}.ontario-card__heading--gold{background-color:#CBA52E;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--yellow{background-color:#FCAF17}.ontario-card__heading--yellow{background-color:#FCAF17;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--taupe{background-color:#C1B28F}.ontario-card__heading--taupe{background-color:#C1B28F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--green{background-color:#39B54A}.ontario-card__heading--green{background-color:#39B54A;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--lime{background-color:#8DC63F}.ontario-card__heading--lime{background-color:#8DC63F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--teal{background-color:#49A7A2}.ontario-card__heading--teal{background-color:#49A7A2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--sky{background-color:#00B2E3}.ontario-card__heading--sky{background-color:#00B2E3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--purple{background-color:#B975B7}.ontario-card__heading--purple{background-color:#B975B7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--orange{background-color:#F15A22}.ontario-card__heading--orange{background-color:#F15A22;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--red{background-color:#F0454B}.ontario-card__heading--red{background-color:#F0454B;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--magenta{background-color:#F03093}.ontario-card__heading--magenta{background-color:#F03093;padding-top:1rem;padding-bottom:1rem}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6666666667%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
|
|
38
38
|
const OntarioCardStyle0 = ontarioCardCss;
|
|
39
39
|
|
|
40
40
|
const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__card-type--horizontal & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin-bottom: spacing.$spacing-7;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\tbackground: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: math.percentage(math.div(2, 3));\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -52,7 +52,7 @@ const FooterSocialLinks = ({ facebook, twitter, instagram, youtube }) => {
|
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
const enDash = '\u2013';
|
|
55
|
-
const SimpleFooter = ({ accessibilityLink, privacyLink, contactLink, printerLink, className }) => {
|
|
55
|
+
const SimpleFooter = ({ accessibilityLink, privacyLink, contactLink, printerLink, className, termsOfUseLink }) => {
|
|
56
56
|
return h(
|
|
57
57
|
'div',
|
|
58
58
|
{ class: `ontario-row ${className !== null && className !== void 0 ? className : ''}` },
|
|
@@ -77,6 +77,19 @@ const SimpleFooter = ({ accessibilityLink, privacyLink, contactLink, printerLink
|
|
|
77
77
|
contactLink === null || contactLink === void 0 ? void 0 : contactLink.text,
|
|
78
78
|
),
|
|
79
79
|
),
|
|
80
|
+
termsOfUseLink &&
|
|
81
|
+
h(
|
|
82
|
+
'li',
|
|
83
|
+
null,
|
|
84
|
+
h(
|
|
85
|
+
'a',
|
|
86
|
+
{
|
|
87
|
+
class: 'ontario-footer__link',
|
|
88
|
+
href: termsOfUseLink === null || termsOfUseLink === void 0 ? void 0 : termsOfUseLink.href,
|
|
89
|
+
},
|
|
90
|
+
termsOfUseLink === null || termsOfUseLink === void 0 ? void 0 : termsOfUseLink.text,
|
|
91
|
+
),
|
|
92
|
+
),
|
|
80
93
|
),
|
|
81
94
|
h(
|
|
82
95
|
'div',
|
|
@@ -301,9 +314,9 @@ const OntarioFooter$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
301
314
|
return classes;
|
|
302
315
|
}
|
|
303
316
|
getFooterLinks() {
|
|
304
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
317
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
305
318
|
const { language, translations, footerLinksState } = this;
|
|
306
|
-
const { accessibilityLink, privacyLink, contactLink, printerLink } =
|
|
319
|
+
const { accessibilityLink, privacyLink, contactLink, termsOfUseLink, printerLink } =
|
|
307
320
|
footerLinksState !== null && footerLinksState !== void 0 ? footerLinksState : {};
|
|
308
321
|
const links = {
|
|
309
322
|
accessibilityLink: {
|
|
@@ -340,11 +353,17 @@ const OntarioFooter$1 = /*@__PURE__*/ proxyCustomElement(
|
|
|
340
353
|
},
|
|
341
354
|
};
|
|
342
355
|
if (contactLink) {
|
|
343
|
-
links
|
|
356
|
+
links.contactLink = {
|
|
344
357
|
href: contactLink.href,
|
|
345
358
|
text: (_g = contactLink.text) !== null && _g !== void 0 ? _g : translations.contactUs[language],
|
|
346
359
|
};
|
|
347
360
|
}
|
|
361
|
+
if (termsOfUseLink) {
|
|
362
|
+
links.termsOfUseLink = {
|
|
363
|
+
href: termsOfUseLink.href,
|
|
364
|
+
text: (_h = termsOfUseLink.text) !== null && _h !== void 0 ? _h : translations.termsOfUse[language],
|
|
365
|
+
};
|
|
366
|
+
}
|
|
348
367
|
return links;
|
|
349
368
|
}
|
|
350
369
|
componentWillLoad() {
|