@purpurds/footer 0.0.1

package/src/footer.stories.tsx

@@ -0,0 +1,192 @@
+import React, { forwardRef } from "react";
+import { facebook, instagram, linkedin, x, youtube } from "@purpurds/icon";
+import { Link } from "@purpurds/link";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/link/styles";
+import "@purpurds/grid/styles";
+import "@purpurds/accordion/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/heading/styles";
+import { Footer } from "./footer";
+
+const meta = {
+  title: "Components/Footer",
+  component: Footer,
+  parameters: {
+    design: [
+      {
+        name: "Footer",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=58165-9763",
+      },
+    ],
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof Footer>;
+
+type CustomTestLinkProps = {
+  children?: React.ReactNode;
+  href?: string;
+  target?: string;
+};
+
+const CustomTestLink = forwardRef(({ children, href, target, ...props }: CustomTestLinkProps) => {
+  return (
+    <a href={href} target={target} {...props}>
+      {children}
+    </a>
+  );
+});
+
+const navigationLinks = [
+  {
+    heading: "Recommended",
+    links: [
+      { text: "iPhone 16", href: "https://telia.se" },
+      { text: "Samsung Galaxy s24", href: "https://telia.se" },
+      { text: "Premier League", href: "https://telia.se" },
+      { text: "SHL", href: "https://telia.se" },
+      { text: "Mobile Phones", href: "https://telia.se" },
+      { text: "Broadband", href: "https://telia.se" },
+      { text: "Fiber", href: "https://telia.se" },
+      { text: "TV and Streaming", href: "https://telia.se" },
+      { text: "Black Friday", href: "https://telia.se" },
+      { text: "Telia's Offers", href: "https://telia.se" },
+    ],
+  },
+  {
+    heading: "This is Telia",
+    links: [
+      { text: "About Telia", href: "https://telia.se" },
+      { text: "Press", href: "https://telia.se" },
+      { text: "Network of the Future", href: "https://telia.se" },
+      { text: "Telia's Networks and Cables", href: "https://telia.se" },
+      { text: "Jobs at Telia", href: "https://telia.se" },
+      { text: "5G", href: "https://telia.se" },
+      { text: "2G/3G Phase-out", href: "https://telia.se" },
+      { text: "Management Team", href: "https://telia.se" },
+      { text: "Privacy Policy", href: "https://telia.se" },
+      { text: "About the Website", href: "https://telia.se" },
+      { text: "Cookies", href: "https://telia.se" },
+    ],
+  },
+  {
+    heading: "Shop at Telia",
+    links: [
+      { text: "Support", href: "https://telia.se" },
+      { text: "Contact Us", href: "https://telia.se" },
+      { text: "Operational Information", href: "https://telia.se" },
+      { text: "Purchase Information", href: "https://telia.se" },
+      { text: "Terms and Conditions", href: "https://telia.se" },
+      { text: "Prices", href: "https://telia.se" },
+      { text: "Telia Stores", href: "https://telia.se" },
+      { text: "Reports and Violations", href: "https://telia.se" },
+      { text: "Coverage Maps", href: "https://telia.se" },
+      { text: "Email to Telia", href: "https://telia.se" },
+    ],
+  },
+  {
+    heading: "Sustainability",
+    links: [
+      { text: "Recycle Your Phone", href: "https://telia.se" },
+      { text: "Used Phones", href: "https://telia.se" },
+      { text: "Repair Your Phone", href: "https://telia.se" },
+      { text: "Sustainability Work", href: "https://telia.se" },
+      { text: "Environmental Work", href: "https://telia.se" },
+      { text: "Eco-rating", href: "https://telia.se" },
+      { text: "Social Sustainability", href: "https://telia.se" },
+      { text: "Surf Safely", href: "https://telia.se" },
+    ],
+  },
+];
+
+const socialLinks = [
+  { href: "https://telia.se", icon: instagram, "aria-label": "Link to Telia's Instagram page" },
+  { href: "https://telia.se", icon: linkedin, "aria-label": "Link to Telia's LinkedIn page" },
+  { href: "https://telia.se", icon: facebook, "aria-label": "Link to Telia's Facebook page" },
+  { href: "https://telia.se", icon: youtube, "aria-label": "Link to Telia's YouTube page" },
+  { href: "https://telia.se", icon: x, "aria-label": "Link to Telia's X page" },
+];
+
+const contacts = {
+  copyright: "© Telia Company 2024",
+  address: {
+    content: (
+      <>
+        Address line 1<br />
+        Address line 2<br />
+        Address line 3<br />
+        Org number
+      </>
+    ),
+    addressProps: { "aria-label": "Telia Company address" },
+  },
+};
+
+const legalLinks = [
+  { text: "link 1", href: "https://telia.se" },
+  { text: "link 2", href: "https://telia.se" },
+  { text: "link 3", href: "https://telia.se" },
+  { text: "link 4", href: "https://telia.se" },
+  { text: "link 5", href: "https://telia.se" },
+  { text: "link 6", href: "https://telia.se" },
+];
+
+const additionalContent = (
+  <Link variant="standalone" negative href="https://www.telia.lt/privatiems">
+    Additional content
+  </Link>
+);
+
+const paymentImages = [
+  {
+    src: "https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg",
+    alt: "MasterCard",
+  },
+  {
+    src: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg",
+    alt: "Visa",
+  },
+];
+
+export const Showcase: Story = {
+  args: {
+    navigation: {
+      customLink: CustomTestLink,
+      links: navigationLinks,
+      sectionProps: {
+        "aria-label": "Navigation links",
+      },
+    },
+    social: {
+      links: socialLinks,
+      sectionProps: {
+        "aria-label": "Social media links",
+      },
+    },
+    contacts: {
+      ...contacts,
+      sectionProps: {
+        "aria-label": "Contact information",
+      },
+    },
+    legal: { links: legalLinks, sectionProps: { "aria-label": "Legal links" } },
+    additional: {
+      content: additionalContent,
+      sectionProps: { "aria-label": "Additional content" },
+    },
+    payments: {
+      images: paymentImages,
+      sectionProps: {
+        "aria-label": "Payment methods",
+      },
+    },
+  },
+};
+
+export const Empty: Story = {
+  args: {},
+};

package/src/footer.test.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import { facebook, linkedin } from "@purpurds/icon";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Footer } from "./footer";
+
+expect.extend(matchers);
+
+describe("Footer", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render empty footer", () => {
+    render(<Footer />);
+
+    const sections = screen.queryAllByRole("region");
+    expect(sections).toHaveLength(0);
+
+    const teliaLogo = screen.getByRole("presentation");
+    expect(teliaLogo).toBeInTheDocument();
+    expect(teliaLogo).toHaveAttribute("alt", "Telia logo");
+  });
+
+  it("should render footer with social links", () => {
+    render(
+      <Footer
+        social={{
+          links: [
+            { icon: facebook, href: "https://facebook.com", "aria-label": "link to facebook page" },
+            { icon: linkedin, href: "https://linkedin.com", "aria-label": "link to linkedin page" },
+          ],
+          sectionProps: { "aria-label": "Social links" },
+        }}
+      />
+    );
+    // Due to the fact that the social links are rendered for both mobile and desktop the length is doubled
+    const sections = screen.queryAllByRole("region");
+    expect(sections).toHaveLength(2);
+    expect(sections[0]).toHaveAttribute("aria-label", "Social links");
+    expect(sections[1]).toHaveAttribute("aria-label", "Social links");
+
+    const socialLinks = screen.queryAllByRole("link");
+    expect(socialLinks).toHaveLength(4);
+
+    const facebookSocialLinks = screen.queryAllByLabelText("link to facebook page");
+    expect(facebookSocialLinks).toHaveLength(2);
+
+    const linkedinSocialLinks = screen.queryAllByLabelText("link to linkedin page");
+    expect(linkedinSocialLinks).toHaveLength(2);
+  });
+
+  it("should render footer with navigation links", () => {
+    render(
+      <Footer
+        navigation={{
+          links: [
+            {
+              heading: "Section 1",
+              links: [
+                { text: "link 1", href: "https://telia.se" },
+                { text: "link 2", href: "https://telia.se" },
+              ],
+            },
+            {
+              heading: "Section 2",
+              links: [
+                { text: "link 3", href: "https://telia.se" },
+                { text: "link 4", href: "https://telia.se" },
+              ],
+            },
+          ],
+          sectionProps: { "aria-label": "Navigation links" },
+        }}
+      />
+    );
+
+    // Due to the fact that the navigation is rendered for both mobile and desktop the length is doubled
+    const sections = screen.queryAllByRole("region");
+    expect(sections).toHaveLength(2);
+    expect(sections[0]).toHaveAttribute("aria-label", "Navigation links");
+    expect(sections[1]).toHaveAttribute("aria-label", "Navigation links");
+
+    expect(screen.queryAllByRole("heading")).toHaveLength(4);
+
+    // Links in accordion are not rendered in the test
+    const links = screen.queryAllByRole("link");
+    expect(links).toHaveLength(4);
+  });
+
+  it("should render footer with payments", () => {
+    render(
+      <Footer
+        payments={{
+          images: [
+            {
+              src: "https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg",
+              alt: "MasterCard",
+            },
+            {
+              src: "https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg",
+              alt: "Visa",
+            },
+          ],
+          sectionProps: { "aria-label": "Payment methods available in Telia" },
+        }}
+      />
+    );
+
+    const sections = screen.getByRole("region");
+    expect(sections).toBeInTheDocument();
+    expect(sections).toHaveAttribute("aria-label", "Payment methods available in Telia");
+
+    const paymentImages = screen.queryAllByRole("img");
+    expect(paymentImages).toHaveLength(2);
+
+    expect(screen.getByAltText("MasterCard")).toBeInTheDocument();
+    expect(screen.getByAltText("Visa")).toBeInTheDocument();
+  });
+
+  it("should render footer with contacts", () => {
+    render(
+      <Footer
+        contacts={{
+          copyright: "© Telia Company 2024",
+          address: {
+            content: (
+              <>
+                Address line 1 <br />
+                Address line 2 <br />
+                Address line 3 <br />
+                Org number
+              </>
+            ),
+            addressProps: { "aria-label": "Telia Company address" },
+          },
+          sectionProps: { "aria-label": "Contact information" },
+        }}
+      />
+    );
+
+    const sections = screen.getByRole("region");
+    expect(sections).toBeInTheDocument();
+    expect(sections).toHaveAttribute("aria-label", "Contact information");
+
+    expect(screen.getByText("© Telia Company 2024")).toBeInTheDocument();
+
+    const address = document.querySelector("address");
+    expect(address).toHaveTextContent("Address line 1 Address line 2 Address line 3 Org number");
+  });
+
+  it("should render footer with legal links", () => {
+    render(
+      <Footer
+        legal={{
+          links: [{ text: "link 1", href: "https://telia.se", target: "_blank" }],
+          sectionProps: {
+            "aria-label": "Legal links",
+          },
+        }}
+      />
+    );
+
+    const sections = screen.getByRole("region");
+    expect(sections).toBeInTheDocument();
+
+    const links = screen.getByRole("link");
+    expect(links).toBeInTheDocument();
+    expect(links).toHaveTextContent("link 1");
+    expect(links).toHaveAttribute("href", "https://telia.se");
+    expect(links).toHaveAttribute("target", "_blank");
+  });
+
+  it("should render footer with additional content", () => {
+    render(
+      <Footer
+        additional={{
+          content: <div data-testid="additional-content">Additional content</div>,
+          sectionProps: { "aria-label": "Additional content section" },
+        }}
+      />
+    );
+
+    const sections = screen.getByRole("region");
+    expect(sections).toBeInTheDocument();
+
+    expect(screen.getByTestId("additional-content")).toBeInTheDocument();
+    expect(screen.getByTestId("additional-content")).toHaveTextContent("Additional content");
+  });
+});

