-
-
+
+
+
);
-}
+};
+
+Footer.defaultProps = {
+ contactLink: "https://www.canada.ca/en/contact.html",
+ withMainBand: true,
+};
Footer.propTypes = {
/**
- * array of objects containing the link text and link
+ * id of this component
*/
- footerBoxLinks: PropTypes.arrayOf(
- PropTypes.shape({
- footerBoxlink: PropTypes.string.isRequired,
- footerBoxLinkText: PropTypes.string.isRequired,
- })
- ),
+ id: PropTypes.string.isRequired,
+ /**
+ * Add the path Link to the top of your page for the "to the Top" button in mobile
+ */
+ btnLink: PropTypes.string.isRequired,
+
/**
- * array of objects containing the link text and link
+ * If true will display the error page version of the footer component
*/
- links: PropTypes.arrayOf(
+ error: PropTypes.bool,
+
+ /**
+ * Allow user to pass in their own contact link
+ */
+ contactLink: PropTypes.string,
+
+ /**
+ * List of links to display on the footer
+ */
+ brandLinks: PropTypes.arrayOf(
PropTypes.shape({
- link: PropTypes.string.isRequired,
- linkText: PropTypes.string.isRequired,
- })
+ id: PropTypes.string,
+ text: PropTypes.string,
+ href: PropTypes.string,
+ }).isRequired
),
/**
- * alt text for footer canada-ca logo
+ * Specifies where to open the linked document
*/
- footerLogoAltText: PropTypes.string.isRequired,
+ target: PropTypes.string,
/**
- * image path for footer logo
+ * Handle onclick on the footer media link
*/
- footerLogoImage: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+
+ /**
+ * List of menu items to display in dropdown with links
+ */
+ contextualBandLinks: PropTypes.arrayOf(
+ PropTypes.shape({
+ key: PropTypes.string,
+ text: PropTypes.string,
+ link: PropTypes.string,
+ })
+ ),
};
diff --git a/components/organisms/Footer.stories.js b/components/organisms/Footer.stories.js
index 6e60079d2d..80f971b856 100644
--- a/components/organisms/Footer.stories.js
+++ b/components/organisms/Footer.stories.js
@@ -1,5 +1,5 @@
+import React from "react";
import { Footer } from "./Footer";
-import logo from "../../public/wmms-blk.svg";
export default {
title: "Components/Organisms/Footer",
@@ -8,81 +8,9 @@ export default {
const Template = (args) =>
;
-export const Primary = Template.bind({});
-Primary.args = {
- links: [
- {
- link: "https://some-link-1.com",
- linkText: "some-link-1",
- },
- {
- link: "https://some-link-2.com",
- linkText: "some-lin-2",
- },
- {
- link: "https://some-link-3.com",
- linkText: "some-link-3",
- },
- {
- link: "https://some-link-4.com",
- linkText: "some-link-4",
- },
- {
- link: "https://some-link-5.com",
- linkText: "some-link-5",
- },
- {
- link: "https://some-link-6.com",
- linkText: "some-link-6",
- },
- {
- link: "https://some-link-7.com",
- linkText: "some-link-7",
- },
- {
- link: "https://some-link-8.com",
- linkText: "some-link-8",
- },
- ],
-
- footerBoxLinks: [
- {
- footerBoxlink: "https://some-link-11.com",
- footerBoxLinkText: "some-link-11",
- },
- {
- footerBoxlink: "https://some-link-22.com",
- footerBoxLinkText: "some-lin-22",
- },
- {
- footerBoxlink: "https://some-link-33.com",
- footerBoxLinkText: "some-link-33",
- },
- {
- footerBoxlink: "https://some-link-44.com",
- footerBoxLinkText: "some-link-44",
- },
- {
- footerBoxlink: "https://some-link-55.com",
- footerBoxLinkText: "some-link-55",
- },
- {
- footerBoxlink: "https://some-link-66.com",
- footerBoxLinkText: "some-link-66",
- },
- {
- footerBoxlink: "https://some-link-77.com",
- footerBoxLinkText: "some-link-77",
- },
- {
- footerBoxlink: "https://some-link-88.com",
- footerBoxLinkText: "some-link-88",
- },
- ],
-
- footerLogoAltText: "Symbol of the Government of Canada",
- footerLogoImage: logo,
- reportBtnText: "Report a problem",
- reportDescription:
- "Experiencing an issue with this product or have you spotted an error?",
+export const DefaultFooter = Template.bind({});
+DefaultFooter.args = {
+ id: "footer",
+ btnLink: "/",
+ target: "_blank",
};
diff --git a/components/organisms/Footer.test.js b/components/organisms/Footer.test.js
index 94ce3a9f94..ef13b16afa 100644
--- a/components/organisms/Footer.test.js
+++ b/components/organisms/Footer.test.js
@@ -1,23 +1,28 @@
-/**
- * @jest-environment jsdom
- */
import React from "react";
import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import { Primary } from "./Footer.stories";
+import { Footer } from "./Footer";
+import { DefaultFooter } from "./Footer.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
-it("renders Footer in its primary state", () => {
- render(
);
+expect.extend(toHaveNoViolations);
- expect(
- screen.getByAltText("Symbol of the Government of Canada")
- ).toBeTruthy();
-
- Primary.args.footerBoxLinks.forEach((value) => {
- screen.getByText(value.footerBoxLinkText);
+describe("Footer", () => {
+ test("renders Footer component with default props", async () => {
+ const { container } = render(
);
+ expect(screen.getByTestId("footer")).toBeInTheDocument();
+ expect(
+ screen.getByAltText("Symbol of the Government of Canada")
+ ).toBeInTheDocument();
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
});
- Primary.args.links.forEach((value) => {
- screen.getByText(value.linkText);
+ test("renders Footer component with custom brand links", async () => {
+ const { container } = render(
);
+ expect(screen.getByTestId("footer")).toBeInTheDocument();
+ expect(screen.getByText("Social media")).toBeInTheDocument();
+ expect(screen.getByText("Mobile applications")).toBeInTheDocument();
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
});
});
diff --git a/components/design-system/HelpIcon.jsx b/components/organisms/HelpIcon.js
similarity index 98%
rename from components/design-system/HelpIcon.jsx
rename to components/organisms/HelpIcon.js
index e5f33a0db2..150f8ba9c7 100644
--- a/components/design-system/HelpIcon.jsx
+++ b/components/organisms/HelpIcon.js
@@ -1,6 +1,6 @@
import { useState } from "react";
import { Modal } from "react-bootstrap";
-import { Button } from "./Button";
+import { DSButton } from "../atoms/DSButton";
export const HelpIcon = ({ title, body, lang }) => {
const [showModal, setShowModal] = useState(false);
@@ -61,7 +61,7 @@ export const HelpIcon = ({ title, body, lang }) => {
/>
-