@bloom-housing/ui-components 4.2.2-alpha.2 → 4.2.2-alpha.20

package/src/forms/FieldGroup.tsx

@@ -5,37 +5,38 @@ import { UseFormMethods, RegisterOptions } from "react-hook-form"
 import { Field } from "./Field"
 import { t } from "../helpers/translator"
 
-interface FieldSingle {
-  id: string
-  label: string
-  value?: string
+export interface FieldSingle {
+  additionalText?: boolean
   dataTestId?: string
   defaultChecked?: boolean
-  description?: React.ReactNode
   defaultText?: string
+  description?: React.ReactNode
   disabled?: boolean
-  note?: string
+  id: string
   inputProps?: Record<string, unknown>
+  label: string
+  uniqueName?: boolean
+  note?: string
   subFields?: FieldSingle[]
   type?: string
-  additionalText?: boolean
+  value?: string
 }
 
 interface FieldGroupProps {
+  dataTestId?: string
   error?: boolean
   errorMessage?: string
-  name: string
-  type?: string
-  groupLabel?: string
+  fieldClassName?: string
+  fieldGroupClassName?: string
+  fieldLabelClassName?: string
   fields?: FieldSingle[]
+  groupLabel?: string
   groupNote?: string
   groupSubNote?: string
+  name: string
   register: UseFormMethods["register"]
+  type?: string
   validation?: RegisterOptions
-  fieldGroupClassName?: string
-  fieldClassName?: string
-  fieldLabelClassName?: string
-  dataTestId?: string
 }
 
 const FieldGroup = ({
@@ -75,7 +76,7 @@ const FieldGroup = ({
           type={type}
           id={item.id}
           defaultValue={item.value || item.id}
-          name={subfieldsExist() ? `${name}-${item.value}` : name}
+          name={subfieldsExist() || item.uniqueName ? `${name}-${item.value}` : name}
           onClick={(e) => {
             // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
             if (e.currentTarget.checked) {
@@ -152,7 +153,7 @@ const FieldGroup = ({
     )
   }
   return (
-    <>
+    <div>
       {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
@@ -176,7 +177,7 @@ const FieldGroup = ({
           {errorMessage}
         </ErrorMessage>
       )}
-    </>
+    </div>
   )
 }
 

package/src/global/app-css.scss

@@ -1,3 +1,10 @@
+/* Design Tokens: */
+@import "tokens/borders.scss";
+@import "tokens/colors.scss";
+@import "tokens/fonts.scss";
+@import "tokens/screens.scss";
+@import "tokens/sizes.scss";
+
 html {
   @apply antialiased;
 }

package/src/global/markdown.scss

@@ -30,4 +30,24 @@
     list-style: disc;
     @apply ml-6;
   }
+
+  &.markdown-informational {
+    font-size: 0.9em;
+    @apply text-gray-750;
+
+    h3 {
+      @apply font-sans;
+      @apply font-bold;
+      @apply text-base;
+      @apply text-black;
+    }
+
+    li {
+      @apply mb-4;
+    }
+
+    a {
+      @apply underline;
+    }
+  }
 }

package/src/global/mixins.scss

@@ -13,42 +13,45 @@
 
 // Adds full screen image to pseudo element
 @mixin overlay-image() {
-  @apply block;
-  @apply absolute;
-  @apply inset-0;
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   content: "";
   z-index: 2;
 }
 
 @mixin clearfix() {
   &::after {
-    @apply table;
-    @apply clear-both;
+    display: table;
+    clear: both;
     content: "";
   }
 }
 
 @mixin has-toggle() {
   &:after {
-    @apply font-bold;
-    @apply inline-block;
-    @apply ml-2;
-    @apply mr-2;
-    @apply text-sm;
+    font-weight: bold;
+    display: inline-block;
+    margin-left: var(--bloom-s2);
+    margin-right: var(--bloom-s2);
+    font-size: var(--bloom-font-size-sm);
     content: "⌃";
     transform: rotate(180deg) translateY(2px);
   }
   &[aria-expanded="true"]:after {
-    @apply mr-5;
+    margin-right: var(--bloom-s5);
     transform: rotate(0deg) translateY(2px);
   }
 }
 
 @mixin has-image-skeleton() {
-  @apply bg-gray-500;
+  background-color: var(--bloom-color-gray-500);
 
   &::before {
-    @apply float-left;
+    float: left;
     content: "";
     width: 1px;
     margin-left: -1px;
@@ -58,104 +61,118 @@
 
   &::after {
     /* to clear float */
-    @apply table;
-    @apply clear-both;
+    display: table;
+    clear: both;
     content: "";
   }
 }
 
 @mixin filled-appearances() {
   &.is-primary {
-    @apply bg-primary;
-    @apply border-primary;
-    @apply text-white;
+    background-color: var(--primary-appearance-background-color, var(--bloom-color-primary));
+    border-color: var(--primary-appearance-border-color, var(--bloom-color-primary));
+    color: var(--primary-appearance-label-color, var(--bloom-color-white));
 
     &:hover {
-      @apply bg-primary-dark;
-      @apply border-primary-dark;
+      background-color: var(
+        --primary-appearance-hover-background-color,
+        var(--bloom-color-primary-dark)
+      );
+      border-color: var(--primary-appearance-hover-border-color, var(--bloom-color-primary-dark));
+      color: var(--primary-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 
   &.is-success {
-    @apply bg-success;
-    @apply border-success;
-    @apply text-white;
+    background-color: var(--success-appearance-background-color, var(--bloom-color-success));
+    border-color: var(--success-appearance-border-color, var(--bloom-color-success));
+    color: var(--success-appearance-label-color, var(--bloom-color-white));
 
     &:hover {
-      @apply bg-success-dark;
+      background-color: var(
+        --success-appearance-hover-background-color,
+        var(--bloom-color-success-dark)
+      );
+      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success));
+      color: var(--success-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
 
   &.is-alert {
-    @apply bg-alert;
-    @apply border-alert;
-    @apply text-white;
+    background-color: var(--bloom-color-alert);
+    border-color: var(--bloom-color-alert);
+    color: var(--bloom-color-white);
 
     &:hover {
-      @apply bg-alert-dark;
-      @apply border-alert-dark;
+      background-color: var(--bloom-color-alert-dark);
+      border-color: var(--bloom-color-alert-dark);
     }
   }
 
   &.is-warning {
-    @apply bg-warn;
-    @apply border-warn;
-    @apply text-gray-800;
+    background-color: var(--bloom-color-warn);
+    border-color: var(--bloom-color-warn);
+    color: var(--bloom-color-gray-800);
 
     &:hover {
-      @apply text-white;
-      @apply bg-warn-dark;
-      @apply border-warn-dark;
+      color: var(--bloom-color-white);
+      background-color: var(--bloom-color-warn-dark);
+      border-color: var(--bloom-color-warn-dark);
     }
   }
 
   &.is-borderless {
-    @apply text-primary-darker;
+    color: var(--bloom-color-primary-darker);
     border-color: transparent;
     background: transparent;
 
     &:hover {
       background: transparent;
-      @apply text-primary-darker;
+      border-color: transparent;
+      color: var(--bloom-color-primary-darker);
     }
   }
 }
 
 @mixin outlined-appearances() {
-  @apply bg-white;
-  @apply text-primary;
-  @apply border-2;
-  @apply border-primary;
+  background-color: var(--bloom-color-white);
+  color: var(--bloom-color-primary);
+  border-width: var(--bloom-border-2);
+  border-color: var(--bloom-color-primary);
 
   &:hover {
-    @apply bg-primary-dark;
-    @apply text-white;
+    background-color: var(
+      --outlined-appearance-hover-background-color,
+      var(--bloom-color-primary-dark)
+    );
+    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary));
+    color: var(--outlined-appearance-hover-label-color, var(--bloom-color-white));
   }
 
   &.is-outlined {
     background: transparent;
 
     &.is-success {
-      @apply text-success;
+      color: var(--bloom-color-success);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
 
     &.is-alert {
-      @apply text-alert;
+      color: var(--bloom-color-alert);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
 
     &.is-warning {
-      @apply text-gray-800;
+      color: var(--bloom-color-gray-800);
 
       &:hover {
-        @apply text-white;
+        color: var(--bloom-color-white);
       }
     }
   }

package/src/global/tables.scss

@@ -1,3 +1,62 @@
+/* Hat tip to this CSS solution:
+https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
+
+//@screen md
+@media screen and (max-width: 767px) {
+  table.responsive-collapse {
+    thead {
+      @apply hidden;
+    }
+
+    tr {
+      @apply block;
+      @apply mb-6;
+    }
+
+    tr:nth-of-type(even) {
+      background: inherit;
+    }
+
+    td:nth-of-type(even) {
+      @apply bg-primary-lighter;
+    }
+
+    td {
+      @apply block;
+      @apply text-right;
+      border: 0px;
+      display: flex;
+      @apply py-2;
+    }
+
+    td:before {
+      @apply font-bold;
+      @apply uppercase;
+      content: attr(data-label);
+      text-align: left;
+      width: 50%;
+    }
+
+    td:last-child {
+      @apply border-b-0;
+    }
+  }
+  table.base {
+    td:nth-of-type(even) {
+      background: transparent;
+    }
+    tbody td {
+      @apply border-0;
+    }
+  }
+
+  tr.group-reserved td {
+    @apply border-l-8;
+    @apply border-solid;
+    @apply border-accent-warm;
+  }
+}
+
 table {
   @apply text-gray-750;
 
@@ -85,6 +144,183 @@ table {
       text-align: right;
     }
   }
+
+  &.stacked-table {
+    .stacked-table-cell-container {
+      td:before {
+        @apply text-base;
+        @apply text-gray-700;
+      }
+
+      @screen md {
+        @apply flex;
+        @apply flex-col;
+        @apply px-0;
+        @apply text-left;
+        @apply w-full;
+      }
+      width: 50%;
+      @apply text-right;
+      @apply pl-2;
+
+      .stacked-table-cell {
+        @apply font-semibold;
+        @apply text-gray-750;
+        @apply text-base;
+      }
+
+      .stacked-table-subtext {
+        @apply text-sm;
+        @apply text-gray-700;
+        @apply pl-1;
+        @apply font-normal;
+        @screen md {
+          @apply pl-0;
+        }
+      }
+
+      @apply pr-0;
+      @screen md {
+        @apply pr-3;
+      }
+    }
+
+    .stacked-table-header {
+      @apply px-0;
+      @apply text-base;
+      @apply text-gray-700;
+      @screen md {
+        @apply py-3;
+      }
+      @apply py-2;
+    }
+
+    thead {
+      @apply border-b;
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        @apply text-right;
+        @apply pr-0;
+        @screen md {
+          width: auto;
+        }
+        width: 100%;
+      }
+    }
+  }
+
+  &.category-table {
+    thead {
+      height: 2rem;
+      @apply border-0;
+    }
+
+    .stacked-table-header {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @screen md {
+        @apply py-3;
+      }
+      @apply pt-0;
+      @apply pb-2;
+    }
+
+    td:before {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @apply pl-2;
+      @apply font-normal;
+    }
+
+    tr {
+      @apply mb-1;
+      td:first-child:before {
+        @apply pl-0;
+        @apply pr-2;
+        @apply font-semibold;
+        width: 50%;
+      }
+    }
+
+    td {
+      @md {
+        @apply py-3;
+      }
+      @apply py-0;
+    }
+
+    tbody td {
+      @apply border-0;
+    }
+
+    td:last-child,
+    th:last-child {
+      text-align: inherit;
+    }
+
+    .stacked-table-cell-container {
+      width: 50%;
+      @apply flex;
+      @apply flex-col;
+      @apply items-start;
+      @apply pl-2;
+      @apply text-left;
+      @screen md {
+        @apply pl-0;
+        @apply py-0;
+      }
+      .stacked-table-cell {
+        @screen md {
+          @apply text-base;
+        }
+        @apply text-sm;
+        @apply text-black;
+        @apply font-normal;
+      }
+      .stacked-table-subtext {
+        @apply pl-0;
+        @apply text-left;
+      }
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        width: 50%;
+      }
+    }
+
+    tr {
+      td:first-child {
+        .stacked-table-cell:first-child {
+          @screen md {
+            display: block;
+          }
+          display: none;
+        }
+      }
+    }
+
+    @media screen and (max-width: 767px) {
+      td {
+        @apply pb-3;
+      }
+      td:first-child:before {
+        content: attr(data-cell);
+      }
+    }
+  }
 }
 
 table tr:nth-of-type(even) {
@@ -120,64 +356,6 @@ tr.group-reserved td:first-of-type {
   @apply border-accent-warm;
 }
 
-/* Hat tip to this CSS solution:
-https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
-
-//@screen md
-@media screen and (max-width: 767px) {
-  table.responsive-collapse {
-    thead {
-      @apply hidden;
-    }
-
-    tr {
-      @apply block;
-      @apply mb-6;
-    }
-
-    tr:nth-of-type(even) {
-      background: inherit;
-    }
-
-    td:nth-of-type(even) {
-      @apply bg-primary-lighter;
-    }
-
-    td {
-      @apply block;
-      @apply text-right;
-      border: 0px;
-      display: flex;
-    }
-
-    td:before {
-      @apply font-bold;
-      @apply uppercase;
-      content: attr(data-label);
-      text-align: left;
-      width: 50%;
-    }
-
-    td:last-child {
-      @apply border-b-0;
-    }
-  }
-  table.base {
-    td:nth-of-type(even) {
-      background: transparent;
-    }
-    tbody td {
-      @apply border-0;
-    }
-  }
-
-  tr.group-reserved td {
-    @apply border-l-8;
-    @apply border-solid;
-    @apply border-accent-warm;
-  }
-}
-
 .table__thumbnail img {
   max-height: 80px;
   max-width: 142px;

package/src/global/text.scss

@@ -145,7 +145,8 @@ h1.title {
   @apply font-semibold;
   @apply text-blue-700;
   @apply text-3xl;
-  @apply mb-1;
+  @apply mb-3;
+  @apply leading-tight;
 }
 
 .card-subheader {
@@ -169,3 +170,10 @@ h1.title {
   @apply text-sm;
   @apply mb-3;
 }
+
+.category-header {
+  @apply font-alt-sans;
+  @apply font-semibold;
+  @apply text-gray-700;
+  @apply text-sm;
+}

package/src/global/tokens/borders.scss

@@ -0,0 +1,15 @@
+:root {
+  --bloom-rounded-sm: 0.125rem;
+  --bloom-rounded: 0.25rem;
+  --bloom-rounded-md: 0.375rem;
+  --bloom-rounded-lg: 0.5rem;
+  --bloom-rounded-xl: 0.75rem;
+  --bloom-rounded-2xl: 1rem;
+  --bloom-rounded-3xl: 1.5rem;
+  --bloom-rounded-full: 9999px;
+
+  --bloom-border-1: 1px;
+  --bloom-border-2: 2px;
+  --bloom-border-4: 4px;
+  --bloom-border-8: 8px;
+}