@bloom-housing/ui-components 5.0.1-alpha.16 → 5.0.1-alpha.19

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.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.18...@bloom-housing/ui-components@5.0.1-alpha.19) (2022-07-19)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.17...@bloom-housing/ui-components@5.0.1-alpha.18) (2022-07-19)
+
+
+### Features
+
+* visuals for add preference, preference option drawers ([#2877](https://github.com/bloom-housing/bloom/issues/2877)) ([8611034](https://github.com/bloom-housing/bloom/commit/8611034845b45ce4d4e4eb44e790ac2adec0ba94))
+
+
+
+
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.16",
+  "version": "5.0.1-alpha.19",
   "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": "ec0d2acb5338c69e6e43b998d04176aab5731cf1"
+  "gitHead": "416b300b573c622ffa776199bf9bd05ea7341d5f"
 }

package/src/forms/Field.tsx

@@ -74,7 +74,7 @@ const Field = (props: FieldProps) => {
     if (props.caps) labelClasses.push("field-label--caps")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
-    if (props.type === "checkbox" || props.type === "radio") {
+    if (props.type === "radio") {
       labelClasses.push("font-semibold")
     }
 

package/src/forms/Textarea.tsx

@@ -23,6 +23,7 @@ export interface TextareaProps {
   wrap?: WrapOptions
   readerOnly?: boolean
   inputProps?: Record<string, unknown>
+  dataTestId?: string
 }
 
 export const Textarea = (props: TextareaProps) => {
@@ -56,6 +57,7 @@ export const Textarea = (props: TextareaProps) => {
         wrap={props.wrap ?? "soft"}
         title={props.label}
         {...inputProps}
+        data-test-id={props.dataTestId}
       />
       {props.note && <p className="field-note font-normal mb-2">{props.note}</p>}
       {props.errorMessage && <span className="textarea-error-message">{props.errorMessage}</span>}

package/src/global/blocks.scss

@@ -133,3 +133,25 @@ $shadow-left-slight: -3px 0px 3px -1px rgba(0, 0, 0, 0.1);
     @apply block;
   }
 }
+
+.sidebar-detail-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bloom-s6);
+  margin-inline: auto;
+  max-width: var(--bloom-screen-2xl);
+
+  @media (min-width: 1000px) {
+    flex-direction: row;
+  }
+
+  & > div {
+    flex-grow: 1;
+  }
+
+  & > aside {
+    @media (min-width: 1000px) {
+      width: var(--bloom-s72);
+    }
+  }
+}

package/src/global/tokens/screens.scss

@@ -3,4 +3,5 @@
   --bloom-screen-md: #{$screen-md};
   --bloom-screen-lg: #{$screen-lg};
   --bloom-screen-xl: #{$screen-xl};
+  --bloom-screen-2xl: #{$screen-2xl};
 }

