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

package/src/components/ontario-fieldset/test/ontario-fieldset.spec.tsx

@@ -0,0 +1,35 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioFieldset } from '../ontario-fieldset';
+
+describe('ontario-fieldset', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioFieldset],
+				html: `<ontario-fieldset legend="What is your delivery address?" legend-size="heading"></ontario-aside>`,
+			});
+
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+
+	it('should render the default legend size if no legendSize prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioFieldset],
+			html: `<ontario-fieldset legend="What is your delivery address?"></ontario-fieldset>`,
+		});
+
+		expect(page.root).toEqualHtml(`
+			<ontario-fieldset legend="What is your delivery address?">
+				<mock:shadow-root>
+					<div class="ontario-form-group">
+						<fieldset class="ontario-fieldset">
+							<legend class="ontario-fieldset__legend">What is your delivery address?</legend>
+							<slot></slot>
+						</fieldset>
+					</div>
+				</mock:shadow-root>
+			</ontario-fieldset>
+		`);
+	});
+});

package/src/components/ontario-footer/assets/footer-default-supergraphic-logo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 viewBox="0 0 4410 4093" xml:space="preserve" height="4093" width="4410">
+<style type="text/css">
+	.st0{fill:#1A1A1A;}
+</style>
+<path class="st0" d="M2494.4,0C1689.4,0,805.7,218.5,0,772.3l362,856.2c590-449.3,1330.4-725.9,2131.5-725.9
+	c299.5,0,601.5,45.4,880.6,118.1c-227.9,821.4-749.4,1560.5-1556.8,2054l99,1017.9c1586.7-773,2382.7-2252,2493.7-3652
+	C3831.3,161.3,3177.6,0,2494.4,0z"/>
+</svg>

package/src/components/ontario-footer/assets/footer-expanded-supergraphic-logo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 viewBox="0 0 4410 4093" xml:space="preserve" height="4093" width="4410">
+<style type="text/css">
+	.st0{fill:#262626;}
+</style>
+<path class="st0" d="M2494.4,0C1689.4,0,805.7,218.5,0,772.3l362,856.2c590-449.3,1330.4-725.9,2131.5-725.9
+	c299.5,0,601.5,45.4,880.6,118.1c-227.9,821.4-749.4,1560.5-1556.8,2054l99,1017.9c1586.7-773,2382.7-2252,2493.7-3652
+	C3831.3,161.3,3177.6,0,2494.4,0z"/>
+</svg>

package/src/components/ontario-footer/components/expanded-footer-wrapper.tsx

@@ -0,0 +1,24 @@
+import { FunctionalComponent, h, getAssetPath } from '@stencil/core';
+import { SimpleFooter } from './simple-footer';
+import { SimpleFooterLinks } from '../ontario-footer-interface';
+
+export type ExpandedFooterWrapperProps = {
+	footerLinks: SimpleFooterLinks;
+	topMargin: boolean;
+	backgroundImagePath: string;
+};
+
+export const ExpandedFooterWrapper: FunctionalComponent<ExpandedFooterWrapperProps> = (props, children) => {
+	const { topMargin, footerLinks, backgroundImagePath } = props;
+	const style = { '--imagePath': backgroundImagePath };
+	const marginClass = !topMargin ? 'ontario-margin-top-0-!' : '';
+
+	return (
+		<footer class={`ontario-footer ontario-footer--expanded ${marginClass}`} style={style}>
+			<div class="ontario-footer__expanded-top-section">
+				<div class="ontario-row">{children}</div>
+			</div>
+			<SimpleFooter {...footerLinks} className="ontario-footer__expanded-bottom-section" />
+		</footer>
+	);
+};

package/src/components/ontario-footer/components/footer-column-content.tsx

@@ -0,0 +1,25 @@
+import { FunctionalComponent, h, Fragment } from '@stencil/core';
+import { FooterColumnContent } from '../ontario-footer-interface';
+
+export type FooterColumnContentProps = {
+	content: FooterColumnContent;
+};
+
+export const ColumnContent: FunctionalComponent<FooterColumnContentProps> = ({ content }) => {
+	const { heading, headingLevel: Heading = 'h3', text, html, list, type = 'text' } = content;
+
+	return (
+		<Fragment>
+			{heading && <Heading class="ontario-h5">{heading}</Heading>}
+			{type === 'text' && <p>{text}</p>}
+			{type === 'html' && <div class="ontario-footer__paragraph" innerHTML={html as string} />}
+			{type === 'list' && !!list?.length && (
+				<ul>
+					{list.map((item: string) => (
+						<li class="ontario-footer__list_item" innerHTML={item} />
+					))}
+				</ul>
+			)}
+		</Fragment>
+	);
+};

package/src/components/ontario-footer/components/footer-column.tsx

@@ -0,0 +1,37 @@
+import { FunctionalComponent, h } from '@stencil/core';
+import { FooterColumnData } from '../ontario-footer-interface';
+import { ColumnContent } from './footer-column-content';
+import { FooterSocialLinks, FooterSocialLinksProps } from './footer-social-links';
+
+export type FooterColumnProps = {
+	data: FooterColumnData;
+	socialLinks?: FooterSocialLinksProps;
+	isThreeColLayout?: boolean;
+	isFullWidthInMediumLayout?: boolean;
+};
+
+export const FooterColumn: FunctionalComponent<FooterColumnProps> = ({
+	data,
+	socialLinks,
+	isThreeColLayout = false,
+	isFullWidthInMediumLayout = false,
+}) => {
+	const { title, content, button, headingLevel: Heading = 'h2' } = data;
+	const threeColumnLayoutClasses = isThreeColLayout ? 'ontario-large-4 ontario-expanded-footer__one-third-block' : '';
+	const mediumLayoutClasses = isFullWidthInMediumLayout ? 'ontario-medium-12' : 'ontario-medium-6';
+
+	return (
+		<div class={`ontario-columns ontario-small-12 ${mediumLayoutClasses} ${threeColumnLayoutClasses}`}>
+			<Heading class="ontario-h4">{title}</Heading>
+			{content.map((item) => (
+				<ColumnContent content={item} />
+			))}
+			{button && (
+				<a class="ontario-footer__button ontario-button ontario-margin-bottom-0-!" href={button.link}>
+					{button.text}
+				</a>
+			)}
+			{socialLinks && <FooterSocialLinks {...socialLinks} />}
+		</div>
+	);
+};

package/src/components/ontario-footer/components/footer-social-links.tsx

@@ -0,0 +1,50 @@
+import { FunctionalComponent, h } from '@stencil/core';
+
+const ICON_WIDTH = 32;
+
+export type FooterSocialLinksProps = {
+	facebook?: string;
+	twitter?: string;
+	instagram?: string;
+	youtube?: string;
+};
+
+export const FooterSocialLinks: FunctionalComponent<FooterSocialLinksProps> = ({
+	facebook,
+	twitter,
+	instagram,
+	youtube,
+}) => {
+	return (
+		<ul class="ontario-footer__links-container ontario-footer__links-container--social">
+			{facebook && (
+				<li>
+					<a class="ontario-footer__link" href={facebook} aria-label="Facebook">
+						<ontario-icon-facebook colour="white" icon-width={ICON_WIDTH} />
+					</a>
+				</li>
+			)}
+			{twitter && (
+				<li>
+					<a class="ontario-footer__link" href={twitter} aria-label="Twitter">
+						<ontario-icon-twitter colour="white" icon-width={ICON_WIDTH} />
+					</a>
+				</li>
+			)}
+			{instagram && (
+				<li>
+					<a class="ontario-footer__link" href={instagram} aria-label="Instagram">
+						<ontario-icon-instagram colour="white" icon-width={ICON_WIDTH} />
+					</a>
+				</li>
+			)}
+			{youtube && (
+				<li>
+					<a class="ontario-footer__link" href={youtube} aria-label="Youtube">
+						<ontario-icon-youtube colour="white" icon-width={ICON_WIDTH} />
+					</a>
+				</li>
+			)}
+		</ul>
+	);
+};

package/src/components/ontario-footer/components/index.ts

@@ -0,0 +1,4 @@
+export * from './footer-social-links';
+export * from './simple-footer';
+export * from './footer-column';
+export * from './expanded-footer-wrapper';

package/src/components/ontario-footer/components/simple-footer.tsx

@@ -0,0 +1,51 @@
+import { h, FunctionalComponent } from '@stencil/core';
+import { SimpleFooterLinks } from '../ontario-footer-interface';
+
+const enDash = '\u2013';
+
+type SimpleFooterProps = SimpleFooterLinks & {
+	className?: string;
+};
+
+export const SimpleFooter: FunctionalComponent<SimpleFooterProps> = ({
+	accessibilityLink,
+	privacyLink,
+	contactLink,
+	printerLink,
+	className,
+}) => {
+	return (
+		<div class={`ontario-row ${className ?? ''}`}>
+			<div class="ontario-columns ontario-small-12">
+				<ul class="ontario-footer__links-container ontario-footer__links-container--inline">
+					<li>
+						<a class="ontario-footer__link" href={accessibilityLink.href}>
+							{accessibilityLink.text}
+						</a>
+					</li>
+					<li>
+						<a class="ontario-footer__link" href={privacyLink.href}>
+							{privacyLink.text}
+						</a>
+					</li>
+					{contactLink && (
+						<li>
+							<a class="ontario-footer__link" href={contactLink?.href}>
+								{contactLink?.text}
+							</a>
+						</li>
+					)}
+				</ul>
+				<div class="ontario-footer__copyright">
+					<a class="ontario-footer__link" href={printerLink?.href}>
+						&copy; {printerLink?.text}{' '}
+						<span class="ontario-nbsp">
+							2012{enDash}
+							{String(new Date().getFullYear()).slice(-2)}
+						</span>
+					</a>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/components/ontario-footer/ontario-footer-interface.tsx

@@ -0,0 +1,53 @@
+export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';
+
+export interface FooterLink {
+	text?: string;
+	href: string;
+}
+
+// External interface to be passed to the Footer component
+export interface FooterLinks {
+	accessibilityLink?: Partial<FooterLink>;
+	privacyLink?: Partial<FooterLink>;
+	contactLink?: FooterLink;
+	printerLink?: Partial<FooterLink>;
+}
+
+// Internal interface for SimpleFooter Component
+export interface SimpleFooterLinks {
+	accessibilityLink: Required<FooterLink>;
+	privacyLink: Required<FooterLink>;
+	printerLink: Required<FooterLink>;
+	contactLink?: Required<FooterLink>;
+}
+
+export type FooterContentType = 'text' | 'list' | 'html';
+
+export type HeadingLevelType = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface FooterColumnContent {
+	heading?: string;
+	headingLevel?: HeadingLevelType;
+	type: FooterContentType;
+	text?: string;
+	html?: string | HTMLElement;
+	list?: string[];
+}
+
+export interface FooterColumnData {
+	title: string;
+	headingLevel?: HeadingLevelType;
+	content: Array<FooterColumnContent>;
+	button?: {
+		text: string;
+		link: string;
+	};
+}
+export interface TwoColumnOptions {
+	column1: FooterColumnData;
+	column2: FooterColumnData;
+}
+
+export interface ThreeColumnOptions extends TwoColumnOptions {
+	column3: FooterColumnData;
+}

package/src/components/ontario-footer/ontario-footer.scss

@@ -0,0 +1,342 @@
+@use 'sass:math';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use '../../styles/grid.scss';
+@use '../../styles/common.scss';
+
+$ontario-icon-size--social-large: 36px;
+$ontario-icon-size--social-small: 32px;
+
+.ontario-footer {
+	color: colours.$ontario-colour-white;
+	margin-top: spacing.$spacing-10;
+	padding: spacing.$spacing-9 spacing.$spacing-0;
+}
+
+.ontario-footer .ontario-columns {
+	*:last-child {
+		margin-bottom: spacing.$spacing-0;
+	}
+
+	@media screen and (max-width: breakpoints.$medium-breakpoint) {
+		margin-bottom: spacing.$spacing-8;
+
+		&:last-of-type {
+			margin-bottom: spacing.$spacing-0;
+		}
+	}
+}
+
+.ontario-footer__links-container {
+	list-style: none;
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
+
+	@media screen and (min-width: breakpoints.$medium-breakpoint) {
+		margin-bottom: spacing.$spacing-2;
+	}
+}
+
+.ontario-footer__links-container--inline {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		flex-direction: row;
+	}
+}
+
+/*************************************
+    Expanded footer specific styles
+**************************************/
+
+.ontario-footer__links-container--two-column-list {
+	column-count: 1;
+	display: block;
+	margin: spacing.$spacing-0;
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		column-count: 2;
+
+		.ontario-footer__link {
+			padding: spacing.$spacing-0;
+			margin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-0;
+		}
+	}
+}
+
+.ontario-footer__links-container li {
+	padding: spacing.$spacing-1 spacing.$spacing-0;
+}
+
+.ontario-footer__link {
+	color: colours.$ontario-colour-white;
+	display: inline-block;
+	padding: spacing.$spacing-2 spacing.$spacing-0;
+	margin: spacing.$spacing-0;
+	text-decoration: underline;
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+
+	&:visited,
+	&:active,
+	&:hover {
+		color: colours.$ontario-colour-white;
+	}
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		padding: spacing.$spacing-0;
+		margin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;
+	}
+}
+
+.ontario-footer__copyright a {
+	margin: spacing.$spacing-0;
+}
+
+.ontario-footer__links-container--social {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.ontario-footer__links-container--social .ontario-footer__link {
+	background: transparent;
+	border-radius: 45%;
+	margin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-0;
+	padding: spacing.$spacing-0;
+	outline: none;
+
+	height: (spacing.$spacing-8 + spacing.$spacing-2);
+	width: (spacing.$spacing-8 + spacing.$spacing-2);
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&:hover,
+	&:focus {
+		background-color: darken(colours.$ontario-colour-white, 100);
+
+		.ontario-icon {
+			fill: colours.$ontario-colour-white;
+		}
+	}
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		height: spacing.$spacing-8;
+		width: spacing.$spacing-8;
+	}
+}
+
+.ontario-footer__links-container--social .ontario-footer__link .ontario-icon {
+	fill: colours.$ontario-colour-white;
+	width: $ontario-icon-size--social-large;
+	height: $ontario-icon-size--social-large;
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		width: $ontario-icon-size--social-small;
+		height: $ontario-icon-size--social-small;
+	}
+}
+
+.ontario-footer__paragraph {
+	max-width: globalVariables.$standard-width;
+	width: globalVariables.$full-width;
+	margin-bottom: spacing.$spacing-5;
+}
+
+.ontario-footer p,
+.ontario-footer__paragraph,
+.ontario-footer__list_item {
+	a {
+		color: colours.$ontario-colour-white;
+		font-weight: fontWeights.$ontario-font-weights-semi-bold;
+
+		&:visited {
+			color: colours.$ontario-colour-white;
+		}
+
+		&:active {
+			color: darken(colours.$ontario-colour-white, 10);
+		}
+
+		&:focus,
+		&:hover {
+			text-decoration: none;
+		}
+	}
+}
+
+.ontario-button.ontario-footer__button {
+	background-color: colours.$ontario-colour-black;
+	border: 2px solid colours.$ontario-colour-white;
+	border-color: colours.$ontario-colour-white;
+	color: colours.$ontario-colour-white;
+	margin-bottom: spacing.$spacing-6;
+	border-radius: spacing.$spacing-1;
+	box-sizing: border-box;
+	box-shadow: none;
+	display: inline-block;
+	font-size: 1.125rem;
+	font-family: typography.$ontario-font-open-sans;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	line-height: math.div(14, 9);
+	margin: 0 (1rem + 0.75rem) 1.5rem 0;
+	min-width: 10rem;
+	padding: 0.625rem 1.5rem;
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+
+	&:hover {
+		background-color: darken(colours.$ontario-colour-white, 70);
+	}
+
+	&:focus,
+	&:active {
+		background-color: darken(colours.$ontario-colour-white, 60);
+		box-shadow: 0 0 0 spacing.$spacing-1 colours.$ontario-colour-focus;
+		outline: spacing.$spacing-1 solid transparent;
+		transition: all 0.1s ease-in-out;
+	}
+}
+
+.ontario-footer__button + .ontario-footer__links-container {
+	margin-top: spacing.$spacing-5;
+}
+
+/* Supergraphic background */
+.ontario-footer--default,
+.ontario-footer__expanded-top-section {
+	position: relative;
+
+	&:before {
+		background-color: darken(colours.$ontario-colour-white, 80);
+		background-repeat: no-repeat;
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: globalVariables.$full-width;
+		height: 100%;
+	}
+}
+
+.ontario-footer--default:before {
+	background-image: var(--imagePath, url(''));
+}
+
+.ontario-footer__expanded-top-section:before {
+	background-image: var(--imagePath, url(''));
+}
+
+//////////////////////////
+//  Footer variations  //
+/////////////////////////
+
+/* Default footer */
+.ontario-footer--default {
+	background-color: colours.$ontario-colour-black;
+	border-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;
+
+	&:before {
+		background-size: 112.5rem;
+		background-position: calc(50vw - 73.5rem) -64rem;
+
+		@media screen and (min-width: breakpoints.$small-breakpoint) {
+			background-size: 180rem;
+			background-position: calc(50vw - 120rem) -106rem;
+		}
+
+		@media screen and (min-width: breakpoints.$medium-breakpoint) {
+			background-size: 275rem;
+			background-position: calc(50vw - 187rem) -160rem;
+		}
+	}
+}
+
+/* expanded footer */
+.ontario-footer--expanded {
+	padding-top: spacing.$spacing-0;
+	background-color: colours.$ontario-colour-black;
+	border-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;
+}
+
+.ontario-footer__expanded-top-section {
+	background-color: darken(colours.$ontario-colour-white, 85);
+	padding: spacing.$spacing-9 spacing.$spacing-0;
+
+	&:before {
+		background-size: 165rem;
+		background-position: calc(50vw - 125rem) -64rem;
+
+		@media screen and (min-width: breakpoints.$small-breakpoint) {
+			background-size: 250rem;
+			background-position: calc(50vw - 195rem) -106rem;
+		}
+
+		@media screen and (min-width: breakpoints.$medium-breakpoint) {
+			background-size: 305rem;
+			background-position: calc(50vw - 222rem) -160rem;
+		}
+	}
+}
+
+.ontario-footer__expanded-top-section .ontario-footer__link {
+	text-decoration: underline;
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+
+	&:active {
+		color: darken(colours.$ontario-colour-white, 10);
+	}
+}
+
+.ontario-footer__expanded-top-section ul {
+	margin-bottom: spacing.$spacing-0;
+}
+
+.ontario-expanded-footer__one-third-block {
+	margin-bottom: spacing.$spacing-0;
+
+	&:first-of-type,
+	&:nth-child(2) {
+		margin-bottom: spacing.$spacing-8;
+	}
+
+	@media screen and (min-width: breakpoints.$small-breakpoint) {
+		margin-bottom: spacing.$spacing-0;
+
+		&:first-of-type {
+			margin-bottom: spacing.$spacing-8;
+		}
+
+		&:nth-child(2) {
+			margin-bottom: spacing.$spacing-0;
+		}
+	}
+
+	@media screen and (min-width: breakpoints.$medium-breakpoint) {
+		margin-bottom: spacing.$spacing-0;
+
+		&:first-of-type {
+			margin-bottom: spacing.$spacing-0;
+		}
+	}
+}
+
+.ontario-footer__expanded-bottom-section {
+	background-color: colours.$ontario-colour-black;
+	padding-top: spacing.$spacing-9;
+}