@bloom-housing/ui-components 6.0.1-alpha.1 → 6.0.1-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 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.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.2...@bloom-housing/ui-components@6.0.1-alpha.3) (2022-10-03)
+
+
+### Code Refactoring
+
+* organize design system text styles ([#3055](https://github.com/bloom-housing/bloom/issues/3055)) ([f5bcb62](https://github.com/bloom-housing/bloom/commit/f5bcb629885fd9ce6c17e3e817bd0ee500373990))
+
+
+### BREAKING CHANGES
+
+* the different style types you can pass to the heading component have individually been renamed to fit the design system, as well as the prop to pass them in
+
+
+
+
+
+## [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)
 
 

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"
@@ -54,7 +55,7 @@ export * from "./src/headers/Hero"
 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"
@@ -162,5 +163,6 @@ export * from "./src/tables/AgPagination"
 
 /* Text */
 export * from "./src/text/Description"
+export * from "./src/text/Heading"
 export * from "./src/text/Message"
 export * from "./src/text/Tag"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "6.0.1-alpha.1",
+  "version": "6.0.1-alpha.3",
   "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",
@@ -43,6 +43,7 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
+    "@types/pretty": "2.0.1",
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
     "@types/react-test-renderer": "^16.9.3",
@@ -57,7 +58,9 @@
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
     "preact": "^10.5.14",
+    "pretty": "2.0.0",
     "puppeteer": "^10.1.0",
+    "react-dom-server": "0.0.5",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
@@ -110,5 +113,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "413ca224f8c49c4ae69e431cfabe26545fe54159"
+  "gitHead": "4e7935694f2d0551656828a64d487d2419c29ef4"
 }

package/src/actions/Button.scss

@@ -54,7 +54,7 @@
 
   &.is-secondary {
     border-color: var(--bloom-color-gray-700);
-    color: var(--bloom-color-gray-700);
+    color: var(--bloom-text-color-light);
 
     &:hover {
       background-color: var(--bloom-color-gray-700);

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/blocks/ImageCard.scss

@@ -150,7 +150,7 @@
 }
 
 .modal.image-card__gallery-modal {
-  --title-color: var(--bloom-color-gray-750);
+  --title-color: var(--bloom-text-color);
   --background-color: transparent;
   --content-padding-block: var(--bloom-s2) var(--bloom-s4);
   --footer-background-color: transparent;

package/src/blocks/StandardCard.scss

@@ -5,7 +5,7 @@
   --border-color: var(--bloom-color-gray-500);
   --title-color: var(--bloom-color-gray-900);
   --background-color: var(--bloom-color-white);
-  --blank-color: var(--bloom-color-gray-750);
+  --blank-color: var(--bloom-text-color);
   --blank-background: var(--bloom-color-gray-200);
 }
 

package/src/blocks/StandardCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./StandardCard.scss"
 
 export interface StandardCardProps {

package/src/documentation/Utilities.scss

@@ -0,0 +1,30 @@
+.mdx-table {
+  width: 100%;
+  table-layout: auto;
+  white-space: nowrap;
+  margin-top: var(--bloom-s8);
+  font-size: var(--bloom-font-size-tiny);
+
+  tr {
+    padding: var(--bloom-s4);
+    background-color: var(--bloom-color-white) !important;
+  }
+
+  th {
+    background-color: var(--bloom-color-primary-lighter);
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--bloom-text-color-darker);
+    letter-spacing: var(--bloom-letter-spacing-wide);
+  }
+
+  td:not(:first-child) {
+    width: 100%;
+  }
+
+  td,
+  th {
+    padding: var(--bloom-s2) var(--bloom-s4) var(--bloom-s2) var(--bloom-s4);
+    border: 1px solid var(--bloom-color-gray-450);
+  }
+}

package/src/documentation/Utilities.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Story, Meta, DocsContainer, Source } from "@storybook/addon-docs"
+import { LargeHeader, LargeHeaderSource, Typography } from "./Utilities"
+
+<Meta
+  title="Documentation/Utilities"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => (
+        <DocsContainer context={context}>
+          <div>{children}</div>
+        </DocsContainer>
+      ),
+    },
+  }}
+/>
+
+# Utilities
+
+These styles are component agnostic and can be used to ensure UI consistency across the application.
+
+## Typography
+
+These classes can be added to any text element in order to give it visual identity and hierarchy.
+
+<Typography />

