How to change the the label of the footer links

[UncleZen]

Is there a way to change the labels of contact, privacy, and terms link in the footer?

[arcdev1]

The short answer is no. You can change the URL and ask it to open in a new window. But the labels are set by CDTS which follows the Government of Canada Guidelines.

Here's a reference to the props for changing the URL and asking for it to open in a new window. You can pass these props to the AppTemplate component:

https://github.com/arcnovus/wet-booew-x/blob/122449559f4de0ea3b0b2a19fd89bbf7707a7329/packages/wet-boew-utils/src/index.ts#L51-L53

The longer answer is that you can always create a different template with your own custom footer by making a copy of AppTemplate.tsx and omitting the AppFooter entirely in favour of your own. If you do this, you will want to ensure that you are not violating any Government of Canada Guidelines. Talk to the comms or accessbility folks in your department/agency and make sure it's okay. Here's an untested example:

// CustomFooter.tsx

export interface CustomFooterProps {
  contactLink: {
    label: string,
    href: string,
  },
  privacyLink: {
    label: string,
    href: string,
  },
  termsLink: {
    label: string,
    href: string,
  }
}

// TODO: Handle translations for the invisible and alt text (right now, it's hard coded as english).
export default function CustomFooter({contactLink, privacyLink, termsLink}: CustomFooterProps) {
return (
<footer id="wb-info">
  <div className="brand">
    <div className="container">
      <div className="row">
        <nav className="col-md-10 ftr-urlt-lnk">
          <h2 className="wb-inv">About this Web application</h2>
          <ul>
            <li><a href={contactLink.href}>{contactLink.label}</a></li>
            <li><a href={termsLink.href}>{termsLink.label}</a></li>
            <li><a href={privacyLink.href}>{privacyLink.label}</a></li>
          </ul>
        </nav>
        <div className="col-xs-6 visible-sm visible-xs tofpg">
          <a href="#wb-cont">Top of Page
            <span className="glyphicon glyphicon-chevron-up"></span>
          </a>
        </div>
        <div className="col-xs-6 col-md-3 col-lg-2 text-right">
         <img src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/assets/wmms-blk.svg" alt="Symbol of the Government of Canada">
        </div>
      </div>
    </div>
  </div>
</footer>
)}

// CustomTemplate.tsx (code copied and modified from AppTemplate.tsx)

import CustomFooter, {CustomFooterProps} from "./CustomFooter"
import { PropsWithChildren, useLayoutEffect, useMemo, useState } from "react";
import {
  RefTop,
  AppTop,
  PreFooter,
  RefFooter,
  useLanguage,
} from "..";
import { computeLngLinks } from "@arcnovus/wet-boew-utils";
import {
  AfterCdts,
  AppFooterProps,
  AppTopProps,
  PreFooterProps,
  RefFooterProps,
  RefTopProps,
} from "../cdts";
import { Main } from "../layout";
import { useLngLinks } from "../language";

export type AppTemplateProps = PropsWithChildren<
  Omit<RefTopProps, "isApplication"> &
    AppTopProps &
    PreFooterProps &
    CustomFooterProps &
    RefFooterProps
>;

export function CustomTemplate({
  children,
  lngLinks,
  ...props
}: AppTemplateProps) {
  const languageToggle = useLngLinks({ lngLinks });

  return (
    <>
      <RefTop {...props} isApplication={true} />
      <AppTop {...props} lngLinks={languageToggle.lngLinks} />
      <Main>
        <AfterCdts>{children}</AfterCdts>
        <PreFooter {...props} />
      </Main>
      <CustomFooter {...props} />
      <RefFooter {...props} isApplication={true} />
    </>
  );
}

[UncleZen]

@arcdev1 Thank you very much for such a detailed answer!

[arcdev1]

@arcdev1 Thank you very much for such a detailed answer!

No worries. If you are wondering where I got the HTML for the footer, I went to the CDTS Example page and used "Inspect Element/View Source" in my browser to copy their HTML and modify it.