@bloom-housing/ui-components 6.0.1-alpha.0 → 6.0.1-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.1...@bloom-housing/ui-components@6.0.1-alpha.2) (2022-09-29)
+
+
+* 2938/card component (#3043) ([7a4a148](https://github.com/bloom-housing/bloom/commit/7a4a14891b4c8057f27a9f95e87a00d1d7a58be8)), closes [#3043](https://github.com/bloom-housing/bloom/issues/3043)
+
+
+### BREAKING CHANGES
+
+* Renamed exported interfaces in ListingCard so as to not conflict with Card and other components
+
+* Fix code style issues with Prettier
+
+* feat: split HeadingGroup out to its own separate component
+
+* fix: simplify stories and styling for Card and HeadingGroup
+
+* remove: prototype "slotted" card component
+
+* test: fix the incorrect component name in Card
+
+Co-authored-by: Lint Action <lint-action@samuelmeuli.com>
+
+
+
+
+
+## [6.0.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.0...@bloom-housing/ui-components@6.0.1-alpha.1) (2022-09-28)
+
+
+### Features
+
+* add duplicates v2 feature ([11cd2b3](https://github.com/bloom-housing/bloom/commit/11cd2b3b4d39c69e10ca1c9a8c2c7199b4a08b6b)), closes [#3006](https://github.com/bloom-housing/bloom/issues/3006) [#2961](https://github.com/bloom-housing/bloom/issues/2961) [#3020](https://github.com/bloom-housing/bloom/issues/3020) [#3093](https://github.com/bloom-housing/bloom/issues/3093) [#2974](https://github.com/bloom-housing/bloom/issues/2974) [#2909](https://github.com/bloom-housing/bloom/issues/2909) [#2958](https://github.com/bloom-housing/bloom/issues/2958) [#2904](https://github.com/bloom-housing/bloom/issues/2904) [#2987](https://github.com/bloom-housing/bloom/issues/2987) [#2990](https://github.com/bloom-housing/bloom/issues/2990) [#2989](https://github.com/bloom-housing/bloom/issues/2989) [#2991](https://github.com/bloom-housing/bloom/issues/2991) [#2985](https://github.com/bloom-housing/bloom/issues/2985) [#2994](https://github.com/bloom-housing/bloom/issues/2994) [#2995](https://github.com/bloom-housing/bloom/issues/2995) [#2999](https://github.com/bloom-housing/bloom/issues/2999) [#2950](https://github.com/bloom-housing/bloom/issues/2950) [#2968](https://github.com/bloom-housing/bloom/issues/2968) [#2784](https://github.com/bloom-housing/bloom/issues/2784) [#2988](https://github.com/bloom-housing/bloom/issues/2988) [#3016](https://github.com/bloom-housing/bloom/issues/3016) [#3018](https://github.com/bloom-housing/bloom/issues/3018) [#3017](https://github.com/bloom-housing/bloom/issues/3017) [#3005](https://github.com/bloom-housing/bloom/issues/3005) [#3012](https://github.com/bloom-housing/bloom/issues/3012) [#3014](https://github.com/bloom-housing/bloom/issues/3014) [#3000](https://github.com/bloom-housing/bloom/issues/3000) [#3021](https://github.com/bloom-housing/bloom/issues/3021) [#3027](https://github.com/bloom-housing/bloom/issues/3027) [#3036](https://github.com/bloom-housing/bloom/issues/3036) [#3023](https://github.com/bloom-housing/bloom/issues/3023) [#3040](https://github.com/bloom-housing/bloom/issues/3040) [#3054](https://github.com/bloom-housing/bloom/issues/3054) [#3050](https://github.com/bloom-housing/bloom/issues/3050) [#483](https://github.com/bloom-housing/bloom/issues/483) [#3073](https://github.com/bloom-housing/bloom/issues/3073) [#3070](https://github.com/bloom-housing/bloom/issues/3070) [#3041](https://github.com/bloom-housing/bloom/issues/3041) [#3061](https://github.com/bloom-housing/bloom/issues/3061) [#3077](https://github.com/bloom-housing/bloom/issues/3077) [#3063](https://github.com/bloom-housing/bloom/issues/3063) [#3084](https://github.com/bloom-housing/bloom/issues/3084) [#3088](https://github.com/bloom-housing/bloom/issues/3088) [#2892](https://github.com/bloom-housing/bloom/issues/2892) [#3006](https://github.com/bloom-housing/bloom/issues/3006) [#2961](https://github.com/bloom-housing/bloom/issues/2961) [#3020](https://github.com/bloom-housing/bloom/issues/3020) [#3086](https://github.com/bloom-housing/bloom/issues/3086) [#3102](https://github.com/bloom-housing/bloom/issues/3102) [#3101](https://github.com/bloom-housing/bloom/issues/3101) [#3104](https://github.com/bloom-housing/bloom/issues/3104) [#3105](https://github.com/bloom-housing/bloom/issues/3105)
+
+
+### BREAKING CHANGES
+
+* The preference and program entities have been merged into a single entity called MultiselectQuestion
+
+* chore(release): version
+
+ - @bloom-housing/backend-core@5.1.1-alpha.8
+ - @bloom-housing/shared-helpers@5.1.1-alpha.18
+ - @bloom-housing/partners@5.1.1-alpha.20
+ - @bloom-housing/public@5.1.1-alpha.18
+ - @bloom-housing/ui-components@5.1.1-alpha.11
+
+
+
+
+
 ## [6.0.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.35...@bloom-housing/ui-components@6.0.1-alpha.0) (2022-09-28)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -10,6 +10,7 @@ export * from "./src/actions/Video"
 /* Blocks */
 export * from "./src/blocks/ActionBlock"
 export * from "./src/blocks/StatusItem"
+export * from "./src/blocks/Card"
 export * from "./src/blocks/DashBlock"
 export * from "./src/blocks/DashBlocks"
 export * from "./src/blocks/FormCard"
@@ -55,6 +56,7 @@ export * from "./src/headers/PageHeader"
 export * from "./src/headers/SiteHeader"
 export * from "./src/headers/StepHeader"
 export * from "./src/headers/Heading"
+export * from "./src/headers/HeadingGroup"
 
 /* Helpers */
 export * from "./src/helpers/capitalize"
@@ -89,6 +91,7 @@ export * from "./src/navigation/ProgressNav"
 export * from "./src/navigation/TabNav"
 export * from "./src/navigation/Tabs"
 export * from "./src/navigation/Breadcrumbs"
+export * from "./src/navigation/SideNav"
 
 /* Notifications */
 export * from "./src/notifications/AlertBox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "6.0.1-alpha.0",
+  "version": "6.0.1-alpha.2",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "2cfc84763d17fad62ed2675f85a046e05bdf91e2"
+  "gitHead": "2a2bd0fb61d7643c31d4a200b96a78d401bd0590"
 }

package/src/blocks/Card.docs.mdx

@@ -0,0 +1,60 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Card } from "./Card"
+
+# Card
+
+<Canvas>
+  <Story id="blocks-card--text-content" />
+</Canvas>
+
+The 2nd-generation Card component is intended to serve as a flexible content container with a header, optional content sections, and a footer. Over time our intention is to "port" some other card types and content blocks in the system to use Card as their underlying structure.
+
+Styles within the Card node tree are intended to set up sensible defaults without requiring the consumer to configure bespoke styling as they author a card. For example, rule lines will be drawn automatically between the various subcomponents within a card, and margin/padding will be set according to top-level variables.
+
+You can author a Card using subcomponents simply by referencing them via a single Card import. For example, `<Card.Header>`, `<Card.Footer>` etc. In the case where you want to create a new type of card, you can import the subcomponents directly as `<CardHeader>`, `<CardFooter>`, etc. and place them in any container. It's still recommended you include the `.card` class on your custom container so you inherit a base set of CSS properties.
+
+Note that the `<Card.Footer>` subcomponent doesn't inherently add rules or padding so that you can use other components with self-contained styling such as `<ButtonGroup>`. However, you can add `<Card.Section>` within `<Card.Footer>` to add rules and padding.
+
+The `<Card.Header>` subcomponent will typically be paired with a child `<HeadingGroup>` for a title + subtitle grouping, but that's not a requirement.
+
+You can browse through the various stories for different examples of how you'd pattern a card with various subcomponents. Many of the visual aspects of a Card can be customized using the CSS variables listed below. For example, this "Detroit style" example:
+
+<Canvas>
+  <Story id="blocks-card--detroit-style" />
+</Canvas>
+
+## Card Properties
+
+<ArgsTable of={Card} />
+
+## Card.Header Properties
+
+<ArgsTable of={Card.Header} />
+
+## Card.Section Properties
+
+<ArgsTable of={Card.Section} />
+
+## Card.Footer Properties
+
+<ArgsTable of={Card.Footer} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.card` selector to customize the appearance of both the component and various subcomponents.
+
+| Name                              | Type                                         | Description                                                                  | Default                  |
+| --------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------ |
+| `--background-color`              | <Swatch colorVar="--bloom-color-white" />    | Background color of the card                                                 | `--bloom-color-white`    |
+| `--border-radius`                 | Size                                         | Border radius of the card                                                    | `--bloom-rounded-lg`     |
+| `--border-width`                  | Size                                         | Border width of the card (and rules by default)                              | `--bloom-border-1`       |
+| `--border-color`                  | <Swatch colorVar="--bloom-color-gray-450" /> | Border color of the card (and rules by default)                              | `--bloom-color-gray-450` |
+| `--rule-width`                    | Size                                         | Width of the inset rules                                                     | `--border-width`         |
+| `--rule-color`                    | <Swatch colorVar="--bloom-color-gray-450" /> | Color of the inset rules                                                     | `--border-color`         |
+| `--content-padding-block`         | Size                                         | The space above and below content sections                                   | `--bloom-s8`             |
+| `--content-margin-inline-desktop` | Size                                         | The space to the left and right of content sections for desktop-size screens | `--bloom-s16`            |
+| `--content-margin-inline-mobile`  | Size                                         | The space to the left and right of content sections for mobile-size screens  | `--bloom-s4`             |
+| `--header-padding-block`          | Size                                         | The space above and below the header                                         | `--bloom-s8`             |
+| `--header-margin-inline-desktop`  | Size                                         | The space to the left and right of the header for desktop-size screens       | `--bloom-s16`            |
+| `--header-margin-inline-mobile`   | Size                                         | The space to the left and right of the header for mobile-size screens        | `--bloom-s4`             |

package/src/blocks/Card.scss

@@ -0,0 +1,65 @@
+.card {
+  /* Component Variables */
+  --background-color: var(--bloom-color-white);
+  --border-radius: var(--bloom-rounded-lg);
+  --border-width: var(--bloom-border-1);
+  --border-color: var(--bloom-color-gray-450);
+  --rule-width: var(--border-width);
+  --rule-color: var(--border-color);
+
+  --content-padding-block: var(--bloom-s8);
+  --content-margin-inline-desktop: var(--bloom-s16);
+  --content-margin-inline-mobile: var(--bloom-s4);
+  --content-margin-inline: var(--content-margin-inline-desktop);
+
+  --header-padding-block: var(--bloom-s8) var(--bloom-s3);
+  --header-margin-inline-desktop: var(--content-margin-inline-desktop);
+  --header-margin-inline-mobile: var(--content-margin-inline-mobile);
+  --header-margin-inline: var(--header-margin-inline-desktop);
+
+  @media (max-width: $screen-sm) {
+    --content-margin-inline: var(--content-margin-inline-mobile);
+    --header-margin-inline: var(--header-margin-inline-mobile);
+  }
+
+  /* Default Styles */
+  background-color: var(--background-color);
+  border: var(--border-width) solid var(--border-color);
+  overflow: hidden;
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+}
+
+.card__header {
+  padding-block: var(--header-padding-block);
+  margin-inline: var(--header-margin-inline);
+  border-bottom: var(--rule-width) solid var(--rule-color);
+
+  &.is-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--bloom-s7);
+  }
+}
+
+.card__header + .card__footer {
+  margin-block-start: var(--content-padding-block);
+}
+
+.card > *:nth-child(n + 3),
+.card__footer > .card__section {
+  border-top: var(--rule-width) solid var(--rule-color);
+}
+
+.card__section {
+  padding-block: var(--content-padding-block);
+  margin-inline: var(--content-margin-inline);
+}
+
+/* Using the double-class specificity hack, proceed with caution: */
+.card__footer.card__footer,
+.card__footer.card__footer > :not(.card__section) + .card__section {
+  border-top: none;
+}

package/src/blocks/Card.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import "./Card.scss"
+
+export interface CardHeaderProps {
+  /** An additional element(s) you can add to the side of the main child element(s) */
+  suffix?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardHeader = (props: CardHeaderProps) => {
+  const classNames = ["card__header"]
+  if (props.suffix) classNames.push("is-flex")
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <header className={classNames.join(" ")}>
+      {props.children}
+      {props.suffix}
+    </header>
+  )
+}
+
+export interface CardSectionProps {
+  /**
+   * Whether to center the text within the section
+   * @default false
+   */
+  centered?: boolean
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardSection = (props: CardSectionProps) => {
+  const classNames = ["card__section"]
+  if (props.centered) classNames.push("text-center")
+  if (props.className) classNames.push(props.className)
+
+  return <div className={classNames.join(" ")}>{props.children}</div>
+}
+
+export interface CardFooterProps {
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardFooter = (props: CardFooterProps) => {
+  const classNames = ["card__footer"]
+  if (props.className) classNames.push(props.className)
+
+  return <footer className={classNames.join(" ")}>{props.children}</footer>
+}
+
+export interface CardProps {
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const Card = (props: CardProps) => {
+  const classNames = ["card"]
+  if (props.className) classNames.push(props.className)
+
+  return <article className={classNames.join(" ")}>{props.children}</article>
+}
+
+Card.Header = CardHeader
+Card.Section = CardSection
+Card.Footer = CardFooter
+
+export { Card as default, Card, CardHeader, CardSection, CardFooter }

package/src/global/vendor/ag_grid.scss

@@ -11,6 +11,12 @@
     )
   );
 
+  --ag-selected-row-background-color: var(--bloom-color-primary-light);
+
+  a {
+    color: var(--bloom-color-primary-dark);
+  }
+
   .ag-row {
     height: ag-param(row-height);
   }
@@ -72,6 +78,15 @@
     @apply border-b-0;
   }
 
+  .ag-pinned-right-header,
+  .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
+    @apply border-gray-450;
+    @apply border-r-0;
+    @apply border-t-0;
+    @apply border-l-4;
+    @apply border-b-0;
+  }
+
   .ag-row {
     @apply border-t-0;
     @apply border-l-0;
@@ -85,29 +100,48 @@
 
   .ag-body-viewport {
     ::-webkit-scrollbar {
-      // -webkit-appearance: none;
       height: 8px;
-      @apply bg-gray-600;
     }
 
     ::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      @apply bg-gray-600;
+      @apply bg-gray-550;
     }
+  }
 
-    ::-webkit-scrollbar-track {
-      @apply bg-gray-100;
-      -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-    }
+  .ag-body-horizontal-scroll {
+    border-bottom: 1px solid var(--bloom-color-gray-500);
+    border-radius: var(--bloom-rounded-md);
   }
 
   .ag-root-wrapper {
     @apply border-b-0;
     @apply rounded-t-md;
-    @apply rounded-b-none;
+    @apply rounded-b-md;
     overflow: visible;
   }
+
+  .ag-layout-auto-height {
+    .ag-center-cols-container,
+    .ag-center-cols-clipper {
+      --table-min-height: 124px;
+      min-height: var(--table-min-height);
+    }
+  }
+
+  .ag-ltr {
+    .ag-selection-checkbox {
+      margin-right: var(--bloom-s6);
+    }
+  }
+
+  .ag-horizontal-right-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
+
+  .ag-horizontal-left-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
 }
 
 .data-pager {

package/src/headers/Heading.tsx

@@ -22,10 +22,11 @@ const HeaderStyleMap = {
 const Heading = (props: HeadingProps) => {
   const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
   const Tag = `h${priority}` as keyof JSX.IntrinsicElements
-  const classNames = `${props.style && HeaderStyleMap[props.style]} ${
-    props.className && props.className
-  }`
-  return <Tag className={classNames}>{props.children}</Tag>
+  const classNames = []
+  if (props.style) classNames.push(HeaderStyleMap[props.style])
+  if (props.className) classNames.push(props.className)
+
+  return <Tag className={classNames.join(" ")}>{props.children}</Tag>
 }
 
 export { Heading as default, Heading }

package/src/headers/HeadingGroup.docs.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { HeadingGroup } from "./HeadingGroup"
+
+# Heading Group
+
+<Canvas>
+  <Story id="headers-heading-group--with-content" />
+</Canvas>
+
+The HeadingGroup component provides a heading tag (h1-h6) combined with a paragraph tag as a subheading in an aria-minded fashion. Good for use in Card header components and other headers.
+
+## Heading Group Properties
+
+<ArgsTable of={HeadingGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.heading-group` selector to customize the appearance of the component.
+
+| Name                  | Type  | Description                                         | Default      |
+| --------------------- | ----- | --------------------------------------------------- | ------------ |
+| `--heading-margin`    | Size  | Vertical space added around the top heading, if any | `0rem`       |
+| `--subheading-margin` | Size  | The space between the heading and subheading        | `--bloom-s3` |
+| `--heading-color`     | Color | Override to set a specific heading text color       | `inherit`    |
+| `--subheading-color`  | Color | Override to set a specific subheading text color    | `inherit`    |

package/src/headers/HeadingGroup.scss

@@ -0,0 +1,23 @@
+.heading-group {
+  /* Component Variables */
+  --heading-margin: 0rem;
+  --subheading-margin: var(--bloom-s3);
+  --heading-color: inherit;
+  --subheading-color: inherit;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block: var(--heading-margin);
+    color: var(--heading-color);
+  }
+
+  p {
+    margin-block: var(--subheading-margin);
+    font-size: var(--bloom-font-size-base);
+    color: var(--subheading-color);
+  }
+}

