@bloom-housing/ui-components 4.2.2-alpha.3 → 4.2.2-alpha.30

package/src/actions/Button.scss

@@ -1,59 +1,58 @@
 @import "../global/mixins.scss";
 
 .button {
-  @apply relative;
-  @apply rounded;
-  @apply px-6;
-  @apply py-4;
-  @apply text-lg;
-  @apply text-center;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply inline-block;
-  @apply tracking-widest;
-  @apply text-sm;
-  @apply font-bold;
-  @apply leading-snug;
+  position: relative;
+  border-radius: var(--normal-rounded, var(--bloom-rounded));
+  padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
+  text-align: center;
+  text-transform: var(--label-transform, uppercase);
+  font-family: var(--label-font, var(--bloom-font-alt-sans));
+  display: inline-block;
+  letter-spacing: var(--label-letter-spacing, var(--bloom-letter-spacing-widest));
+  font-size: var(--normal-font-size, var(--bloom-font-size-sm));
+  font-weight: var(--label-weight, bold);
+  line-height: var(--bloom-line-height-snug);
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
   }
 
   &:hover {
-    @apply border-primary-dark;
+    border-color: var(--bloom-color-primary-dark);
   }
 
   &:disabled {
     pointer-events: none;
-    @apply bg-white;
-    @apply border-gray-450;
-    @apply text-gray-450;
+    background-color: var(--bloom-color-white);
+    border-color: var(--bloom-color-gray-450);
+    color: var(--bloom-color-gray-450);
   }
 
   &.is-secondary {
-    @apply border-gray-700;
-    @apply text-gray-700;
+    border-color: var(--bloom-color-gray-700);
+    color: var(--bloom-color-gray-700);
 
     &:hover {
-      @apply bg-gray-700;
-      @apply text-white;
+      background-color: var(--bloom-color-gray-700);
+      color: var(--bloom-color-white);
     }
   }
 
   &.is-small {
-    @apply text-xs;
-    @apply px-6;
-    @apply py-3;
+    border-radius: var(--small-rounded, var(--bloom-rounded));
+    padding: var(--small-padding, var(--bloom-s3) var(--bloom-s6));
+    font-size: var(--small-font-size, var(--bloom-font-size-xs));
   }
 
   &.is-big {
-    @apply px-6;
-    @apply py-6;
+    border-radius: var(--big-rounded, var(--bloom-rounded));
+    padding: var(--big-padding, var(--bloom-s6));
+    font-size: var(--big-font-size, var(--bloom-font-size-sm));
   }
 
   &.is-normal-case {
-    @apply normal-case;
+    text-transform: none;
   }
 
   &.is-unstyled {
@@ -62,74 +61,72 @@
 
   &.is-unstyled,
   &.is-inline {
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply text-tiny;
+    text-transform: none;
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    font-weight: 400;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    font-size: var(--bloom-font-size-tiny);
 
     &:hover {
-      @apply text-primary;
+      color: var(--bloom-color-primary);
       background: transparent;
     }
   }
 
   &.is-inline {
-    @apply text-primary;
-    @apply font-semibold;
-    @apply text-tiny;
-    @apply m-0;
-    @apply no-underline;
+    color: var(--bloom-color-primary);
+    font-weight: 600;
+    font-size: var(--bloom-font-size-tiny);
+    margin: 0;
+    text-decoration: none;
 
     &.has-icon-left {
       .button__icon {
-        @apply mr-1;
+        margin-right: var(--bloom-s1);
       }
     }
     &.has-icon-right {
       .button__icon {
-        @apply ml-1;
+        margin-left: var(--bloom-s1);
       }
     }
   }
 
   &.has-icon-left {
     .button__icon {
-      @apply mr-3;
+      margin-right: var(--bloom-s3);
     }
   }
   &.has-icon-right {
     .button__icon {
-      @apply ml-3;
+      margin-left: var(--bloom-s3);
     }
   }
 
   &.is-text-caps {
-    @apply text-primary-dark;
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply uppercase;
-    @apply text-tiny;
-    @apply block;
+    color: var(--bloom-color-primary-dark);
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    text-transform: uppercase;
+    font-size: var(--bloom-font-size-tiny);
+    display: block;
 
     &:hover {
-      @apply text-primary-dark;
+      color: var(--bloom-color-primary-dark);
       background: transparent;
     }
   }
 
   &.is-fullwidth {
-    @apply w-full;
+    width: 100%;
   }
 
   &.is-loading {

package/src/authentication/timeout.tsx

@@ -98,6 +98,7 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
       ariaDescription={promptText}
       actions={modalActions}
       hideCloseIcon
+      role="alertdialog"
     >
       {promptText}
     </Modal>

package/src/blocks/DashBlock.tsx

@@ -1,5 +1,6 @@
-import React from "react"
+import React, { useContext } from "react"
 import "./DashBlocks.scss"
+import { NavigationContext } from "../config/NavigationContext"
 
 interface DashBlockProps {
   href?: string
@@ -10,6 +11,7 @@ interface DashBlockProps {
   dataTestId?: string
 }
 const DashBlock = (props: DashBlockProps) => {
+  const { LinkComponent } = useContext(NavigationContext)
   const { href, title, subtitle, icon, children } = props
   let content, wrapper
   if (children) {
@@ -24,9 +26,9 @@ const DashBlock = (props: DashBlockProps) => {
   )
   if (href) {
     wrapper = (
-      <a href={href} className="dash-item">
+      <LinkComponent href={href} className="dash-item">
         {header}
-      </a>
+      </LinkComponent>
     )
   } else {
     wrapper = (

package/src/blocks/DashBlocks.scss

@@ -1,5 +1,6 @@
 .dash-blocks {
   @apply w-full;
+  @apply mb-8;
 
   @screen md {
     @apply flex;
@@ -8,6 +9,7 @@
 }
 
 .dash-block {
+  align-self: stretch;
   @screen md {
     @apply px-2;
     flex: 50%;
@@ -24,13 +26,14 @@
   @apply bg-white;
   @apply p-4;
   @apply pt-8;
+  @apply pb-8;
   @apply text-tiny;
 
   @screen md {
     @apply rounded-lg;
     @apply border;
     @apply p-8;
-    @apply mb-8;
+    @apply h-full;
   }
 
   p {

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);
       }
     }
   }