template props

[prosperva]

Is there a specific prop to pass to DefaultTemplate to achieve this template where some sections extend out: https://www.nrcan.gc.ca/home. One of the extended out section is the Featured section.

I was able to find the class that allows this: gc-instttn but wondering how it gets passed.

Thanks

[arcdev1]

😞 Turns out this is difficult because of a bug (#34).

I will add the fix to v2 (it's a breaking change :cry:). In the meantime...

The workaround is to create your own custom template that uses a regular <main> tag. The code is below, BUT it means that you will need to wrap any non-full-width content with a <Container>.

Custom Template Component

/* eslint-disable react/no-unknown-property */
import { PropsWithChildren } from "react";
import {
  RefTopProps,
  TopProps,
  PreFooterProps,
  FooterProps,
  RefFooterProps,
  RefTop,
  Top,
  PreFooter,
  Footer,
  RefFooter,
  AfterCdts,
  useLngLinks,
  Container,
} from "@arcnovus/wet-boew-react";

export type CustomTemplateProps = PropsWithChildren<
  Omit<RefTopProps, "isApplication"> &
    TopProps &
    PreFooterProps &
    FooterProps &
    RefFooterProps
>;

export default function CustomTemplate({
  children,
  lngLinks,
  ...props
}: CustomTemplateProps) {
  const languageToggle = useLngLinks({ lngLinks });
  return (
    <>
      <RefTop {...props} isApplication={false} />
      <Top {...props} lngLinks={languageToggle.lngLinks} />
      <main
        property="mainContentOfPage"
        resource="#wb-main"
        typeof="WebPageElement"
        {...props}
      >
        <AfterCdts>{children}</AfterCdts>
        <Container>
          <PreFooter {...props} />
        </Container>
      </main>
      <Footer {...props} />
      <RefFooter {...props} isApplication={false} />
    </>
  );
}

Page with Full Width Content

import { Container, DefaultTemplate, Row } from "@arcnovus/wet-boew-react";
import CustomTemplate from "../../components/CustomTemplate";

export default function FeaturedAndMostRequested() {
  return (
    <CustomTemplate>
      <Container>
        <h1>Featured and Most Requested</h1>
      </Container>
      <div
        className="opct-90"
        style={{
          marginBottom: "0em",
          paddingTop: "20px",
          paddingBottom: "20px",
          background: "#31708f",
        }}
      >
        <Container>
          <Row>
            <div className="mrgn-tp-md mrgn-bttm-md col-xs-12">
              <p className="pull-left mrgn-bttm-0 text-white mrgn-rght-sm">
                Featured:
              </p>
              <p className="pull-left mrgn-bttm-0">
                <a
                  className="stretched-link text-white"
                  href="https://www.nrcan.gc.ca/simply-science/hope-climate-change-canadas-arctic-ocean/22831"
                >
                  Simply Science - Hope for Climate Change From Canadas Arctic
                  Ocean
                </a>
              </p>
            </div>
          </Row>
        </Container>
      </div>
      <Container>Constrained content here</Container>
      <div
        className="most-requested well well-sm brdr-0"
      >
        <Container>Full width content here.</Container>
      </div>
    </CustomTemplate>
  );
}

[prosperva]

Thanks for this @arcdev1. I will try it out.

[arcdev1]

Thanks for this @arcdev1. I will try it out.

Feel free to come back if there are any issues and I will re-open with additional support 😄

[prosperva]

I think my next one is the tabs which I saw you created an issue for.

It is one component we are looking for.

[arcdev1]

I think my next one is the tabs which I saw you created an issue for. It is one component we are looking for.

Tabs will be in the full release of v2 for sure. But keep in mind that you have access to all the WET CSS as long as your app is wrapped in the <WetProvider> so if you ever need a component that hasn't been built yet, you can just follow the examples in the wet style guide and replace class=... with className=...

So, something like this would probably work (not tested).

<div className="wb-tabs">
  <div className="tabpanels">
    <details id="details-panel1">
      <summary>Example 1</summary>
        <p>
          ...
        </p>
      </details>
      <details id="details-panel2" open="open">
        <summary>Example 2</summary>
        <p>
          ...
        </p>
     </details>
        ...
  </div>
</div>

[prosperva]

Hi @arcdev1

I am running into this issue:

export 'AfterCdts' (imported as 'AfterCdts') was not found in '@arcnovus/wet-boew-react' (possible exports: Alert, AlertLink, AppFooter, AppSecMenuTemplate, AppTemplate, AppTop, CdtsProvider, Column, Container, DataTable, DefaultSecMenuTemplate, DefaultTemplate, Footer, H1, H2, H3, H4, H5, H6, Heading, Language, Main, Nav, PageTitle, PreFooter, RefFooter, RefTop, Row, SecMenu, SplashContent, SplashTemplate, SplashTop, Table, Top, WetProvider, useLanguage, useLngLinks, useWetComponent)

[arcdev1]

Hmmm ... what version of @arcnovus/wet-boew-react are you using? I believe 2.0.0-beta.0 has this exported.

[arcdev1]

It looks like AfterCdts was added in February by commit: dd18476b6cb12e8ca2f6a7edb0f2ac256abdd7b8

[prosperva]

I updated to 2.0.0-beta.0 and it worked. Thanks

[prosperva]

But top menu is constrained

[arcdev1]

But top menu is constrained

Can you provide a screenshot ... not sure what you mean.

[prosperva]

Old image

[prosperva]

The government of Canada banner and the PreFooter are not playing nice. I tried moving them in the main but it does not work.

[arcdev1]

The government of Canada banner and the PreFooter are not playing nice. I tried moving them in the main but it does not work.

I see. Those come from the CDTS provided by ESDC and cannot and really should not be changed. The HTML is actually coming from the ESDC servers.

I also recommend against making the main content (the title and the map) stretch across the whole screen like that. The NRCan example just has a full-width background which is fine, but the actual content should be constrained.

[prosperva]

Makes sense not to change them. Our designer gave us this site (https://atlas.gc.ca/critical-minerals/en/index.html) as an example

[arcdev1]

Makes sense not to change them. Our designer gave us this site (https://atlas.gc.ca/critical-minerals/en/index.html) as an example

Yikes! That example really breaks GC standards. Not sure why/how they were able to get away with that. Technically all public facing Government websites need to be accessible from https://canada.ca so it's critical that the header and footer remain consistent.

[prosperva]

Thanks for your suggestions. I will pass them to the designer.

[prosperva]

Is there a way to disable/remove search?

[arcdev1]

@prosperva please refer your designer to section 11 of the Technical specifications for the Web and mobile presence

The pixel measurements and positions in the following layout specifications are relative to the inner and outer boundaries. These are 960 pixels for the inner width and 100% of the screen's width for the outer width.

According to Treasury Board Policy all Government of Canada websites MUST adhere to these specifications.

[arcdev1]

Is there a way to disable/remove search?

Yes. Pass "search={false}" <DefaultTemplate search={false}>