package/src/headers/HeadingGroup.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { Heading } from "./Heading"
+import "./HeadingGroup.scss"
+
+export interface HeadingGroupProps {
+  /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
+  heading: React.ReactNode
+  /** A string or element to display in an `p` tag (using `aria-roledescription="subtitle"`) */
+  subheading: React.ReactNode
+  /**
+   * The heading level (1 through 6)
+   * @default 2
+   */
+  headingPriority?: number
+  /** Additional class name for the whole group */
+  className?: string
+}
+
+const HeadingGroup = (props: HeadingGroupProps) => {
+  const classNames = ["heading-group"]
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <hgroup className={classNames.join(" ")} role="group">
+      <Heading priority={props.headingPriority ?? 2}>{props.heading}</Heading>
+      <p aria-roledescription="subtitle">{props.subheading}</p>
+    </hgroup>
+  )
+}
+
+export { HeadingGroup as default, HeadingGroup }

package/src/headers/PageHeader.scss

@@ -15,7 +15,7 @@
   border-top: var(--bloom-border-1) solid var(--border-color);
   color: var(--text-color);
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: $screen-md) {
     padding: var(--bloom-s10) 0;
   }
 
@@ -47,6 +47,7 @@
 .page-header__title {
   text-align: center;
   font-family: var(--text-font-family);
+  word-break: break-all;
 
   @media (min-width: $screen-md) {
     font-size: var(--title-font-size);

package/src/navigation/Breadcrumbs.scss

@@ -2,6 +2,7 @@
   ol {
     @apply flex;
     @apply items-center;
+    flex-wrap: wrap;
     line-height: 1.5rem;
   }
 

package/src/navigation/SideNav.scss

@@ -8,9 +8,11 @@
   --selection-parent-accent: var(--bloom-color-gray-450);
   --hover-link-color: var(--bloom-color-primary);
   --hover-background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-white);
 
   border: var(--border);
   border-radius: var(--border-radius);
+  background-color: var(--background-color);
 
   & > ul {
     & > li:first-child > a {
@@ -70,3 +72,57 @@
     padding-inline-start: calc(var(--current-padding-inline) + var(--current-padding-block));
   }
 }
+
+.side-nav__horizontal {
+  display: flex;
+
+  ul {
+    width: 100%;
+  }
+
+  @media (min-width: $screen-sm) {
+    a {
+      &[aria-current]:not(:focus) {
+        box-shadow: inset 0px -3px 0px 0px var(--hover-link-color);
+      }
+
+      &.has-current-child:not(:focus) {
+        box-shadow: inset 0px 0px -3px 0px var(--selection-parent-accent);
+      }
+    }
+
+    ul {
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      @media (min-width: $screen-md) {
+        flex-direction: row;
+      }
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    li:not(:last-child) {
+      border-right: var(--border);
+      border-bottom: 0px;
+    }
+
+    & > ul {
+      & > li:first-child > a {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: 0px;
+      }
+
+      & > li:last-child > a {
+        border-bottom-right-radius: var(--border-radius);
+        border-bottom-left-radius: 0px;
+      }
+    }
+  }
+}
+
+.side-nav__count {
+  margin-left: var(--bloom-s4);
+}

package/src/navigation/SideNav.tsx

@@ -11,8 +11,8 @@ export interface SideNavItemProps {
 }
 
 export interface SideNavProps {
-  navItems?: SideNavItemProps[]
   className?: string
+  navItems?: SideNavItemProps[]
 }
 
 const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
@@ -20,7 +20,7 @@ const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
     return (
       <>
         <span>{item.label}</span>
-        <span>{item.count}</span>
+        <span className={"side-nav__count"}>{item.count}</span>
       </>
     )
   } else {

package/src/navigation/Tabs.scss

@@ -10,6 +10,29 @@
   }
 }
 
