fix: Remove built in wrapper for React SSR react components

[ethanWallace]

Summary | Résumé

Remove built in GcdsWrapper from react components provided from @cdssnc/gcds-components-react-ssr to allow more flexible rendering. The GcdsWrapper will now have to be imported along with the components. Also solves issue with using className on the react components.

Usage

Example of how to use the GcdsWrapper with the GC Design System components

import {
  GcdsHeader,
  GcdsSearch
} from "@cdssnc/gcds-components-react-ssr";
import { GcdsWrapper } from '@cdssnc/gcds-components-react-ssr/client'
import React, { FC } from "react";

export const Header: FC = () => {
  return (
    <GcdsWrapper>
      <GcdsHeader langHref={langToggleHref} skipToHref="#">
        <GcdsSearch
          action="/searchresults"
          method="post"
          name="searchbox"
          searchId="searchbox"
          placeholder="Search this site"
          slot="search"
        ></GcdsSearch>
      </GcdsHeader>
    </GcdsWrapper>
  );
};

[ethanWallace]

@daine Finally figured out why the build was not working in our workflows, should be good to review now.

[daine]

Thanks for this work @ethanWallace 🌟

Just a few things I've run into:

1. At the moment I'm not sure what's the difference between wrapping the GcdsWrapper around my gcds-components. Running in dev mode doesn't show any difference, it runs just fine without it? I could have missed something. 🤔
2. Removing our automatic wrapping certainly helps with adding non-gcds components inside gcds components. I can now create custom components for example <TopNav> to encapsulate all my top navigation code and use that within `GcdsHeader. Awesome! 👏
3. 🥺 Still getting that issue with className, but only with typecript and npm run build (linting and type validation). It runs fine on dev mode but it won't build. The IDE also complains with the same error message:

./app/components/layout/Header.tsx:81:43
Type error: Type '{ children: Element[]; href: string; slot: string; className: string; }' is not assignable to type 'IntrinsicAttributes & Partial<EnumsToStringLiterals<GcdsLink> & { slot: string; } & GlobalEventHandlers & { ...; }> & { ...; } & RefAttributes<...>'.
  Property 'className' does not exist on type 'IntrinsicAttributes & Partial<EnumsToStringLiterals<GcdsLink> & { slot: string; } & GlobalEventHandlers & { ...; }> & { ...; } & RefAttributes<...>'.
> 81 |       <GcdsLink href="/" slot="signature" className="d-flex align-items-center link-default">
     |

[ethanWallace]

@daine the GcdsWrapper is what allows the components to be rendered server side. Without it the components will only render client side.

[ethanWallace]

@daine I think it should be good for review now

[daine]

So I checked a few things and I think this PR is good to merge in!

• I'm able to use my own component within a Gcds component (i.e. custom PhaseBanner inside GcdsHeader
• I can use the className with a Gcds component now
• No longer getting the attribute error for boolean props (i.e. current on nav links)
• It's not part of this, but in my nextjs integration example PR I've now updated all the form components to use GcdsWrapper and it works well when I click on "view source" to show the rendered HTML with declarative shadow dom

LGTM!