@bloom-housing/ui-components 5.1.1-alpha.24 → 5.1.1-alpha.25

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.24",
+  "version": "5.1.1-alpha.25",
   "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",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "87a84e00cb38c40bc2dc7e8e13d5ab46b1dc117d"
+  "gitHead": "102d800f5cefa5d6e2f49108b87e8d704a9b5f1e"
 }

package/src/headers/PageHeader.scss

@@ -1,6 +1,6 @@
 .page-header {
   /* Component Variables */
-  --background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-gray-300);
   --border-color: var(--bloom-color-gray-450);
   --text-color: inherit;
   --text-font-family: var(--bloom-font-serif);

package/src/notifications/AlertBox.scss

@@ -97,7 +97,7 @@
 .alert-box__close {
   font-size: var(--bloom-font-size-3xl);
   right: var(--horizontal-padding);
-  margin-left: var(--blom-s3);
+  margin-left: var(--bloom-s3);
   padding: 0;
   line-height: var(--bloom-s4);
   color: var(--close-icon-color);
@@ -106,3 +106,18 @@
 .alert-box__icon {
   margin-right: var(--bloom-s3);
 }
+
+.alert-box__sticky {
+  position: sticky;
+  top: var(--bloom-s3);
+  margin-top: var(--bloom-s3);
+  margin-right: var(--bloom-s3);
+  z-index: 10;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.alert-box__sticky + * {
+  --alert-box-height: -3.6rem;
+  margin-top: var(--alert-box-height);
+}

package/src/notifications/AlertBox.tsx

@@ -6,15 +6,16 @@ import { colorClasses } from "./alertTypes"
 import "./AlertBox.scss"
 
 export interface AlertBoxProps {
-  type?: AlertTypes
-  customIcon?: IconTypes
-  closeable?: boolean
-  onClose?: () => void
+  boundToLayoutWidth?: boolean
   children: ReactNode
-  inverted?: boolean
   className?: string
-  boundToLayoutWidth?: boolean
+  closeable?: boolean
+  customIcon?: IconTypes
+  inverted?: boolean
   narrow?: boolean
+  onClose?: () => void
+  sticky?: boolean
+  type?: AlertTypes
 }
 
 const icons: { [k in AlertTypes]: IconTypes } = {
@@ -35,6 +36,7 @@ const AlertBox = (props: AlertBoxProps) => {
     ...(props.className ? [props.className] : []),
     ...(props.boundToLayoutWidth ? [] : ["fullWidth"]),
     ...(props.narrow ? ["narrow"] : []),
+    ...(props.sticky ? ["alert-box__sticky"] : []),
   ].join(" ")
 
   if (onClose) closeable = true

package/src/notifications/SiteAlert.tsx

@@ -11,6 +11,7 @@ type SiteAlertProps = {
     type: AlertTypes
     message: string
   }
+  sticky?: boolean
 }
 
 export const setSiteAlertMessage = (message: string, type: AlertTypes) => {
@@ -30,6 +31,7 @@ export const SiteAlert = ({
   type = "alert",
   className,
   alertMessage,
+  sticky,
 }: SiteAlertProps) => {
   const [open, setOpen] = useState(false)
   const [message, setMessage] = useState("")
@@ -75,6 +77,7 @@ export const SiteAlert = ({
       onClose={dismissable ? () => setOpen(false) : undefined}
       className={className}
       type={alertMessage?.type ?? type}
+      sticky={sticky}
     >
       {message}
     </AlertBox>

package/src/tables/StandardTable.tsx

@@ -117,12 +117,12 @@ export const StandardTable = (props: StandardTableProps) => {
     headerLabels.splice(
       0,
       0,
-      <th key={"header-draggable"}>{props.strings?.orderString ?? t("t.order")}</th>
+      <th key={"header-draggable-order"}>{props.strings?.orderString ?? t("t.order")}</th>
     )
     headerLabels.splice(
       0,
       0,
-      <th key={"header-draggable"} className={"table__draggable-cell pl-5"}>
+      <th key={"header-draggable-sort"} className={"table__draggable-cell pl-5"}>
         {props.strings?.sortString ?? t("t.sort")}
       </th>
     )