package/src/footer.tsx

@@ -0,0 +1,202 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+import { Grid } from "@purpurds/grid";
+import { Link, LinkProps } from "@purpurds/link";
+import c from "classnames/bind";
+
+import { rootClassName } from "./constants";
+import styles from "./footer.module.scss";
+import {
+  CustomLinkType,
+  FooterNavigation,
+  FooterNavigationItem,
+  FooterNavigationItemLink,
+} from "./footer-navigation.tsx";
+import { FooterSocialLink, FooterSocialLinkProps } from "./footer-social-link.tsx";
+import { DataAttributes } from "./types";
+const cx = c.bind(styles);
+
+type LegalLink = FooterNavigationItemLink &
+  Omit<LinkProps, "href" | "variant" | "negative" | "children">;
+
+export type FooterProps = DataAttributes &
+  HTMLAttributes<HTMLElement> & {
+    className?: string;
+    /**
+     * Navigation section of the footer.
+     */
+    navigation?: {
+      customLink?: CustomLinkType;
+      links: FooterNavigationItem[];
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+    /**
+     * Social links section of the footer.
+     */
+    social?: {
+      links: FooterSocialLinkProps[];
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+    /**
+     * Contacts section of the footer.
+     */
+    contacts?: {
+      copyright?: string;
+      address?: {
+        content: ReactElement;
+        addressProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+      };
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+    /**
+     * Legal links section of the footer.
+     */
+    legal?: {
+      links: LegalLink[];
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+    /**
+     * Additional content section of the footer.
+     */
+    additional?: {
+      content: ReactElement;
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+    /**
+     * Payment images section of the footer.
+     */
+    payments?: {
+      images: { src: string; alt: string }[];
+      sectionProps?: DataAttributes & HTMLAttributes<HTMLElement>;
+    };
+  };
+
+export const Footer = ({
+  className,
+  navigation,
+  social,
+  contacts,
+  legal,
+  additional,
+  payments,
+  ...props
+}: FooterProps) => {
+  const classes = cx([className, rootClassName]);
+
+  return (
+    <footer {...props} className={classes}>
+      <Grid>
+        <div className={cx(`${rootClassName}__container`)}>
+          <div className={cx(`${rootClassName}__logo`)}>
+            <img
+              src="https://cdn.voca.teliacompany.com/logo/Telia-secondary-default-v2.svg"
+              alt="Telia logo"
+              role="presentation"
+            />
+          </div>
+          {social && (
+            <section
+              {...social.sectionProps}
+              className={cx(
+                `${rootClassName}__social`,
+                `${rootClassName}__social--md`,
+                social.sectionProps?.className
+              )}
+            >
+              {social.links.map(({ icon, href, ...props }, i) => (
+                <FooterSocialLink {...props} icon={icon} href={href} key={i} />
+              ))}
+            </section>
+          )}
+          {navigation && (
+            <FooterNavigation
+              customLink={navigation.customLink}
+              navigationLinks={navigation.links}
+              sectionProps={navigation.sectionProps}
+            />
+          )}
+          {payments && (
+            <section
+              {...payments.sectionProps}
+              className={cx(`${rootClassName}__payments`, payments.sectionProps?.className)}
+            >
+              {payments.images.map((payment, i) => (
+                <img
+                  className={cx(`${rootClassName}__payments-image`)}
+                  src={payment.src}
+                  alt={payment.alt}
+                  key={i}
+                />
+              ))}
+            </section>
+          )}
+          {contacts && (
+            <section
+              {...contacts.sectionProps}
+              className={cx(`${rootClassName}__contacts`, contacts.sectionProps?.className)}
+            >
+              {contacts.copyright && (
+                <div className={cx(`${rootClassName}__contacts-copyright`)}>
+                  {contacts.copyright}
+                </div>
+              )}
+              {contacts.address && (
+                <address
+                  {...contacts.address.addressProps}
+                  className={cx(
+                    `${rootClassName}__contacts-address`,
+                    contacts.address.addressProps?.className
+                  )}
+                >
+                  {contacts.address.content}
+                </address>
+              )}
+            </section>
+          )}
+          {(additional || legal) && (
+            <div className={cx(`${rootClassName}__legal`)}>
+              {additional && (
+                <section
+                  {...additional.sectionProps}
+                  className={cx(
+                    `${rootClassName}__additional-content`,
+                    additional.sectionProps?.className
+                  )}
+                >
+                  {additional.content}
+                </section>
+              )}
+              {legal && (
+                <section
+                  {...legal.sectionProps}
+                  className={cx(`${rootClassName}__legal-links`, legal.sectionProps?.className)}
+                >
+                  {legal?.links?.map(({ href, text, ...props }, i) => (
+                    <Link {...props} variant="standalone" negative href={href} key={i}>
+                      {text}
+                    </Link>
+                  ))}
+                </section>
+              )}
+            </div>
+          )}
+          {social && (
+            <section
+              {...social.sectionProps}
+              className={cx(
+                `${rootClassName}__social`,
+                `${rootClassName}__social--sm`,
+                social.sectionProps?.className
+              )}
+            >
+              {social.links.map(({ icon, href, ...props }, i) => (
+                <FooterSocialLink {...props} icon={icon} href={href} key={i} />
+              ))}
+            </section>
+          )}
+        </div>
+      </Grid>
+    </footer>
+  );
+};
+
+Footer.displayName = "Footer";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/types.ts

@@ -0,0 +1,5 @@
+// TODO: move to reusable package, once decided where it should be placed
+
+export type DataAttributes = {
+  [key: `data-${string}`]: string;
+};