+.tabs__horizontal {
+  ul {
+    @apply flex;
+    @apply flex-row;
+  }
+
+  .tabs__tab {
+    &:first-of-type {
+      @apply border-l;
+      @apply rounded-tl-lg;
+      @apply rounded-tr-lg;
+      @apply rounded-tr-none;
+      @apply rounded-bl-lg;
+    }
+    &:last-of-type {
+      @apply rounded-tr-lg;
+      @apply rounded-br-lg;
+    }
+
+    border-bottom-color: var(--bloom-color-gray-450);
+  }
+}
+
 .tabs__tab {
   @apply bg-white;
   @apply text-gray-800;
@@ -30,14 +53,10 @@
     @apply border-l;
     @apply rounded-tl-lg;
     @apply rounded-tr-lg;
-    @screen md {
-      @apply rounded-tr-none;
-    }
+    @apply rounded-tr-none;
   }
   &:last-of-type {
-    @screen md {
-      @apply rounded-tr-lg;
-    }
+    @apply rounded-tr-lg;
   }
   &:hover {
     border-bottom-color: map-get($tailwind-gray, 400);

package/src/page_components/NavigationHeader.tsx

@@ -17,12 +17,12 @@ type NavigationHeaderTabs = {
   flagsQty?: number
   listingLabel: string
   applicationsLabel: string
-  flagsLabel: string
 }
 
 type NavigationHeaderTabsElement = {
   label: string
   path: string
+  activePaths: string[]
   content: React.ReactNode | undefined
 }
 
@@ -42,23 +42,23 @@ const NavigationHeader = ({
       {
         label: tabs?.listingLabel || "",
         path: `/listings/${listingId}`,
+        activePaths: [`/listings/${listingId}`],
         content: undefined,
       },
       {
         label: tabs?.applicationsLabel || "",
         path: `/listings/${listingId}/applications`,
+        activePaths: [
+          `/listings/${listingId}/applications`,
+          `/listings/${listingId}/applications/pending`,
+          `/listings/${listingId}/applications/pending?type=name_dob`,
+          `/listings/${listingId}/applications/pending?type=email`,
+          `/listings/${listingId}/applications/resolved`,
+        ],
         content: undefined,
       },
     ]
 
-    if (process.env.showDuplicates && typeof tabs?.flagsQty === "number") {
-      elements.push({
-        label: tabs.flagsLabel,
-        path: `/listings/${listingId}/flags`,
-        content: <>{tabs.flagsQty}</>,
-      })
-    }
-
     return elements
   }, [tabs, listingId])
 
