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

package/CHANGELOG.md

@@ -3,6 +3,265 @@
 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.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
+
+
+
+
+
+## [5.1.1-alpha.35](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.34...@bloom-housing/ui-components@5.1.1-alpha.35) (2022-09-28)
+
+
+### Bug Fixes
+
+* email tests ([#3095](https://github.com/bloom-housing/bloom/issues/3095)) ([a663dfd](https://github.com/bloom-housing/bloom/commit/a663dfd3df457f88130e59c37ea30d70ae2b6d0b))
+* heading size issues on resources page ([#3090](https://github.com/bloom-housing/bloom/issues/3090)) ([d7492a2](https://github.com/bloom-housing/bloom/commit/d7492a2b0fc6ec877fa99d7234a373cca7fd86ac))
+
+
+
+
+
+## [5.1.1-alpha.34](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.33...@bloom-housing/ui-components@5.1.1-alpha.34) (2022-09-28)
+
+
+### Features
+
+* **preferences:** add delete preference button ([#3075](https://github.com/bloom-housing/bloom/issues/3075)) ([29a079e](https://github.com/bloom-housing/bloom/commit/29a079e23ecc5cd31589993fef0c9de661c6e8c8))
+
+
+
+
+
+## [5.1.1-alpha.33](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.32...@bloom-housing/ui-components@5.1.1-alpha.33) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.32](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.31...@bloom-housing/ui-components@5.1.1-alpha.32) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.31](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.30...@bloom-housing/ui-components@5.1.1-alpha.31) (2022-09-26)
+
+
+### Bug Fixes
+
+* make pill style on listing card optional ([#3088](https://github.com/bloom-housing/bloom/issues/3088)) ([e574010](https://github.com/bloom-housing/bloom/commit/e57401067639e3e05a426f61dd0c3dc18dcda35d))
+
+
+
+
+
+## [5.1.1-alpha.30](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.29...@bloom-housing/ui-components@5.1.1-alpha.30) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.28...@bloom-housing/ui-components@5.1.1-alpha.29) (2022-09-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.28](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.27...@bloom-housing/ui-components@5.1.1-alpha.28) (2022-09-19)
+
+
+### Features
+
+* add confirm modal when copying a preference ([#3041](https://github.com/bloom-housing/bloom/issues/3041)) ([b3d69e9](https://github.com/bloom-housing/bloom/commit/b3d69e9b557998489c828c86ff742c91feca799f))
+
+
+
+
+
+## [5.1.1-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.26...@bloom-housing/ui-components@5.1.1-alpha.27) (2022-09-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.25...@bloom-housing/ui-components@5.1.1-alpha.26) (2022-09-16)
+
+
+### Bug Fixes
+
+* updated css class naming ([#483](https://github.com/bloom-housing/bloom/issues/483)) ([#3073](https://github.com/bloom-housing/bloom/issues/3073)) ([bfd68de](https://github.com/bloom-housing/bloom/commit/bfd68de406b1785676e6453afd1536159096d080))
+
+
+
+
+
+## [5.1.1-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.24...@bloom-housing/ui-components@5.1.1-alpha.25) (2022-09-14)
+
+
+### Features
+
+* allow alerts to be sticky under page header ([#3050](https://github.com/bloom-housing/bloom/issues/3050)) ([d776e84](https://github.com/bloom-housing/bloom/commit/d776e84f76a8bde3f24d1c6706ed35dd777dc66b))
+
+
+
+
+
+## [5.1.1-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.23...@bloom-housing/ui-components@5.1.1-alpha.24) (2022-09-13)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.22...@bloom-housing/ui-components@5.1.1-alpha.23) (2022-09-12)
+
+
+### Bug Fixes
+
+* add unit tests to partners ([#3023](https://github.com/bloom-housing/bloom/issues/3023)) ([92889f5](https://github.com/bloom-housing/bloom/commit/92889f56f1fc6dc54be207ca0cf3dd9ce58176d1))
+
+
+
+
+
+## [5.1.1-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.21...@bloom-housing/ui-components@5.1.1-alpha.22) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.20...@bloom-housing/ui-components@5.1.1-alpha.21) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.19...@bloom-housing/ui-components@5.1.1-alpha.20) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.18...@bloom-housing/ui-components@5.1.1-alpha.19) (2022-08-31)
+
+
+### Bug Fixes
+
+* table columns should take up full width ([#3005](https://github.com/bloom-housing/bloom/issues/3005)) ([5524049](https://github.com/bloom-housing/bloom/commit/5524049f248151b1d3510feb1ea73a7775f7f4d5))
+
+
+
+
+
+## [5.1.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.17...@bloom-housing/ui-components@5.1.1-alpha.18) (2022-08-31)
+
+
+### Bug Fixes
+
+* null app fee showing null string ([#3016](https://github.com/bloom-housing/bloom/issues/3016)) ([05e28ad](https://github.com/bloom-housing/bloom/commit/05e28ad9f887dcfff5567af96e97be50c86b2109))
+
+
+
+
+
+## [5.1.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.16...@bloom-housing/ui-components@5.1.1-alpha.17) (2022-08-30)
+
+
+### Bug Fixes
+
+* **login:** too many login attempts fix ([#2988](https://github.com/bloom-housing/bloom/issues/2988)) ([4323e1c](https://github.com/bloom-housing/bloom/commit/4323e1c4cee18d8ee805378b32ae35826013d5c4))
+
+
+
+
+
+## [5.1.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.15...@bloom-housing/ui-components@5.1.1-alpha.16) (2022-08-30)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.14...@bloom-housing/ui-components@5.1.1-alpha.15) (2022-08-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.13...@bloom-housing/ui-components@5.1.1-alpha.14) (2022-08-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.12...@bloom-housing/ui-components@5.1.1-alpha.13) (2022-08-26)
+
+
+### Bug Fixes
+
+* add margin in contact section ([#2999](https://github.com/bloom-housing/bloom/issues/2999)) ([4acb49a](https://github.com/bloom-housing/bloom/commit/4acb49acf17ebabb7a0a34160d992cb5f63eeb02))
+
+
+
+
+
+## [5.1.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.11...@bloom-housing/ui-components@5.1.1-alpha.12) (2022-08-24)
+
+
+### Features
+
+* show preference details on listing form ([#2989](https://github.com/bloom-housing/bloom/issues/2989)) ([b4b2b9e](https://github.com/bloom-housing/bloom/commit/b4b2b9ee75c4895ea5b0694dddbf0c8979c0e251))
+
+
+
+
+
+## [5.1.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.10...@bloom-housing/ui-components@5.1.1-alpha.11) (2022-08-23)
+
+
+* refactor!: preferences & programs data model merged (#2904) ([8e027ff](https://github.com/bloom-housing/bloom/commit/8e027ff905118f36c61bc0f974231d9bb8911131)), closes [#2904](https://github.com/bloom-housing/bloom/issues/2904)
+
+
+### BREAKING CHANGES
+
+* The preference and program entities have been merged into a single entity called MultiselectQuestion
+
+
+
+
+
+## [5.1.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.9...@bloom-housing/ui-components@5.1.1-alpha.10) (2022-08-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.1.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.8...@bloom-housing/ui-components@5.1.1-alpha.9) (2022-08-22)
 
 

package/index.ts

@@ -1,5 +1,6 @@
 /* Actions */
 export * from "./src/actions/Button"
+export * from "./src/actions/ButtonGroup"
 export * from "./src/actions/ExpandableText"
 export * from "./src/actions/LinkButton"
 export * from "./src/actions/LocalizedLink"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.9",
+  "version": "6.0.1-alpha.0",
   "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",
@@ -66,7 +66,7 @@
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
-    "typescript": "^4.5.5",
+    "typescript": "4.6.4",
     "webpack": "^4.44.2"
   },
   "dependencies": {
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "b9ed99bd1b58d8057bae8782616aa43f53f1294e"
+  "gitHead": "2cfc84763d17fad62ed2675f85a046e05bdf91e2"
 }

package/src/actions/Button.tsx

@@ -79,6 +79,7 @@ const Button = (props: ButtonProps) => {
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
       aria-hidden={props.ariaHidden}
+      tabIndex={props.ariaHidden ? -1 : 0}
       aria-label={props.ariaLabel}
       data-test-id={props.dataTestId || props["data-test-id"]}
     >

package/src/actions/ButtonGroup.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { ButtonGroup } from "./ButtonGroup"
+
+# ButtonGroup
+
+The button group component lets you place multiple buttons along a horizontal or vertical (mobile primarily) axis and group/space buttons according to some simple flex rules.
+
+<Canvas>
+  <Story id="actions-button-group--two-columns" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={ButtonGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button-group` selector to customize the appearance of the component.
+
+| Name                       | Type  | Description                                                                         | Default                                             |
+| -------------------------- | ----- | ----------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `--background-color`       | Color | Background behind the buttons                                                       | <Swatch colorVar="--bloom-color-primary-lighter" /> |
+| `--padding-block`          | Size  | The space around the buttons in the block (vertical) direction                      | `--bloom-s8`                                        |
+| `--padding-inline-desktop` | Size  | The space around the buttons in the inline (horizontal) direction on larger screens | `--bloom-s16`                                       |
+| `--padding-inline-mobile`  | Size  | The space around the buttons in the inline (horizontal) direction on small screens  | `--bloom-s4`                                        |
+| `--inner-button-gap`       | Size  | The gap between buttons whether in separate columns or within the same column       | `--bloom-s3`                                        |

package/src/actions/ButtonGroup.scss

@@ -0,0 +1,61 @@
+.button-group {
+  --background-color: var(--bloom-color-primary-lighter);
+  --padding-block: var(--bloom-s8);
+  --padding-inline-desktop: var(--bloom-s16);
+  --padding-inline-mobile: var(--bloom-s4);
+  --inner-button-gap: var(--bloom-s3);
+
+  --padding-inline: var(--padding-inline-desktop);
+
+  @media (max-width: $screen-sm) {
+    --padding-inline: var(--padding-inline-mobile);
+  }
+
+  background-color: var(--background-color);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inner-button-gap);
+
+  & > .button-group__column {
+    display: flex;
+    gap: var(--inner-button-gap);
+
+    .button {
+      @media (max-width: $screen-sm) {
+        --normal-rounded: var(--small-rounded);
+        --normal-padding: var(--small-padding);
+        --normal-font-size: var(--small-font-size);
+      }
+    }
+  }
+
+  &.has-between-spacing {
+    justify-content: space-between;
+  }
+
+  &.has-even-spacing {
+    justify-content: space-evenly;
+  }
+
+  &.has-fullwidth-mobile-buttons {
+    &,
+    & > .button-group__column {
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+
+        .button {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.is-reversed {
+    &,
+    & > .button-group__column {
+      flex-direction: row-reverse;
+    }
+  }
+}

package/src/actions/ButtonGroup.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import "./ButtonGroup.scss"
+
+export enum ButtonGroupSpacing {
+  between = "between",
+  even = "even",
+}
+
+export interface ButtonGroupProps {
+  /** Pass either Button components in, or fragments which can contain one or more buttons */
+  columns: React.ReactNodeArray
+  /** Between spacing pushes the columns far apart, even spacing keeps them closer together */
+  spacing?: ButtonGroupSpacing
+  /** When true, buttons will collapse to a single column on small screens and go full-width */
+  fullwidthMobile?: boolean
+  /** When true, the flex ordering of columns will reverse (aka RTL) */
+  reversed?: boolean
+}
+
+const ButtonGroup = ({
+  spacing = ButtonGroupSpacing.between,
+  columns,
+  fullwidthMobile,
+  reversed,
+}: ButtonGroupProps) => {
+  const spacingClassName = `has-${spacing}-spacing`
+  const classNames = ["button-group", spacingClassName]
+  if (fullwidthMobile) classNames.push("has-fullwidth-mobile-buttons")
+  if (reversed) classNames.push("is-reversed")
+
+  return (
+    <div className={classNames.join(" ")}>
+      {columns.map((column, index) => (
+        <div key={index} className="button-group__column">
+          {column}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { ButtonGroup as default, ButtonGroup }

package/src/actions/LinkButton.tsx

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

package/src/blocks/FormCard.scss

@@ -32,6 +32,7 @@
   @apply border-t-4;
   @apply border-primary;
   @apply leading-tight;
+  @apply text-3xl;
 
   @screen md {
     @apply mx-auto;
@@ -69,7 +70,6 @@
 
   @screen print {
     @apply py-2;
-    @apply px-0;
   }
 }
 
@@ -87,13 +87,7 @@
 }
 
 .form-card__group {
-  @screen md {
-    @apply px-8;
-  }
-
-  @screen print {
-    @apply px-0;
-  }
+  @apply px-8;
 }
 
 .form-card__header {

package/src/blocks/HousingCounselor.tsx

@@ -9,6 +9,11 @@ export interface HousingCounselorProps {
   name: string
   phone?: string
   website?: string
+  strings?: {
+    callNumber?: string
+    languageServices?: string
+    website?: string
+  }
 }
 
 const LanguageLabel = (language: string) => {
@@ -24,7 +29,7 @@ const HousingCounselor = (props: HousingCounselorProps) => {
     <div className="resource-item text-base">
       <h3 className="font-sans text-lg">{props.name}</h3>
       <p className="text-sm text-gray-800 pb-2">
-        {t("housingCounselors.languageServices")}
+        {props.strings?.languageServices ?? t("housingCounselors.languageServices")}
         {props.languages.map((language) => LanguageLabel(language))}
       </p>
       {props.addressStreet && (
@@ -35,13 +40,13 @@ const HousingCounselor = (props: HousingCounselorProps) => {
       {props.phone && (
         <a className="icon-item pb-1" href={`tel:+1${props.phone}`}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />
-          {` ${t("housingCounselors.call", { number: props.phone })}`}
+          {` ${props.strings?.callNumber ?? t("housingCounselors.call", { number: props.phone })}`}
         </a>
       )}
       {props.website && (
         <a className="icon-item" href={props.website}>
           <Icon symbol="globe" size="medium" fill={IconFillColors.primary} />
-          {` ${t("t.website")}`}
+          {` ${props.strings?.website ?? t("t.website")}`}
         </a>
       )}
     </div>

package/src/blocks/ImageCard.tsx

@@ -5,10 +5,10 @@ import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceStyleType } from "../global/AppearanceTypes"
-import { t } from "../helpers/translator"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 import { Modal } from "../overlays/Modal"
 import { Button } from "../actions/Button"
+import { t } from "../helpers/translator"
 
 export interface StatusBarType {
   status?: ApplicationStatusType
@@ -53,6 +53,9 @@ export interface ImageCardProps {
   moreImagesLabel?: string
   /** The aria label of the clickable region of the images grid */
   moreImagesDescription?: string
+  strings?: {
+    defaultImageAltText?: string
+  }
 }
 
 /**
@@ -64,20 +67,24 @@ const ImageCard = (props: ImageCardProps) => {
   const [showModal, setShowModal] = useState(false)
 
   const getStatuses = () => {
-    return props.statuses?.map((status, index) => {
+    const statuses = props.statuses?.map((status, index) => {
       return (
-        <aside className="image-card__status" aria-label={status.content} key={index}>
-          <ApplicationStatus
-            status={status.status}
-            content={status.content}
-            subContent={status.subContent}
-            withIcon={!status.hideIcon}
-            iconType={status.iconType}
-            vivid
-          />
-        </aside>
+        <ApplicationStatus
+          status={status.status}
+          content={status.content}
+          subContent={status.subContent}
+          withIcon={!status.hideIcon}
+          iconType={status.iconType}
+          vivid
+          key={index}
+        />
       )
     })
+    return (
+      <aside className="image-card__status" aria-label={`${props.description} Statuses`}>
+        {statuses}
+      </aside>
+    )
   }
 
   const innerClasses = ["image-card__inner"]
@@ -119,7 +126,11 @@ const ImageCard = (props: ImageCardProps) => {
           {props.imageUrl ? (
             <img
               src={props.imageUrl}
-              alt={props.description || t("listings.buildingImageAltText")}
+              alt={
+                props.description ??
+                props.strings?.defaultImageAltText ??
+                t("listings.buildingImageAltText")
+              }
             />
           ) : props.images && displayedImages ? (
             displayedImages.map((image, index) => (

package/src/blocks/MediaCard.docs.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { MediaCard } from "./MediaCard"
+
+# Media Card
+
+The media card component is used to describe the title and, optionally, subtitle of a corresponding piece of media. The header section and title of the media card is clickable and displays the media via the required handleClick prop.
+
+<Canvas>
+  <Story id="blocks-media-card--with-title-and-subtitle" />
+</Canvas>
+<Canvas>
+  <Story id="blocks-media-card--with-just-title" />
+</Canvas>
+<Canvas>
+  <Story id="blocks-media-card--with-custom-icon" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={MediaCard} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.media-card` selector to customize the appearance of the component.
+
+| Name                    | Type  | Description                                              | Default                                         |
+| ----------------------- | ----- | -------------------------------------------------------- | ----------------------------------------------- |
+| `--header-height`       | Size  | The height of the header section                         | `--bloom-s24`                                   |
+| `--title-color`         | Color | The color of media title and header section              | `--bloom-color-primary-dark`                    |
+| `--title-font-size`     | Size  | The font size of media title                             | `--bloom-font-size-base`                        |
+| `--title-font-family`   | Size  | The font family of the media title                       | `--bloom-font-sans`                             |
+| `--title-font-spacing`  | Size  | The letter spacing of media title                        | `--bloom-letter-spacing-wide`                   |
+| `--subtitle-font-size`  | Size  | The font size of the media subtitle                      | `--bloom-font-size-tiny`                        |
+| `--content-bg-color`    | Color | The background color of card body                        | `--bloom-color-gray-200`                        |
+| `--card-border`         | Size  | The card border settings (thickness, border type, color) | `--bloom-border-1 solid --bloom-color-gray-450` |
+| `--card-border-rounded` | Size  | The card corner radius                                   | `--bloom-rounded`                               |
+| `--card-padding`        | Size  | The padding of the card body                             | `--bloom-s6`                                    |

package/src/blocks/MediaCard.scss

@@ -1,4 +1,5 @@
 .media-card {
+  --header-height: var(--bloom-s24);
   --title-color: var(--bloom-color-primary-dark);
   --title-font-size: var(--bloom-font-size-base);
   --title-font-family: var(--bloom-font-sans);
@@ -8,33 +9,30 @@
   --card-border: var(--bloom-border-1) solid var(--bloom-color-gray-450);
   --card-border-rounded: var(--bloom-rounded);
   --card-padding: var(--bloom-s6);
-  --max-width: var(--bloom-width-lg);
-  --background-color: var(--bloom-color-white);
-  max-width: var(--max-width);
   border: var(--card-border);
   border-radius: var(--card-border-rounded);
   background-color: var(--content-bg-color);
-  max-width: var(--max-width);
 }
 
 .media-card__header {
-  padding-top: var(--card-padding);
-  padding-bottom: var(--card-padding);
+  height: var(--header-height);
   border-top-right-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
   border-top-left-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
   background-color: var(--title-color);
   cursor: pointer;
+  position: relative;
+  svg {
+    position: absolute;
+    // Explicit values since reflective of icon size
+    top: calc(50% - 1.5rem);
+    left: calc(50% - 1.5rem);
+  }
 }
 
 .media-card__header-container {
   width: 100%;
 }
 
-.media-card__icon-container {
-  display: flex;
-  justify-content: center;
-}
-
 .media-card__body {
   padding: var(--card-padding);
 }
@@ -44,6 +42,7 @@
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);
   letter-spacing: var(--title-font-spacing);
+  text-align: left;
   font-weight: 700;
 }