@bloom-housing/ui-components 5.0.1-alpha.12 → 5.0.1-alpha.15

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 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.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.14...@bloom-housing/ui-components@5.0.1-alpha.15) (2022-07-12)
+
+
+### Features
+
+* modal styling updates ([#2857](https://github.com/bloom-housing/bloom/issues/2857)) ([4faf6de](https://github.com/bloom-housing/bloom/commit/4faf6de448a7fff8d4fa1a7a1144674ace311732))
+
+
+
+
+
+## [5.0.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.13...@bloom-housing/ui-components@5.0.1-alpha.14) (2022-07-12)
+
+
+### Features
+
+* **preferencelist:** vertically align content at $md bp ([8dc7867](https://github.com/bloom-housing/bloom/commit/8dc786768fe3e2c82e8e345e418148751971a1c2)), closes [#2827](https://github.com/bloom-housing/bloom/issues/2827)
+
+
+
+
+
+## [5.0.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.12...@bloom-housing/ui-components@5.0.1-alpha.13) (2022-07-12)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.0.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.11...@bloom-housing/ui-components@5.0.1-alpha.12) (2022-07-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.12",
+  "version": "5.0.1-alpha.15",
   "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": "f9fd9a0d8ae302a05bce08fb7ea8546b4c656725"
+  "gitHead": "8d0a4c4af65490c6f1fdd971d4661cb0e286c432"
 }

package/src/actions/Button.scss

@@ -59,6 +59,7 @@
     &:hover {
       background-color: var(--bloom-color-gray-700);
       color: var(--bloom-color-white);
+      border-color: var(--bloom-color-gray-700);
     }
   }
 

package/src/global/mixins.scss

@@ -93,7 +93,7 @@
         --success-appearance-hover-background-color,
         var(--bloom-color-success-dark)
       );
-      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success));
+      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success-dark));
       color: var(--success-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
@@ -129,7 +129,7 @@
   }
 
   &.is-borderless {
-    color: var(--bloom-color-primary-darker);
+    color: var(--bloom-color-primary);
     border-color: transparent;
     background: transparent;
 
@@ -152,7 +152,7 @@
       --outlined-appearance-hover-background-color,
       var(--bloom-color-primary-dark)
     );
-    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary));
+    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary-dark));
     color: var(--outlined-appearance-hover-label-color, var(--bloom-color-white));
   }
 

package/src/global/tokens/borders.scss

@@ -12,4 +12,6 @@
   --bloom-border-2: 2px;
   --bloom-border-4: 4px;
   --bloom-border-8: 8px;
+
+  --bloom-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }

package/src/global/tokens/fonts.scss

@@ -10,6 +10,7 @@
   --bloom-font-size-sm: 0.8125rem;
   --bloom-font-size-tiny: 0.875rem;
   --bloom-font-size-base: 1rem;
+  --bloom-font-size-base-alt: 1.125rem;
   --bloom-font-size-lg: 1.25rem;
   --bloom-font-size-xl: 1.375rem;
   --bloom-font-size-2xl: 1.5rem;

package/src/lists/PreferencesList.scss

