@bloom-housing/ui-components 5.0.1-alpha.14 → 5.0.1-alpha.17

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 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.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.16...@bloom-housing/ui-components@5.0.1-alpha.17) (2022-07-15)
+
+
+### Features
+
+* creating users as admin ([#2856](https://github.com/bloom-housing/bloom/issues/2856)) ([dd946d1](https://github.com/bloom-housing/bloom/commit/dd946d1777b4678e89832da527768180f474d129))
+
+
+
+
+
+## [5.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.15...@bloom-housing/ui-components@5.0.1-alpha.16) (2022-07-13)
+
+
+### Bug Fixes
+
+* add classname prop for custom styling onto application status component ([#2888](https://github.com/bloom-housing/bloom/issues/2888)) ([fedcaa4](https://github.com/bloom-housing/bloom/commit/fedcaa4e4bf537d0207f7d0ecfaf5078879e1fad))
+
+
+
+
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.14",
+  "version": "5.0.1-alpha.17",
   "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": "ff2e7121dfafb893da6f2ecf4cd7c1e38413f10b"
+  "gitHead": "733ec1abaa3d95e7cc77048744d05dfbaf9adc5c"
 }

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/notifications/ApplicationStatus.tsx

@@ -5,6 +5,7 @@ import "./ApplicationStatus.scss"
 
 export interface ApplicationStatusProps {
   content: string
+  className?: string
   iconColor?: string
   iconType?: UniversalIconType
   status?: ApplicationStatusType
@@ -16,6 +17,7 @@ export interface ApplicationStatusProps {
 const ApplicationStatus = (props: ApplicationStatusProps) => {
   let bgColor = ""
   const {
+    className,
     content,
     iconColor,
     iconType = "clock",
@@ -56,8 +58,13 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
       bgColor = "bg-primary"
   }
 
+  const classNames = ["application-status", textSize, textColor, bgColor]
+  if (className) {
+    classNames.push(className)
+  }
+
   return (
-    <div className={`application-status ${textSize} ${textColor} ${bgColor}`}>
+    <div className={classNames.join(" ")}>
       {icon}
       <span>
         {content}

package/src/notifications/SiteAlert.tsx

@@ -7,6 +7,10 @@ type SiteAlertProps = {
   dismissable?: boolean
   type?: AlertTypes
   className?: string
+  alertMessage?: {
+    type: AlertTypes
+    message: string
+  }
 }
 
 export const setSiteAlertMessage = (message: string, type: AlertTypes) => {
@@ -25,9 +29,17 @@ export const SiteAlert = ({
   dismissable = true,
   type = "alert",
   className,
+  alertMessage,
 }: SiteAlertProps) => {
   const [open, setOpen] = useState(false)
   const [message, setMessage] = useState("")
+  /**
+    * We use 2 useEffects here 1 for if we are consuming what is stored in sessionStorage
+    * and another for if the message is passed in as a prop
+
+    * this gives the ability for the SiteAlert to "survive" a re-render, or if no re-render will occur 
+    * for the SiteAlert to simply render itself
+  **/
 
   useEffect(() => {
     let timeoutRef: number
@@ -46,11 +58,23 @@ export const SiteAlert = ({
     return () => clearTimeout(timeoutRef)
   }, [timeout, type])
 
+  useEffect(() => {
+    let timeoutRef: number
+    if (alertMessage?.message) {
+      setMessage(alertMessage?.message)
+      setOpen(true)
+      if (timeout) {
+        timeoutRef = (setTimeout(() => setOpen(false), timeout) as unknown) as number
+      }
+    }
+    return () => clearTimeout(timeoutRef)
+  }, [alertMessage, timeout])
+
   return open ? (
     <AlertBox
       onClose={dismissable ? () => setOpen(false) : undefined}
       className={className}
-      type={type}
+      type={alertMessage?.type ?? type}
     >
       {message}
     </AlertBox>

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>