@bloom-housing/ui-components 5.0.0 → 5.0.1-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.1...@bloom-housing/ui-components@5.0.1-alpha.2) (2022-06-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.0...@bloom-housing/ui-components@5.0.1-alpha.1) (2022-06-21)
+
+
+### Features
+
+* **listingcard:** add compatability for jsx elements in subheader ([#2821](https://github.com/bloom-housing/bloom/issues/2821)) ([77693dc](https://github.com/bloom-housing/bloom/commit/77693dcee60be8deba641595ed6ae5e141d14a51))
+
+
+### BREAKING CHANGES
+
+* **listingcard:** prop name change for header from "text" to "content"
+
+
+
+
+
+## [5.0.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.27...@bloom-housing/ui-components@5.0.1-alpha.0) (2022-06-16)
+
+
+* 2022-06 -16 sync master (#2825) ([17dabfe](https://github.com/bloom-housing/bloom/commit/17dabfeaf77afb55d629f97fe8e90001df94dc04)), closes [#2825](https://github.com/bloom-housing/bloom/issues/2825) [#2753](https://github.com/bloom-housing/bloom/issues/2753) [#2441](https://github.com/bloom-housing/bloom/issues/2441) [#2460](https://github.com/bloom-housing/bloom/issues/2460) [#2459](https://github.com/bloom-housing/bloom/issues/2459) [#2464](https://github.com/bloom-housing/bloom/issues/2464) [#2465](https://github.com/bloom-housing/bloom/issues/2465) [#2466](https://github.com/bloom-housing/bloom/issues/2466) [#2436](https://github.com/bloom-housing/bloom/issues/2436) [#2451](https://github.com/bloom-housing/bloom/issues/2451) [#2415](https://github.com/bloom-housing/bloom/issues/2415) [#2354](https://github.com/bloom-housing/bloom/issues/2354) [#2455](https://github.com/bloom-housing/bloom/issues/2455) [#2484](https://github.com/bloom-housing/bloom/issues/2484) [#2482](https://github.com/bloom-housing/bloom/issues/2482) [#2483](https://github.com/bloom-housing/bloom/issues/2483) [#2476](https://github.com/bloom-housing/bloom/issues/2476) [#2485](https://github.com/bloom-housing/bloom/issues/2485) [#2470](https://github.com/bloom-housing/bloom/issues/2470) [#2488](https://github.com/bloom-housing/bloom/issues/2488) [#2487](https://github.com/bloom-housing/bloom/issues/2487) [#2496](https://github.com/bloom-housing/bloom/issues/2496) [#2498](https://github.com/bloom-housing/bloom/issues/2498) [#2499](https://github.com/bloom-housing/bloom/issues/2499) [#2291](https://github.com/bloom-housing/bloom/issues/2291) [#2461](https://github.com/bloom-housing/bloom/issues/2461) [#2485](https://github.com/bloom-housing/bloom/issues/2485) [#2494](https://github.com/bloom-housing/bloom/issues/2494) [#2503](https://github.com/bloom-housing/bloom/issues/2503) [#2495](https://github.com/bloom-housing/bloom/issues/2495) [#2477](https://github.com/bloom-housing/bloom/issues/2477) [#2505](https://github.com/bloom-housing/bloom/issues/2505) [#2372](https://github.com/bloom-housing/bloom/issues/2372) [#2489](https://github.com/bloom-housing/bloom/issues/2489) [#2497](https://github.com/bloom-housing/bloom/issues/2497) [#2506](https://github.com/bloom-housing/bloom/issues/2506) [#2486](https://github.com/bloom-housing/bloom/issues/2486)
+
+
+### BREAKING CHANGES
+
+* consolidated all event section components in one new component, uptake will require removing the deprecated components and uptaking EventSection
+
+* chore(release): version
+
+ - @bloom-housing/backend-core@3.0.2-alpha.38
+ - @bloom-housing/shared-helpers@4.0.1-alpha.63
+ - @bloom-housing/partners@4.0.1-alpha.67
+ - @bloom-housing/public@4.0.1-alpha.66
+ - @bloom-housing/ui-components@4.0.1-alpha.62
+
+
+
+
+
 # [5.0.0](https://github.com/seanmalbert/bloom/compare/@bloom-housing/ui-components@4.4.0...@bloom-housing/ui-components@5.0.0) (2022-06-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.0",
+  "version": "5.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",
@@ -108,5 +108,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "6af474347ea32b98bf8a216704cc12efcd838ff6"
+  "gitHead": "f04434904aa50d2a8012266329dc53f08168defa"
 }

package/src/actions/Button.docs.mdx

@@ -50,12 +50,12 @@ You can apply CSS variables to the `.button` selector to customize the appearanc
 | `--alert-appearance-hover-background-color`   | <Swatch colorVar="--bloom-color-alert-dark" />   | Hover state alert background color   |
 | `--alert-appearance-hover-border-color`       | <Swatch colorVar="--bloom-color-alert" />        | Hover state alert border color       |
 | `--alert-appearance-hover-label-color`        | <Swatch colorVar="--bloom-color-white" />        | Hover state alert label color        |
-| `--warn-appearance-background-color`          | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
-| `--warn-appearance-border-color`              | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
-| `--warn-appearance-label-color`               | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
-| `--warn-appearance-hover-background-color`    | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
-| `--warn-appearance-hover-border-color`        | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
-| `--warn-appearance-hover-label-color`         | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
+| `--warning-appearance-background-color`       | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
+| `--warning-appearance-border-color`           | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
+| `--warning-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
+| `--warning-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
+| `--warning-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
+| `--warning-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
 
 ### Typographic & Spacing Variables
 

package/src/actions/Button.scss

@@ -1,16 +1,32 @@
 @import "../global/mixins.scss";
 
 .button {
+  /* Component Variables */
+  --normal-rounded: var(--bloom-rounded);
+  --normal-padding: var(--bloom-s4) var(--bloom-s6);
+  --label-transform: uppercase;
+  --label-font: var(--bloom-font-alt-sans);
+  --label-letter-spacing: var(--bloom-letter-spacing-widest);
+  --normal-font-size: var(--bloom-font-size-sm);
+  --label-weight: bold;
+  --small-rounded: var(--bloom-rounded);
+  --small-padding: var(--bloom-s3) var(--bloom-s6);
+  --small-font-size: var(--bloom-font-size-xs);
+  --big-rounded: var(--bloom-rounded);
+  --big-padding: var(--bloom-s6);
+  --big-font-size: var(--bloom-font-size-sm);
+
+  /* Base Styles */
   position: relative;
-  border-radius: var(--normal-rounded, var(--bloom-rounded));
-  padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
+  border-radius: var(--normal-rounded);
+  padding: var(--normal-padding);
   text-align: center;
-  text-transform: var(--label-transform, uppercase);
-  font-family: var(--label-font, var(--bloom-font-alt-sans));
+  text-transform: var(--label-transform);
+  font-family: var(--label-font);
   display: inline-block;
-  letter-spacing: var(--label-letter-spacing, var(--bloom-letter-spacing-widest));
-  font-size: var(--normal-font-size, var(--bloom-font-size-sm));
-  font-weight: var(--label-weight, bold);
+  letter-spacing: var(--label-letter-spacing);
+  font-size: var(--normal-font-size);
+  font-weight: var(--label-weight);
   line-height: var(--bloom-line-height-snug);
 
   &:focus {
@@ -40,15 +56,15 @@
   }
 
   &.is-small {
-    border-radius: var(--small-rounded, var(--bloom-rounded));
-    padding: var(--small-padding, var(--bloom-s3) var(--bloom-s6));
-    font-size: var(--small-font-size, var(--bloom-font-size-xs));
+    border-radius: var(--small-rounded);
+    padding: var(--small-padding);
+    font-size: var(--small-font-size);
   }
 
   &.is-big {
-    border-radius: var(--big-rounded, var(--bloom-rounded));
-    padding: var(--big-padding, var(--bloom-s6));
-    font-size: var(--big-font-size, var(--bloom-font-size-sm));
+    border-radius: var(--big-rounded);
+    padding: var(--big-padding);
+    font-size: var(--big-font-size);
   }
 
   &.is-normal-case {

package/src/actions/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends AppearanceProps {
   className?: string
   disabled?: boolean
   loading?: boolean
+  ariaHidden?: boolean
   ariaLabel?: string
   dataTestId?: string
   "data-test-id"?: string
@@ -75,6 +76,7 @@ const Button = (props: ButtonProps) => {
       className={buttonClasses.join(" ")}
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
+      aria-hidden={props.ariaHidden}
       aria-label={props.ariaLabel}
       data-test-id={props.dataTestId || props["data-test-id"]}
     >

package/src/actions/LinkButton.tsx

@@ -23,6 +23,7 @@ const LinkButton = (props: LinkButtonProps) => {
     return (
       <LinkComponent
         href={props.href}
+        aria-hidden={props.ariaHidden}
         className={buttonClasses.join(" ")}
         data-test-id={props.dataTestId}
       >

package/src/blocks/ImageCard.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { ImageCard } from "./ImageCard"
+
+# Image Card
+
+The image card component renders an image with optional tags at top and status bars below it.
+
+<Canvas>
+  <Story id="blocks-image-card--with-one-status-and-tag" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={ImageCard} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.image-card` selector to customize the appearance of the component. Interior tags themselves are customizable separately, see the **Text/Tag** documentation for details.
+
+| Name                         | Type                                         | Description                                                        | Default                  |
+| ---------------------------- | -------------------------------------------- | ------------------------------------------------------------------ | ------------------------ |
+| `--default-background-color` | <Swatch colorVar="--bloom-color-gray-500" /> | Background color when an image URL isn't available                 | `--bloom-color-gray-500` |
+| `--border-radius`            | Size                                         | The border radius of the card                                      | `0px`                    |
+| `--image-height`             | Size                                         | A height limit for the image area                                  | `auto`                   |
+| `--tags-justify-mobile`      | Flex Jusification                            | The horizontal alignment of tags over the image on mobile screens  | `center`                 |
+| `--tags-justify-desktop`     | Flex Jusification                            | The horizontal alignment of tags over the image on desktop screens | `flex-start`             |

package/src/blocks/ImageCard.scss

@@ -1,92 +1,67 @@
 @import "../global/mixins.scss";
 
-.image-card__wrapper {
-  @apply relative;
+.image-card {
+  /* Component Variables */
+  --default-background-color: var(--bloom-color-gray-500);
+  --border-radius: 0px;
+  --image-height: auto;
+  --tags-justify-mobile: center;
+  --tags-justify-desktop: flex-start;
+
+  position: relative;
 }
 
-.image-card {
-  @apply relative;
-  @apply bg-gray-500;
+.image-card__inner {
+  position: relative;
+  background-color: var(--default-background-color);
+  border-radius: var(--border-radius);
+
   img {
-    @apply w-full;
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: var(--image-height);
+    object-fit: cover;
   }
 }
 
 .image-card-tag__wrapper {
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply absolute;
-  @apply z-10;
-  @apply w-full;
-  @apply mt-1;
-  @apply px-4;
-  @apply flex-wrap;
+  --tags-justify: var(--tags-justify-mobile);
 
-  @screen md {
-    @apply items-start;
-    @apply justify-start;
-  }
-}
-
-.image-card__figcaption {
-  @apply absolute;
-  @apply inset-x-0;
-  @apply bottom-0;
-  @apply py-1;
-}
+  display: flex;
+  align-items: center;
+  justify-content: var(--tags-justify);
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  margin-block-start: var(--bloom-s1);
+  padding-inline: var(--bloom-s4);
+  flex-wrap: wrap;
+  max-width: 100%;
 
-.image-card__placeholder {
-  height: 300px;
-}
+  @media (min-width: $screen-sm) {
+    --tags-justify: var(--tags-justify-desktop);
+  }
 
-.image-card__tag {
-  @apply absolute;
-  @apply top-0;
-  @apply p-3;
-  @apply m-5;
-}
+  .tag {
+    margin-top: var(--bloom-s3);
+    margin-inline: var(--bloom-s2);
 
-.image-card__title {
-  @apply text-white;
-  @apply text-left;
-  @apply text-lg;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply relative;
-  @apply z-10;
-  @apply tracking-wider;
-  @apply px-5;
-  @apply pb-1;
-  @screen md {
-    @apply text-3xl;
+    .ui-icon {
+      margin-inline-end: var(--bloom-s2);
+    }
   }
 }
 
-.image-card__subtitle {
-  @apply text-white;
-  @apply text-left;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply text-sm;
-  @apply px-5;
-  @apply pb-3;
-  @apply relative;
-  @apply z-10;
-  @apply tracking-widest;
+.image-card__placeholder {
+  height: 300px;
 }
 
 .image-card--leader {
-  @apply w-full;
-
-  @screen md {
-    @apply w-2/3;
-    @apply pr-8;
-    @apply pt-8;
-  }
+  width: 100%;
 
-  .image-card__title {
-    @apply text-4xl;
-    @apply text-center;
+  @media (min-width: $screen-sm) {
+    width: var(--bloom-width-2-3rd);
+    margin-block-start: var(--bloom-s8);
+    margin-inline-end: var(--bloom-s8);
   }
 }

package/src/blocks/ImageCard.tsx

@@ -20,27 +20,26 @@ export interface ImageTag {
   text?: string
   iconType?: UniversalIconType
   iconColor?: string
+  styleType?: AppearanceStyleType
 }
 
 export interface ImageCardProps {
+  /** A description of the image, used as alt text */
   description?: string
+  /** A link, used to wrap the entire component */
   href?: string
+  /** An image URL, used as the background image */
   imageUrl?: string
+  /** A list of status indicators, an ApplicationStatus component is rendered for each item at the bottom of the card */
   statuses?: StatusBarType[]
+  /** A list of image tags, a Tag component is rendered for each over the image */
   tags?: ImageTag[]
 }
 
 /**
  * @component ImageCard
  *
- * A component that renders an image with optional status bars below it
- *
- * @prop description - A description of the image, used as alt text
- * @prop href - A link, used to wrap the entire component
- * @prop imageUrl - An image URL, used as a background image
- * @prop statuses - A list of status indicators, an ApplicationStatus component is rendered for each item at the bottom of the card
- * @prop tags - A list of image tags, a Tag component is rendered for each over the image
- *
+ * A component that renders an image with optional tags at top and status bars below it
  */
 const ImageCard = (props: ImageCardProps) => {
   const getStatuses = () => {
@@ -61,18 +60,17 @@ const ImageCard = (props: ImageCardProps) => {
   }
 
   const image = (
-    <div className="image-card__wrapper">
+    <div className="image-card">
       <div className="image-card-tag__wrapper">
         {props.tags?.map((tag, index) => {
           return (
             <React.Fragment key={index}>
-              <Tag styleType={AppearanceStyleType.warning} className={"mt-3 mr-2 ml-2"}>
+              <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
                 {tag.iconType && (
                   <Icon
                     size={"medium"}
                     symbol={tag.iconType}
                     fill={tag.iconColor ?? IconFillColors.primary}
-                    className={"mr-2"}
                   />
                 )}
                 {tag.text}
@@ -81,7 +79,7 @@ const ImageCard = (props: ImageCardProps) => {
           )
         })}
       </div>
-      <figure className="image-card">
+      <figure className="image-card__inner">
         {props.imageUrl ? (
           <img src={props.imageUrl} alt={props.description || t("listings.buildingImageAltText")} />
         ) : (

package/src/global/mixins.scss

@@ -99,25 +99,32 @@
   }
 
   &.is-alert {
-    background-color: var(--bloom-color-alert);
-    border-color: var(--bloom-color-alert);
-    color: var(--bloom-color-white);
+    background-color: var(--alert-appearance-background-color, var(--bloom-color-alert));
+    border-color: var(--alert-appearance-border-color, var(--bloom-color-alert));
+    color: var(--alert-appearance-label-color, var(--bloom-color-white));
 
     &:hover {
-      background-color: var(--bloom-color-alert-dark);
-      border-color: var(--bloom-color-alert-dark);
+      background-color: var(
+        --alert-appearance-hover-background-color,
+        var(--bloom-color-alert-dark)
+      );
+      border-color: var(--alert-appearance-hover-border-color, var(--bloom-color-alert-dark));
+      color: var(--alert-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 
   &.is-warning {
-    background-color: var(--bloom-color-warn);
-    border-color: var(--bloom-color-warn);
-    color: var(--bloom-color-gray-800);
+    background-color: var(--warning-appearance-background-color, var(--bloom-color-warn));
+    border-color: var(--warning-appearance-border-color, var(--bloom-color-warn));
+    color: var(--warning-appearance-label-color, var(--bloom-color-gray-800));
 
     &:hover {
-      color: var(--bloom-color-white);
-      background-color: var(--bloom-color-warn-dark);
-      border-color: var(--bloom-color-warn-dark);
+      background-color: var(
+        --warning-appearance-hover-background-color,
+        var(--bloom-color-warn-dark)
+      );
+      border-color: var(--warning-appearance-hover-border-color, var(--bloom-color-warn-dark));
+      color: var(--warning-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 

package/src/global/text.scss

@@ -141,39 +141,41 @@ h1.title {
 }
 
 .card-header {
-  @apply font-alt-sans;
-  @apply font-semibold;
-  @apply text-blue-700;
-  @apply text-3xl;
-  @apply mb-3;
-  @apply leading-tight;
+  font-family: var(--card-header-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--card-header-font-weight, 600);
+  color: var(--card-header-color, var(--bloom-color-blue-700));
+  font-size: var(--card-header-font-size, var(--bloom-font-size-3xl));
+  margin-block: var(--card-header-margin-block, 0 var(--bloom-s3));
+  line-height: var(--card-header-line-height, var(--bloom-line-height-tight));
 }
 
 .card-subheader {
-  @apply font-alt-sans;
-  @apply text-black;
-  @apply text-base;
-  @apply mb-3;
+  font-family: var(--card-subheader-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--card-subheader-font-weight, normal);
+  color: var(--card-subheader-color, var(--bloom-color-black));
+  font-size: var(--card-subheader-font-size, var(--bloom-font-size-base));
+  margin-block: var(--card-subheader-margin-block, 0 var(--bloom-s3));
 }
 
 .table-header {
-  @apply font-alt-sans;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply text-sm;
-  @apply mb-1;
+  font-family: var(--table-header-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--table-header-font-weight, 600);
+  color: var(--table-header-color, var(--bloom-color-gray-800));
+  font-size: var(--table-header-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--table-header-margin-block, 0 var(--bloom-s1));
 }
 
 .table-subheader {
-  @apply font-alt-sans;
-  @apply text-gray-750;
-  @apply text-sm;
-  @apply mb-3;
+  font-family: var(--table-subheader-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--table-subheader-font-weight, normal);
+  color: var(--table-subheader-color, var(--bloom-color-gray-750));
+  font-size: var(--table-subheader-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--table-header-margin-block, 0 var(--bloom-s3));
 }
 
 .category-header {
-  @apply font-alt-sans;
-  @apply font-semibold;
-  @apply text-gray-700;
-  @apply text-sm;
+  font-family: var(--category-header-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--category-header-font-weight, 600);
+  color: var(--category-header-color, var(--bloom-color-gray-700));
+  font-size: var(--category-header-font-size, var(--bloom-font-size-sm));
 }

package/src/global/tokens/sizes.scss

@@ -45,4 +45,6 @@
   --bloom-width-6xl: 72rem;
   --bloom-width-7xl: 80rem;
   --bloom-width-prose: 65ch;
+  --bloom-width-1-3rd: 33.333333%;
+  --bloom-width-2-3rd: 66.666667%;
 }

package/src/page_components/listing/ListingCard.docs.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ListingCard } from "./ListingCard"
+
+# ListingCard
+
+The listing card component renders an image with optional status bars below it, and a content section associated with the image which can include titles, a table, and custom content.
+
+<Canvas>
+  <Story id="page-components-listing-card--with-tags-and-headers" />
+</Canvas>
+
+<br />
+<br />
+
+## Variants
+
+Many of the display variations of the card are enabled by the interior content props you pass, and you can survey the various stories available to see some common arrangements. In addition:
+
+### Stacked Tables
+
+By setting `stackedTable` to true, the interior table component switches from `StandardTable` to `StackedTable` for a different UI presentation.
+
+<Canvas>
+  <Story id="page-components-listing-card--with-stacked-table" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={ListingCard} />
+
+**Note:** for accessbility reasons, if you have a link that should apply to the card as a whole, pass an `href` prop to the `contentHeader` key of `contentProps`. (If you previously passed `href` to `imageCardProps`, you should remove that.) You'll also want to pass `ariaHidden: true` as a prop for the footer button.
+
+## Theming Variables
+
+You can apply CSS variables to the `.listings-row` selector to customize the appearance of the component.
+
+| Name                       | Type    | Description                                                                                                    | Default             |
+| -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `--tags-flex-order`        | Integer | Where content header tags are located relative to the heading text. Set to `2` to move tags below the headings | `0`                 |
+| `--inter-row-gap`          | Size    | The margin between each card                                                                                   | `--bloom-s12`       |
+| `--max-width`              | Size    | The maximum width of the card on smaller screens                                                               | `--bloom-width-3xl` |
+| `--max-width-large-screen` | Size    | The maximum width of the card on larger screens                                                                | `--bloom-width-5xl` |
+| `--cell-padding`           | Size    | The padding within both the image side and the content side                                                    | `--bloom-s3`        |

package/src/page_components/listing/ListingCard.scss

@@ -1,64 +1,87 @@
 .listings-row {
-  @apply flex;
-  @apply flex-row;
-  @apply flex-wrap;
-  @apply max-w-5xl;
-  @apply m-auto;
-  @apply mb-12;
-  max-width: 48rem;
+  --tags-flex-order: 0;
+  --inter-row-gap: var(--bloom-s12);
+  --max-width: var(--bloom-width-3xl);
+  --max-width-large-screen: var(--bloom-width-5xl);
+  --cell-padding: var(--bloom-s3);
 
-  &:first-of-type {
-    @apply mt-12;
-  }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: var(--max-width);
+  margin: var(--inter-row-gap) auto;
+  position: relative;
 
-  @screen lg {
-    @apply max-w-5xl;
+  @media (min-width: $screen-lg) {
+    --max-width: var(--max-width-large-screen);
   }
 }
 
-.listings-row_figure {
-  @apply w-full;
-  @apply p-3;
-  @apply pb-0;
+.listings-row_figure,
+.listings-row_content {
+  width: 100%;
+  padding: var(--cell-padding);
+  padding-bottom: 0px;
 
-  @screen lg {
-    @apply w-6/12;
+  @media (min-width: $screen-lg) {
+    width: 50%;
   }
 }
 
 .listings-row_content {
-  @apply w-full;
-  @apply p-3;
+  .listings-row_headers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 
-  @screen lg {
-    @apply w-6/12;
-  }
+    @media (min-width: $screen-md) {
+      align-items: flex-start;
+      text-align: left;
+    }
 
-  .listings-row_headers {
-    @apply flex;
-    @apply flex-col;
-    @apply items-center;
-    @apply text-center;
-    @screen md {
-      @apply items-start;
-      @apply text-left;
+    .listings-row_tags {
+      order: var(--tags-flex-order);
+      display: inline-flex;
+      width: 100%;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      .tag {
+        margin-bottom: var(--bloom-s2);
+        margin-inline-end: var(--bloom-s2);
+
+        &:last-of-type {
+          margin-inline-end: 0;
+        }
+
+        .ui-icon {
+          margin-inline-end: var(--bloom-s2);
+        }
+      }
     }
   }
+
+  .is-card-link::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
 }
 
 .listings-row_table {
-  @apply mb-4;
+  margin-block-end: var(--bloom-s4);
 }
 
 .listings-row_footer {
-  @apply flex;
-  @apply justify-end;
-  @apply w-full;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+
   a:not(:first-child) {
-    @apply ml-1;
+    margin-inline-start: var(--bloom-s1);
   }
 }
-
-.listings-row_table {
-  @apply mb-4;
-}

package/src/page_components/listing/ListingCard.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useContext } from "react"
 import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
@@ -8,17 +8,20 @@ import { Tag } from "../../text/Tag"
 import { AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
 import "./ListingCard.scss"
+import { NavigationContext } from "../../config/NavigationContext"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
 export interface CardHeader {
+  content: string | React.ReactNode
+  href?: string
   customClass?: string
-  text: string
 }
 
 export interface FooterButton {
   href: string
   text: string
+  ariaHidden?: boolean
 }
 
 export interface ListingCardContentProps {
@@ -28,14 +31,23 @@ export interface ListingCardContentProps {
   tableSubheader?: CardHeader
 }
 export interface ListingCardProps {
+  /** A list of tags to be rendered below the content header, a Tag component is rendered for each */
   cardTags?: ImageTag[]
+  /** Custom content rendered in the content section above the table */
   children?: React.ReactElement
+  /** 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[]
+  /** A class name applied to the footer container of the content section */
   footerContainerClass?: string
+  /** Custom content rendered below the content table */
   footerContent?: React.ReactNode
+  /** Prop interface for the ImageCard component */
   imageCardProps: ImageCardProps
+  /** Toggles on the StackedTable component in place of the default StandardTable component - they are functionally equivalent with differing UIs */
   stackedTable?: boolean
+  /** Prop interface for the StandardTable and StackedTable components */
   tableProps?: ListingCardTableProps
 }
 
@@ -44,17 +56,6 @@ export interface ListingCardProps {
  *
  * A component that renders an image with optional status bars below it,
  * and a content section associated with the image which can include titles, a table, and custom content
- *
- * @prop cardTags -A list of tags to be rendered below the content header, a Tag component is rendered for each
- * @prop children - Custom content rendered in the content section above the table
- * @prop footerButtons - A list of buttons to render in the footer of the content section
- * @prop footerContent - Custom content rendered below the content table
- * @prop footerContainerClass - A class name applied to the footer container of the content section
- * @prop imageCardProps - Prop interface for the ImageCard component
- * @prop stackedTable - Toggles on the StackedTable component in place of the default StandardTable component - they are functionally equivalent with differing UIs
- * @prop contentProps - An object containing fields that render optional headers above the content section's table
- * @prop tableProps - Prop interface for the StandardTable and StackedTable components
- *
  */
 const ListingCard = (props: ListingCardProps) => {
   const {
@@ -68,6 +69,7 @@ const ListingCard = (props: ListingCardProps) => {
     contentProps,
     tableProps,
   } = props
+  const { LinkComponent } = useContext(NavigationContext)
 
   const getHeader = (
     header: CardHeader | undefined,
@@ -75,10 +77,16 @@ const ListingCard = (props: ListingCardProps) => {
     style?: HeaderType,
     customClass?: string
   ) => {
-    if (header && header.text) {
+    if (header && header.content) {
       return (
         <Heading priority={priority} style={style} className={customClass}>
-          {header.text}
+          {header.href ? (
+            <LinkComponent className="is-card-link" href={header.href}>
+              {header.content}
+            </LinkComponent>
+          ) : (
+            header.content
+          )}
         </Heading>
       )
     } else {
@@ -88,20 +96,19 @@ const ListingCard = (props: ListingCardProps) => {
 
   const getContentHeader = () => {
     return (
-      <>
+      <div className="listings-row_headers">
         {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
         {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
         {cardTags && cardTags?.length > 0 && (
-          <div className={"inline-flex flex-wrap justify-start w-full"}>
+          <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
               return (
-                <Tag styleType={AppearanceStyleType.warning} className={"mr-2 mb-2"} key={index}>
+                <Tag styleType={cardTag.styleType || AppearanceStyleType.warning} key={index}>
                   {cardTag.iconType && (
                     <Icon
                       size={"medium"}
                       symbol={cardTag.iconType}
                       fill={cardTag.iconColor ?? IconFillColors.primary}
-                      className={"mr-2"}
                     />
                   )}
                   {cardTag.text}
@@ -110,7 +117,7 @@ const ListingCard = (props: ListingCardProps) => {
             })}
           </div>
         )}
-      </>
+      </div>
     )
   }
 
@@ -118,8 +125,8 @@ const ListingCard = (props: ListingCardProps) => {
     return (
       <>
         <div className="listings-row_table">
-          {(contentProps?.tableHeader?.text || contentProps?.tableSubheader?.text) &&
-            (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
+          {(contentProps?.tableHeader?.content || contentProps?.tableSubheader?.content) &&
+            (contentProps.contentHeader?.content || contentProps?.contentSubheader?.content) && (
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
@@ -143,7 +150,11 @@ const ListingCard = (props: ListingCardProps) => {
             <div className={footerContainerClass ?? "listings-row_footer"}>
               {footerButtons?.map((footerButton, index) => {
                 return (
-                  <LinkButton href={footerButton.href} key={index}>
+                  <LinkButton
+                    href={footerButton.href}
+                    ariaHidden={footerButton.ariaHidden}
+                    key={index}
+                  >
                     {footerButton.text}
                   </LinkButton>
                 )
@@ -161,7 +172,7 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        <div className={"listings-row_headers"}>{getContentHeader()}</div>
+        {getContentHeader()}
         {getContent()}
       </div>
     </article>

package/src/text/Tag.docs.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Tag } from "./Tag"
+
+# Tag
+
+The tag component offers a simple way to present a content label or status indicator.
+
+<Canvas>
+  <Story id="text-tag--pill-colors" />
+</Canvas>
+
+<br />
+<br />
+
+## Variants
+
+There are several props which accept enums to adjust style type and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
+
+### Normal Shape
+
+(Default, no prop required.)
+
+<Canvas>
+  <Story id="text-tag--standard" />
+</Canvas>
+
+### Pill
+
+Set the `pillStyle` property to `true`.
+
+<Canvas>
+  <Story id="text-tag--pill" />
+</Canvas>
+
+### Fill Container
+
+Set the `fillContainer` property to `true` for a block tag which spans the entire width of its container.
+
+<Canvas>
+  <Story id="text-tag--pill-listings" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={Tag} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.tag` selector to customize the appearance of the component.
+
+| Name                     | Type        | Description                                     | Default                                             |
+| ------------------------ | ----------- | ----------------------------------------------- | --------------------------------------------------- |
+| `--normal-padding`       | Size        | Padding of the normal (no variant) tag          | `--bloom-s3` (top/bottom) `--bloom-s5` (left/right) |
+| `--normal-rounded`       | Size        | The border radius of the normal tag             | `--bloom-rounded-md`                                |
+| `--normal-font-size`     | Size        | The font size of the normal tag                 | `--bloom-font-size-tiny`                            |
+| `--normal-font-weight`   | Font Weight | The font weight of the normal tag               | `normal`                                            |
+| `--pill-padding`         | Size        | Padding of the pill variant tag                 | `--bloom-s2` (top/bottom) `--bloom-s4` (left/right) |
+| `--pill-rounded`         | Size        | The border radius of the pill tag               | `--bloom-rounded-full`                              |
+| `--pill-font-size`       | Size        | The font size of the pill tag                   | `--bloom-font-size-tiny`                            |
+| `--pill-font-weight`     | Font Weight | The font weight of the pill tag                 | `600`                                               |
+| `--pill-text-transform`  | Case        | Text case of of the pill tag                    | `uppercase`                                         |
+| `--pill-letter-spacing`  | Size        | The average gap between letters of the pill tag | `--bloom-letter-spacing-ultrawide`                  |
+| `--small-pill-padding`   | Size        | Padding of the small-size pill tag              | `--bloom-s1` (top/bottom) `--bloom-s3` (left/right) |  |
+| `--small-pill-font-size` | Size        | The font size of the small-size pill tag        | `--bloom-font-size-2xs`                             |

package/src/text/Tag.scss

@@ -1,94 +1,132 @@
 .tag {
-  @apply py-3;
-  @apply px-5;
-  @apply text-white;
-  @apply text-tiny;
-  @apply bg-primary;
-  @apply rounded-md;
-  @apply text-center;
+  /* Component Variables */
+  --normal-padding: var(--bloom-s3) var(--bloom-s5);
+  --normal-rounded: var(--bloom-rounded-md);
+  --normal-font-size: var(--bloom-font-size-tiny);
+  --normal-font-weight: normal;
+
+  --pill-padding: var(--bloom-s2) var(--bloom-s4);
+  --pill-rounded: var(--bloom-rounded-full);
+  --pill-font-size: var(--bloom-font-size-tiny);
+  --pill-font-weight: 600;
+  --pill-text-transform: uppercase;
+  --pill-letter-spacing: var(--bloom-letter-spacing-ultrawide);
+
+  --small-pill-padding: var(--bloom-s1) var(--bloom-s3);
+  --small-pill-font-size: var(--bloom-font-size-2xs);
+
+  /* Default Styles */
+  padding: var(--normal-padding);
+  border-radius: var(--normal-rounded);
+  font-size: var(--normal-font-size);
+  font-weight: var(--normal-font-weight);
+  color: var(--primary-appearance-label-color, var(--bloom-color-white));
+  font-family: var(--bloom-font-sans);
+  background-color: var(--primary-appearance-border-color, var(--bloom-color-primary));
+  text-align: center;
 
   &.is-pill {
-    @apply px-4;
-    @apply py-2;
-    @apply bg-primary-light;
-    @apply text-primary-dark;
-    @apply rounded-full;
-    @apply font-semibold;
-    @apply font-alt-sans;
-    @apply uppercase;
-    @apply tracking-ultrawide;
-    @apply inline;
-    @apply text-tiny;
-    @apply leading-4;
+    padding: var(--pill-padding);
+    background-color: var(--bloom-color-primary-light);
+    color: var(--bloom-color-primary-dark);
+    border-radius: var(--pill-rounded);
+    font-weight: var(--pill-font-weight);
+    font-family: var(--bloom-font-alt-sans);
+    text-transform: var(--pill-text-transform);
+    letter-spacing: var(--pill-letter-spacing);
+    display: inline;
+    font-size: var(--pill-font-size);
+    line-height: var(--bloom-line-height-4);
 
     &.is-small {
-      @apply text-2xs;
-      @apply py-1;
-      @apply px-3;
-      @apply leading-3;
+      font-size: var(--small-pill-font-size);
+      padding: var(--small-pill-padding);
+      line-height: var(--bloom-line-height-3);
     }
   }
 
   &.fill-container {
-    @apply w-full;
-    @apply inline-block;
+    width: 100%;
+    display: inline-block;
   }
 
   &.is-warning {
-    @apply bg-accent-warm-dark;
+    color: var(--warning-appearance-label-color, var(--bloom-color-white));
+    background-color: var(
+      --warning-appearance-background-color,
+      var(--bloom-color-accent-warm-dark)
+    );
   }
 
   &.is-secondary {
-    @apply text-white;
-    @apply bg-secondary;
+    color: var(--secondary-appearance-label-color, var(--bloom-color-white));
+    background-color: var(--secondary-appearance-background-color, var(--bloom-color-secondary));
   }
 
   &.is-success {
     &:not(.is-light-mode) {
-      @apply text-white;
-      @apply bg-success;
+      color: var(--success-appearance-label-color, var(--bloom-color-white));
+      background-color: var(--success-appearance-background-color, var(--bloom-color-success));
     }
+
     &.is-light-mode {
-      @apply text-gray-900;
-      @apply bg-success-light;
+      color: var(--success-light-appearance-label-color, var(--bloom-color-gray-900));
+      background-color: var(
+        --success-light-appearance-background-color,
+        var(--bloom-color-success-light)
+      );
     }
   }
 
   &.is-accent-cool {
     &:not(.is-light-mode) {
-      @apply text-white;
-      @apply bg-accent-cool-dark;
+      color: var(--accent-cool-appearance-label-color, var(--bloom-color-white));
+      background-color: var(
+        --accent-cool-appearance-background-color,
+        var(--bloom-color-accent-cool-dark)
+      );
     }
+
     &.is-light-mode {
-      @apply text-gray-900;
-      @apply bg-accent-cool;
+      color: var(--accent-cool-light-appearance-label-color, var(--bloom-color-gray-900));
+      background-color: var(
+        --accent-cool-light-appearance-background-color,
+        var(--bloom-color-accent-cool)
+      );
     }
   }
 
   &.is-accent-warm {
     &:not(.is-light-mode) {
-      @apply text-white;
-      @apply bg-accent-warm-dark;
+      color: var(--accent-warm-appearance-label-color, var(--bloom-color-white));
+      background-color: var(
+        --accent-warm-appearance-background-color,
+        var(--bloom-color-accent-warm-dark)
+      );
     }
+
     &.is-light-mode {
-      @apply text-gray-900;
-      @apply bg-accent-warm;
+      color: var(--accent-warm-light-appearance-label-color, var(--bloom-color-gray-900));
+      background-color: var(
+        --accent-warm-light-appearance-background-color,
+        var(--bloom-color-accent-warm)
+      );
     }
   }
 
   &.is-closed {
-    @apply text-white;
-    @apply bg-gray-750;
+    color: var(--closed-appearance-label-color, var(--bloom-color-white));
+    background-color: var(--closed-appearance-background-color, var(--bloom-color-gray-750));
   }
 
   &.is-info {
-    @apply text-gray-800;
-    @apply bg-warn-light;
+    color: var(--info-appearance-label-color, var(--bloom-color-gray-800));
+    background-color: var(--info-appearance-background-color, var(--bloom-color-warn-light));
   }
 
   &.is-small {
-    @apply text-sm;
-    @apply py-2;
-    @apply px-4;
+    font-size: var(--bloom-font-size-sm);
+    padding-block: var(--bloom-s2);
+    padding-inline: var(--bloom-s4);
   }
 }