@@ -2,7 +2,7 @@
   .info-card__title {
     @apply mb-0;
 
-    @media (max-width: $screen-sm) {
+    @media (max-width: $screen-md) {
       margin-left: 0px;
       margin-top: var(--bloom-s3);
     }
@@ -40,7 +40,7 @@
     margin-left: -3rem;
   }
 
-  @media (max-width: $screen-sm) {
+  @media (max-width: $screen-md) {
     margin-left: 0px;
     float: none;
   }
@@ -55,7 +55,7 @@
   @apply text-gray-750;
   @apply text-tiny;
 
-  @media (max-width: $screen-sm) {
+  @media (max-width: $screen-md) {
     margin-left: 0px;
   }
 }

package/src/locales/general.json

@@ -948,6 +948,7 @@
   "users.accountConfirmed": "Account confirmed",
   "users.confirmationSent": "Confirmation sent",
   "users.inviteSent": "Invite sent",
+  "users.jurisdictionalAdmin": "Jurisdictional Admin",
   "users.userDeleted": "User deleted",
   "users.userUpdated": "User updated",
   "welcome.allApplicationClosed": "All applications are currently closed, but you can view closed listings.",

package/src/overlays/Modal.docs.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Modal } from "./Modal"
+
+# Modal
+
+The modal component displays a modal with a title and optional children typed as either a string or JSX. The modal includes a number of other optional settings.
+
+## Component Properties
+
+<ArgsTable of={Modal} />
+
+You can apply CSS variables to the `.modal` selector to customize the appearance of the component.
+
+| Name                        | Type               | Description                     | Default                                                   |
+| --------------------------- | ------------------ | ------------------------------- | --------------------------------------------------------- |
+| `--title-color`             | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-900" />              |
+| `--title-font-size`         | Size               | Title text size                 | `--bloom-font-size-base-alt`                              |
+| `--title-font-family`       | Font               | Title font family               | `--bloom-font-sans`                                       |
+| `--content-font-color`      | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-700" />              |
+| `--max-width`               | Size               | Modal max width                 | `--bloom-width-5xl`                                       |
+| `--desktop-min-width`       | Size               | Modal min width on desktop      | `--bloom-width-lg`                                        |
+| `--footer-background-color` | Color              | Footer background color         | <Swatch colorVar="--bloom-color-primary-lighter" />       |
+| `--border-radius`           | Size               | Border radius of modal, content | `--bloom-rounded`                                         |
+| `--background-color`        | Color              | Background color of modal       | <Swatch colorVar="--bloom-color-white" />                 |
+| `--modal-shadow`            | Box Shadow         | Shadow behind modal             | `--bloom-shadow-md`                                       |
+| `--modal-border`            | Border             | Border of modal                 | `var(--bloom-border-1) solid var(--bloom-color-gray-400)` |
+| `--footer-justify`          | Flex Justification | Footer alignment                | `normal`                                                  |

package/src/overlays/Modal.scss

@@ -1,63 +1,89 @@
 .modal {
-  @apply relative;
-  @apply max-w-5xl;
-  @apply m-auto;
-  @apply border;
-  @apply border-solid;
-  @apply border-gray-400;
-  @apply bg-white;
-  @apply rounded-md;
-  @apply shadow-md;
-
-  @screen md {
-    min-width: 32rem;
+  /* Component Variables */
+  --title-color: var(--bloom-color-gray-900);
+  --title-font-size: var(--bloom-font-size-base-alt);
+  --title-font-family: var(--bloom-font-sans);
+  --content-font-color: var(--bloom-color-gray-700);
+  --max-width: var(--bloom-width-5xl);
+  --desktop-min-width: var(--bloom-width-lg);
+  --footer-background-color: var(--bloom-color-primary-lighter);
+  --border-radius: var(--bloom-rounded);
+  --background-color: var(--bloom-color-white);
+  --modal-shadow: var(--bloom-shadow-md);
+  --modal-border: var(--bloom-border-1) solid var(--bloom-color-gray-400);
+  --footer-justify: normal;
+
+  position: relative;
+  max-width: var(--max-width);
+  margin: auto;
+  border: var(--modal-border);
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--modal-shadow);
+
+  @media (min-width: $screen-md) {
+    min-width: var(--desktop-min-width);
   }
 }
 
-// Content containers
 .modal__header,
 .modal__inner,
 .modal__footer {
-  @apply py-4;
-  @apply px-8;
+  padding-block: var(--bloom-s4);
+  padding-inline: var(--bloom-s6);
 }
 
 .modal__header {
-  @apply pt-8;
+  padding-top: var(--bloom-s8);
 }
 
 .modal__title {
-  @apply text-xl;
+  padding: var(--bloom-s6) var(--bloom-s6) 0 var(--bloom-s6);
+  color: var(--title-color);
+  font-size: var(--title-font-size);
+  font-family: var(--title-font-family);
 }
 
 .modal__inner {
+  padding-block: var(--bloom-s8);
+
   &:last-of-type {
-    @apply rounded-b;
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
   }
 
   &.is-scrollable {
     max-height: calc(100vh - 200px);
-    @apply overflow-y-auto;
+    overflow-y: auto;
+  }
+  p {
+    color: var(--content-font-color);
   }
 }
 
 .modal__footer {
-  @apply rounded-b;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  background-color: var(--footer-background-color);
+
+  display: flex;
+  flex-direction: row-reverse;
+  gap: var(--bloom-s5);
+  justify-content: var(--footer-justify);
 }
 
 .modal__close {
-  @apply absolute;
-  top: 1.5rem;
-  right: 2rem;
+  position: absolute;
+  top: var(--bloom-s5);
+  right: var(--bloom-s5);
   cursor: pointer;
 }
 
-// Loading container for modal
 .modal__loading {
-  @apply w-full;
-  @apply flex;
-  @apply text-center;
-  @apply items-center;
-  @apply justify-center;
-  min-height: 12rem;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--bloom-s48);
 }

package/src/overlays/Modal.tsx

@@ -1,25 +1,26 @@
 import React, { useRef } from "react"
 import "./Modal.scss"
-import { Icon } from "../icons/Icon"
+import { Icon, IconFillColors } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
 import { nanoid } from "nanoid"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {
-  title: string
   actions?: React.ReactNode[]
-  hideCloseIcon?: boolean
   children?: React.ReactNode
-  slim?: boolean
-  role?: string
-  modalClassNames?: string
-  innerClassNames?: string
   closeClassNames?: string
+  closeIconColor?: string
+  hideCloseIcon?: boolean
+  innerClassNames?: string
+  modalClassNames?: string
+  role?: string
   scrollable?: boolean
+  slim?: boolean
+  title: string
 }
 
 const ModalHeader = (props: { title: string; uniqueId?: string }) => (
   <>
-    <header className="modal__inner">
+    <header>
       <h1 className="modal__title" id={props.uniqueId}>
         {props.title}
       </h1>
@@ -28,8 +29,8 @@ const ModalHeader = (props: { title: string; uniqueId?: string }) => (
 )
 
 const ModalFooter = (props: { actions: React.ReactNode[] }) => (
-  <footer className="modal__footer bg-primary-lighter" data-testid="footer">
-    <div className="flex flex-row-reverse gap-5">
+  <footer className="modal__footer" data-testid="footer">
+    <div className="flex flex-row-reverse gap-5 items-center">
       {props.actions.map((action: React.ReactNode, index: number) => (
         <div key={index}>{action}</div>
       ))}
@@ -61,11 +62,7 @@ export const Modal = (props: ModalProps) => {
         <ModalHeader title={props.title} uniqueId={uniqueIdRef.current} />
 
         <section className={innerClassNames.join(" ")}>
-          {typeof props.children === "string" ? (
-            <p className="c-steel">{props.children}</p>
-          ) : (
-            props.children
-          )}
+          {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
         </section>
 
         {props.actions && <ModalFooter actions={props.actions} />}
@@ -77,7 +74,11 @@ export const Modal = (props: ModalProps) => {
             onClick={props.onClose}
             tabIndex={0}
           >
-            <Icon size="medium" symbol="close" />
+            <Icon
+              size="medium"
+              symbol="close"
+              fill={props.closeIconColor ?? IconFillColors.primary}
+            />
           </button>
         )}
       </div>