package/src/documentation/Utilities.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import "./Utilities.scss"
+
+interface CustomMdxTableProps {
+  data: (string | React.ReactNode)[][]
+  headers: (string | React.ReactNode)[]
+}
+
+const CustomMdxTable = (props: CustomMdxTableProps) => {
+  return (
+    <table className={"mdx-table"}>
+      {props.headers.length > 0 && (
+        <tr>
+          {props.headers.map((header) => {
+            return <th align="left">{header}</th>
+          })}
+        </tr>
+      )}
+
+      {props.data.map((row) => {
+        return (
+          <tr>
+            {row.map((cell) => {
+              return <td>{cell}</td>
+            })}
+          </tr>
+        )
+      })}
+    </table>
+  )
+}
+
+export const Typography = () => {
+  return (
+    <CustomMdxTable
+      headers={["Class", "Example"]}
+      data={[
+        [
+          "text__large-primary",
+          <div className={"text__large-primary"}>Large Primary Text Style</div>,
+        ],
+        [
+          "text__medium-normal",
+          <div className={"text__medium-normal"}>Medium Normal Text Style</div>,
+        ],
+        [
+          "text__small-weighted",
+          <div className={"text__small-weighted"}>Small Weighted Text Style</div>,
+        ],
+        ["text__small-normal", <div className={"text__small-normal"}>Small Normal Text Style</div>],
+        [
+          "text__underline-weighted",
+          <div className={"text__underline-weighted"}>Underline Weighted Text Style</div>,
+        ],
+        [
+          "text__light-weighted",
+          <div className={"text__light-weighted"}>Light Weighted Text Style</div>,
+        ],
+        [
+          "text__caps-weighted",
+          <div className={"text__caps-weighted"}>Caps Weighted Text Style</div>,
+        ],
+        ["text_caps-spaced", <div className={"text_caps-spaced"}>Caps Spaced Text Style</div>],
+      ]}
+    />
+  )
+}

package/src/forms/DOBField.tsx

@@ -56,7 +56,7 @@ const DOBField = (props: DOBFieldProps) => {
     )
   }
 
-  const labelClasses = ["field-label--caps"]
+  const labelClasses = ["text_caps-spaced"]
   if (props.readerOnly) labelClasses.push("sr-only")
   if (hasError) labelClasses.push("text-alert")
 

package/src/forms/Field.tsx

@@ -75,7 +75,7 @@ const Field = (props: FieldProps) => {
 
   const label = useMemo(() => {
     const labelClasses = ["label"]
-    if (props.caps) labelClasses.push("field-label--caps")
+    if (props.caps) labelClasses.push("text_caps-spaced")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
     if (props.type === "radio") {

package/src/forms/FieldGroup.tsx

@@ -165,7 +165,7 @@ const FieldGroup = ({
   }
   return (
     <div>
-      {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
+      {groupLabel && <label className="text_caps-spaced">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
       <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>

package/src/forms/MultiSelectField.scss

@@ -82,7 +82,7 @@
   width: 100%;
   padding: var(--bloom-s1) var(--bloom-s2);
   font-size: var(--bloom-font-size-sm);
-  color: var(--bloom-color-gray-750);
+  color: var(--bloom-text-color);
   text-align: right;
 }
 
@@ -126,7 +126,7 @@
 
 .multi-select-field__option--no-results,
 .multi-select-field__option[aria-disabled="true"] {
-  color: var(--bloom-color-gray-750) !important;
+  color: var(--bloom-text-color) !important;
   cursor: not-allowed !important;
   text-decoration: none !important;
 }

package/src/forms/PhoneField.tsx

@@ -22,7 +22,7 @@ export const PhoneField = (props: {
   dataTestId?: string
 }) => {
   const labelClasses = ["label"]
-  if (props.caps) labelClasses.push("field-label--caps")
+  if (props.caps) labelClasses.push("text_caps-spaced")
   if (props.readerOnly) labelClasses.push("sr-only")
   /**
    * we need to handle two different use cases,

package/src/global/forms.scss

@@ -23,7 +23,7 @@
   }
 
   label.sr-only + .control,
-  label.field-label--caps + .control {
+  label.text_caps-spaced + .control {
     @apply mt-0;
   }
 
@@ -31,7 +31,7 @@
     @apply mt-2;
   }
 
-  .field-label--caps.label + .field-note {
+  .text_caps-spaced.label + .field-note {
     @apply mt-0;
   }
 
@@ -256,10 +256,9 @@
   }
 }
 
-/* Restore previous Tailwind v1 color */
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: var(--bloom-color-gray-650);
 }
 
 input[type],
@@ -298,17 +297,6 @@ input[type="number"] {
   @apply text-gray-800;
 }
 
-.field-label--caps {
-  @apply font-sans;
-  @apply uppercase;
-  @apply text-gray-750;
-  @apply tracking-widest;
-  @apply font-semibold;
-  @apply text-tiny;
-  @apply mb-3;
-  @apply inline-block;
-}
-
 .field--inline {
   display: inline-block;
 }

package/src/global/mixins.scss

@@ -116,7 +116,7 @@
   &.is-warning {
     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));
+    color: var(--warning-appearance-label-color, var(--bloom-text-color-dark));
 
     &:hover {
       background-color: var(
@@ -176,7 +176,7 @@
     }
 
     &.is-warning {
-      color: var(--bloom-color-gray-800);
+      color: var(--bloom-text-color-dark);
 
       &:hover {
         color: var(--bloom-color-white);