chore: update headings (#5503)

* cleanup headings

Author: timarney

app/(gcforms)/[locale]/(app administration)/admin/(no nav)/typography/page.tsx

@@ -17,12 +17,12 @@ export default async function Page() {
         <p className="mb-4 font-lato">
           <strong>Heading font</strong>: Lato
         </p>
-        <h1>H1 Heading (small: 34px, bold; large: 38px bold;)</h1>
-        <h2>H2 Heading (small: 32px, bold; large: 36px bold;)</h2>
-        <h3>H3 Heading (small: 24px, bold; large: 24px bold;)</h3>
-        <h4>H4 Heading (small: 22px, bold; large: 22px bold;)</h4>
-        <h5>H5 Heading (small: 20px, bold; large: 20px bold;)</h5>
-        <h6>H6 Heading (small: 19px, normal; large: 19px normal;)</h6>
+        <h1>H1 Heading</h1>
+        <h2>H2 Heading</h2>
+        <h3>H3 Heading</h3>
+        <h4>H4 Heading</h4>
+        <h5>H5 Heading</h5>
+        <h6>H6 Heading</h6>
       </div>
 
       <Heading title="Form builder + Admin" />
@@ -31,11 +31,11 @@ export default async function Page() {
         <strong>Heading font</strong>: Noto Sans
       </p>
 
-      <h1>H1 Heading (font-semibold small: text-3xl large: text-4xl)</h1>
-      <h2>H2 Heading (font-semibold small: text-2xl large: text-3xl)</h2>
-      <h3>H3 Heading (font-semibold small: text-xl large: text-2xl)</h3>
-      <h4>H4 Heading (font-semibold small: text-lg large: text-xl)</h4>
-      <h5>H5 Heading (font-normal small: text-base large: text-lg)</h5>
+      <h1>H1 Heading</h1>
+      <h2>H2 Heading</h2>
+      <h3>H3 Heading</h3>
+      <h4>H4 Heading</h4>
+      <h5>H5 Heading</h5>
 
       <Heading title="Text sizes" />
       <p className="text-xs">text-xs</p>

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/Preview.tsx

@@ -9,6 +9,7 @@ import { FormProperties, PublicFormRecord } from "@lib/types";
 import { RichText } from "@clientComponents/forms";
 import { ClosingNotice } from "@clientComponents/forms/ClosingNotice/ClosingNotice";
 import { GcdsH1 } from "@serverComponents/globals/GcdsH1";
+import { GcdsHeader } from "@serverComponents/globals/GcdsHeader/GcdsHeader";
 
 import {
   FormServerErrorCodes,
@@ -93,6 +94,8 @@ export const Preview = ({
 
   const brand = formRecord?.form ? formRecord.form.brand : null;
 
+  const hasCustom = brand?.logoEn && brand?.logoFr;
+
   const hasHydrated = useRehydrate();
 
   if (isPastClosingDate) {
@@ -152,10 +155,14 @@ export const Preview = ({
           </>
         )}
 
-        <div className="gc-formview">
-          <div className="mb-20 mt-0 border-b-4 border-blue-dark py-9">
-            <Brand brand={brand} lang={language} className="max-w-[360px]" />
-          </div>
+        <div className="gc-formview gc-form-preview-header">
+          {hasCustom ? (
+            <div className="mb-20 mt-0 border-b-1 border-[var(--gcds-header-brand-border-color)] py-9 ">
+              <Brand brand={brand} lang={language} className="max-w-[360px] " />
+            </div>
+          ) : (
+            <GcdsHeader pathname={""} language={language} showLanguageToggle={false} />
+          )}
         </div>
 
         {sent ? (

app/(gcforms)/[locale]/(support)/support/components/client/SupportForm.tsx

@@ -103,7 +103,7 @@ export const SupportForm = () => {
           )}
 
           <GcdsH1>{t("support.title")}</GcdsH1>
-          <p className="-mt-8 mb-6">
+          <p className="mb-6">
             {t("support.experience")}
             <Link href={`https://articles.alpha.canada.ca/forms-formulaires/${language}/guidance`}>
               {t("support.guidanceLink")}

app/(gcforms)/[locale]/(support)/support/page.tsx

@@ -16,5 +16,9 @@ export async function generateMetadata(props: {
 }
 
 export default async function Page() {
-  return <SupportForm />;
+  return (
+    <div className="gc-formview">
+      <SupportForm />
+    </div>
+  );
 }

components/clientComponents/forms/Form/Form.tsx

@@ -181,7 +181,7 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
               isShowReviewPage &&
               currentGroup !== LockedSections.REVIEW &&
               currentGroup !== LockedSections.START && (
-                <h2 className="pb-8" tabIndex={-1} ref={groupsHeadingRef}>
+                <h2 tabIndex={-1} ref={groupsHeadingRef}>
                   {getGroupTitle(currentGroup, language as Language)}
                 </h2>
               )}

components/clientComponents/globals/Alert/Alert.tsx

@@ -36,7 +36,7 @@ export const Title = ({
   return (
     <HeadingTag
       data-testid="alert-heading"
-      className={cn("!mb-0 pb-0", headingClasses[HeadingTag], statusClass, className)}
+      className={cn("!mb-0 pb-0 !mt-0", headingClasses[HeadingTag], statusClass, className)}
     >
       {children}
     </HeadingTag>

components/clientComponents/globals/layouts/FormDisplayLayout.tsx

@@ -36,7 +36,10 @@ const FormDisplayHeader = ({
 
   return (
     <header>
-      <Fip formRecord={formRecord} className="mb-20 mt-0 border-b-4 border-blue-dark py-9">
+      <Fip
+        formRecord={formRecord}
+        className="mb-20 mt-0 border-b-1 border-[var(--gcds-header-brand-border-color)] py-9"
+      >
         <LanguageToggle />
       </Fip>
     </header>

components/serverComponents/globals/GcdsH1.tsx

@@ -10,13 +10,7 @@ export const GcdsH1 = ({
   className?: string;
 }) => {
   return (
-    <h1
-      tabIndex={tabIndex || -1}
-      className={cn(
-        "relative !mb-12 inline-block border-none after:absolute after:-bottom-1 after:left-0 after:h-[var(--gcds-heading-h1-border-height)] after:w-[var(--gcds-heading-h1-border-width)] after:bg-[var(--gcds-heading-h1-border-background)] after:content-['']",
-        className
-      )}
-    >
+    <h1 tabIndex={tabIndex || -1} className={cn(className)}>
       {children}
     </h1>
   );

styles/_gc-header.scss

@@ -2,7 +2,6 @@
 @import "../node_modules/@cdssnc/gcds-tokens/build/web/css/components/lang-toggle.css";
 @import "../node_modules/@cdssnc/gcds-tokens/build/web/css/components/signature.css";
 
-
 .gcds-header__brand {
   container: component brand / inline-size;
   border-block-end: var(--gcds-header-brand-border-width) solid
@@ -34,8 +33,7 @@
       display: grid;
       grid-gap: var(--gcds-header-brand-grid-gap);
       grid-template-columns: 1fr 0.1fr;
-      grid-template-areas:
-        "signature toggle";
+      grid-template-areas: "signature toggle";
       width: 90%;
       max-width: var(--gcds-header-container-max-width);
       margin: 0 auto;
@@ -138,3 +136,11 @@
     font-weight: 700;
   }
 }
+
+
+/* Override for Preview header  */
+.gc-form-preview-header {
+  .brand__container {
+    width: 100%;
+  }
+}

styles/_typography.scss

@@ -4,27 +4,23 @@
     @apply text-base leading-7 text-slate-800;
   }
 
-  h1,
-  .gc-h1 {
+  h1 {
     @apply text-3xl tablet:text-4xl font-semibold mb-6;
   }
 
-  h2,
-  .gc-h2 {
+  h2 {
     @apply text-2xl tablet:text-3xl font-semibold mb-4;
   }
 
-  h3,
-  .gc-h3 {
+  h3 {
     @apply text-xl tablet:text-2xl font-semibold mb-2;
   }
 
-  h4,
-  .gc-h4 {
+  h4 {
     @apply text-lg tablet:text-xl font-semibold;
   }
 
-  h5 .gc-h5 {
+  h5 {
     @apply text-base tablet:text-lg font-normal;
   }
 
@@ -36,69 +32,18 @@
     }
 
     @apply text-xl text-gray-front;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-variant-ligatures: no-common-ligatures;
-      -webkit-font-smoothing: antialiased;
-      @apply font-lato font-bold;
-    }
-
-    h1,
-    .gc-h1 {
-      @apply border-b border-red pb-2 mb-16 text-[34px] tablet:text-[38px];
-    }
-
-    h2,
-    .gc-h2 {
-      @apply mb-6 text-[32px] tablet:text-[36px];
-    }
-
-    h3,
-    .gc-h3 {
-      @apply mb-6 text-[24px];
-    }
-
-    h4,
-    .gc-h4 {
-      @apply mb-4 text-[22px];
-    }
-
-    h5,
-    .gc-h5 {
-      @apply text-[20px];
-    }
-
-    h6,
-    .gc-h6 {
-      @apply text-[19px] font-normal;
-    }
   }
 
   .gc-authpages {
-    h1,
-    .gc-h1 {
+    h1 {
       @apply border-b-0 pb-2 mb-12;
     }
   }
 }
 
-.gcds-page {
-  /* ----- Default GCDS typography styles ----- */
-  body {
-    font: var(--gcds-font-text);
-  }
-
-  @media only screen and (width < 48em) {
-    body {
-      font: var(--gcds-font-text-mobile);
-    }
-  }
-
+// Headings
+.gcds-page,
+.gc-formview {
   h1,
   h2,
   h3,
@@ -192,6 +137,19 @@
       font: var(--gcds-heading-h6-mobile);
     }
   }
+}
+
+.gcds-page {
+  /* ----- Default GCDS typography styles ----- */
+  body {
+    font: var(--gcds-font-text);
+  }
+
+  @media only screen and (width < 48em) {
+    body {
+      font: var(--gcds-font-text-mobile);
+    }
+  }
 
   p {
     max-width: var(--gcds-text-character-limit);