feat!: Add FlagCard & DefaultCard and implement FlagCard in DataCatalog (#1479)

**Related Ticket:** #1453
**Related PRs:** NASA-IMPACT/next-veda-ui#52

https://deploy-preview-1479--veda-ui.netlify.app/data-catalog
https://deploy-preview-1479--veda-ui.netlify.app/sandbox/cards

### Description of Changes
* Added a `BaseCard` component where `FlagCard` and `DefaultCard` extend
off of
   * BaseCard Attributes to be used across cards
* Created Fork of `CatalogContent` where we can start migrating
components over to USWDS and renamed old one to `CatalogContentLegacy`.
   * This is FF
* Updated ** - Exposed `CatalogContent` instead of `CatalogView`,
updates reflected in connected NextJs PR
* Added `Tags` component from USWDS
* Added draft documentation of the components we are starting to expose
from the library with props, I created this for now because we gotta
start documenting this somewhere but we can figure out where and how
best to document later
* Added both card types to `/sandbox/cards` because right now we dont
have a storybook(esque) implemented but right now, it looked like a fine
enough place to showcase

**What this doesn't do:**
* DataSelectorModal isn't updated but uses the old view, @faustoperez
will work on the designs for that so a separate ticket will follow
* Card Accessibility states to be implemented as part of this ticket
#1481

### Notes & Questions About Changes
* `FlagCard` and `DefaultCard` can be exposed as is, if exposed as is,
they dont have the wrapping routing logic wrapped around it which makes
it behave as a button. If the wrapping routing logic is wanted. The
`Card` Component which is our wrapper to support current routing logic
could be exposed and used where type `FLAG-LAYOUT` would be passed in.
Users can decide.

### Validation / Testing
* Validate that the Feature Flagging works `ENABLE_USWDS_DATA_CATALOG`
* Validate when enabled...
   * DataCatalog Cards look correct
   * Entire card behaves like a button
   * The Card routes correctly
* Validate that the DataSelectorModal is still the same as originally
since nothing should have changed with its look or behavior

_____
  Self Validation Loom Walkthrough (recommended to watch @1.5x)

https://www.loom.com/share/c52aa4227651422dbac9554a744f2aa8?sid=3ac71fca-189f-42ce-856c-0104ee6703c7

Author: sandrahoang686

.env

@@ -14,9 +14,11 @@ GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f
 
 SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
 
-# Enables the refactor page header component that uses the USWDS design system
+# USWDS FEATURE FLAGS
 ENABLE_USWDS_PAGE_HEADER = 'TRUE'
-# Enables the refactor page footer component that uses the USWDS design system
 ENABLE_USWDS_PAGE_FOOTER = 'TRUE'
+ENABLE_USWDS_DATA_CATALOG = 'TRUE'
+
+
 # Enables the display of Cookie consent form
 ENABLE_COOKIE_CONSENT_FORM = 'TRUE'

app/scripts/components/common/card/index.tsx

@@ -11,6 +11,8 @@ import ClassicCard, { ClassicCardItem } from './classic';
 import CoverCard, { CoverCardItem } from './cover';
 import FeaturedCard, { FeaturedCardItem } from './featured';
 import HorizontalInfoCard, { HorizontalInfoCardItem } from './horizontal-info';
+import FlagCard from './uswds-cards/flag-card';
+import { LabelType } from './uswds-cards/types';
 import { LinkProperties } from '$types/veda';
 import * as utils from '$utils/utils';
 import { ElementInteractive } from '$components/common/element-interactive';
@@ -27,7 +29,8 @@ export enum CardType {
   CLASSIC = 'classic',
   COVER = 'cover',
   FEATURED = 'featured',
-  HORIZONTALINFO = 'horizontal-info'
+  HORIZONTALINFO = 'horizontal-info',
+  FLAG = 'flag'
 }
 
 export interface CardItemProps {
@@ -52,6 +55,7 @@ interface BaseCardComponentProps {
   footerContent?: JSX.Element;
   hideExternalLinkBadge?: boolean;
   onCardClickCapture?: MouseEventHandler;
+  cardLabel?: LabelType;
 }
 
 interface LinkCardComponentProps extends BaseCardComponentProps {
@@ -191,7 +195,26 @@ export default function CardComponent(
           tagLabels={data.tagLabels}
         />
       );
+    } else if (
+      cardType === CardType.FLAG &&
+      data.imgSrc &&
+      data.imgAlt &&
+      data.description &&
+      data.footerContent
+    ) {
+      baseProps['children'] = (
+        <FlagCard
+          imgSrc={data.imgSrc}
+          imgAlt={data.imgAlt}
+          heading={data.title}
+          description={data.description}
+          footer={data.footerContent}
+          cardLabel='data_collection'
+        />
+      );
+      baseProps['style'] = { width: '100%' };
     }
+
     return baseProps;
   };
 

app/scripts/components/common/card/uswds-cards/default-card.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardProps } from './types';
+import BaseCard from '.';
+
+export default function DefaultCard(props: CardProps) {
+  const defaultGridLayout = props.gridLayout
+    ? props.gridLayout
+    : { desktop: { col: 3 } };
+  return <BaseCard {...props} gridLayout={defaultGridLayout} />;
+}