@@ -69,7 +69,7 @@ const NavigationHeader = ({
           <TabNavItem
             key={tab.path}
             tagContent={tab?.content}
-            current={tab.path === currentPath}
+            current={tab.activePaths.includes(currentPath)}
             href={tab.path}
             tagSize={AppearanceSizeType.small}
           >

package/src/page_components/listing/ListingCard.tsx

@@ -12,7 +12,7 @@ import { NavigationContext } from "../../config/NavigationContext"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
-export interface CardHeader {
+export interface ListingCardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
@@ -20,17 +20,17 @@ export interface CardHeader {
   isPillType?: boolean
 }
 
-export interface FooterButton {
+export interface ListingFooterButton {
   href: string
   text: string
   ariaHidden?: boolean
 }
 
 export interface ListingCardContentProps {
-  contentHeader?: CardHeader
-  contentSubheader?: CardHeader
-  tableHeader?: CardHeader
-  tableSubheader?: CardHeader
+  contentHeader?: ListingCardHeader
+  contentSubheader?: ListingCardHeader
+  tableHeader?: ListingCardHeader
+  tableSubheader?: ListingCardHeader
 }
 export interface ListingCardProps {
   /** A list of tags to be rendered below the content header, a Tag component is rendered for each */
@@ -40,7 +40,7 @@ export interface ListingCardProps {
   /** An object containing fields that render optional headers above the content section's table */
   contentProps?: ListingCardContentProps
   /** A list of buttons to render in the footer of the content section */
-  footerButtons?: FooterButton[]
+  footerButtons?: ListingFooterButton[]
   /** A class name applied to the footer container of the content section */
   footerContainerClass?: string
   /** Custom content rendered below the content table */
@@ -74,7 +74,7 @@ const ListingCard = (props: ListingCardProps) => {
   const { LinkComponent } = useContext(NavigationContext)
 
   const getHeader = (
-    header: CardHeader | undefined,
+    header: ListingCardHeader | undefined,
     priority: number,
     styleType?: HeaderType,
     customClass?: string

package/src/tables/AgTable.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import { useForm } from "react-hook-form"
 import { AgGridReact } from "ag-grid-react"
-import { GridOptions, ColumnState, ColumnApi, ColDef, ColGroupDef } from "ag-grid-community"
+import {
+  GridOptions,
+  ColumnState,
+  ColumnApi,
+  ColDef,
+  ColGroupDef,
+  GridApi,
+} from "ag-grid-community"
 import { AgPagination, AG_PER_PAGE_OPTIONS } from "./AgPagination"
 import { LoadingOverlay } from "../overlays/LoadingOverlay"
 import { Field } from "../forms/Field"
@@ -15,11 +22,12 @@ export interface ColumnOrder {
 }
 
 export interface AgTableProps {
-  id: string
   config: AgTableConfig
   data: AgTableData
-  pagination: AgTablePagination
+  id: string
+  pagination?: AgTablePagination
   search: AgTableSearch
+  selectConfig?: AgTableSelectConfig
   sort?: AgTableSort
   headerContent?: React.ReactNode
   className?: string
@@ -36,11 +44,17 @@ export interface AgTablePagination {
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>
 }
 
+export interface AgTableSelectConfig {
+  setGridApi: React.Dispatch<React.SetStateAction<GridApi | null>>
+  updateSelectedValues: () => void
+}
+
 export interface AgTableConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   gridComponents?: { [p: string]: any }
   columns: (ColDef | ColGroupDef)[]
   totalItemsLabel: string
+  rowSelection?: boolean
 }
 
 export interface AgTableData {
@@ -53,6 +67,7 @@ export interface AgTableData {
 
 export interface AgTableSearch {
   setSearch: React.Dispatch<React.SetStateAction<string>>
+  showSearch?: boolean
 }
 
 export interface AgTableSort {
@@ -85,14 +100,15 @@ export const useAgTable = () => {
 }
 
 const AgTable = ({
-  id,
   className,
+  config: { gridComponents, columns, totalItemsLabel, rowSelection },
+  data,
+  headerContent,
+  id,
+  selectConfig,
   pagination,
-  search: { setSearch },
+  search: { setSearch, showSearch = true },
   sort: { setSort } = {},
-  headerContent,
-  data,
-  config: { gridComponents, columns, totalItemsLabel },
   strings,
 }: AgTableProps) => {
   // local storage key with column state
@@ -148,7 +164,7 @@ const AgTable = ({
   const debounceFilter = useRef(
     debounce((value: string) => {
       setSearch(value)
-      pagination.setCurrentPage(1)
+      pagination?.setCurrentPage(1)
     }, 500)
   )
   useEffect(() => {
@@ -184,12 +200,15 @@ const AgTable = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onGridReady = (params: any) => {
     setGridColumnApi(params.columnApi)
+    if (selectConfig?.setGridApi) {
+      selectConfig.setGridApi(params.api)
+    }
   }
 
   return (
     <div className={`ag-theme-alpine ag-theme-bloom ${className || ""}`}>
       <div className="flex justify-between flex-col md:flex-row">
-        <div className="flex flex-wrap">
+        <div className={`flex flex-wrap ${showSearch ? "mb-5" : "hidden"}`}>
           <div className="md:mr-5 w-full md:w-56">
             <Field
               dataTestId="ag-search-input"
@@ -200,7 +219,7 @@ const AgTable = ({
               placeholder={strings?.filter ?? t("t.filter")}
             />
           </div>
-          <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
+          <div className="w-full md:w-auto mt-2 md:mt-0 mb-2 md:mb-0">
             {!validSearch && (
               <AlertBox type="notice">
                 {strings?.searchError ?? t("applications.table.searchError")}
@@ -211,8 +230,7 @@ const AgTable = ({
 
         {headerContent}
       </div>
-
-      <div className="applications-table mt-5">
+      <div className="applications-table">
         <LoadingOverlay isLoading={data.loading}>
           <div>
             <AgGridReact
@@ -227,19 +245,25 @@ const AgTable = ({
               suppressPaginationPanel={true}
               paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
               suppressScrollOnNewData={true}
+              rowSelection={rowSelection ? "multiple" : undefined}
+              rowMultiSelectWithClick={rowSelection}
+              onRowDataChanged={selectConfig?.updateSelectedValues ?? undefined}
+              onFirstDataRendered={selectConfig?.updateSelectedValues ?? undefined}
             ></AgGridReact>
           </div>
         </LoadingOverlay>
 
-        <AgPagination
-          totalItems={data.totalItems}
-          totalPages={data.totalPages}
-          currentPage={pagination.currentPage}
-          itemsPerPage={pagination.perPage}
-          quantityLabel={totalItemsLabel}
-          setCurrentPage={pagination.setCurrentPage}
-          setItemsPerPage={pagination.setPerPage}
-        />
+        {pagination && (
+          <AgPagination
+            totalItems={data.totalItems}
+            totalPages={data.totalPages}
+            currentPage={pagination.currentPage}
+            itemsPerPage={pagination.perPage}
+            quantityLabel={totalItemsLabel}
+            setCurrentPage={pagination.setCurrentPage}
+            setItemsPerPage={pagination.setPerPage}
+          />
+        )}
       </div>
     </div>
   )