package/src/navigation/SideNav.docs.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { SideNav } from "./SideNav"
+
+# Side Navigation
+
+The side nav component renders a list of navigation links, any of which can optionally have children links for a hierarchical list.
+
+<Canvas>
+  <Story id="navigation-side-nav--current" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={SideNav} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.side-nav` selector to customize the appearance of the component.
+
+| Name                        | Type                                                | Description                                                            | Default                                                   |
+| --------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- |
+| `--border`                  | Border                                              | Border of the nav                                                      | `solid var(--bloom-border-1) var(--bloom-color-gray-450)` |
+| `--border-radius`           | Size                                                | The border radius of the nav                                           | `--bloom-rounded-lg`                                      |
+| `--current-padding-inline`  | Size                                                | The space on either side of a link                                     | `--bloom-s6`                                              |
+| `--current-padding-block`   | Size                                                | The space above and below a link                                       | `--bloom-s4`                                              |
+| `--link-color`              | <Swatch colorVar="--bloom-color-gray-700" />        | Default color of links                                                 | `--bloom-color-gray-700`                                  |
+| `--current-selection-color` | <Swatch colorVar="--bloom-color-gray-900" />        | Color of the current link and parent of the current link if applicable | `--bloom-color-gray-900`                                  |
+| `--selection-parent-accent` | <Swatch colorVar="--bloom-color-gray-450" />        | Color of the current link's parent's border accent                     | `--bloom-color-gray-900`                                  |
+| `--hover-link-color`        | <Swatch colorVar="--bloom-color-primary" />         | Link text color when you hover over it or tab to it                    | `--bloom-color-primary`                                   |
+| `--hover-background-color`  | <Swatch colorVar="--bloom-color-primary-lighter" /> | Link background color when you hover over it or tab to it              | `--bloom-color-primary-lighter`                           |

package/src/navigation/SideNav.scss

@@ -1,38 +1,72 @@
 .side-nav {
-  @apply border;
-  @apply rounded-lg;
+  --border: solid var(--bloom-border-1) var(--bloom-color-gray-450);
+  --border-radius: var(--bloom-rounded-lg);
+  --current-padding-inline: var(--bloom-s6);
+  --current-padding-block: var(--bloom-s4);
+  --link-color: var(--bloom-color-gray-700);
+  --current-selection-color: var(--bloom-color-gray-900);
+  --selection-parent-accent: var(--bloom-color-gray-450);
+  --hover-link-color: var(--bloom-color-primary);
+  --hover-background-color: var(--bloom-color-primary-lighter);
 
-  li {
-    &:first-of-type {
-      @apply rounded-t-lg;
-    }
+  border: var(--border);
+  border-radius: var(--border-radius);
 
-    &:last-of-type {
-      @apply rounded-b-lg;
+  & > ul {
+    & > li:first-child > a {
+      border-top-right-radius: var(--border-radius);
+      border-top-left-radius: var(--border-radius);
     }
 
-    &.is-current {
-      cursor: pointer;
-      @apply text-gray-900;
-      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
-      @apply block;
-      @apply px-4;
-      @apply py-2;
+    & > li:last-child > a {
+      border-bottom-right-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
     }
 
-    &:not(:last-child) {
-      @apply border-b;
+    & > li > ul > li:first-child {
+      border-top: var(--border);
     }
   }
 
+  li:not(:last-child) {
+    border-bottom: var(--border);
+  }
+
   a {
-    @apply text-gray-700;
-    @apply block;
-    @apply px-4;
-    @apply py-2;
-    &:hover {
-      @apply bg-primary-lighter;
-      @apply text-primary;
+    display: flex;
+    justify-content: space-between;
+    color: var(--link-color);
+    padding-inline: var(--current-padding-inline);
+    padding-block: var(--current-padding-block);
+
+    &[aria-current] {
+      color: var(--current-selection-color);
+    }
+
+    &[aria-current]:not(:focus) {
+      box-shadow: inset 3px 0px 0px 0px var(--hover-link-color);
+    }
+
+    &.has-current-child {
+      color: var(--current-selection-color);
     }
+
+    &.has-current-child:not(:focus) {
+      box-shadow: inset 3px 0px 0px 0px var(--selection-parent-accent);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--hover-background-color);
+      color: var(--hover-link-color);
+    }
+
+    span:last-of-type {
+      color: var(--link-color);
+    }
+  }
+
+  ul ul a {
+    padding-inline-start: calc(var(--current-padding-inline) + var(--current-padding-block));
   }
 }

package/src/navigation/SideNav.tsx

@@ -6,29 +6,64 @@ export interface SideNavItemProps {
   current?: boolean
   url: string
   label: string
+  count?: number
+  childrenItems?: SideNavItemProps[]
 }
 
 export interface SideNavProps {
   navItems?: SideNavItemProps[]
+  className?: string
+}
+
+const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
+  if (typeof item.count !== "undefined") {
+    return (
+      <>
+        <span>{item.label}</span>
+        <span>{item.count}</span>
+      </>
+    )
+  } else {
+    return <>{item.label}</>
+  }
 }
 
 const SideNav = (props: SideNavProps) => {
   const { LinkComponent } = React.useContext(NavigationContext)
 
+  const classNames = ["side-nav"]
+  if (props.className) classNames.push(props.className)
+
   return (
-    <nav className="side-nav" aria-label="Secondary navigation">
+    <nav className={classNames.join(" ")} aria-label="Secondary navigation">
       <ul>
         {props.navItems?.map((navItem: SideNavItemProps, index: number) => {
-          if (navItem.current) {
-            return (
-              <li className="is-current" key={index} aria-current="page">
-                {navItem.label}
-              </li>
-            )
-          }
+          const hasCurrentChild = navItem.childrenItems?.some((item) => item.current)
           return (
             <li key={index}>
-              <LinkComponent href={navItem.url}>{navItem.label}</LinkComponent>
+              <LinkComponent
+                href={navItem.url}
+                className={hasCurrentChild ? "has-current-child" : ""}
+                aria-current={navItem.current ? "page" : undefined}
+              >
+                <ItemLabel item={navItem} />
+              </LinkComponent>
+              {navItem.childrenItems && (
+                <ul>
+                  {navItem.childrenItems.map((childItem, childIndex) => {
+                    return (
+                      <li key={childIndex}>
+                        <LinkComponent
+                          href={childItem.url}
+                          aria-current={childItem.current ? "page" : undefined}
+                        >
+                          <ItemLabel item={childItem} />
+                        </LinkComponent>
+                      </li>
+                    )
+                  })}
+                </ul>
+              )}
             </li>
           )
         })}

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/tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
       md: "768px",
       lg: "1200px",
       xl: "1280px",
+      "2xl": "1440px",
       print: { raw: "print" },
     },
     fontSize: {