@ongov/ontario-design-system-component-library 5.0.0-alpha.3 → 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/components/ontario-footer/test/ontario-footer.spec.js +4 -4
- package/dist/collection/components/ontario-footer/test/ontario-footer.spec.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/components/ontario-header.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/ontario-footer/test/ontario-footer.spec.tsx +4 -4
- package/src/components/ontario-header/ontario-header.scss +4 -4
- 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
|
@@ -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() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ontario-footer.js","mappings":";;;;;AAEA,MAAM,UAAU,GAAG,EAAE,CAAC;AASf,MAAM,iBAAiB,GAAgD,CAAC,EAC9E,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACP;IACA,QACC,UAAI,KAAK,EAAC,yEAAyE;QACjF,QAAQ,KACR;YACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,QAAQ,gBAAa,UAAU;gBACpE,6BAAuB,MAAM,EAAC,OAAO,gBAAa,UAAU,GAAI,CAC7D,CACA,CACL;QACA,OAAO,KACP;YACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,OAAO,gBAAa,SAAS;gBAClE,4BAAsB,MAAM,EAAC,OAAO,gBAAa,UAAU,GAAI,CAC5D,CACA,CACL;QACA,SAAS,KACT;YACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,SAAS,gBAAa,WAAW;gBACtE,8BAAwB,MAAM,EAAC,OAAO,gBAAa,UAAU,GAAI,CAC9D,CACA,CACL;QACA,OAAO,KACP;YACC,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,OAAO,gBAAa,SAAS;gBAClE,4BAAsB,MAAM,EAAC,OAAO,gBAAa,UAAU,GAAI,CAC5D,CACA,CACL,CACG,EACJ;AACH,CAAC;;AC9CD,MAAM,MAAM,GAAG,QAAQ,CAAC;AAMjB,MAAM,YAAY,GAA2C,CAAC,EACpE,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,WAAW,EACX,SAAS,GACT;IACA,QACC,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,KACX;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,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,EACL;AACH,CAAC;;AC3CM,MAAM,aAAa,GAAkD,CAAC,EAAE,OAAO,EAAE;IACvF,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IAE3F,QACC,EAAC,QAAQ;QACP,OAAO,IAAI,EAAC,OAAO,IAAC,KAAK,EAAC,YAAY,IAAE,OAAO,CAAW;QAC1D,IAAI,KAAK,MAAM,IAAI,aAAI,IAAI,CAAK;QAChC,IAAI,KAAK,MAAM,IAAI,WAAK,KAAK,EAAC,2BAA2B,EAAC,SAAS,EAAE,IAAc,GAAI;QACvF,IAAI,KAAK,MAAM,IAAI,CAAC,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAA,KACjC,cACE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAY,MACtB,UAAI,KAAK,EAAC,2BAA2B,EAAC,SAAS,EAAE,IAAI,GAAI,CACzD,CAAC,CACE,CACL,CACS,EACV;AACH,CAAC;;ACZM,MAAM,YAAY,GAA2C,CAAC,EACpE,IAAI,EACJ,WAAW,EACX,gBAAgB,GAAG,KAAK,EACxB,yBAAyB,GAAG,KAAK,GACjC;IACA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IACtE,MAAM,wBAAwB,GAAG,gBAAgB,GAAG,0DAA0D,GAAG,EAAE,CAAC;IACpH,MAAM,mBAAmB,GAAG,yBAAyB,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;IAEjG,QACC,WAAK,KAAK,EAAE,oCAAoC,mBAAmB,IAAI,wBAAwB,EAAE;QAChG,EAAC,OAAO,IAAC,KAAK,EAAC,YAAY,IAAE,KAAK,CAAW;QAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,EAAC,aAAa,IAAC,OAAO,EAAE,IAAI,GAAI,CAChC,CAAC;QACD,MAAM,KACN,SAAG,KAAK,EAAC,iEAAiE,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,IAC1F,MAAM,CAAC,IAAI,CACT,CACJ;QACA,WAAW,IAAI,EAAC,iBAAiB,oBAAK,WAAW,EAAI,CACjD,EACL;AACH,CAAC;;AC1BM,MAAM,qBAAqB,GAAoD,CAAC,KAAK,EAAE,QAAQ;IACrG,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,KAAK,GAAG,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,CAAC,SAAS,GAAG,wBAAwB,GAAG,EAAE,CAAC;IAE/D,QACC,cAAQ,KAAK,EAAE,2CAA2C,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK;QACpF,WAAK,KAAK,EAAC,sCAAsC;YAChD,WAAK,KAAK,EAAC,aAAa,IAAE,QAAQ,CAAO,CACpC;QACN,EAAC,YAAY,oBAAK,WAAW,IAAE,SAAS,EAAC,yCAAyC,IAAG,CAC7E,EACR;AACH,CAAC;;ACrBM,MAAM,yBAAyB,GAAG,CAAC,OAAyB;;IAClE,QACC,CAAC,OAAO;QACR,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAA;QACvB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA;QACzB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAA;QACvB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,EACxB;AACH,CAAC,CAAC;AAEK,MAAM,2BAA2B,GAAG,CAAC,OAA2B;;IACtE,QACC,CAAC,OAAO;QACR,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAA;QACvB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA;QACzB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAA;QACvB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA;QACzB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAA;QACvB,EAAC,MAAA,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,EACxB;AACH,CAAC;;ACtBD,MAAM,gBAAgB,GAAG,w5yCAAw5yC,CAAC;AACl7yC,4BAAe,gBAAgB;;MCuBlBA,eAAa;;;;;QA6FjB,sBAAiB,GAAG,MAAe,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;QAC7D,wBAAmB,GAAG,MAAe,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC;QACjE,qBAAgB,GAAG,MAAe,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;;oBArF/D,SAAS;;;;;yBA4Bd,IAAI;;4BAOJ,YAAY;;;;;;;;;;IAezC,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGO,kBAAkB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACpC;IAGO,kBAAkB;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACpC;IAGO,uBAAuB;QAC9B,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClE,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC9B;IAGO,yBAAyB;QAChC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACtE,IAAI,CAAC,wBAAwB,EAAE,CAAC;KAChC;IAMO,sBAAsB;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,yBAAyB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;YAC/E,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;SACjB;KACD;IAEO,wBAAwB;QAC/B,IAAI,IAAI,CAAC,mBAAmB,EAAE,IAAI,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE;YACrF,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;SACjB;KACD;IAEO,YAAY,CAAC,UAAe;QACnC,MAAM,OAAO,GAAG,UAAU,CAAC;QAC3B,MAAM,QAAQ,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC;QAE7C,IAAI,CAAC,OAAO,EAAE;YACb,OAAO;SACP;QAED,IAAI;YACH,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;gBACjC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;aACjE;iBAAM,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE;gBACxC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;aACjE;iBAAM,IAAI,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE;gBAC7C,IAAI,CAAC,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;aAC/D;iBAAM;gBACN,IAAI,CAAC,gBAAgB,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;aACjE;SACD;QAAC,OAAO,KAAK,EAAE;YACf,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;SAClC;KACD;;;;;;IAOO,oBAAoB,CAAC,SAAiB;QAC7C,OAAO,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,UAAU,CAAC,IAAI,SAAS,EAAE,CAAC;KAC5F;;;;;IAMO,sBAAsB;QAC7B,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE;cACjD,uCAAuC;cACvC,sCAAsC,CAAC;QAE1C,OAAO,OAAO,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,GAAG,CAAC;KACjE;IAEO,gBAAgB;QACvB,IAAI,OAAO,GAAG,wCAAwC,CAAC;QAEvD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpB,OAAO,GAAG,GAAG,OAAO,0BAA0B,CAAC;SAC/C;QAED,OAAO,OAAO,CAAC;KACf;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;YAChB,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;SACF;QAED,OAAO,KAAK,CAAC;KACb;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;KAChD;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;YAC7B,QACC,EAAC,qBAAqB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,IAAI,CAAC,sBAAsB,EAAE,IAElD,EAAC,YAAY,IAAC,IAAI,EAAE,cAAc,CAAC,OAAO,GAAI,EAC9C,EAAC,YAAY,IAAC,IAAI,EAAE,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,gBAAgB,GAAI,CACtD,EACvB;SACF;QAED,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;YAC/B,QACC,EAAC,qBAAqB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,IAAI,CAAC,sBAAsB,EAAE,IAElD,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,QAAC,yBAAyB,SAAG,EAC3F,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,SAAG,EACjE,EAAC,YAAY,IAAC,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,SAAG,CACzE,EACvB;SACF;QAED,QACC,cAAQ,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,IAC9F,EAAC,YAAY,oBAAK,WAAW,EAAI,CACzB,EACR;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioFooter"],"sources":["src/components/ontario-footer/components/footer-social-links.tsx","src/components/ontario-footer/components/simple-footer.tsx","src/components/ontario-footer/components/footer-column-content.tsx","src/components/ontario-footer/components/footer-column.tsx","src/components/ontario-footer/components/expanded-footer-wrapper.tsx","src/components/ontario-footer/utils/ontario-footer-options-validation.ts","src/components/ontario-footer/ontario-footer.scss?tag=ontario-footer&encapsulation=shadow","src/components/ontario-footer/ontario-footer.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nconst ICON_WIDTH = 32;\n\nexport type FooterSocialLinksProps = {\n\tfacebook?: string;\n\ttwitter?: string;\n\tinstagram?: string;\n\tyoutube?: string;\n};\n\nexport const FooterSocialLinks: FunctionalComponent<FooterSocialLinksProps> = ({\n\tfacebook,\n\ttwitter,\n\tinstagram,\n\tyoutube,\n}) => {\n\treturn (\n\t\t<ul class=\"ontario-footer__links-container ontario-footer__links-container--social\">\n\t\t\t{facebook && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={facebook} aria-label=\"Facebook\">\n\t\t\t\t\t\t<ontario-icon-facebook colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{twitter && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={twitter} aria-label=\"Twitter\">\n\t\t\t\t\t\t<ontario-icon-twitter colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{instagram && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={instagram} aria-label=\"Instagram\">\n\t\t\t\t\t\t<ontario-icon-instagram colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{youtube && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={youtube} aria-label=\"Youtube\">\n\t\t\t\t\t\t<ontario-icon-youtube colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t</ul>\n\t);\n};\n","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}) => {\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</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","import { FunctionalComponent, h, Fragment } from '@stencil/core';\nimport { FooterColumnContent } from '../ontario-footer-interface';\n\nexport type FooterColumnContentProps = {\n\tcontent: FooterColumnContent;\n};\n\nexport const ColumnContent: FunctionalComponent<FooterColumnContentProps> = ({ content }) => {\n\tconst { heading, headingLevel: Heading = 'h3', text, html, list, type = 'text' } = content;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t{heading && <Heading class=\"ontario-h5\">{heading}</Heading>}\n\t\t\t{type === 'text' && <p>{text}</p>}\n\t\t\t{type === 'html' && <div class=\"ontario-footer__paragraph\" innerHTML={html as string} />}\n\t\t\t{type === 'list' && !!list?.length && (\n\t\t\t\t<ul>\n\t\t\t\t\t{list.map((item: string) => (\n\t\t\t\t\t\t<li class=\"ontario-footer__list_item\" innerHTML={item} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { FooterColumnData } from '../ontario-footer-interface';\nimport { ColumnContent } from './footer-column-content';\nimport { FooterSocialLinks, FooterSocialLinksProps } from './footer-social-links';\n\nexport type FooterColumnProps = {\n\tdata: FooterColumnData;\n\tsocialLinks?: FooterSocialLinksProps;\n\tisThreeColLayout?: boolean;\n\tisFullWidthInMediumLayout?: boolean;\n};\n\nexport const FooterColumn: FunctionalComponent<FooterColumnProps> = ({\n\tdata,\n\tsocialLinks,\n\tisThreeColLayout = false,\n\tisFullWidthInMediumLayout = false,\n}) => {\n\tconst { title, content, button, headingLevel: Heading = 'h2' } = data;\n\tconst threeColumnLayoutClasses = isThreeColLayout ? 'ontario-large-4 ontario-expanded-footer__one-third-block' : '';\n\tconst mediumLayoutClasses = isFullWidthInMediumLayout ? 'ontario-medium-12' : 'ontario-medium-6';\n\n\treturn (\n\t\t<div class={`ontario-columns ontario-small-12 ${mediumLayoutClasses} ${threeColumnLayoutClasses}`}>\n\t\t\t<Heading class=\"ontario-h4\">{title}</Heading>\n\t\t\t{content.map((item) => (\n\t\t\t\t<ColumnContent content={item} />\n\t\t\t))}\n\t\t\t{button && (\n\t\t\t\t<a class=\"ontario-footer__button ontario-button ontario-margin-bottom-0-!\" href={button.link}>\n\t\t\t\t\t{button.text}\n\t\t\t\t</a>\n\t\t\t)}\n\t\t\t{socialLinks && <FooterSocialLinks {...socialLinks} />}\n\t\t</div>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { SimpleFooter } from './simple-footer';\nimport { SimpleFooterLinks } from '../ontario-footer-interface';\n\nexport type ExpandedFooterWrapperProps = {\n\tfooterLinks: SimpleFooterLinks;\n\ttopMargin: boolean;\n\tbackgroundImagePath: string;\n};\n\nexport const ExpandedFooterWrapper: FunctionalComponent<ExpandedFooterWrapperProps> = (props, children) => {\n\tconst { topMargin, footerLinks, backgroundImagePath } = props;\n\tconst style = { '--imagePath': backgroundImagePath };\n\tconst marginClass = !topMargin ? 'ontario-margin-top-0-!' : '';\n\n\treturn (\n\t\t<footer class={`ontario-footer ontario-footer--expanded ${marginClass}`} style={style}>\n\t\t\t<div class=\"ontario-footer__expanded-top-section\">\n\t\t\t\t<div class=\"ontario-row\">{children}</div>\n\t\t\t</div>\n\t\t\t<SimpleFooter {...footerLinks} className=\"ontario-footer__expanded-bottom-section\" />\n\t\t</footer>\n\t);\n};\n","import { TwoColumnOptions, ThreeColumnOptions } from '../ontario-footer-interface';\n\nexport const isInvalidTwoColumnOptions = (options: TwoColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content\n\t);\n};\n\nexport const isInvalidThreeColumnOptions = (options: ThreeColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content ||\n\t\t!options.column3?.title ||\n\t\t!options.column3?.content\n\t);\n};\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/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '../../styles/grid.scss';\n@use '../../styles/common.scss';\n\n$ontario-icon-size--social-large: 36px;\n$ontario-icon-size--social-small: 32px;\n\n.ontario-footer {\n\tcolor: colours.$ontario-colour-white;\n\tmargin-top: spacing.$spacing-10;\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n}\n\n.ontario-footer .ontario-columns {\n\t*:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container {\n\tlist-style: none;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-footer__links-container--inline {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tflex-direction: row;\n\t}\n}\n\n/*************************************\n Expanded footer specific styles\n**************************************/\n\n.ontario-footer__links-container--two-column-list {\n\tcolumn-count: 1;\n\tdisplay: block;\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tcolumn-count: 2;\n\n\t\t.ontario-footer__link {\n\t\t\tpadding: spacing.$spacing-0;\n\t\t\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container li {\n\tpadding: spacing.$spacing-1 spacing.$spacing-0;\n}\n\n.ontario-footer__link {\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: inline-block;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited,\n\t&:active,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tpadding: spacing.$spacing-0;\n\t\tmargin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;\n\t}\n}\n\n.ontario-footer__copyright a {\n\tmargin: spacing.$spacing-0;\n}\n\n.ontario-footer__links-container--social {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n\n.ontario-footer__links-container--social .ontario-footer__link {\n\tbackground: transparent;\n\tborder-radius: 45%;\n\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\toutline: none;\n\n\theight: (spacing.$spacing-8 + spacing.$spacing-2);\n\twidth: (spacing.$spacing-8 + spacing.$spacing-2);\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 100);\n\n\t\t.ontario-icon {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\theight: spacing.$spacing-8;\n\t\twidth: spacing.$spacing-8;\n\t}\n}\n\n.ontario-footer__links-container--social .ontario-footer__link .ontario-icon {\n\tfill: colours.$ontario-colour-white;\n\twidth: $ontario-icon-size--social-large;\n\theight: $ontario-icon-size--social-large;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-icon-size--social-small;\n\t\theight: $ontario-icon-size--social-small;\n\t}\n}\n\n.ontario-footer__paragraph {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n\tmargin-bottom: spacing.$spacing-5;\n}\n\n.ontario-footer p,\n.ontario-footer__paragraph,\n.ontario-footer__list_item {\n\ta {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\n\t\t&:visited {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t\t}\n\n\t\t&:focus,\n\t\t&:hover {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n\n.ontario-button.ontario-footer__button {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: 2px solid colours.$ontario-colour-white;\n\tborder-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\tmargin-bottom: spacing.$spacing-6;\n\tborder-radius: spacing.$spacing-1;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: 0 (1rem + 0.75rem) 1.5rem 0;\n\tmin-width: 10rem;\n\tpadding: 0.625rem 1.5rem;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 70);\n\t}\n\n\t&:focus,\n\t&:active {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 60);\n\t\tbox-shadow: 0 0 0 spacing.$spacing-1 colours.$ontario-colour-focus;\n\t\toutline: spacing.$spacing-1 solid transparent;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-footer__button + .ontario-footer__links-container {\n\tmargin-top: spacing.$spacing-5;\n}\n\n/* Supergraphic background */\n.ontario-footer--default,\n.ontario-footer__expanded-top-section {\n\tposition: relative;\n\n\t&:before {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 80);\n\t\tbackground-repeat: no-repeat;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: globalVariables.$full-width;\n\t\theight: 100%;\n\t}\n}\n\n.ontario-footer--default:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n.ontario-footer__expanded-top-section:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n//////////////////////////\n// Footer variations //\n/////////////////////////\n\n/* Default footer */\n.ontario-footer--default {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n\n\t&:before {\n\t\tbackground-size: 112.5rem;\n\t\tbackground-position: calc(50vw - 73.5rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 180rem;\n\t\t\tbackground-position: calc(50vw - 120rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 275rem;\n\t\t\tbackground-position: calc(50vw - 187rem) -160rem;\n\t\t}\n\t}\n}\n\n/* expanded footer */\n.ontario-footer--expanded {\n\tpadding-top: spacing.$spacing-0;\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n}\n\n.ontario-footer__expanded-top-section {\n\tbackground-color: darken(colours.$ontario-colour-white, 85);\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n\n\t&:before {\n\t\tbackground-size: 165rem;\n\t\tbackground-position: calc(50vw - 125rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 250rem;\n\t\t\tbackground-position: calc(50vw - 195rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 305rem;\n\t\t\tbackground-position: calc(50vw - 222rem) -160rem;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-top-section .ontario-footer__link {\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:active {\n\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t}\n}\n\n.ontario-footer__expanded-top-section ul {\n\tmargin-bottom: spacing.$spacing-0;\n}\n\n.ontario-expanded-footer__one-third-block {\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:first-of-type,\n\t&:nth-child(2) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-8;\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-bottom-section {\n\tbackground-color: colours.$ontario-colour-black;\n\tpadding-top: spacing.$spacing-9;\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"ontario-footer.js","mappings":"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","names":["OntarioFooter"],"sources":["src/components/ontario-footer/components/footer-social-links.tsx","src/components/ontario-footer/components/simple-footer.tsx","src/components/ontario-footer/components/footer-column-content.tsx","src/components/ontario-footer/components/footer-column.tsx","src/components/ontario-footer/components/expanded-footer-wrapper.tsx","src/components/ontario-footer/utils/ontario-footer-options-validation.ts","src/components/ontario-footer/ontario-footer.scss?tag=ontario-footer&encapsulation=shadow","src/components/ontario-footer/ontario-footer.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nconst ICON_WIDTH = 32;\n\nexport type FooterSocialLinksProps = {\n\tfacebook?: string;\n\ttwitter?: string;\n\tinstagram?: string;\n\tyoutube?: string;\n};\n\nexport const FooterSocialLinks: FunctionalComponent<FooterSocialLinksProps> = ({\n\tfacebook,\n\ttwitter,\n\tinstagram,\n\tyoutube,\n}) => {\n\treturn (\n\t\t<ul class=\"ontario-footer__links-container ontario-footer__links-container--social\">\n\t\t\t{facebook && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={facebook} aria-label=\"Facebook\">\n\t\t\t\t\t\t<ontario-icon-facebook colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{twitter && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={twitter} aria-label=\"Twitter\">\n\t\t\t\t\t\t<ontario-icon-twitter colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{instagram && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={instagram} aria-label=\"Instagram\">\n\t\t\t\t\t\t<ontario-icon-instagram colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{youtube && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={youtube} aria-label=\"Youtube\">\n\t\t\t\t\t\t<ontario-icon-youtube colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t</ul>\n\t);\n};\n","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","import { FunctionalComponent, h, Fragment } from '@stencil/core';\nimport { FooterColumnContent } from '../ontario-footer-interface';\n\nexport type FooterColumnContentProps = {\n\tcontent: FooterColumnContent;\n};\n\nexport const ColumnContent: FunctionalComponent<FooterColumnContentProps> = ({ content }) => {\n\tconst { heading, headingLevel: Heading = 'h3', text, html, list, type = 'text' } = content;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t{heading && <Heading class=\"ontario-h5\">{heading}</Heading>}\n\t\t\t{type === 'text' && <p>{text}</p>}\n\t\t\t{type === 'html' && <div class=\"ontario-footer__paragraph\" innerHTML={html as string} />}\n\t\t\t{type === 'list' && !!list?.length && (\n\t\t\t\t<ul>\n\t\t\t\t\t{list.map((item: string) => (\n\t\t\t\t\t\t<li class=\"ontario-footer__list_item\" innerHTML={item} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { FooterColumnData } from '../ontario-footer-interface';\nimport { ColumnContent } from './footer-column-content';\nimport { FooterSocialLinks, FooterSocialLinksProps } from './footer-social-links';\n\nexport type FooterColumnProps = {\n\tdata: FooterColumnData;\n\tsocialLinks?: FooterSocialLinksProps;\n\tisThreeColLayout?: boolean;\n\tisFullWidthInMediumLayout?: boolean;\n};\n\nexport const FooterColumn: FunctionalComponent<FooterColumnProps> = ({\n\tdata,\n\tsocialLinks,\n\tisThreeColLayout = false,\n\tisFullWidthInMediumLayout = false,\n}) => {\n\tconst { title, content, button, headingLevel: Heading = 'h2' } = data;\n\tconst threeColumnLayoutClasses = isThreeColLayout ? 'ontario-large-4 ontario-expanded-footer__one-third-block' : '';\n\tconst mediumLayoutClasses = isFullWidthInMediumLayout ? 'ontario-medium-12' : 'ontario-medium-6';\n\n\treturn (\n\t\t<div class={`ontario-columns ontario-small-12 ${mediumLayoutClasses} ${threeColumnLayoutClasses}`}>\n\t\t\t<Heading class=\"ontario-h4\">{title}</Heading>\n\t\t\t{content.map((item) => (\n\t\t\t\t<ColumnContent content={item} />\n\t\t\t))}\n\t\t\t{button && (\n\t\t\t\t<a class=\"ontario-footer__button ontario-button ontario-margin-bottom-0-!\" href={button.link}>\n\t\t\t\t\t{button.text}\n\t\t\t\t</a>\n\t\t\t)}\n\t\t\t{socialLinks && <FooterSocialLinks {...socialLinks} />}\n\t\t</div>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { SimpleFooter } from './simple-footer';\nimport { SimpleFooterLinks } from '../ontario-footer-interface';\n\nexport type ExpandedFooterWrapperProps = {\n\tfooterLinks: SimpleFooterLinks;\n\ttopMargin: boolean;\n\tbackgroundImagePath: string;\n};\n\nexport const ExpandedFooterWrapper: FunctionalComponent<ExpandedFooterWrapperProps> = (props, children) => {\n\tconst { topMargin, footerLinks, backgroundImagePath } = props;\n\tconst style = { '--imagePath': backgroundImagePath };\n\tconst marginClass = !topMargin ? 'ontario-margin-top-0-!' : '';\n\n\treturn (\n\t\t<footer class={`ontario-footer ontario-footer--expanded ${marginClass}`} style={style}>\n\t\t\t<div class=\"ontario-footer__expanded-top-section\">\n\t\t\t\t<div class=\"ontario-row\">{children}</div>\n\t\t\t</div>\n\t\t\t<SimpleFooter {...footerLinks} className=\"ontario-footer__expanded-bottom-section\" />\n\t\t</footer>\n\t);\n};\n","import { TwoColumnOptions, ThreeColumnOptions } from '../ontario-footer-interface';\n\nexport const isInvalidTwoColumnOptions = (options: TwoColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content\n\t);\n};\n\nexport const isInvalidThreeColumnOptions = (options: ThreeColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content ||\n\t\t!options.column3?.title ||\n\t\t!options.column3?.content\n\t);\n};\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/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '../../styles/grid.scss';\n@use '../../styles/common.scss';\n\n$ontario-icon-size--social-large: 36px;\n$ontario-icon-size--social-small: 32px;\n\n.ontario-footer {\n\tcolor: colours.$ontario-colour-white;\n\tmargin-top: spacing.$spacing-10;\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n}\n\n.ontario-footer .ontario-columns {\n\t*:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container {\n\tlist-style: none;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-footer__links-container--inline {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tflex-direction: row;\n\t}\n}\n\n/*************************************\n Expanded footer specific styles\n**************************************/\n\n.ontario-footer__links-container--two-column-list {\n\tcolumn-count: 1;\n\tdisplay: block;\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tcolumn-count: 2;\n\n\t\t.ontario-footer__link {\n\t\t\tpadding: spacing.$spacing-0;\n\t\t\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container li {\n\tpadding: spacing.$spacing-1 spacing.$spacing-0;\n}\n\n.ontario-footer__link {\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: inline-block;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited,\n\t&:active,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tpadding: spacing.$spacing-0;\n\t\tmargin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;\n\t}\n}\n\n.ontario-footer__copyright a {\n\tmargin: spacing.$spacing-0;\n}\n\n.ontario-footer__links-container--social {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n\n.ontario-footer__links-container--social .ontario-footer__link {\n\tbackground: transparent;\n\tborder-radius: 45%;\n\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\toutline: none;\n\n\theight: (spacing.$spacing-8 + spacing.$spacing-2);\n\twidth: (spacing.$spacing-8 + spacing.$spacing-2);\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 100);\n\n\t\t.ontario-icon {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\theight: spacing.$spacing-8;\n\t\twidth: spacing.$spacing-8;\n\t}\n}\n\n.ontario-footer__links-container--social .ontario-footer__link .ontario-icon {\n\tfill: colours.$ontario-colour-white;\n\twidth: $ontario-icon-size--social-large;\n\theight: $ontario-icon-size--social-large;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-icon-size--social-small;\n\t\theight: $ontario-icon-size--social-small;\n\t}\n}\n\n.ontario-footer__paragraph {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n\tmargin-bottom: spacing.$spacing-5;\n}\n\n.ontario-footer p,\n.ontario-footer__paragraph,\n.ontario-footer__list_item {\n\ta {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\n\t\t&:visited {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t\t}\n\n\t\t&:focus,\n\t\t&:hover {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n\n.ontario-button.ontario-footer__button {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: 2px solid colours.$ontario-colour-white;\n\tborder-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\tmargin-bottom: spacing.$spacing-6;\n\tborder-radius: spacing.$spacing-1;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: 0 (1rem + 0.75rem) 1.5rem 0;\n\tmin-width: 10rem;\n\tpadding: 0.625rem 1.5rem;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 70);\n\t}\n\n\t&:focus,\n\t&:active {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 60);\n\t\tbox-shadow: 0 0 0 spacing.$spacing-1 colours.$ontario-colour-focus;\n\t\toutline: spacing.$spacing-1 solid transparent;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-footer__button + .ontario-footer__links-container {\n\tmargin-top: spacing.$spacing-5;\n}\n\n/* Supergraphic background */\n.ontario-footer--default,\n.ontario-footer__expanded-top-section {\n\tposition: relative;\n\n\t&:before {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 80);\n\t\tbackground-repeat: no-repeat;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: globalVariables.$full-width;\n\t\theight: 100%;\n\t}\n}\n\n.ontario-footer--default:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n.ontario-footer__expanded-top-section:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n//////////////////////////\n// Footer variations //\n/////////////////////////\n\n/* Default footer */\n.ontario-footer--default {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n\n\t&:before {\n\t\tbackground-size: 112.5rem;\n\t\tbackground-position: calc(50vw - 73.5rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 180rem;\n\t\t\tbackground-position: calc(50vw - 120rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 275rem;\n\t\t\tbackground-position: calc(50vw - 187rem) -160rem;\n\t\t}\n\t}\n}\n\n/* expanded footer */\n.ontario-footer--expanded {\n\tpadding-top: spacing.$spacing-0;\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n}\n\n.ontario-footer__expanded-top-section {\n\tbackground-color: darken(colours.$ontario-colour-white, 85);\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n\n\t&:before {\n\t\tbackground-size: 165rem;\n\t\tbackground-position: calc(50vw - 125rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 250rem;\n\t\t\tbackground-position: calc(50vw - 195rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 305rem;\n\t\t\tbackground-position: calc(50vw - 222rem) -160rem;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-top-section .ontario-footer__link {\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:active {\n\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t}\n}\n\n.ontario-footer__expanded-top-section ul {\n\tmargin-bottom: spacing.$spacing-0;\n}\n\n.ontario-expanded-footer__one-third-block {\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:first-of-type,\n\t&:nth-child(2) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-8;\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-bottom-section {\n\tbackground-color: colours.$ontario-colour-black;\n\tpadding-top: spacing.$spacing-9;\n}\n","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"],"version":3}
|