app/scripts/components/common/card/uswds-cards/flag-card.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CardProps } from './types';
+import BaseCard from '.';
+
+type FlagCardProps = CardProps & {
+  layout?: 'flagDefault' | 'flagMediaRight';
+};
+
+export default function FlagCard(props: FlagCardProps) {
+  const defaultLayout = props.layout ? props.layout : 'flagDefault';
+  const defaultGridLayout = props.gridLayout
+    ? props.gridLayout
+    : { desktop: { col: 12 } }; // Full Width
+  return (
+    <BaseCard
+      {...props}
+      layout={defaultLayout}
+      gridLayout={defaultGridLayout}
+    />
+  );
+}

app/scripts/components/common/card/uswds-cards/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CardProps } from './types';
+import { createCardLabel } from './utils';
+import {
+  USWDSCardComponent,
+  USWDSCardBody,
+  USWDSCardFooter,
+  USWDSCardHeader,
+  USWDSCardMedia
+} from '$uswds';
+import './styles.scss';
+
+// @TODO: Implement overrideable Card Acessibility States
+
+function isString(value: string | JSX.Element): boolean {
+  return typeof value === 'string';
+}
+
+export default function BaseCard({
+  layout,
+  imgSrc,
+  imgAlt,
+  heading,
+  description,
+  footer,
+  gridLayout,
+  cardLabel
+}: CardProps) {
+  const defaultHeaderClassNames = 'usa-card__heading card-header';
+  const defaultBodyClassNames = 'font-body-xs';
+
+  return (
+    <USWDSCardComponent layout={layout} gridLayout={gridLayout}>
+      <USWDSCardHeader>
+        {isString(heading) ? (
+          <h2 className={defaultHeaderClassNames}>{heading}</h2>
+        ) : (
+          heading
+        )}
+      </USWDSCardHeader>
+      <USWDSCardMedia>
+        {cardLabel && (
+          <div style={{ position: 'absolute', padding: '15px' }}>
+            {createCardLabel(cardLabel)}
+          </div>
+        )}
+        <img src={imgSrc} alt={imgAlt} />
+      </USWDSCardMedia>
+      <USWDSCardBody>
+        {isString(description) ? (
+          <p className={defaultBodyClassNames}>{description}</p>
+        ) : (
+          description
+        )}
+      </USWDSCardBody>
+      <USWDSCardFooter>{footer}</USWDSCardFooter>
+    </USWDSCardComponent>
+  );
+}

app/scripts/components/common/card/uswds-cards/styles.scss

@@ -0,0 +1,9 @@
+@use '$styles/veda-ui-theme-vars.scss' as themeVars;
+
+.usa-card {
+  margin-bottom: 0;
+}
+
+.card-header {
+  color: themeVars.$veda-uswds-color-base-ink;
+}

app/scripts/components/common/card/uswds-cards/types.ts

@@ -0,0 +1,12 @@
+export type LabelType = 'data_collection' | 'story';
+
+export interface CardProps {
+  layout?: string;
+  heading: string | JSX.Element;
+  footer: JSX.Element;
+  imgSrc: string;
+  imgAlt: string;
+  description: string | JSX.Element;
+  gridLayout?: any;
+  cardLabel?: LabelType;
+}

app/scripts/components/common/card/uswds-cards/utils.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { LabelType } from './types';
+import { Tags } from '$components/common/tags';
+import Collection from '$components/common/svgs/collection';
+
+const mapper = {
+  data_collection: {
+    title: 'Data Collection',
+    svg: <Collection size='sm' />
+  },
+  story: {
+    title: 'Story',
+    svg: <Collection size='sm' /> // TO BE REPLACED
+  }
+};
+
+export const createCardLabel = (type: LabelType): JSX.Element => {
+  const item = mapper[type];
+
+  return <Tags icon={item.svg} items={[item.title]} />;
+};