-
-
-
-
- {props.header}
-{props.children}
- {storyFn()}
, withKnobs],
- parameters: {
- docs: {
- page: ButtonDocumentation,
- },
- badges: [BADGES.GEN2],
- },
-}
-
-const handleClick = (e: React.MouseEvent) => {
- alert(`You clicked me! Event: ${e.type}`)
-}
-
-const StyleTypeStory = { ...AppearanceStyleType, default: undefined }
-const BorderTypeStory = { ...AppearanceBorderType, default: undefined }
-
-export const standard = () => {
- const styleSelect = select("Appearance Style", StyleTypeStory, undefined)
- const borderSelect = select("Appearance Border", BorderTypeStory, undefined)
- const iconSelect = select(
- "Icon",
- { arrowBack: "arrowBack", arrowForward: "arrowForward", default: undefined },
- undefined
- )
- const iconPlacementSelect = select(
- "Icon Placement",
- { left: "left", right: "right", default: undefined },
- undefined
- )
-
- return (
- <>
-
-
- Try out different styles with the Knobs below.
- - ) -} - -export const withFontAwesomeIcon = () => { - const iconSelect = select("Icon", ["coffee", "rotate", "table"], "rotate") - - const iconsMap = { - coffee: faCoffee, - rotate: faArrowsRotate, - table: faTable, - } - - return ( - <> - - -Try out different icons with the Knobs below.
- - ) -} - -export const small = () => ( - -) - -export const big = () => ( - -) - -export const SmallAndPrimary = () => ( - -) - -export const NormalCase = () => ( - -) - -export const NormalCaseAndSuccess = () => ( - -) - -export const borderless = () => ( - -) - -export const unstyled = () => ( - -) - -export const inlineIcon = () => ( - <> - --
- -
-
- - -) - -export const detroitStyle = () => { - const cssVarsOverride = ` - .button-overrides { - --bloom-font-sans: Montserrat; - --bloom-font-alt-sans: var(--bloom-font-sans); - --bloom-color-primary: rgb(41,126,115); - --bloom-color-primary-dark: rgb(0,68,69); - - --primary-appearance-hover-background-color: white; - --primary-appearance-hover-label-color: var(--bloom-color-primary-dark); - - --outlined-appearance-hover-background-color: var(--bloom-color-primary); - --outlined-appearance-hover-border-color: var(--bloom-color-primary); - } - - .button-overrides .button { - --normal-rounded: 60px; - --normal-padding: 0.5rem 1rem; - --normal-font-size: var(--bloom-font-size-base); - --label-letter-spacing: normal; - --label-transform: none; - } - ` - - return ( - <> - - - -
- {" "}
-
-
-
-
- Customized using the following variable overrides:
- -
- {cssVarsOverride.replace(".button-overrides ", ":root ").replace(".button-overrides ", "")}
-
-
- )
-}
-
-export const loading = () => (
-
-)
-
-// TODO: replace with tailwind markup, if it matters
-export const inaccessible = () => (
-
-)
-
-// Example of how you can override axe a11y checks
-inaccessible.parameters = {
- a11y: {
- config: {
- rules: [
- {
- id: "color-contrast",
- enabled: false,
- },
- ],
- },
- },
-}
diff --git a/detroit-ui-components/src/actions/Button.tsx b/detroit-ui-components/src/actions/Button.tsx
deleted file mode 100644
index 48c692ac48..0000000000
--- a/detroit-ui-components/src/actions/Button.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from "react"
-import "./Button.scss"
-import { AppearanceProps, classNamesForAppearanceTypes } from "../global/AppearanceTypes"
-import { Icon, IconSize, UniversalIconType } from "../icons/Icon"
-
-export interface ButtonProps extends AppearanceProps {
- id?: string
- type?: "button" | "submit" | "reset"
- children: React.ReactNode
- onClick?: (e: React.MouseEvent) => void
- icon?: UniversalIconType
- iconPlacement?: "left" | "right"
- iconSize?: IconSize
- iconColor?: string
- // TODO: inlineIcon is deprecated
- inlineIcon?: "left" | "right"
- inline?: boolean
- unstyled?: boolean
- fullWidth?: boolean
- className?: string
- disabled?: boolean
- loading?: boolean
- ariaLabel?: string
- dataTestId?: string
- "data-test-id"?: string
- iconClass?: string
- passToIconClass?: string
-}
-
-export const buttonClassesForProps = (props: OmitSample Content
-
-export const standard = () =>
-
-
- {isExpanded &&
- )
-}
-
-export { ExpandableContent as default, ExpandableContent }
diff --git a/detroit-ui-components/src/actions/LinkButton.stories.tsx b/detroit-ui-components/src/actions/LinkButton.stories.tsx
deleted file mode 100644
index c331ba19cf..0000000000
--- a/detroit-ui-components/src/actions/LinkButton.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react"
-import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
-
-import { LinkButton } from "./LinkButton"
-
-export default {
- title: "Actions/Link Button",
-}
-
-export const standard = () => {children}
}
-
-
- )
-}
-export { ActionBlock as default, ActionBlock }
diff --git a/detroit-ui-components/src/blocks/FormCard.scss b/detroit-ui-components/src/blocks/FormCard.scss
deleted file mode 100644
index befc8fcb33..0000000000
--- a/detroit-ui-components/src/blocks/FormCard.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-.form-card {
- @apply bg-white;
-
- @screen md {
- @apply mb-6;
- @apply border;
- @apply border-gray-450;
- @apply rounded-lg;
- }
-
- @screen print {
- @apply border-0;
- }
-
- hr,
- .border-b {
- @apply border-gray-450;
- }
-
- .hr {
- @apply my-6;
- }
-}
-
-.form-card__title {
- @apply text-center;
- width: fit-content;
- @apply mt-4;
- @apply mx-auto;
- @apply pt-4;
- @apply px-3;
- @apply border-t-4;
- @apply border-primary;
- @apply leading-tight;
-
- @screen md {
- @apply mx-auto;
- @apply px-0;
- }
-
- &.is-borderless {
- @apply pt-0;
- @apply mt-0;
- @apply border-t-0;
- }
-}
-
-.form-card__back {
- @apply ml-8;
- @apply -mb-5;
-
- @screen md {
- @apply mt-5;
- }
-
- a {
- @apply underline;
- }
-}
-
-.form-card__lead,
-.form-card__group {
- @apply py-8;
- @apply px-6;
-
- @screen md {
- @apply mx-8;
- }
-
- @screen print {
- @apply py-2;
- @apply px-0;
- }
-}
-
-.form-card__lead {
- @apply pt-12;
- @apply pb-8;
-
- @screen md {
- @apply px-0;
- }
-
- @screen print {
- @apply py-2;
- }
-}
-
-.form-card__group {
- @screen md {
- @apply px-8;
- }
-
- @screen print {
- @apply px-0;
- }
-}
-
-.form-card__header {
- @apply text-white;
- @apply text-center;
-
- @screen md {
- @apply rounded-b-lg;
- }
-}
-
-.form-card__header_group {
- @apply bg-primary;
- @apply p-4;
-
- @screen md {
- @apply rounded-t-lg;
- }
-
- @screen print {
- @apply py-0;
- }
-}
-
-.form-card__header_title {
- @apply text-lg;
- @apply font-alt-sans;
- @apply font-bold;
- @apply uppercase;
- @apply mb-0;
-}
-
-.form-card__header_nav {
- @apply py-4;
- @apply bg-white;
- @apply rounded-b-lg;
- @apply overflow-auto;
-
- @screen md {
- @apply p-4;
- }
-
- @screen print {
- @apply py-0;
- }
-}
-
-.form-card__pager {
- @apply text-center;
-
- button,
- .button {
- @apply mb-0;
- }
-}
-
-.form-card__pager-row {
- @apply px-8;
- @apply py-4;
-
- &.primary {
- @apply bg-primary-lighter;
- @apply py-8;
- }
-
- &.border-t,
- &.border-b {
- @apply border-gray-450;
- }
-}
-
-.form--card__sub-header {
- @apply py-4;
- @apply px-8;
- @apply bg-gray-300;
- @apply flex;
- @apply justify-between;
- @apply border-solid;
- @apply border-t;
- @apply border-gray-450;
-
- .edit-link {
- @apply self-center;
- }
-
- @screen print {
- @apply px-0;
- @apply py-1;
- }
-}
-
-.form-card__sub-title {
- @apply mb-0;
- @apply text-gray-700;
- @apply py-3;
-}
-
-.form-card__paragraph-title {
- @apply uppercase;
- @apply text-gray-750;
- @apply tracking-widest;
- @apply font-semibold;
- @apply font-sans;
- @apply text-tiny;
- @apply mb-2;
- @apply inline-block;
-}
-
-.form-card__header-icon {
- @apply pr-4;
- @apply pl-4;
- @apply pb-4;
- @apply inline-block;
- @apply border-b-4;
- @apply border-primary;
- @apply mb-4;
-}
diff --git a/detroit-ui-components/src/blocks/FormCard.tsx b/detroit-ui-components/src/blocks/FormCard.tsx
deleted file mode 100644
index 7851e0b9de..0000000000
--- a/detroit-ui-components/src/blocks/FormCard.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react"
-import "./FormCard.scss"
-
-export interface FormCardProps {
- header?: string
- children: React.ReactNode
- className?: string
-}
-
-const FormCard = (props: FormCardProps) => {
- const classNames = props.className ? `${props.className} form-card` : "form-card"
- if (props.header) {
- return (
-
- {icon &&
- {icon}
}
- {header}
- {subheader && layout === ActionBlockLayout.block && ( -{subheader}
- )} -{actions}
- -
- -## Component Properties - -
{storyFn()}
],
- parameters: {
- docs: {
- page: ImageCardDocumentation,
- },
- badges: [BADGES.GEN2],
- },
-}
-
-export const image = () =>
-
- {props.imageUrl ? (
- 
- ) : props.images && displayedImages ? (
- displayedImages.map((image, index) => (
- 
- ))
- ) : (
-
- )}
- {props.images && props.images.length > 1 && (
- <>
- {props.images && props.images.length > 3 && (
-
- {getStatuses()}
-
- {props.images && props.images.length > 1 && (
-
- {props.tags?.map((tag, index) => {
- return (
-
-
- {tag.iconType && (
-
-
- )
- })}
-
-
-
- )}
-
-
- )}
-
-
-
-
- )
-}
-
-export { InfoCard as default, InfoCard }
diff --git a/detroit-ui-components/src/blocks/Tooltip.scss b/detroit-ui-components/src/blocks/Tooltip.scss
deleted file mode 100644
index f72c046f22..0000000000
--- a/detroit-ui-components/src/blocks/Tooltip.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-$tooltip_padding: 9px;
-$tooltip_arrow_height: 10px;
-
-.tooltip {
- @apply relative;
- display: inline-block;
- width: fit-content;
-}
-
-.tooltip__element {
- @apply w-full;
- @apply fixed;
- @apply bg-primary-dark;
- @apply text-white;
- @apply rounded;
- @apply p-2;
- @apply text-sm font-bold text-center;
- @apply normal-case;
- @apply opacity-0;
- @apply invisible;
- transform: translate(-50%, calc(-100% - $tooltip_padding * 2));
-
- max-width: 280px;
- transition: opacity 0.2s;
-
- &--visible {
- @apply opacity-100;
- @apply visible;
- }
-
- &::before {
- content: "";
- @apply absolute bottom-0;
- @apply w-0 h-0;
- @apply border-solid;
- @apply left-1/2;
- bottom: -8px;
- transform: translateX(-50%);
- border-width: $tooltip_arrow_height 7px 0 7px;
- border-color: theme("colors.primary-dark") transparent transparent transparent;
- }
-}
diff --git a/detroit-ui-components/src/blocks/Tooltip.stories.tsx b/detroit-ui-components/src/blocks/Tooltip.stories.tsx
deleted file mode 100644
index b9a7f6be7a..0000000000
--- a/detroit-ui-components/src/blocks/Tooltip.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react"
-import { Button } from "../.."
-import { Tooltip } from "./Tooltip"
-
-export default {
- title: "Blocks/Tooltip",
-}
-
-export const TooltipStory = () => (
-
- {props.externalHref ? (
-
- {typeof props.children == "string" ? (
- - - {props.title} - -
- ) : ( -{props.title}
- )} - {props.subtitle && {props.subtitle}} -
-
- ) : (
- props.children
- )}
-
-
-
-
-
-)
diff --git a/detroit-ui-components/src/blocks/Tooltip.tsx b/detroit-ui-components/src/blocks/Tooltip.tsx
deleted file mode 100644
index 1bd630ace4..0000000000
--- a/detroit-ui-components/src/blocks/Tooltip.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useState, useRef, useEffect } from "react"
-import { useKeyPress } from "@bloom-housing/shared-helpers"
-import "./Tooltip.scss"
-
-export interface TooltipProps {
- className?: string
- id: string
- text: string
-}
-
-export interface TooltipPosition {
- top: number
- left: number
-}
-
-const Tooltip = ({ className, id, text, children }: React.PropsWithChildren
-
- )
-}
-
-export { Tooltip as default, Tooltip }
diff --git a/detroit-ui-components/src/blocks/ViewItem.scss b/detroit-ui-components/src/blocks/ViewItem.scss
deleted file mode 100644
index d8071e5544..0000000000
--- a/detroit-ui-components/src/blocks/ViewItem.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "../global/mixins.scss";
-
-.view-item {
- @apply relative;
- @apply text-base;
- @apply mb-4;
-
- &:last-of-type {
- @apply mb-0;
- }
-
- &.is-flagged {
- @apply bg-warn-light;
- @apply -my-1;
- @apply py-1;
- @apply -ml-8;
- @apply pl-8;
- box-shadow: inset 2px 0px 0px 0px $tailwind-warn;
- }
-
- .edit-link {
- @apply absolute;
- right: 0;
- top: 0;
- }
-}
-
-.view-item__label {
- @apply text-gray-800;
- @apply font-sans;
- @apply text-tiny;
- @apply block;
-}
-
-.view-item__value {
- @apply font-alt-sans;
- @apply tracking-wide;
- @apply font-semibold;
- @apply block;
- padding-top: 10px;
-
- &.is-truncated {
- @include ellipsis;
- }
-
- // do not change font-family for inputs
- .field .control .input,
- .error-message {
- @apply font-sans;
- @apply font-normal;
- }
-}
-
-.view-item__helper {
- @apply text-gray-750;
- @apply font-sans;
- @apply text-tiny;
- @apply block;
-}
diff --git a/detroit-ui-components/src/blocks/ViewItem.stories.tsx b/detroit-ui-components/src/blocks/ViewItem.stories.tsx
deleted file mode 100644
index 58a48def7a..0000000000
--- a/detroit-ui-components/src/blocks/ViewItem.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react"
-
-import { ViewItem } from "./ViewItem"
-
-export default {
- title: "Blocks/View Item",
- decorators: [(storyFn: any) =>
- {text}
-
-
-
- {children}
-
- {storyFn()}
],
-}
-
-export const Default = () =>
- {props.label && (
-
- {props.label}
-
- )}
- {props.children && (
-
- {props.children}
-
- )}
- {props.helper && {props.helper}}
-
- )
-}
-
-export { ViewItem as default, ViewItem }
diff --git a/detroit-ui-components/src/forms/Field.stories.tsx b/detroit-ui-components/src/forms/Field.stories.tsx
deleted file mode 100644
index a8a6aefb34..0000000000
--- a/detroit-ui-components/src/forms/Field.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from "react"
-import { useForm } from "react-hook-form"
-import { Field } from "./Field"
-
-export default {
- title: "Forms/Field",
- decorators: [(storyFn: any) => {storyFn()}
],
-}
-
-export const FieldDefault = () => {
- const { register } = useForm({ mode: "onChange" })
- return {props.note}
- } - - return ( -
- {!isRadioOrCheckbox && !props.hidden && label}
- {note}
-
- {props.errorMessage}
-
- )}
-
- )
-}
-
-export { Field as default, Field }
diff --git a/detroit-ui-components/src/forms/FieldGroup.stories.tsx b/detroit-ui-components/src/forms/FieldGroup.stories.tsx
deleted file mode 100644
index 0525b18048..0000000000
--- a/detroit-ui-components/src/forms/FieldGroup.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react"
-import { useForm } from "react-hook-form"
-import { FieldGroup } from "./FieldGroup"
-
-export default {
- title: "Forms/FieldGroup",
- decorators: [(storyFn: any) =>
- {props.prepend && {props.prepend}}
-
- {isRadioOrCheckbox && label}
-
- {props.subNote && {props.subNote}
} - {props.errorMessage && ( -{storyFn()}
],
-}
-
-export const FieldGroupDefault = () => {
- const { register } = useForm({ mode: "onChange" })
- return (
-
- {
- // 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) {
- setCheckedInputs([...checkedInputs, item.label])
- } else {
- setCheckedInputs(checkedInputs.filter((subset) => item.label !== subset))
- }
- }}
- defaultChecked={item.defaultChecked || false}
- disabled={item.disabled}
- ref={register(validation)}
- {...item.inputProps}
- data-test-id={item.dataTestId ?? dataTestId}
- />
-
- {item.note && {item.note}}
-
- {item.description && (
-
- )
- }
-
- const checkSelected = useCallback(
- (formFields: FieldSingle[] | undefined, checkedValues: string[]) => {
- formFields?.forEach((field) => {
- if (field.defaultChecked) {
- checkedValues.push(field.label)
- }
- if (field.subFields) {
- checkSelected(field.subFields, checkedValues)
- }
- })
- },
- []
- )
-
- useEffect(() => {
- const initialValues: string[] = []
- checkSelected(fields, initialValues)
- setCheckedInputs([...initialValues])
- }, [checkSelected, setCheckedInputs, fields])
-
- const getInputSet = (item: FieldSingle): React.ReactNode => {
- return (
-
-
-
-
- )}
- {item.description}
-
- {getIndividualInput(item)}
- {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
-
- )
- }
- return (
-
- {groupLabel && }
- {groupNote &&
- {errorMessage}
-
- )}
-
- )
-}
-
-export { FieldGroup as default, FieldGroup }
diff --git a/detroit-ui-components/src/global/AppearanceTypes.ts b/detroit-ui-components/src/global/AppearanceTypes.ts
deleted file mode 100644
index 64c15697d6..0000000000
--- a/detroit-ui-components/src/global/AppearanceTypes.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export enum AppearanceStyleType {
- primary = "is-primary",
- secondary = "is-secondary",
- success = "is-success",
- alert = "is-alert",
- warning = "is-warning",
- info = "is-info",
- accentCool = "is-accent-cool",
- accentWarm = "is-accent-warm",
- closed = "is-closed",
- accentLight = "is-accent-light",
-}
-
-export enum AppearanceSizeType {
- small = "is-small",
- normal = "is-normal",
- big = "is-big",
-}
-
-export enum AppearanceBorderType {
- borderless = "is-borderless",
- normal = "",
- outlined = "is-outlined",
-}
-
-export enum AppearanceShadeType {
- light = "is-light-mode",
- dark = "is-dark-mode",
-}
-
-export interface AppearanceProps {
- styleType?: AppearanceStyleType
- border?: AppearanceBorderType
- size?: AppearanceSizeType
- shade?: AppearanceShadeType
- normalCase?: boolean
-}
-
-export const classNamesForAppearanceTypes = (props: AppearanceProps) => {
- const classNames = []
- if (props.styleType) classNames.push(props.styleType)
- if (props.border) classNames.push(props.border)
- if (props.size) classNames.push(props.size)
- if (props.shade) classNames.push(props.shade)
- if (props.normalCase) classNames.push("is-normal-case")
- return classNames
-}
diff --git a/detroit-ui-components/src/global/accordion.scss b/detroit-ui-components/src/global/accordion.scss
deleted file mode 100644
index f1e04395db..0000000000
--- a/detroit-ui-components/src/global/accordion.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.accordion__panel {
- @apply p-4;
- @apply border-b;
-}
diff --git a/detroit-ui-components/src/global/css-imports.scss b/detroit-ui-components/src/global/css-imports.scss
deleted file mode 100644
index 27454aea7d..0000000000
--- a/detroit-ui-components/src/global/css-imports.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
-@import url("https://fonts.googleapis.com/css?family=Lato:400,900,700");
-@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic");
-
-@import "tailwindcss/utilities";
diff --git a/detroit-ui-components/src/global/lists.scss b/detroit-ui-components/src/global/lists.scss
deleted file mode 100644
index fe362405a2..0000000000
--- a/detroit-ui-components/src/global/lists.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-// responsive content spacing
-.responsive-content-list {
- .responsive-content-item {
- @screen md {
- @apply pt-12;
- @apply pb-4;
- margin-left: -100vw;
- margin-right: -100vw;
- padding-left: 100vw;
- padding-right: 100vw;
- }
- }
-
- .header-hidden {
- @screen md {
- @apply pt-0;
- @apply pb-0;
- }
- }
-}
-
-.numbered-list {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-.numbered-list li {
- position: relative;
- display: block;
- counter-increment: list;
- margin: 0 0 1rem 2rem;
-}
-.numbered-list li:before {
- display: inline-block;
- position: absolute;
- top: 0;
- left: -2rem;
- text-align: center;
- content: counter(list);
- border-radius: 50%;
- color: #555;
- width: 1.5rem;
- height: 1.5rem;
- line-height: 1.5rem;
- box-shadow: inset 0 0 0 1px #333;
-}
-.numbered-list li:last-of-type {
- margin-bottom: 0.5rem;
-}
-@screen md {
- .numbered-list li {
- margin: 0 0 1.5rem 2.5rem;
- }
- .numbered-list li:before {
- font-size: 1rem;
- line-height: 1.3125;
- width: 2rem;
- height: 2rem;
- line-height: 2rem;
- top: -0.25rem;
- left: -2.5rem;
- }
-}
diff --git a/detroit-ui-components/src/global/markdown.scss b/detroit-ui-components/src/global/markdown.scss
deleted file mode 100644
index 1f344da8f9..0000000000
--- a/detroit-ui-components/src/global/markdown.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.markdown {
- h3 {
- @apply mt-8;
- @apply mb-5;
- @apply text-3xl;
-
- @screen md {
- @apply text-xl;
- }
- }
-
- h3:first-child {
- @apply mt-0;
- }
-
- hr {
- @apply mt-8;
- @apply mb-8;
- @apply border-b;
- @apply border-solid;
- @apply border-gray-450;
- }
-
- p:not(:last-child),
- ul:not(:last-child) {
- @apply mb-4;
- }
- ul {
- list-style: disc;
- @apply ml-6;
- }
- ol {
- list-style: inside;
- list-style-type: decimal;
- }
- li:last-child {
- @apply mb-4;
- }
-
- &.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;
- }
- }
-}
diff --git a/detroit-ui-components/src/global/text.scss b/detroit-ui-components/src/global/text.scss
deleted file mode 100644
index c1f8408bee..0000000000
--- a/detroit-ui-components/src/global/text.scss
+++ /dev/null
@@ -1,263 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- @apply font-serif;
-}
-
-h1 {
- @apply text-3xl;
-
- @screen md {
- @apply text-4xl;
- }
-}
-
-h2 {
- @apply text-2xl;
-
- @screen md {
- @apply text-3xl;
- }
-}
-
-h3 {
- @apply text-xl;
-
- @screen md {
- @apply text-2xl;
- }
-}
-
-h4 {
- @apply text-xl;
-}
-
-h5 {
- @apply text-lg;
-}
-
-h6 {
- @apply text-base;
-}
-
-a {
- @apply text-primary;
-
- &:hover {
- @apply text-primary;
- }
-
- &:focus {
- outline: none;
- box-shadow: 0 0 3px 4px $tailwind-accent-cool;
- }
-
- &.lined {
- @apply underline;
- }
-
- &.alert {
- @apply text-alert;
- }
-
- &.darker {
- @apply text-primary-darker;
- }
-}
-
-h1.title {
- @apply text-4xl;
-}
-
-.text-caps-underline {
- @apply font-alt-sans;
- @apply uppercase;
- @apply text-tiny;
- @apply mb-5;
- @apply pb-2;
- @apply border-0;
- @apply border-b-4;
- @apply border-primary;
- @apply font-semibold;
- @apply text-gray-800;
- @apply tracking-widest;
- @apply inline-block;
-}
-
-.text-caps-tiny {
- @apply mb-3;
- @apply text-gray-750;
- @apply uppercase;
- @apply font-sans;
- @apply font-bold;
- @apply text-tiny;
- @apply tracking-wide;
-}
-
-.text-serif-lg {
- @apply font-serif;
- @apply text-lg;
- @apply mb-4;
-}
-
-.info-group__item {
- @apply border-b;
- @apply border-gray-450;
- @apply mb-4;
-
- &:last-child {
- @apply border-0;
- @apply mb-0;
- }
-}
-
-.edit-link {
- @apply underline;
- @apply font-alt-sans;
- @apply text-tiny;
- @apply uppercase;
- @apply block;
- @apply text-primary;
- @apply font-semibold;
-}
-
-.pill {
- @apply inline-block;
- @apply bg-primary-lighter;
- @apply rounded-full;
- @apply px-2;
- @apply py-1;
- @apply text-sm;
- @apply font-semibold;
- @apply text-gray-700;
- @apply mr-2;
-}
-
-.icon-item {
- @apply block;
-}
-
-// These are legacy and will be removed as we sync
-.card-header {
- @apply font-alt-sans;
- @apply font-semibold;
- @apply text-primary-dark;
- @apply text-3xl;
- @apply mb-3;
- @apply leading-tight;
-}
-
-.card-subheader {
- @apply font-alt-sans;
- @apply text-black;
- @apply text-base;
- @apply mb-3;
-}
-
-.table-header {
- @apply font-alt-sans;
- @apply font-semibold;
- @apply text-gray-800;
- @apply text-sm;
- @apply mb-1;
-}
-
-.table-subheader {
- @apply font-alt-sans;
- @apply text-gray-750;
- @apply text-sm;
- @apply mb-3;
-}
-
-.category-header {
- @apply font-alt-sans;
- @apply font-semibold;
- @apply text-gray-700;
- @apply text-sm;
-}
-
-:root {
- --bloom-text-color-light: var(--bloom-color-gray-700);
- --bloom-text-color: var(--bloom-color-gray-750);
- --bloom-text-color-dark: var(--bloom-color-gray-800);
- --bloom-text-color-darker: var(--bloom-color-gray-850);
- --bloom-text-color-darkest: var(--bloom-color-black);
-}
-
-.text__large-primary {
- font-family: var(--text-large-primary-font-family, var(--bloom-font-alt-sans));
- font-weight: var(--text-large-primary-font-weight, 600);
- color: var(--text-large-primary--color, var(--bloom-color-primary-dark));
- font-size: var(--text-large-primary-font-size, var(--bloom-font-size-3xl));
- margin-block: var(--text-large-primary-margin-block, 0 var(--bloom-s3));
- line-height: var(--text-large-primary-line-height, var(--bloom-line-height-tight));
-}
-
-.text__medium-normal {
- font-family: var(--text-medium-normal-font-family, var(--bloom-font-alt-sans));
- font-weight: var(--text-medium-normal-font-weight, normal);
- color: var(--text-medium-normal-color, var(--bloom-text-color-darkest));
- font-size: var(--text-medium-normal-font-size, var(--bloom-font-size-base));
- margin-block: var(--text-medium-normal-margin-block, 0 var(--bloom-s3));
-}
-
-.text__small-weighted {
- font-family: var(--text-small-weighted-font-family, var(--bloom-font-alt-sans));
- font-weight: var(--text-small-weighted-font-weight, 600);
- color: var(--text-small-weighted-color, var(--bloom-text-color-dark));
- font-size: var(--text-small-weighted-font-size, var(--bloom-font-size-sm));
- margin-block: var(--text-small-weighted-margin-block, 0 var(--bloom-s1));
-}
-
-.text__small-normal {
- font-family: var(--text-small-normal-font-family, var(--bloom-font-alt-sans));
- font-weight: var(--text-small-normal-font-weight, normal);
- color: var(--text-small-normal-color, var(--bloom-text-color));
- font-size: var(--text-small-normal-font-size, var(--bloom-font-size-sm));
- margin-block: var(--text-small-normal-margin-block, 0 var(--bloom-s3));
-}
-
-.text__light-weighted {
- font-family: var(--text-light-weighted-font-family, var(--bloom-font-alt-sans));
- font-weight: var(--text-light-weighted-font-weight, 600);
- color: var(--text-light-weighted-color, var(--bloom-text-color-light));
- font-size: var(--text-light-weighted-font-size, var(--bloom-font-size-sm));
-}
-
-.text__caps-spaced {
- font-family: var(--text-caps-spaced-font-family, var(--bloom-font-sans));
- text-transform: uppercase;
- color: var(--text-caps-spaced-color, var(--bloom-text-color));
- letter-spacing: var(--text-caps-spaced-letter-spacing, var(--bloom-letter-spacing-widest));
- font-weight: var(--text-caps-spaced-font-weight, 600);
- font-size: var(--text-caps-spaced-font-size, var(--bloom-font-size-tiny));
- margin-bottom: var(--text-caps-spaced-margin-bottom, var(--bloom-s3));
- display: inline-block;
-}
-
-.text__underline-weighted {
- font-family: var(--text-underline-weighted-font-family, var(--bloom-font-alt-sans));
- text-transform: var(--text-underline-weighted-transform, uppercase);
- font-size: var(--text-underline-weighted-font-size, var(--bloom-font-size-tiny));
- margin-bottom: var(--text-underline-weighted-bottom-margin, var(--bloom-s5));
- padding-bottom: var(--text-underline-weighted-bottom-padding, var(--bloom-s2));
- border: var(--text-underline-weighted-border, 0);
- border-bottom: var(--text-underline-weighted-border, 4px solid var(--bloom-color-primary));
- font-weight: var(--text-underline-weighted-font-weight, 600);
- color: var(--text-underline-weighted-color, var(--bloom-text-color-darker));
- letter-spacing: var(--text-underline-weighted-letter-spacing, var(--bloom-letter-spacing-widest));
- display: inline-block;
-}
-
-.text__caps-weighted {
- margin-bottom: var(--text-caps-weighted-bottom-margin, var(--bloom-s3));
- color: var(--text-caps-weighted-color, var(--bloom-text-color));
- text-transform: var(--text-caps-weighted-text-transform, uppercase);
- font-family: var(--text-caps-weighted-font-family, var(--bloom-font-sans));
- font-weight: var(--text-caps-weighted-font-weight, 700);
- font-size: var(--text-caps-weighted-font-size, var(--bloom-font-size-tiny));
- letter-spacing: var(--text-caps-weighted-letter-spacing, var(--bloom-letter-spacing-wide));
-}
diff --git a/detroit-ui-components/src/global/tokens/borders.scss b/detroit-ui-components/src/global/tokens/borders.scss
deleted file mode 100644
index c76aafc45a..0000000000
--- a/detroit-ui-components/src/global/tokens/borders.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-: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;
-}
diff --git a/detroit-ui-components/src/global/tokens/colors.scss b/detroit-ui-components/src/global/tokens/colors.scss
deleted file mode 100644
index 21e52aabc7..0000000000
--- a/detroit-ui-components/src/global/tokens/colors.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-:root {
- --bloom-color-white: #ffffff;
- --bloom-color-black: #000000;
-
- --bloom-color-red-800: #b21d38;
- --bloom-color-red-700: #e41d3d;
- --bloom-color-red-300: #f9d2d8;
-
- --bloom-color-green-800: #216e1f;
- --bloom-color-green-700: #2e8540;
- --bloom-color-green-300: #b4e5be;
-
- --bloom-color-blue-800: #205493;
- --bloom-color-blue-700: #0067be;
- --bloom-color-blue-600: #0077da;
- --bloom-color-blue-300: #daeeff;
- --bloom-color-blue-200: #f5f8f9;
-
- --bloom-color-yellow-800: #e5a000;
- --bloom-color-yellow-700: #fdb81e;
- --bloom-color-yellow-300: #fee8b6;
-
- --bloom-color-gray-950: #242c2e;
- --bloom-color-gray-900: #222222;
- --bloom-color-gray-850: #333333;
- --bloom-color-gray-800: #30383a;
- --bloom-color-gray-750: #555555;
- --bloom-color-gray-700: #767676;
- --bloom-color-gray-600: #999999;
- --bloom-color-gray-550: #aaaaaa;
- --bloom-color-gray-500: #cccccc;
- --bloom-color-gray-450: #dedee0;
- --bloom-color-gray-400: #efefef;
- --bloom-color-gray-300: #f6f6f6;
- --bloom-color-gray-200: #f7f7f7;
- --bloom-color-gray-100: #f9f9f9;
-
- --bloom-color-primary: var(--bloom-color-blue-600);
- --bloom-color-primary-dark: var(--bloom-color-blue-700);
- --bloom-color-primary-darker: var(--bloom-color-blue-800);
- --bloom-color-primary-light: var(--bloom-color-blue-300);
- --bloom-color-primary-lighter: var(--bloom-color-blue-200);
-
- --bloom-color-secondary: var(--bloom-color-blue-700);
- --bloom-color-alert: var(--bloom-color-red-700);
- --bloom-color-alert-light: var(--bloom-color-red-300);
- --bloom-color-alert-dark: var(--bloom-color-red-800);
- --bloom-color-success: var(--bloom-color-green-700);
- --bloom-color-success-light: var(--bloom-color-green-300);
- --bloom-color-success-dark: var(--bloom-color-green-800);
- --bloom-color-warn: var(--bloom-color-yellow-700);
- --bloom-color-warn-light: var(--bloom-color-yellow-300);
- --bloom-color-warn-dark: var(--bloom-color-yellow-800);
-
- --bloom-color-accent-cool: #00bed5;
- --bloom-color-accent-cool-light: #c8f1ff;
- --bloom-color-accent-cool-dark: #009db0;
- --bloom-color-accent-warm: #ff6627;
- --bloom-color-accent-warm-dark: #d54309;
- --bloom-color-accent-warm-light: #ffd2c0;
- --bloom-color-accent-warm-lighter: #fff7f3;
-
- --bloom-color-lush: #99cd00;
-}
diff --git a/detroit-ui-components/src/global/tokens/fonts.scss b/detroit-ui-components/src/global/tokens/fonts.scss
deleted file mode 100644
index 1edbfc62e2..0000000000
--- a/detroit-ui-components/src/global/tokens/fonts.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
- --bloom-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
- --bloom-font-serif: "Droid Serif", Georgia, Times, serif;
- --bloom-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
- --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
- "Courier New", monospace;
-
- --bloom-font-size-2xs: 0.6875rem;
- --bloom-font-size-xs: 0.75rem;
- --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;
- --bloom-font-size-3xl: 1.625rem;
- --bloom-font-size-4xl: 2rem;
- --bloom-font-size-5xl: 2.5rem;
- --bloom-font-size-6xl: 3rem;
- --bloom-font-size-6_5xl: 4rem;
- --bloom-font-size-7xl: 4.5rem;
-
- --bloom-letter-spacing-tightest: -0.075em;
- --bloom-letter-spacing-tighter: -0.05em;
- --bloom-letter-spacing-tight: -0.025em;
- --bloom-letter-spacing-wide: 0.025em;
- --bloom-letter-spacing-wider: 0.05em;
- --bloom-letter-spacing-widest: 0.12em;
- --bloom-letter-spacing-ultrawide: 0.25em;
-
- --bloom-line-height-3: 0.75rem;
- --bloom-line-height-4: 1rem;
- --bloom-line-height-5: 1.25rem;
- --bloom-line-height-6: 1.5rem;
- --bloom-line-height-7: 1.75rem;
- --bloom-line-height-8: 2rem;
- --bloom-line-height-9: 2.25rem;
- --bloom-line-height-10: 2.5rem;
- --bloom-line-height-none: 1;
- --bloom-line-height-tight: 1.25;
- --bloom-line-height-snug: 1.375;
- --bloom-line-height-normal: 1.5;
- --bloom-line-height-relaxed: 1.625;
- --bloom-line-height-loose: 2;
-}
diff --git a/detroit-ui-components/src/global/tokens/screens.scss b/detroit-ui-components/src/global/tokens/screens.scss
deleted file mode 100644
index e2cefe10a4..0000000000
--- a/detroit-ui-components/src/global/tokens/screens.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
- --bloom-screen-sm: #{$screen-sm};
- --bloom-screen-md: #{$screen-md};
- --bloom-screen-lg: #{$screen-lg};
- --bloom-screen-xl: #{$screen-xl};
-}
diff --git a/detroit-ui-components/src/global/tokens/sizes.scss b/detroit-ui-components/src/global/tokens/sizes.scss
deleted file mode 100644
index 70a1c28914..0000000000
--- a/detroit-ui-components/src/global/tokens/sizes.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-:root {
- --bloom-s0_5: 0.125rem;
- --bloom-s1: 0.25rem;
- --bloom-s1_5: 0.375rem;
- --bloom-s2: 0.5rem;
- --bloom-s2_5: 0.625rem;
- --bloom-s3: 0.75rem;
- --bloom-s3_5: 0.875rem;
- --bloom-s4: 1rem;
- --bloom-s5: 1.25rem;
- --bloom-s6: 1.5rem;
- --bloom-s7: 1.75rem;
- --bloom-s8: 2rem;
- --bloom-s9: 2.25rem;
- --bloom-s10: 2.5rem;
- --bloom-s11: 2.75rem;
- --bloom-s12: 3rem;
- --bloom-s14: 3.5rem;
- --bloom-s16: 4rem;
- --bloom-s20: 5rem;
- --bloom-s24: 6rem;
- --bloom-s28: 7rem;
- --bloom-s32: 8rem;
- --bloom-s36: 9rem;
- --bloom-s40: 10rem;
- --bloom-s44: 11rem;
- --bloom-s48: 12rem;
- --bloom-s52: 13rem;
- --bloom-s56: 14rem;
- --bloom-s60: 15rem;
- --bloom-s64: 16rem;
- --bloom-s72: 18rem;
- --bloom-s80: 20rem;
- --bloom-s96: 24rem;
-
- --bloom-width-xs: 20rem;
- --bloom-width-sm: 24rem;
- --bloom-width-md: 28rem;
- --bloom-width-lg: 32rem;
- --bloom-width-xl: 36rem;
- --bloom-width-2xl: 42rem;
- --bloom-width-3xl: 48rem;
- --bloom-width-4xl: 56rem;
- --bloom-width-5xl: 64rem;
- --bloom-width-6xl: 72rem;
- --bloom-width-7xl: 80rem;
- --bloom-width-prose: 65ch;
-}
diff --git a/detroit-ui-components/src/headers/Heading.stories.tsx b/detroit-ui-components/src/headers/Heading.stories.tsx
deleted file mode 100644
index ce1ce02ef6..0000000000
--- a/detroit-ui-components/src/headers/Heading.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react"
-import { Heading } from "./Heading"
-
-export default {
- title: "Headers/Heading",
-}
-export const base1 = () => {groupNote}
} - -
- {fields?.map((item) => (
-
- {groupSubNote &&
- {getInputSet(item)}
- {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
-
- ))}
-
- {item.subFields?.map((subItem) => {
- return getInputSet(subItem)
- })}
-
- )}
- {groupSubNote}
} - {error && errorMessage && ( -
-
-)
-
-export const customStyled = () => {
- const customStyles = `
- .custom-heading-group {
- --heading-margin: 2rem;
- --heading-color: maroon;
- --subheading-color: forestgreen;
- --subheading-margin: var(--heading-margin);
- }
- `
- return (
-
-
-
- )
-}
diff --git a/detroit-ui-components/src/headers/HeadingGroup.tsx b/detroit-ui-components/src/headers/HeadingGroup.tsx
deleted file mode 100644
index c46b34c718..0000000000
--- a/detroit-ui-components/src/headers/HeadingGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react"
-import { Heading } from "../headers/Heading"
-import "./HeadingGroup.scss"
-
-export interface HeadingGroupProps {
- /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
- heading: React.ReactNode
- /** A string or element to display in an `p` tag (using `aria-roledescription="subtitle"`) */
- subheading: React.ReactNode
- /**
- * The heading level (1 through 6)
- * @default 2
- */
- headingPriority?: number
- /** Additional class name for the whole group */
- className?: string
-}
-
-const HeadingGroup = (props: HeadingGroupProps) => {
- const classNames = ["heading-group"]
- if (props.className) classNames.push(props.className)
-
- return (
-
- -
More content here.
- -{props.subheading}
- - ) -} - -export { HeadingGroup as default, HeadingGroup } diff --git a/detroit-ui-components/src/headers/Hero.scss b/detroit-ui-components/src/headers/Hero.scss deleted file mode 100644 index 9fc6adeff3..0000000000 --- a/detroit-ui-components/src/headers/Hero.scss +++ /dev/null @@ -1,63 +0,0 @@ -.hero { - @apply bg-primary-darker; - @apply py-10; - @apply px-5; - @apply text-white; - @apply text-center; - @apply bg-cover; - - @screen md { - @apply py-20; - } - - &.centered { - background-position: center center; - } -} - -.hero__button, -.with_secondary a { - width: 100%; -} - -.hero__buttons { - @apply grid; - @apply md:grid-cols-4; - @apply gap-5; - @apply max-w-screen-md; - @apply m-auto; -} -.hero__title { - @apply text-4xl; - @apply mb-5; - @apply mx-auto; - letter-spacing: -0.04em; - max-width: 41rem; - - @screen md { - @apply text-6xl; - @apply mb-8; - } - - em { - @apply not-italic; - @apply underline; - -webkit-text-decoration-color: $tailwind-warn; - -moz-text-decoration-color: $tailwind-warn; - text-decoration-color: $tailwind-warn; - } -} - -.hero__subtitle { - @apply font-sans; - @apply text-base; - @apply text-gray-100; - @apply mb-8; - @apply mx-auto; - max-width: 41rem; - text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); - - @screen md { - @apply text-lg; - } -} diff --git a/detroit-ui-components/src/headers/Hero.stories.tsx b/detroit-ui-components/src/headers/Hero.stories.tsx deleted file mode 100644 index b901892a56..0000000000 --- a/detroit-ui-components/src/headers/Hero.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from "react" - -import { Hero } from "./Hero" - -export default { - title: "Headers/Hero", -} - -export const withListings = () => ( -{t("welcome.allApplicationClosed")}
- } else if (props.children) { - subHeader ={props.children}
- } - if (props.backgroundImage) { - styles = { backgroundImage: `url(${props.backgroundImage})` } - } - - return ( -
-
- )
-}
-
-export { Hero as default, Hero }
diff --git a/detroit-ui-components/src/headers/PageHeader.docs.mdx b/detroit-ui-components/src/headers/PageHeader.docs.mdx
deleted file mode 100644
index 75aacf6ae0..0000000000
--- a/detroit-ui-components/src/headers/PageHeader.docs.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
-import { PageHeader } from "./PageHeader"
-
-# Page Header
-
-The page header component displays a title, with an optional subtitle and/or arbitary children elements.
-
-
-
-
-
- - {props.title} -
- {subHeader} - - {props.heroInset} - {!props.heroInset && props.buttonTitle && props.buttonLink && ( - <> - {props.secondaryButtonTitle && props.secondaryButtonLink ? ( -
-
- ) : (
- -
- -## Variants - -### Inverse - -Set the `inverse` property to `true`. - - - -## Component Properties - -
-
- Here is some contenta
-
-
-
-
- Customized using the following variable overrides:
- -{cssVarsOverride.replace(".page-header-overrides ", "")}
-
- )
-}
diff --git a/detroit-ui-components/src/headers/PageHeader.tsx b/detroit-ui-components/src/headers/PageHeader.tsx
deleted file mode 100644
index 5fe3174f5e..0000000000
--- a/detroit-ui-components/src/headers/PageHeader.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import "./PageHeader.scss"
-
-export interface PageHeaderProps {
- className?: string
- inverse?: boolean
- title?: React.ReactNode
- subtitle?: string
- children?: React.ReactNode
- tabNav?: React.ReactNode
-}
-
-const PageHeader = (props: PageHeaderProps) => {
- const classNames = ["page-header", "md:pt-16"]
- if (props.className) {
- classNames.push(...props.className.split(" "))
- }
-
- if (props.inverse) {
- classNames.push("bg-primary-dark")
- classNames.push("text-white")
- } else {
- classNames.push("bg-primary-lighter")
- }
-
- return (
- - {props.title} -
- )} - {props.subtitle &&{props.subtitle}
} - {props.children} - - {props.tabNav ? props.tabNav : null} - -
-
- )
-}
-
-export const finalStep = () => (
-
-
-
-
-
-
- {storyFn()}
],
-}
-
-export const IconApplication = () =>
-
- {props.copyright}
- {props.children && } -{storyFn()}
, withKnobs],
-}
-
-export const Default = () => (
-
-
- )
-}
-
-export { LanguageNav as default, LanguageNav }
diff --git a/detroit-ui-components/src/navigation/ProgressNav.docs.mdx b/detroit-ui-components/src/navigation/ProgressNav.docs.mdx
deleted file mode 100644
index e73053a67a..0000000000
--- a/detroit-ui-components/src/navigation/ProgressNav.docs.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
-import { ProgressNav } from "./ProgressNav"
-
-# Progress Nav
-
-The progress nav component is used to illustrate progress in a multi-step process. It displays the step labels, and uses color and layout to indicate which steps are completed, in-progress, and unstarted.
-
-## Dot Style
-
-
-
-## Bar Style
-
-
-
-You can apply CSS variables to the `.progrss-nav` selector to customize the appearance of the component.
-
-| Name | Type | Description | Default |
-| ----------------------------- | ----- | ------------------------------------------- | ------------------------------ |
-| `--completed-step-color` | Color | The color of completed step | `--bloom-color-primary-darker` |
-| `--completed-step-font-color` | Color | The color of completed step label | `--bloom-color-primary-darker` |
-| `--active-step-color` | Color | The color of active step | `--bloom-color-primary` |
-| `--active-step-font-color` | Color | The color of active step label | `--bloom-color-primary-darker` |
-| `--future-step-color` | Color | The color of future step | `--bloom-color-gray-450` |
-| `--future-step-font-color` | Color | The color of future step label | `--bloom-color-gray-750` |
-| | | | |
-| `--dot-size` | Size | The diameter of each dot step | `--bloom-s3` |
-| `--dot-padding-left-mobile` | Size | The padding-left of each dot step on mobile | `--bloom-s2` |
-| `--dot-label-padding-top` | Size | The padding-top of each dot step label | `--bloom-s4` |
-| `--dot-label-padding-left` | Size | The padding-left of each dot step label | `--bloom-s1` |
-| `--dot-font-size-desktop` | Size | The font size of dot step labels on desktop | `--bloom-font-size-base` |
-| `--dot-font-size-mobile` | Size | The font size of dot step labels on mobile | `--bloom-font-size-2xs` |
-| `--dot-line-color` | Color | The color of the dot connecting line | `--bloom-color-gray-450` |
-| `--dot-active-font-weight` | Size | The font weight of active dot step label | `600` |
-| `--dot-text-transform` | Size | The capitalization of dot step label | `capitalize` |
-| | | | |
-| `--bar-height` | Size | The height of bar step | `--bloom-s4` |
-| `--bar-spacing` | Size | The spacing between each bar step | `--bloom-s0_5` |
-| `--bar-label-padding-top` | Size | The padding-top of each bar step label | `--bloom-s2` |
-| `--bar-label-padding-left` | Size | The padding-left of each bar step label | `--bloom-s0_5` |
-| `--bar-font-size` | Size | The font size of bar step labels on desktop | `--bloom-font-size-base` |
-| `--bar-active-font-weight` | Size | The font weight of active bar step label | `600` |
-| `--bar-text-transform` | Size | The capitalization of dot step label | `capitalize` |
diff --git a/detroit-ui-components/src/navigation/ProgressNav.scss b/detroit-ui-components/src/navigation/ProgressNav.scss
deleted file mode 100644
index 4bd536db8a..0000000000
--- a/detroit-ui-components/src/navigation/ProgressNav.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-.progress-nav {
- --completed-step-color: var(--bloom-color-gray-850);
- --completed-step-font-color: var(--bloom-color-gray-850);
- --active-step-color: var(--bloom-color-primary);
- --active-step-font-color: var(--bloom-color-gray-900);
- --future-step-color: var(--bloom-color-gray-450);
- --future-step-font-color: var(--bloom-color-gray-750);
-
- --dot-size: var(--bloom-s3);
- --dot-padding-left-mobile: var(--bloom-s2);
- --dot-label-padding-top: var(--bloom-s4);
- --dot-label-padding-left: var(--bloom-s1);
- --dot-font-size-desktop: var(--bloom-font-size-base);
- --dot-font-size-mobile: var(--bloom-font-size-2xs);
- --dot-line-color: var(--bloom-color-gray-450);
- --dot-active-font-weight: bold;
- --dot-text-transform: capitalize;
-
- --bar-height: var(--bloom-s4);
- --bar-spacing: var(--bloom-s0_5);
- --bar-label-padding-top: var(--bloom-s2);
- --bar-label-padding-left: var(--bloom-s0_5);
- --bar-font-size: var(--bloom-font-size-base);
- --bar-active-font-weight: bold;
- --bar-text-transform: capitalize;
-
- display: table;
- width: 100%;
-}
-
-.progress-nav__dot-item {
- font-size: var(--dot-font-size-mobile);
- padding: var(--dot-size) var(--dot-padding-left-mobile);
- position: relative;
- text-align: center;
- text-transform: var(--dot-text-transform);
- display: table-cell;
- white-space: nowrap;
- float: none;
- @media (min-width: $screen-md) {
- font-size: var(--dot-font-size-desktop);
- padding: 0rem;
- }
-
- &:before {
- position: absolute;
- height: var(--dot-size);
- width: var(--dot-size);
- background-color: var(--completed-step-color);
- border-radius: 50%;
- top: 0;
- left: 50%;
- content: "";
- transform: translateX(-50%);
- z-index: 2;
- }
-
- &:after {
- position: absolute;
- background-color: var(--dot-line-color);
- width: 100%;
- left: 0;
- top: 0.4rem;
- content: "";
- height: 1px;
- }
-
- &:first-of-type {
- &:after {
- left: 50%;
- }
- }
-
- &:last-of-type {
- &:after {
- left: auto;
- right: 50%;
- }
- }
- .progress-nav__item-container {
- padding-top: var(--dot-label-padding-top);
- padding-left: var(--dot-label-padding-left);
- color: var(--completed-step-font-color);
- display: block;
- position: relative;
- pointer-events: none;
- cursor: default;
- z-index: 3;
- }
-
- &.is-active {
- &:before {
- background-color: var(--active-step-color);
- }
- .progress-nav__item-container {
- color: var(--active-step-font-color);
- font-weight: var(--dot-active-font-weight);
- }
- }
-
- &.is-disabled {
- &:before {
- background-color: var(--future-step-color);
- }
- .progress-nav__item-container {
- color: var(--future-step-font-color);
- }
- }
-}
-
-.progress-nav__bar {
- border-spacing: var(--bar-spacing);
- table-layout: fixed;
-}
-
-.progress-nav__bar-item {
- // drop the labels on mobile view
- font-size: 0;
- padding-top: var(--bar-label-padding-top);
- padding-left: var(--bar-label-padding-left);
- position: relative;
- display: table-cell;
- white-space: nowrap;
- float: none;
- max-width: 20%;
- border-top-width: var(--bar-height);
- border-top-color: var(--completed-step-color);
- text-transform: var(--bar-text-transform);
- @media (min-width: $screen-md) {
- font-size: var(--bar-font-size);
- }
- &.is-active {
- border-top-color: var(--active-step-color);
- .progress-nav__item-container {
- font-weight: var(--bar-active-font-weight);
- color: var(--active-step-font-color);
- }
- }
- &.is-disabled {
- border-top-color: var(--future-step-color);
- .progress-nav__item-container {
- color: var(--future-step-font-color);
- }
- }
- .progress-nav__item-container {
- color: var(--completed-step-font-color);
- }
-}
diff --git a/detroit-ui-components/src/navigation/ProgressNav.stories.tsx b/detroit-ui-components/src/navigation/ProgressNav.stories.tsx
deleted file mode 100644
index 956050e76b..0000000000
--- a/detroit-ui-components/src/navigation/ProgressNav.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react"
-import { BADGES } from "../../.storybook/constants"
-import { ProgressNav } from "./ProgressNav"
-import ProgressNavDocs from "./ProgressNav.docs.mdx"
-
-export default {
- title: "Navigation/Progress Nav 🚩",
- decorators: [(storyFn: any) =>
-
-
- {storyFn()}
],
- parameters: {
- docs: {
- page: ProgressNavDocs,
- },
- badges: [BADGES.GEN2],
- },
-}
-
-export const Default = () => (
-
- {!props.removeSrHeader && (
-
- )
-}
-
-export { ProgressNav as default, ProgressNav }
diff --git a/detroit-ui-components/src/notifications/AlertBox.scss b/detroit-ui-components/src/notifications/AlertBox.scss
deleted file mode 100644
index b467360cb6..0000000000
--- a/detroit-ui-components/src/notifications/AlertBox.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.alert-box {
- @apply relative;
- @apply py-3;
- @apply px-4;
- @apply leading-snug;
- @apply flex;
- @apply items-center;
-
- .alert-box_inner {
- @apply m-auto;
- @apply max-w-5xl;
- @apply px-4;
- @apply flex-1;
- @apply flex;
- @apply items-center;
- }
-
- &.narrow {
- padding-top: 0.35rem;
- padding-bottom: 0.35rem;
- }
-
- // Inverts color scheme of alert
- &.invert {
- @apply text-white;
- svg {
- fill: white;
- }
-
- .close {
- @apply text-white;
- }
- }
-
- &.alert {
- @apply bg-alert-light;
-
- &.invert {
- @apply bg-alert;
- }
- }
-
- &.primary {
- @apply bg-primary-light;
-
- &.invert {
- @apply bg-primary;
- }
- }
-
- &.success {
- @apply bg-success-light;
-
- &.invert {
- @apply bg-success;
- }
- }
-
- &.warn {
- @apply bg-warn-light;
-
- &.invert {
- @apply bg-warn;
- }
- }
-}
-
-.alert-box__head {
- @apply flex;
- @apply justify-between;
- @apply w-full;
-}
-
-.alert-box__title {
- @apply flex;
- @apply justify-between;
-}
-
-.alert-box__body {
- @apply ml-2;
- @apply font-semibold;
- @apply text-tiny;
-}
-
-.alert-box__close {
- @apply text-3xl;
- right: 1rem;
- @apply ml-3;
- @apply p-0;
- line-height: 1rem;
-}
diff --git a/detroit-ui-components/src/notifications/AlertBox.stories.tsx b/detroit-ui-components/src/notifications/AlertBox.stories.tsx
deleted file mode 100644
index 8975603f02..0000000000
--- a/detroit-ui-components/src/notifications/AlertBox.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react"
-import { AlertBox } from "./AlertBox"
-
-export default {
- title: "Notifications/Alert Box",
- decorators: [(storyFn: any) => - {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")} -
- )} --
- {props.labels.map((label, i) => (
-
{storyFn()}
],
-}
-
-export const AlertBoxAlert = () => (
-
-
-
- )
- if (props.boundToLayoutWidth) {
- innerSection =
-
-
-
- {closeable && (
-
- )}
- {props.children}
: props.children} - -{innerSection}
- }
-
- return showing ? (
-
- {innerSection}
-
- ) : null
-}
-
-export { AlertBox as default, AlertBox }
diff --git a/detroit-ui-components/src/notifications/alertTypes.ts b/detroit-ui-components/src/notifications/alertTypes.ts
deleted file mode 100644
index 62f5ad9583..0000000000
--- a/detroit-ui-components/src/notifications/alertTypes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const colorClasses = {
- alert: "alert",
- notice: "primary",
- success: "success",
-}
-
-export type AlertTypes = keyof typeof colorClasses
diff --git a/detroit-ui-components/src/notifications/index.ts b/detroit-ui-components/src/notifications/index.ts
deleted file mode 100644
index 67bb316d1c..0000000000
--- a/detroit-ui-components/src/notifications/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AlertBox } from "./AlertBox"
-export type { AlertTypes } from "./alertTypes"
diff --git a/detroit-ui-components/src/overlays/Drawer.scss b/detroit-ui-components/src/overlays/Drawer.scss
deleted file mode 100644
index e6581d6649..0000000000
--- a/detroit-ui-components/src/overlays/Drawer.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.drawer {
- @apply flex;
- @apply flex-col;
- @apply bg-gray-200;
- @apply max-w-5xl;
- @apply border-l;
- @apply w-full;
- @apply absolute;
- @apply top-0;
- @apply right-0;
- @apply bottom-0;
- @apply left-auto;
- @apply overflow-y-auto;
-}
-
-.fixed-overlay.has-drawer {
- &.overlay-effect-enter,
- &.overlay-effect-exit-active {
- .fixed-overlay__inner {
- opacity: 0.5;
- transform: translate(100px, 0px);
- }
- }
- &.overlay-effect-exit-active {
- .fixed-overlay__inner {
- opacity: 0;
- }
- }
- &.overlay-effect-enter-active {
- .fixed-overlay__inner {
- opacity: 1;
- transform: translate(0px, 0px);
- }
- }
-
- .fixed-overlay__inner {
- @apply w-full;
- @apply h-full;
- @apply max-w-5xl;
- @apply mr-0;
- }
-
- &.is-direction-left {
- .fixed-overlay__inner {
- @apply ml-0;
- @apply mr-auto;
- }
- &.overlay-effect-enter,
- &.overlay-effect-exit-active {
- .fixed-overlay__inner {
- transform: translate(-100px, 0px);
- }
- }
- &.overlay-effect-enter-active {
- .fixed-overlay__inner {
- transform: translate(0px, 0px);
- }
- }
- }
-}
-
-.drawer__header {
- @apply flex;
- @apply items-center;
- @apply relative;
- @apply bg-white;
- @apply p-5;
- @apply border-b;
- flex: 0 0 4.625rem;
-}
-
-.drawer__close {
- @apply absolute;
- top: 1.625rem;
- left: 1.5rem;
-}
-
-.drawer__title {
- @apply font-alt-sans;
- @apply text-xl;
- @apply ml-10;
-}
-
-.is-direction-left {
- .drawer__title {
- @apply ml-0;
- }
- .drawer__close {
- left: auto;
- right: 1.5rem;
- }
-}
-
-.drawer__body {
- @apply overflow-y-auto;
- @apply relative;
- @apply h-full;
- // flex: 1 1 auto;
-}
-
-.drawer__content {
- @apply m-auto;
- @apply px-4;
- @apply pt-8;
- @apply pb-4;
- @apply overflow-y-visible;
-}
diff --git a/detroit-ui-components/src/overlays/Drawer.stories.tsx b/detroit-ui-components/src/overlays/Drawer.stories.tsx
deleted file mode 100644
index cd35ccdc57..0000000000
--- a/detroit-ui-components/src/overlays/Drawer.stories.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useState } from "react"
-import { useForm } from "react-hook-form"
-
-import { Drawer, DrawerSide } from "./Drawer"
-import { GridSection } from "../sections/GridSection"
-import { ViewItem } from "../blocks/ViewItem"
-import { Field } from "../forms/Field"
-import { Button } from "../actions/Button"
-import { AppearanceBorderType, AppearanceStyleType } from "../global/AppearanceTypes"
-
-export default {
- title: "Overlays/Drawer",
- decorators: [(storyFn: any) => {storyFn()}
],
-}
-
-export const Standard = () => {
- const [drawerState, setDrawerState] = useState(false)
- return (
- <>
- Test
-…
-
- )
-}
-
-export const StandardOnLeft = () => {
- const [drawerState, setDrawerState] = useState(false)
- return (
- <>
- Test
-
-
-
-
- )
-}
-
-export const DrawerFieldTest = () => {
- const { register } = useForm()
- return (
-
-
- {props.title && (
-
- {props.headerTag}
-
- )}
- {props.toastContent && (
-
- {props.toastContent}
-
- )}
-
-
-
-
- - {props.title} -
- )} - {props.headerTag && ( -
-
-
- {props.actions &&
- {props.children}
-
- {props.actions}
}
- {storyFn()}
],
-}
-
-export const Default = () => (
-
- child content here
-
-
-
- )
- }, [isLoading, children, classNames])
-
- return (
-
- {content}
-
- )
-}
-
-export { LoadingOverlay as default, LoadingOverlay }
diff --git a/detroit-ui-components/src/overlays/Modal.docs.mdx b/detroit-ui-components/src/overlays/Modal.docs.mdx
deleted file mode 100644
index e2e28ace3e..0000000000
--- a/detroit-ui-components/src/overlays/Modal.docs.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-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 - -
{storyFn()}
, withKnobs],
- parameters: {
- docs: {
- page: ModalDocumentation,
- },
- badges: [BADGES.GEN2],
- },
-}
-
-const noop = () => {
- // intentionally blank
-}
-
-export const BasicModal = () => {
- const [openModal, setOpenModal] = useState(false)
-
- return (
- <>
-
-
- - {props.title} -
-
-
- {typeof props.children === "string" ?
-
- {props.actions &&
- {props.children}
: props.children} - {
- if (e.target === e.currentTarget) closeHandler()
- }}
- >
-
- )
-}
-
-export const Overlay = (props: OverlayProps) => {
- const documentAvailable = typeof document !== "undefined"
- const overlayRoot = useState
- {props.children}
-
-
-
- )
-}
-export { AdditionalFees as default, AdditionalFees }
diff --git a/detroit-ui-components/src/page_components/listing/ListingCard.scss b/detroit-ui-components/src/page_components/listing/ListingCard.scss
deleted file mode 100644
index 4df56e2235..0000000000
--- a/detroit-ui-components/src/page_components/listing/ListingCard.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.listings-row {
- @apply flex;
- @apply flex-row;
- @apply flex-wrap;
- @apply max-w-5xl;
- @apply m-auto;
- @apply mb-12;
- max-width: 48rem;
-
- &:first-of-type {
- @apply mt-12;
- }
-
- @screen lg {
- @apply max-w-5xl;
- }
-}
-
-.listings-row_figure {
- @apply w-full;
- @apply p-3;
- @apply pb-0;
-
- @screen lg {
- @apply w-6/12;
- }
-}
-
-.listings-row_content {
- @apply w-full;
- @apply p-3;
-
- @screen lg {
- @apply w-6/12;
- }
-
- .listings-row_headers {
- @apply flex;
- @apply flex-col;
- @apply items-center;
- @apply text-center;
- @screen md {
- @apply items-start;
- @apply text-left;
- }
- }
-}
-
-.listings-row_table {
- @apply mb-4;
-}
-
-.listings-row_footer {
- @apply flex;
- @apply justify-end;
- @apply w-full;
- a:not(:first-child) {
- @apply ml-1;
- }
-}
-
-.listings-row_footer_container {
- @apply flex;
- @apply flex-col;
-}
-
-.listings-row_table {
- @apply mb-4;
-}
-
-.favorited-fill {
- fill: $tailwind-white !important;
-}
diff --git a/detroit-ui-components/src/page_components/listing/ListingCard.stories.tsx b/detroit-ui-components/src/page_components/listing/ListingCard.stories.tsx
deleted file mode 100644
index 0e45ec13e0..0000000000
--- a/detroit-ui-components/src/page_components/listing/ListingCard.stories.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import LinkButton from "../../actions/LinkButton"
-import Icon from "../../icons/Icon"
-import * as React from "react"
-import { ListingCard } from "./ListingCard"
-
-export default {
- title: "Listing/ListingCard",
- component: ListingCard,
-}
-
-const standardImageCardProps = {
- imageUrl: "/images/listing.jpg",
- href: "listing-link",
- tags: [{ text: "reserved community tag" }],
- statuses: [{ content: "status content" }],
-}
-
-const standardTableProps = {
- headers: {
- unitType: "t.unitType",
- minimumIncome: "t.incomeRange",
- rent: "t.rent",
- },
- data: [
- {
- unitType: { content: "cellA" },
- minimumIncome: { content: "cellB" },
- rent: { content: "cellC" },
- },
- ],
- responsiveCollapse: true,
-}
-
-export const WithStandardTable = () => {
- return (
- {t("listings.sections.additionalFees")}
-
- {props.applicationFee && (
-
-
-
- )}
- {(props.depositMin || props.depositMax) && (
- {t("listings.applicationFee")}
- ${props.applicationFee}
- {t("listings.applicationPerApplicantAgeDescription")}
- {t("listings.applicationFeeDueAt")}
-
-
- )}
- {t("t.deposit")}
- {getDeposit()}
- {props.depositHelperText && {props.depositHelperText}
}
-
- {props?.footerContent?.map((elem, idx) => (
-
-
- {elem}
-
- ))}
-
- {header}
-
- )
- }
- const getContentRow = (prefix: string, content: string) => {
- return (
-
- {prefix} {content}
-
- )
- }
- return (
-
-
- )
-}
-
-export const CustomContent = () => {
- return (
-
- Available units
-
- {getHeader("Units")}
- {getContentRow("2BR:", "2 available")}
- {getContentRow("3BR:", "5 available")}
- {getContentRow("4BR:", "1 available")}
- {getHeader("Payments")}
-
- No down payment, but you do need to complete 500 hours of sweat equity. Your monthly payment
- will be 30% of your income.
-
-
- You will need to attend an information session.
-
-
-
- See Details
-
- )
-}
-
-export const CustomFooter = () => {
- return (
- {contentProps?.contentSubheader?.text}
- - ) - } - const getContent = () => { - return ( - <> -
- {(contentProps?.tableHeader?.text || contentProps?.tableSubheader?.text) &&
- (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
-
- )} -
- - )} -
- {getHeader(
- contentProps?.tableHeader,
- contentProps?.tableHeader?.priority ?? 3,
- "tableHeader"
- )}
-
- {children && children}
- {tableProps && (tableProps.data || tableProps.stackedData) && (
- <>
- {stackedTable ? (
- - {contentProps?.tableSubheader?.text} -
- {cardTags && cardTags?.length > 0 && ( -
- {cardTags?.map((cardTag, index) => {
- return (
-
- {cardTag.iconType && (
-
- )
- })}
-
- )}
-
- {footerContent && footerContent}
- {footerButtons && footerButtons?.length > 0 && (
-
-
- )
- }
-
- return (
-
- {footerButtons?.map((footerButton, index) => {
- return (
-
- {footerButton.text}
-
- )
- })}
-
- )}
-
-
-
-
- {getContentHeader()}
- {getContent()}
-
-
-
- {props.title}
- {props.subtitle} - - -
- {props.children}
-
-)
-
-export const ListingDetailItem = (props: ListingDetailHeaderProps) => (
- {t("whatToExpect.label")}
-
- {content}
- {expandableContent && (
-
-
-
- {expandableContent}
-
-
- )}
- {storyFn()}
],
-}
-
-export const DefaultThreeColumns = () => (
-
-
-
- {props.title}
} - {props.edit && ( - - {props.edit} - - )} - {props.subtitle &&{props.subtitle}
} - {props.description && ( - {props.description} - )} -{props.children}
- {storyFn()}
],
-}
-
-export const ThreeCards = () => (
- {props.title}
- {props.subtitle &&{props.subtitle}
} -{props.children}
-
-
- )
-}
-
-export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }
diff --git a/detroit-ui-components/src/tables/AgTable.stories.tsx b/detroit-ui-components/src/tables/AgTable.stories.tsx
deleted file mode 100644
index 037c1d86b5..0000000000
--- a/detroit-ui-components/src/tables/AgTable.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react"
-
-import { AgTable, useAgTable } from "./AgTable"
-
-const agTableMockColumns = [
- {
- headerName: "Name",
- field: "name",
- },
- {
- headerName: "Value",
- field: "value",
- },
-]
-
-const agTableMockData = Array.from({ length: 10 }).map((_, index) => ({
- name: `${index + 1} row`,
- value: `${index + 1}`,
-}))
-
-const getTableMockData = (page: number, perPage: number, search: string) => {
- // in story works by name only
- if (search) {
- return agTableMockData.filter((item) => item.name.includes(search))
- }
-
- if (page === 1) return agTableMockData.slice(0, perPage)
- if (page === 2) return agTableMockData.slice(perPage, agTableMockData.length)
-
- return agTableMockData
-}
-
-export default {
- title: "Tables/AgTable",
- decorators: [(storyFn: any) =>
-
-
-
-
-
-
-
-
- {totalItems}
-
- {quantityLabel && {quantityLabel}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {storyFn()}
],
- component: AgTable,
-}
-
-export const Default = () => {
- const tableOptions = useAgTable()
- const tableItems = getTableMockData(
- tableOptions.pagination.currentPage,
- tableOptions.pagination.itemsPerPage,
- tableOptions.filter.filterValue
- )
-
- return (
-
-
- )
-}
-
-export { AgTable as default, AgTable }
diff --git a/detroit-ui-components/src/tables/GroupedTable.stories.tsx b/detroit-ui-components/src/tables/GroupedTable.stories.tsx
deleted file mode 100644
index f3c0b9c2b7..0000000000
--- a/detroit-ui-components/src/tables/GroupedTable.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-
-import { GroupedTable } from "./GroupedTable"
-import { mockData } from "../tables/StandardTable.stories"
-import { t } from "@bloom-housing/ui-components"
-
-export default {
- title: "Tables/GroupedTable",
- decorators: [(storyFn: any) =>
-
-
-
-
-
- {headerContent}
-
-
-
- {!validSearch && (
- {t("applications.table.searchError")}
- )}
-
-
-
-
-
-
-
-
- {storyFn()}
],
-}
-
-const headers = {
- name: t("t.name"),
- relationship: t("t.relationship"),
- dob: t("application.household.member.dateOfBirth"),
-}
-
-const data = [
- {
- header: "Reserved",
- className: "reserved",
- data: mockData,
- },
- {
- data: mockData,
- },
-]
-
-export const Default = () =>
-
-
-
-
- )
-}
diff --git a/detroit-ui-components/src/tables/StandardTable.stories.tsx b/detroit-ui-components/src/tables/StandardTable.stories.tsx
deleted file mode 100644
index 511044f43f..0000000000
--- a/detroit-ui-components/src/tables/StandardTable.stories.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from "react"
-import { Button } from "../actions/Button"
-import { StandardTable, StandardTableData, TableHeaders, TableThumbnail } from "./StandardTable"
-
-export default {
- title: "Tables/StandardTable",
- decorators: [(storyFn: any) => {storyFn()}
],
- includeStories: ["Default", "ImageCells", "Draggable"],
- excludeStories: ["mockHeaders", "mockData", "preferenceHeaders", "preferenceData"],
- component: StandardTable,
-}
-
-export const mockHeaders: TableHeaders = {
- name: "t.name",
- relationship: "t.relationship",
- dob: "application.household.member.dateOfBirth",
-}
-
-export const mockData: StandardTableData = [
- {
- name: { content: "Jim Halpert" },
- relationship: { content: "Husband" },
- dob: { content: "05/01/1985" },
- },
- {
- name: { content: "Michael Scott" },
- relationship: { content: "Friend" },
- dob: { content: "05/01/1975" },
- },
-]
-
-let i = 5
-while (i > 0) {
- mockData.push(mockData[0])
- mockData.push(mockData[1])
- i--
-}
-
-export const Default = () => 
-
- 
-
-
-
- )
-}
-
-export const preferenceData = [
- {
- name: { content: "Live or Work in City of Hayward" },
- action: { content: getDeleteButton() },
- },
- {
- name: { content: "Displacee Tenant" },
- action: { content: getDeleteButton() },
- },
- {
- name: { content: "Veteran Status" },
- action: { content: getDeleteButton() },
- },
-]
-
-export const Draggable = () => (
-
-
-
-
-
- )
-}
diff --git a/detroit-ui-components/src/text/Description.scss b/detroit-ui-components/src/text/Description.scss
deleted file mode 100644
index 1dbba85adb..0000000000
--- a/detroit-ui-components/src/text/Description.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "../global/mixins.scss";
-
-// Description grid
-.column-definition-list {
- @include clearfix;
-
- --title-font-family: var(--bloom-font-serif);
- --title-font-size-desktop: var(--bloom-font-size-xl);
- --title-font-size-mobile: var(--bloom-font-size-lg);
- --title-text-color: var(--bloom-color-gray-800);
- --body-font-size: var(--bloom-font-size-sm);
- --border-color: var(--bloom-color-gray-450);
- --last-row-grid: span 2 / span 2;
-
- @media (min-width: $screen-md) {
- display: grid;
- grid-template-columns: 1fr 1fr;
- column-gap: var(--bloom-s4);
- grid-row-gap: 0.15rem;
- }
-
- .description__title {
- font-family: var(--title-font-family);
- font-size: var(--title-font-size-mobile);
- color: var(--title-text-color);
- margin-bottom: var(--bloom-s1);
- clear: left;
- height: auto;
- width: 100%;
-
- @media (min-width: $screen-md) {
- padding-left: var(--bloom-s4);
- border-left: 2px solid var(--border-color);
- float: left;
- margin-bottom: var(--bloom-s3);
- font-size: var(--title-font-size-desktop);
- }
- }
-
- .description__body {
- font-size: var(--body-font-size);
- margin-bottom: var(--bloom-s5);
- width: 100%;
-
- @media (min-width: $screen-md) {
- margin-bottom: 0;
- float: left;
- padding-top: 0.4em;
-
- &:last-of-type {
- grid-column: var(--last-row-grid);
- }
- }
- }
-}
diff --git a/detroit-ui-components/src/text/Description.tsx b/detroit-ui-components/src/text/Description.tsx
deleted file mode 100644
index 2632e02114..0000000000
--- a/detroit-ui-components/src/text/Description.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react"
-import "./Description.scss"
-import Markdown from "markdown-to-jsx"
-
-export interface DescriptionProps {
- term: string
- description: string | React.ReactNode
- dtClassName?: string
- markdown?: boolean
-}
-
-export const Description = (props: DescriptionProps) => {
- const dtClasses = ["description__body"]
- if (props.dtClassName) dtClasses.push(props.dtClassName)
-
- return (
- <>
- {storyFn()}
],
-}
-
-export const standard = () =>
-
- Draft
-
-
- Scheduled
-
-
- Closed
-
-
- Results
-
-
-)
diff --git a/detroit-ui-components/src/text/Tag.tsx b/detroit-ui-components/src/text/Tag.tsx
deleted file mode 100644
index ae4eca95d9..0000000000
--- a/detroit-ui-components/src/text/Tag.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from "react"
-import { AppearanceProps, classNamesForAppearanceTypes } from "../global/AppearanceTypes"
-import "./Tag.scss"
-
-export interface TagProps extends AppearanceProps {
- className?: string
- pillStyle?: boolean
- children: React.ReactNode
- fillContainer?: boolean
- tabIndex?: number
-}
-
-export const Tag = (props: TagProps) => {
- const tagClasses = ["tag"].concat(classNamesForAppearanceTypes(props))
-
- if (props.pillStyle) tagClasses.push("is-pill")
- if (props.fillContainer) tagClasses.push("fill-container")
- if (props.className) tagClasses.push(props.className)
-
- return (
-
- {props.children}
-
- )
-}
diff --git a/detroit-ui-components/tailwind.config.js b/detroit-ui-components/tailwind.config.js
deleted file mode 100644
index 3d08859c99..0000000000
--- a/detroit-ui-components/tailwind.config.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
- important: true,
- plugins: [require("tailwindcss-rtl")],
- purge: false,
- theme: {
- screens: {
- sm: "640px",
- md: "768px",
- lg: "1200px",
- xl: "1280px",
- print: { raw: "print" },
- },
- fontSize: {
- "2xs": "var(--bloom-font-size-2xs)",
- xs: "var(--bloom-font-size-xs)",
- sm: "var(--bloom-font-size-sm)",
- tiny: "var(--bloom-font-size-tiny)",
- base: "var(--bloom-font-size-base)",
- lg: "var(--bloom-font-size-lg)",
- xl: "var(--bloom-font-size-xl)",
- "2xl": "var(--bloom-font-size-2xl)",
- "3xl": "var(--bloom-font-size-3xl)",
- "4xl": "var(--bloom-font-size-4xl)",
- "5xl": "var(--bloom-font-size-5xl)",
- "6xl": "var(--bloom-font-size-6xl)",
- "6.5xl": "var(--bloom-font-size-6_5xl)",
- "7xl": "var(--bloom-font-size-7xl)",
- },
- fontFamily: {
- sans: "var(--bloom-font-sans)",
- serif: "var(--bloom-font-serif)",
- "alt-sans": "var(--bloom-font-alt-sans)",
- },
- colors: {
- // primary: "#279989",
- // "primary-dark": "#004445",
- // "primary-darker": "#004445",
- // "primary-light": "#F2F2F2",
- // "primary-lighter": "#F2F2F2",
- // secondary: "#0067be",
- // alert: "#E41D3D",
- // "alert-light": "#F9D2D8",
- // "alert-dark": "#B21D38",
- // success: "#2E8540",
- // "success-light": "#B4E5BE",
- // "success-dark": "#216E1F",
- // warn: "#FDB81E",
- // "warn-light": "#FEE8B6",
- // "warn-dark": "#E5A000",
- // "accent-cool": "#00BED5",
- // "accent-cool-light": "#C8F1FF",
- // "accent-cool-dark": "#009DB0",
- // "accent-warm": "#ff6627",
- // "accent-warm-dark": "#D54309",
- // "accent-warm-light": "#FFD2C0",
- // "accent-warm-lighter": "#FFF7F3",
- // royal: "#B85ED5",
- // "royal-light": "#EED7F5",
- // "royal-dark": "#A131C6",
- // lush: "#99CD00",
- // "lush-light": "#F2FFCD",
- // "lush-dark": "#7CA700",
- // white: "#FFFFFF",
- // black: "#000000",
- primary: "var(--bloom-color-primary)",
- "primary-dark": "var(--bloom-color-primary-dark)",
- "primary-darker": "var(--bloom-color-primary-darker)",
- "primary-light": "var(--bloom-color-primary-light)",
- "primary-lighter": "var(--bloom-color-primary-lighter)",
- secondary: "var(--bloom-color-secondary)",
- alert: "var(--bloom-color-alert)",
- "alert-light": "var(--bloom-color-alert-light)",
- "alert-dark": "var(--bloom-color-alert-dark)",
- success: "var(--bloom-color-success)",
- "success-light": "var(--bloom-color-success-light)",
- "success-dark": "var(--bloom-color-success-dark)",
- warn: "var(--bloom-color-warn)",
- "warn-light": "var(--bloom-color-warn-light)",
- "warn-dark": "var(--bloom-color-warn-dark)",
- "accent-cool": "var(--bloom-color-accent-cool)",
- "accent-cool-light": "var(--bloom-color-accent-cool-light)",
- "accent-cool-dark": "var(--bloom-color-accent-cool-dark)",
- "accent-warm": "var(--bloom-color-accent-warm)",
- "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
- "accent-warm-light": "var(--bloom-color-accent-warm-light)",
- "accent-warm-lighter": "var(--bloom-color-accent-warm-lighter)",
- royal: "#B85ED5",
- "royal-light": "#EED7F5",
- "royal-dark": "#A131C6",
- lush: "var(--bloom-color-lush)",
- "lush-light": "#F2FFCD",
- "lush-dark": "#7CA700",
- white: "var(--bloom-color-white)",
- black: "var(--bloom-color-black)",
- blue: {
- 800: "var(--bloom-color-blue-800)",
- 700: "var(--bloom-color-blue-700)",
- 600: "var(--bloom-color-blue-600)",
- 300: "var(--bloom-color-blue-300)",
- 200: "var(--bloom-color-blue-200)",
- },
- red: {
- 700: "var(--bloom-color-red-700)",
- 300: "var(--bloom-color-red-300)",
- },
- yellow: {
- 700: "var(--bloom-color-yellow-700)",
- 300: "var(--bloom-color-yellow-300)",
- },
- green: {
- 900: "var(--bloom-color-green-900)",
- 700: "var(--bloom-color-green-700)",
- 500: "var(--bloom-color-green-500)",
- 300: "var(--bloom-color-green-300)",
- 100: "var(--bloom-color-green-100)",
- },
- teal: {
- 700: "var(--bloom-color-green-700)",
- 300: "var(--bloom-color-green-300)",
- },
- gray: {
- 950: "var(--bloom-color-gray-950)",
- 900: "var(--bloom-color-gray-900)",
- 850: "var(--bloom-color-gray-850)",
- 800: "var(--bloom-color-gray-800)",
- 750: "var(--bloom-color-gray-750)",
- 700: "var(--bloom-color-gray-700)",
- 600: "var(--bloom-color-gray-600)",
- 550: "var(--bloom-color-gray-550)",
- 500: "var(--bloom-color-gray-500)",
- 450: "var(--bloom-color-gray-450)",
- 400: "var(--bloom-color-gray-400)",
- 300: "var(--bloom-color-gray-300)",
- 200: "var(--bloom-color-gray-200)",
- 100: "var(--bloom-color-gray-100)",
- },
- },
- letterSpacing: {
- tightest: "var(--bloom-letter-spacing-tightest)",
- tighter: "var(--bloom-letter-spacing-tighter)",
- tight: "var(--bloom-letter-spacing-tight)",
- normal: "0",
- wide: "var(--bloom-letter-spacing-wide)",
- wider: "var(--bloom-letter-spacing-wider)",
- widest: "var(--bloom-letter-spacing-widest)",
- ultrawide: "var(--bloom-letter-spacing-ultrawide)",
- },
- extend: {
- borderColor: (theme) => ({
- DEFAULT: theme("colors.gray.450", "currentColor"),
- }),
- inset: {
- 4: "1rem",
- "-10": "-2.5rem",
- },
- },
- },
-}
diff --git a/detroit-ui-components/tailwind.tosass.js b/detroit-ui-components/tailwind.tosass.js
deleted file mode 100644
index 28d4460780..0000000000
--- a/detroit-ui-components/tailwind.tosass.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-env node */
-
-const tailwindToSassVars = (bloomTheme) => {
- // TODO: we should remove this in favor of just using the new CSS variables
- const bloomColorVars = Object.keys(bloomTheme.theme.colors).map((colorKey) => {
- if (typeof bloomTheme.theme.colors[colorKey] == "object") {
- // create a map variable that can be used by the map-get SCSS function
- let colorMap = "$tailwind-" + colorKey + ": ("
- colorMap += Object.keys(bloomTheme.theme.colors[colorKey])
- .map((colorMapKey) => {
- return `${colorMapKey}: ${bloomTheme.theme.colors[colorKey][colorMapKey]}`
- })
- .join(", ")
- return colorMap + ");"
- } else {
- // return a simple variable
- return `$tailwind-${colorKey}: ${bloomTheme.theme.colors[colorKey]};`
- }
- })
- const bloomScreenVars = Object.keys(bloomTheme.theme.screens).map((screenKey) => {
- return `$screen-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
- })
-
- // Uncomment this if you want to debug:
- // console.log(bloomColorVars.concat(bloomScreenVars).join("\n"))
-
- return bloomColorVars.concat(bloomScreenVars).join("\n")
-}
-
-module.exports = tailwindToSassVars
diff --git a/detroit-ui-components/tsconfig.json b/detroit-ui-components/tsconfig.json
deleted file mode 100644
index bf68b30690..0000000000
--- a/detroit-ui-components/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "extends": "../tsconfig.json" /* TODO: is this worth connecting? */,
- "compilerOptions": {
- "outDir": "build/lib",
- "module": "esnext",
- "esModuleInterop": true,
- "target": "es5",
- "lib": ["es5", "es6", "es7", "es2017", "dom"],
- "sourceMap": true,
- "allowJs": true,
- "jsx": "react",
- "moduleResolution": "node",
- "rootDirs": ["src"],
- "baseUrl": "src",
- "forceConsistentCasingInFileNames": true,
- "noImplicitReturns": true,
- "noImplicitThis": true,
- "noImplicitAny": true,
- "strictNullChecks": true,
- "suppressImplicitAnyIndexErrors": true,
- "noUnusedLocals": false,
- "declaration": true,
- "allowSyntheticDefaultImports": true,
- "experimentalDecorators": true,
- "emitDecoratorMetadata": true,
- "resolveJsonModule": true
- },
- "include": ["src/**/*", "__tests__/**/*"]
- // "exclude": ["../../node_modules", "node_modules", "build", "scripts"]
-}
diff --git a/docs/Styling2ndGen.md b/docs/Styling2ndGen.md
deleted file mode 100644
index 55474d054e..0000000000
--- a/docs/Styling2ndGen.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Styling 2nd Generation Components
-
-This covers preliminary documentation for the "2nd generation" UI components in the Bloom design system. (General styling information can be found in the README for ui-components.)
-
-First, we'll go over the what & why of the new component architecture, then we'll explain the process for converting a "1st gen" component to 2nd gen.
-
-## What are Bloom Design Tokens?
-
-In this updated system, the Bloom design tokens are defined as [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (aka CSS Variables). They're values you can insert into (almost) every place you would put an actual property value in CSS.
-
-Bloom design tokens include colors, typography settings, sizes, borders, and so forth. They're located in the `ui-components/src/global/tokens` folder.
-
-For example, some colors in `tokens/colors.scss`:
-
-```css
---bloom-color-green-800: #216e1f;
---bloom-color-green-700: #2e8540;
---bloom-color-green-300: #b4e5be;
-```
-
-and some font sizes in `tokens/fonts.scss`:
-
-```css
---bloom-font-size-lg: 1.25rem;
---bloom-font-size-xl: 1.375rem;
---bloom-font-size-2xl: 1.5rem;
-```
-
-Unlike Sass variables, Tailwind theme configs, or other methods of defining design tokens, CSS variables are resolved _at runtime_. In other words, they are evaluated and applied to the styling of the webpage by the browser itself. To use a CSS variable, use the `var` function within a property value:
-
-```css
-.my-selector {
- color: var(--bloom-color-green-300);
- font-size: var(--bloom-font-size-xl);
-}
-```
-
-You can even use `var` within the `style` attribute of an HTML tag as a sort of analog to utility classes (but proceed with caution!).
-
-Like many standard CSS properties, CSS Variables "cascade" through the tree where they're defined, so if you redefine a variable for one element, it will affect that element and its children…but not any siblings.
-
-### What is a 2nd-gen Component?
-
-In a 2nd-gen UI component, previous usage of Tailwind tokens/utility classes via the `@apply` directive is replaced by CSS variables—and in cases where tokens aren't required, "vanilla" CSS properties. We'll cover this process in the next section.
-
-Many of Tailwind's own utility classes now use these same design tokens as well. For example, in your CSS you could use:
-
-```css
-.my-selector {
- margin-top: var(--bloom-s3);
-}
-```
-
-Or in HTML, you could write:
-
-```html
-…
-```
-
-which would also utilize that same `--bloom-s3` design token (`0.75rem`).
-
-Like in many cases already through the UI component library, defining class names within the component's (S)CSS file is usually preferred over using numerous utility classes within the component's HTML/JSX.
-
-A 2nd-gen component will typically define component-specific CSS variables which are "exported" if you will for easy customizabilty via a site-specific stylesheet. For example, the `PageHeader` component utilizes several component tokens like `--background-color` and `--title-font-size`. Customizing the component via these tokens is as simple as creating a new site-specific stylesheet:
-
-```css
-.page-header {
- --title-font-size: 3rem;
-}
-```
-
-This means the downstream developer doesn't need to know which child element within `PageHeader` actually utilizes this token. Simply defining the token on the containing class of the component HTML structure is enough to allow the CSS variable to "cascade" down to the element which needs it.
-
-These component-specific tokens are documented in new Markdown documentation files within Storybook. The 2nd-gen `Button` component has a corresponding `Button.docs.mdx` file, and `PageHeader` has `PageHeader.docs.mdx`. We can use these docs to explain how to customize components officially (and also how props will affect styling).
-
-By taking the time to analyze which global design tokens a component should employ, which component-specific tokens should be exported, and then documenting the styling API for each component, the ease of altering components or even the global design itself in a site-specific stylesheet is much cleaner and simpler.
-
-## Converting 1st-gen Components to 2nd-gen
-
-Let's compare the `PageHeader` stylesheet before/after:
-
-### 1st-gen:
-
-```scss
-.page-header {
- @apply py-8;
- @apply border-t;
- @apply border-gray-450;
-
- @screen md {
- @apply py-10;
- }
-
- &.bg-primary-dark {
- @apply text-white;
- @apply border-primary;
- }
-}
-
-.page-header__group {
- @apply px-5;
- @apply m-auto;
- @apply max-w-5xl;
-}
-
-.page-header__title {
- @apply text-center;
-
- @screen md {
- @apply text-5xl;
- @apply text-left;
- }
-}
-
-.page-header__lead {
- @apply m-auto;
- @apply max-w-5xl;
-}
-```
-
-### 2nd-gen:
-
-```scss
-.page-header {
- /* Component Variables */
- --background-color: var(--bloom-color-primary-lighter);
- --border-color: var(--bloom-color-gray-450);
- --text-color: inherit;
- --inverse-background-color: var(--bloom-color-primary-dark);
- --inverse-border-color: var(--bloom-color-primary);
- --inverse-text-color: var(--bloom-color-white);
- --title-font-size: var(--bloom-font-size-5xl);
-
- /* Base Styles */
- padding: var(--bloom-s8) 0;
- background-color: var(--background-color);
- border-top: var(--bloom-border-1) solid var(--border-color);
- color: var(--text-color);
-
- @media (min-width: $screen-sm) {
- padding: var(--bloom-s10) 0;
- }
-
- /* Variants */
- &.is-inverse {
- --background-color: var(--inverse-background-color);
- --border-color: var(--inverse-border-color);
- --text-color: var(--inverse-text-color);
- }
-}
-
-.page-header__group {
- padding: 0 var(--bloom-s5);
- margin: auto;
- max-width: var(--bloom-width-5xl);
-}
-
-.page-header__title {
- text-align: center;
-
- @media (min-width: $screen-md) {
- font-size: var(--title-font-size);
- text-align: left;
- }
-}
-
-.page-header__lead {
- margin: auto;
- max-width: var(--bloom-width-5xl);
-}
-```
-
-Other than the use of the Sass variable `$screen-sm` in a media query (unfortunately CSS custom properties cannot be used within media queries), all of the properties have been converted to "vanilla" CSS and in most cases uss the CSS variables from the design system.
-
-`@apply max-w-5xl` becomes `max-width: var(--bloom-width-5xl)`
-`@apply border-t; @apply border-gray-450` becomes `border-top: var(--bloom-border-1) solid var(--border-color)`
-and so on.
-
-You'll notice `--border-color` is one of the new component-specific design tokens for `PageHeader` (which defaults to `--bloom-color-gray-450`).
-
-This conversion was also an opportunity to define a proper "inverse" variant style, which is triggered via a component prop, and inverse-specific design tokens are also used and can be redefined.
-
-### Updating Component Stories
-
-Take a look at `PageHeader.stories.tsx`, you'll see there's a few updates to the default export to reference the corresponding documentation MDX file, as well the badge to indicate it's a 2nd-gen component. We also add a little flag emoji to show up in the Storybook sidebar (while keeping the correct id):
-
-```js
-import { BADGES } from "../../.storybook/constants"
-import PageHeaderDocumentation from "./PageHeader.docs.mdx"
-
-export default {
- title: "Headers/Page Header 🚩",
- id: "headers/page-header",
- parameters: {
- docs: {
- page: PageHeaderDocumentation,
- },
- badges: [BADGES.GEN2],
- },
-}
-```
-
-Corresponding `.docs.mdx` files can be added for components to explain component variants and the 2nd-gen styling API. We also have the ability to show React prop documentation through JSDoc comments on the TypeScript prop interfaces (not part of the 2nd-gen conversion process strictly speaking, but helpful nonetheless).
-
-## The Future: a Possible Path to 3rd-gen?
-
-It's worth noting what we _didn't_ consider for this upgrade effort.
-
-As the [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) spec has matured and solidified in all evergreen browsers, many design systems are starting to migrate to using web component technology as the substrate, with "wrappers" generated for specific JS frameworks like React, Vue, Angular, etc. (plus they're completely usable directly within "vanilla" HTML). While web components can be authored completely vanilla without any framework or build process, lightweight libraries such as [Lit](https://lit.dev) have made web components DX rival "legacy" frameworks such as React. Component systems ranging from the open source [Shoelace](https://shoelace.style) to closed source [Nord Health](https://nordhealth.design/components/) show us the breadth of what's possible with this approach.
-
-However, porting Bloom components over to a pure web components toolchain (possibly using Lit) and then exporting React wrappers for use elsewhere seems like a bridge too far at this juncture, particularly since all `ui-components` consumers at present are only using React. The good news is: by migrating to our 2nd-gen styling API based on vanilla CSS techniques, it positions us to consider a web components-based solution farther down the road. While we don't have the ability to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), [shadow parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), and [slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots) to aid in our component architecture, we are able to get pretty far simply by utilizing CSS variables and a close 1:1 convention between React props and CSS class-based variants.
diff --git a/docs/pull_request_template.md b/docs/pull_request_template.md
index c1edcf5551..6a70ee0d76 100644
--- a/docs/pull_request_template.md
+++ b/docs/pull_request_template.md
@@ -34,7 +34,6 @@ Describe the tests that you ran to verify your changes. Please also list any rel
- [ ] Any dependent changes have been merged and published in downstream modules
- [ ] I have assigned reviewers
- [ ] I have run `yarn generate:client` and/or created a migration if I made backend changes that require them
-- [ ] I have exported any new pieces added to ui-components
- [ ] My commit message(s) is/are polished, and any breaking changes are indicated in the message and are well-described
- [ ] Commits made across packages purposefully have the same commit message/version change, else are separated into different commits
diff --git a/lerna.json b/lerna.json
index d5ab418d68..2e0524f09b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,11 +1,5 @@
{
- "packages": [
- "sites/public",
- "sites/partners",
- "backend/core",
- "shared-helpers",
- "detroit-ui-components"
- ],
+ "packages": ["sites/public", "sites/partners", "backend/core", "shared-helpers"],
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true,
diff --git a/package.json b/package.json
index a52919ff6e..d75a913a15 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
"sites/public",
"sites/partners",
"backend/core",
- "shared-helpers",
- "detroit-ui-components"
+ "shared-helpers"
],
"nohoist": [
"**/@anchan828/nest-sendgrid"
@@ -39,8 +38,6 @@
"dev:partners": "concurrently \"yarn dev:backend\" \"yarn dev:app:partners\"",
"dev:public": "concurrently \"yarn dev:backend\" \"yarn dev:app:public\"",
"test:shared:helpers": "cd shared-helpers && yarn && yarn test",
- "test:shared:ui": "cd detroit-ui-components && yarn && yarn test",
- "test:shared:ui:a11y": "cd detroit-ui-components && yarn && yarn test:a11y",
"test:backend:core:dbsetup": "cd backend/core && yarn db:migration:run && yarn db:seed",
"test:backend:core:testdbsetup": "cd backend/core && yarn test:db:setup",
"test:backend:core": "cd backend/core && yarn test",
@@ -52,10 +49,10 @@
"db:reseed": "cd backend/core && yarn db:reseed",
"install:all": "yarn install && cd backend/core && yarn install",
"setup": "yarn install:all && yarn db:reseed",
- "clean": "rm -rf backend/core/dist/ backend/core/node_modules/ node_modules/ sites/partners/.next/ sites/partners/node_modules/ sites/public/.next/ sites/public/node_modules/ detroit-ui-components/node_modules/"
+ "clean": "rm -rf backend/core/dist/ backend/core/node_modules/ node_modules/ sites/partners/.next/ sites/partners/node_modules/ sites/public/.next/ sites/public/node_modules/"
},
"dependencies": {
- "react-remove-scroll": "^2.5.3",
+ "react-remove-scroll": "2.5.4",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@2.2.10"
},
"devDependencies": {
@@ -78,8 +75,8 @@
"lerna": "^4.0.0",
"lint-staged": "^10.4.0",
"prettier": "^2.1.0",
- "react": "^17.0.2",
- "react-test-renderer": "^17.0.2",
+ "react": "18.2.0",
+ "react-test-renderer": "18.2.0",
"rimraf": "^3.0.2",
"ts-jest": "^26.4.1",
"typescript": "4.6.4",
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts
index e100eddeea..f9dbcd6745 100644
--- a/shared-helpers/index.ts
+++ b/shared-helpers/index.ts
@@ -3,11 +3,11 @@ export * from "./src/blankApplication"
export * from "./src/catchNetworkError"
export * from "./src/ConfigContext"
export * from "./src/filters"
-export * from "./src/FavoriteButton"
export * from "./src/formKeys"
export * from "./src/formatRange"
export * from "./src/formatRentRange"
export * from "./src/gtm"
+export * from "./src/Icons"
export * from "./src/minMaxFinder"
export * from "./src/nextjs"
export * from "./src/occupancyFormatting"
diff --git a/shared-helpers/package.json b/shared-helpers/package.json
index 21545997e4..3947aa9c65 100644
--- a/shared-helpers/package.json
+++ b/shared-helpers/package.json
@@ -17,20 +17,22 @@
},
"dependencies": {
"@bloom-housing/backend-core": "^4.4.0",
- "@bloom-housing/ui-components": "^8.2.0",
+ "@bloom-housing/ui-components": "^12.0.11",
"axios": "0.21.2"
},
"devDependencies": {
- "@testing-library/jest-dom": "^5.11.9",
- "@testing-library/react": "^11.2.5",
+ "@testing-library/jest-dom": "5.16.4",
+ "@testing-library/react": "14.0.0",
"@types/jest": "^26.0.14",
"@types/node-polyglot": "^2.4.1",
- "@types/react-dom": "^16.9.5",
- "@types/react-test-renderer": "^16.9.3",
+ "@types/react-tabs": "^2.3.2",
+ "@types/react-test-renderer": "18.0.0",
+ "@types/react-transition-group": "^4.4.0",
+ "identity-obj-proxy": "^3.0.0",
"jest": "^26.5.3",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-test-renderer": "^17.0.2",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-test-renderer": "18.2.0",
"ts-jest": "^26.4.1",
"ts-loader": "^8.0.4",
"typescript": "^4.5.5"
diff --git a/shared-helpers/src/AuthContext.ts b/shared-helpers/src/AuthContext.ts
index 85cd1cb4cf..74e6f93f1d 100644
--- a/shared-helpers/src/AuthContext.ts
+++ b/shared-helpers/src/AuthContext.ts
@@ -180,7 +180,7 @@ const reducer = createReducer(
)
export const AuthContext = createContext
+
{
setDrawerImages([...listingFormPhotos])
clearErrors("images")
}}
- data-test-id="add-photos-button"
+ data-testid="add-photos-button"
>
{t(listingFormPhotos.length > 0 ? "listings.editPhotos" : "listings.addPhoto")}
@@ -260,7 +260,7 @@ const ListingPhotos = () => {
{t("listings.listingPhoto")}
{drawerImages.length > 0 && ( -
+
{t("t.photos")}
{
resetDrawerState()
}}
styleType={AppearanceStyleType.primary}
- data-test-id={drawerImages.length > 0 ? "listing-photo-uploaded" : "listing-photo-empty"}
+ data-testid={drawerImages.length > 0 ? "listing-photo-uploaded" : "listing-photo-empty"}
>
{t("t.save")}
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
index 055f3abab3..b35d73d011 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/LotteryResults.tsx
@@ -1,16 +1,16 @@
import React, { useState } from "react"
import { useFormContext } from "react-hook-form"
import {
- t,
AppearanceBorderType,
AppearanceStyleType,
+ Button,
+ Drawer,
Dropzone,
MinimalTable,
- TableThumbnail,
StandardTableData,
+ t,
+ TableThumbnail,
} from "@bloom-housing/ui-components"
-import { Button } from "../../../../../../../detroit-ui-components/src/actions/Button"
-import { Drawer } from "../../../../../../../detroit-ui-components/src/overlays/Drawer"
import {
ListingEvent,
ListingEventCreate,
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
index 0b08ab3749..3980dccea5 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/RankingsAndResults.tsx
@@ -8,11 +8,11 @@ import {
GridSection,
Field,
GridCell,
+ FieldGroup,
Textarea,
DateField,
TimeField,
} from "@bloom-housing/ui-components"
-import { FieldGroup } from "../../../../../../../detroit-ui-components/src/forms/FieldGroup"
import { FormListing } from "../../../../lib/listings/formTypes"
import { getLotteryEvent, fieldHasError, fieldMessage, YesNoAnswer } from "../../../../lib/helpers"
import { ListingReviewOrder } from "@bloom-housing/backend-core/types"
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
index dc1fd09ecd..1bcebe45c1 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
@@ -1,15 +1,15 @@
import React, { useState, useEffect, useMemo, useCallback } from "react"
import {
- t,
- GridSection,
- MinimalTable,
AppearanceSizeType,
AppearanceStyleType,
+ Button,
+ Drawer,
Field,
+ GridSection,
+ MinimalTable,
StandardTableData,
+ t,
} from "@bloom-housing/ui-components"
-import { Button } from "../../../../../../../detroit-ui-components/src/actions/Button"
-import { Drawer } from "../../../../../../../detroit-ui-components/src/overlays/Drawer"
import { useFormContext } from "react-hook-form"
import { Preference, Program } from "@bloom-housing/backend-core/types"
diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
index 00f9404599..8333d0b520 100644
--- a/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
+++ b/sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
@@ -1,19 +1,19 @@
import React, { useState, useMemo, useCallback, useEffect } from "react"
import {
- t,
- GridSection,
- MinimalTable,
+ AppearanceBorderType,
AppearanceSizeType,
AppearanceStyleType,
- AppearanceBorderType,
+ Button,
+ Drawer,
+ FieldGroup,
GridCell,
+ GridSection,
+ MinimalTable,
+ Modal,
Select,
+ t,
+ ViewItem,
} from "@bloom-housing/ui-components"
-import { Button } from "../../../../../../../detroit-ui-components/src/actions/Button"
-import { ViewItem } from "../../../../../../../detroit-ui-components/src/blocks/ViewItem"
-import { FieldGroup } from "../../../../../../../detroit-ui-components/src/forms/FieldGroup"
-import { Drawer } from "../../../../../../../detroit-ui-components/src/overlays/Drawer"
-import { Modal } from "../../../../../../../detroit-ui-components/src/overlays/Modal"
import { useFormContext } from "react-hook-form"
import UnitsSummaryForm from "../UnitsSummaryForm"
import { FormListing, TempUnit, TempUnitsSummary } from "../../../../lib/listings/formTypes"
@@ -40,7 +40,7 @@ const FormUnits = ({ listing, unitsSummaries, setSummaries, disableUnitsAccordio
const [summaryDeleteModal, setSummaryDeleteModal] = useState(null)
const formMethods = useFormContext()
// eslint-disable-next-line @typescript-eslint/unbound-method
- const { errors, clearErrors, register, reset, getValues } = formMethods
+ const { errors, clearErrors, register, setValue, getValues } = formMethods
const { data: unitTypesData = [] } = useUnitTypeList()
const unitTypeOptions = unitTypesData.map((unitType) => {
@@ -72,7 +72,12 @@ const FormUnits = ({ listing, unitsSummaries, setSummaries, disableUnitsAccordio
},
]
useEffect(() => {
- reset({ ...getValues(), disableUnitsAccordion: disableUnitsAccordion ? "true" : "false" })
+ if (
+ getValues("disableUnitsAccordion") === undefined ||
+ getValues("disableUnitsAccordion") === null
+ ) {
+ setValue("disableUnitsAccordion", disableUnitsAccordion ? "true" : "false")
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
diff --git a/sites/partners/src/components/shared/StatusBar.tsx b/sites/partners/src/components/shared/StatusBar.tsx
index abb01eeb65..6b23ebe3e5 100644
--- a/sites/partners/src/components/shared/StatusBar.tsx
+++ b/sites/partners/src/components/shared/StatusBar.tsx
@@ -20,7 +20,7 @@ const StatusBar = (props: StatusBarProps) => {
{props.backButton}
+
+ )
+}
+
+export { FormSignInAddPhone as default, FormSignInAddPhone }
diff --git a/sites/partners/src/components/users/FormSignInMFACode.tsx b/sites/partners/src/components/users/FormSignInMFACode.tsx
new file mode 100644
index 0000000000..aa7b6d301a
--- /dev/null
+++ b/sites/partners/src/components/users/FormSignInMFACode.tsx
@@ -0,0 +1,107 @@
+import React from "react"
+import {
+ AppearanceStyleType,
+ Button,
+ Field,
+ Form,
+ FormCard,
+ Icon,
+ t,
+ SiteAlert,
+ FormSignInErrorBox,
+ NetworkStatus,
+ FormSignInControl,
+} from "@bloom-housing/ui-components"
+
+export enum RequestType {
+ email = "email",
+ sms = "sms",
+}
+
+export type FormSignInMFACodeProps = {
+ control: FormSignInControl
+ onSubmit: (data: FormSignInMFACodeValues) => void
+ networkError: NetworkStatus
+ mfaType: RequestType
+ allowPhoneNumberEdit: boolean
+ phoneNumber: string
+ goBackToPhone: () => void
+}
+
+export type FormSignInMFACodeValues = {
+ mfaCode: string
+}
+
+const FormSignInMFACode = ({
+ onSubmit,
+ networkError,
+ control: { errors, register, handleSubmit },
+ mfaType,
+ allowPhoneNumberEdit,
+ phoneNumber,
+ goBackToPhone,
+}: FormSignInMFACodeProps) => {
+ const onError = () => {
+ window.scrollTo(0, 0)
+ }
+
+ let note
+ if (allowPhoneNumberEdit) {
+ note = (
+ <>
+ {t("nav.signInMFA.sentTo", { phoneNumber })}{" "}
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+export { FormSignInMFACode as default, FormSignInMFACode }
diff --git a/sites/partners/src/components/users/FormSignInMFAType.tsx b/sites/partners/src/components/users/FormSignInMFAType.tsx
new file mode 100644
index 0000000000..6af29d0455
--- /dev/null
+++ b/sites/partners/src/components/users/FormSignInMFAType.tsx
@@ -0,0 +1,98 @@
+import React from "react"
+import {
+ AppearanceStyleType,
+ Button,
+ Field,
+ Form,
+ FormCard,
+ Icon,
+ t,
+ SiteAlert,
+ FormSignInErrorBox,
+ NetworkStatus,
+} from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+
+export type FormSignInMFAProps = {
+ control: FormSignInMFAControl
+ onSubmit: (data: unknown) => void
+ networkError: NetworkStatus
+ emailOnClick: () => void
+ smsOnClick: () => void
+}
+
+export type FormSignInMFAControl = {
+ errors: UseFormMethods["errors"]
+ handleSubmit: UseFormMethods["handleSubmit"]
+ register: UseFormMethods["register"]
+ setValue: UseFormMethods["setValue"]
+}
+
+const FormSignInMFAType = ({
+ onSubmit,
+ networkError,
+ control: { errors, register, handleSubmit },
+ emailOnClick,
+ smsOnClick,
+}: FormSignInMFAProps) => {
+ const onError = () => {
+ window.scrollTo(0, 0)
+ }
+
+ return (
+
+
+ )
+}
+
+export { FormSignInMFAType as default, FormSignInMFAType }
diff --git a/sites/partners/src/components/users/FormTerms.tsx b/sites/partners/src/components/users/FormTerms.tsx
index 062f57d592..185d632dfc 100644
--- a/sites/partners/src/components/users/FormTerms.tsx
+++ b/sites/partners/src/components/users/FormTerms.tsx
@@ -5,13 +5,13 @@ import {
Field,
Form,
FormCard,
+ Icon,
MarkdownSection,
t,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
import Markdown from "markdown-to-jsx"
import { useForm } from "react-hook-form"
-import Icon from "../../../../../detroit-ui-components/src/icons/Icon"
type FormTermsInValues = {
agree: boolean
@@ -81,7 +81,7 @@ const FormTerms = () => {
{pageTitle}
-
+
{t("errors.notFound.message")}
-
+
{props.tagLabel}
diff --git a/sites/partners/src/components/users/FormSignInAddPhone.tsx b/sites/partners/src/components/users/FormSignInAddPhone.tsx
new file mode 100644
index 0000000000..3e41f39d8e
--- /dev/null
+++ b/sites/partners/src/components/users/FormSignInAddPhone.tsx
@@ -0,0 +1,87 @@
+import React from "react"
+import {
+ AppearanceStyleType,
+ Button,
+ Form,
+ FormCard,
+ Icon,
+ t,
+ SiteAlert,
+ PhoneField,
+ FormSignInErrorBox,
+ NetworkStatus,
+} from "@bloom-housing/ui-components"
+import type { UseFormMethods } from "react-hook-form"
+
+export type FormSignInAddPhoneProps = {
+ control: FormSignInAddPhoneControl
+ onSubmit: (data: FormSignInAddPhoneValues) => void
+ networkError: NetworkStatus
+ phoneNumber: string
+}
+
+export type FormSignInAddPhoneControl = {
+ errors: UseFormMethods["errors"]
+ handleSubmit: UseFormMethods["handleSubmit"]
+ control: UseFormMethods["control"]
+}
+
+export type FormSignInAddPhoneValues = {
+ phoneNumber: string
+}
+
+const FormSignInAddPhone = ({
+ onSubmit,
+ networkError,
+ control,
+ phoneNumber,
+}: FormSignInAddPhoneProps) => {
+ const onError = () => {
+ window.scrollTo(0, 0)
+ }
+ const { errors, handleSubmit } = control
+ return (
+
+
+ {t("nav.signInMFA.addNumber")}
+{t("nav.signInMFA.addNumberSecondaryTitle")}
+
+
+
+
+
+ {t("nav.signInMFA.verifyTitle")}
++ {mfaType === RequestType.sms + ? t("nav.signInMFA.haveSentCodeToPhone") + : t("nav.signInMFA.haveSentCodeToEmail")} +
+
+
+
+
+
+ + {t("nav.signInMFA.verificationChoiceMainTitle")} +
++ {t("nav.signInMFA.verificationChoiceSecondaryTitle")} +
+
+
+
+
-
diff --git a/sites/partners/src/components/users/FormUserConfirm.tsx b/sites/partners/src/components/users/FormUserConfirm.tsx
index a3607a0913..6a9a57b432 100644
--- a/sites/partners/src/components/users/FormUserConfirm.tsx
+++ b/sites/partners/src/components/users/FormUserConfirm.tsx
@@ -1,21 +1,21 @@
import React, { useRef, useContext, useEffect, useState } from "react"
import { useRouter } from "next/router"
import {
- t,
- Form,
+ AlertBox,
+ AppearanceStyleType,
+ Button,
Field,
+ FieldGroup,
+ Form,
+ FormCard,
+ Icon,
+ Modal,
passwordRegex,
- AppearanceStyleType,
setSiteAlertMessage,
+ t,
useMutate,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../detroit-ui-components/src/actions/Button"
-import { FormCard } from "../../../../../detroit-ui-components/src/blocks/FormCard"
-import { FieldGroup } from "../../../../../detroit-ui-components/src/forms/FieldGroup"
-import { Icon } from "../../../../../detroit-ui-components/src/icons/Icon"
-import { AlertBox } from "../../../../../detroit-ui-components/src/notifications/AlertBox"
-import { Modal } from "../../../../../detroit-ui-components/src/overlays/Modal"
import { useForm } from "react-hook-form"
import { LoginResponse } from "@bloom-housing/backend-core/types"
import Markdown from "markdown-to-jsx"
diff --git a/sites/partners/src/components/users/FormUserManage.tsx b/sites/partners/src/components/users/FormUserManage.tsx
index 167b80381c..c5de9ec014 100644
--- a/sites/partners/src/components/users/FormUserManage.tsx
+++ b/sites/partners/src/components/users/FormUserManage.tsx
@@ -1,25 +1,25 @@
import React, { useMemo, useContext, useState, useCallback } from "react"
import { useForm } from "react-hook-form"
import {
- t,
+ AppearanceBorderType,
+ AppearanceSizeType,
+ AppearanceStyleType,
+ Button,
+ emailRegex,
+ Field,
+ FieldGroup,
Form,
- GridSection,
GridCell,
- Field,
+ GridSection,
+ Modal,
Select,
- useMutate,
- AppearanceStyleType,
- AppearanceBorderType,
- emailRegex,
setSiteAlertMessage,
- AppearanceSizeType,
+ t,
+ Tag,
+ useMutate,
+ ViewItem,
} from "@bloom-housing/ui-components"
import { AuthContext, RoleOption, roleKeys } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../detroit-ui-components/src/actions/Button"
-import { ViewItem } from "../../../../../detroit-ui-components/src/blocks/ViewItem"
-import { FieldGroup } from "../../../../../detroit-ui-components/src/forms/FieldGroup"
-import { Modal } from "../../../../../detroit-ui-components/src/overlays/Modal"
-import { Tag } from "../../../../../detroit-ui-components/src/text/Tag"
import { Listing, User, UserRolesCreate } from "@bloom-housing/backend-core/types"
import router from "next/router"
diff --git a/sites/partners/src/components/users/ReRequestConfirmation.tsx b/sites/partners/src/components/users/ReRequestConfirmation.tsx
index c13f366bb8..be676585da 100644
--- a/sites/partners/src/components/users/ReRequestConfirmation.tsx
+++ b/sites/partners/src/components/users/ReRequestConfirmation.tsx
@@ -2,13 +2,13 @@ import React, { useContext } from "react"
import {
AppearanceBorderType,
AppearanceStyleType,
+ Button,
Field,
Form,
+ FormCard,
t,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../detroit-ui-components/src/actions/Button"
-import { FormCard } from "../../../../../detroit-ui-components/src/blocks/FormCard"
import { useForm } from "react-hook-form"
type FormFields = {
diff --git a/sites/partners/src/layouts/index.tsx b/sites/partners/src/layouts/index.tsx
index 98a6ce311e..9f0ba0e8c8 100644
--- a/sites/partners/src/layouts/index.tsx
+++ b/sites/partners/src/layouts/index.tsx
@@ -2,15 +2,15 @@ import React, { useContext } from "react"
import Head from "next/head"
import { useRouter } from "next/router"
import {
- SiteFooter,
+ FooterNav,
FooterSection,
- t,
MenuLink,
setSiteAlertMessage,
+ SiteFooter,
SiteHeader,
+ t,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { FooterNav } from "../../../../detroit-ui-components/src/navigation/FooterNav"
const Layout = (props) => {
const { profile, signOut } = useContext(AuthContext)
diff --git a/sites/partners/src/lib/helpers.ts b/sites/partners/src/lib/helpers.ts
index 626a69bcd8..1e87fac5b4 100644
--- a/sites/partners/src/lib/helpers.ts
+++ b/sites/partners/src/lib/helpers.ts
@@ -1,6 +1,7 @@
import { SetStateAction } from "react"
-import { t, CloudinaryUpload, TimeFieldPeriod } from "@bloom-housing/ui-components"
+import { t, TimeFieldPeriod } from "@bloom-housing/ui-components"
import { cloudinaryUrlFromId } from "@bloom-housing/shared-helpers"
+import { CloudinaryUpload } from "./listings/CloudinaryUpload"
import dayjs from "dayjs"
import utc from "dayjs/plugin/utc"
dayjs.extend(utc)
diff --git a/sites/partners/src/lib/listings/CloudinaryUpload.ts b/sites/partners/src/lib/listings/CloudinaryUpload.ts
new file mode 100644
index 0000000000..3ea105344e
--- /dev/null
+++ b/sites/partners/src/lib/listings/CloudinaryUpload.ts
@@ -0,0 +1,50 @@
+import axios from "axios"
+
+interface CloudinaryUploadProps {
+ file: File
+ onUploadProgress: (progress: number) => void
+ cloudName: string
+ uploadPreset: string
+ tag?: string
+ signature?: string
+ apiKey?: string
+ timestamp?: number
+}
+
+export const CloudinaryUpload = async ({
+ file,
+ onUploadProgress,
+ cloudName,
+ uploadPreset,
+ signature,
+ apiKey,
+ timestamp,
+ tag = "browser_upload",
+}: CloudinaryUploadProps) => {
+ const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`
+ const data = new FormData()
+ data.append("upload_preset", uploadPreset)
+ data.append("tags", tag)
+ data.append("file", file)
+ if (signature && timestamp && apiKey) {
+ data.append("signature", signature)
+ data.append("timestamp", `${timestamp}`)
+ data.append("api_key", apiKey)
+ }
+
+ if (!cloudName || cloudName == "" || !uploadPreset || uploadPreset == "") {
+ const err = "Please supply a cloud name and upload preset for Cloudinary"
+ alert(err)
+ throw err
+ }
+
+ const response = await axios.request({
+ method: "post",
+ url: url,
+ data: data,
+ onUploadProgress: (p) => {
+ onUploadProgress(parseInt(((p.loaded / p.total) * 100).toFixed(0), 10))
+ },
+ })
+ return response
+}
diff --git a/sites/partners/src/lib/translations.ts b/sites/partners/src/lib/translations.ts
index 6ee548afce..1d75caa971 100644
--- a/sites/partners/src/lib/translations.ts
+++ b/sites/partners/src/lib/translations.ts
@@ -1,7 +1,7 @@
-import generalTranslations from "../../../../detroit-ui-components/src/locales/general.json"
-import spanishTranslations from "../../../../detroit-ui-components/src/locales/es.json"
-import arabicTranslations from "../../../../detroit-ui-components/src/locales/ar.json"
-import bengaliTranslations from "../../../../detroit-ui-components/src/locales/bn.json"
+import generalTranslations from "@bloom-housing/shared-helpers/src/locales/general.json"
+import spanishTranslations from "@bloom-housing/shared-helpers/src/locales/es.json"
+import arabicTranslations from "@bloom-housing/shared-helpers/src/locales/ar.json"
+import bengaliTranslations from "@bloom-housing/shared-helpers/src/locales/bn.json"
import additionalGeneralTranslations from "../page_content/locale_overrides/general.json"
import additionalSpanishTranslations from "../page_content/locale_overrides/es.json"
diff --git a/sites/partners/src/pages/_app.tsx b/sites/partners/src/pages/_app.tsx
index 054562bd96..6d5ddc0027 100644
--- a/sites/partners/src/pages/_app.tsx
+++ b/sites/partners/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useEffect, useMemo, useState } from "react"
import { SWRConfig } from "swr"
import type { AppProps } from "next/app"
import { addTranslation, NavigationContext, GenericRouter } from "@bloom-housing/ui-components"
@@ -6,8 +6,8 @@ import { ConfigProvider, AuthProvider, RequireLogin } from "@bloom-housing/share
import LinkComponent from "../components/core/LinkComponent"
import { translations, overrideTranslations } from "../lib/translations"
-import "../../../../detroit-ui-components/src/global/css-imports.scss"
-import "../../../../detroit-ui-components/src/global/app-css.scss"
+import "@bloom-housing/shared-helpers/src/styles/css-imports.scss"
+import "@bloom-housing/shared-helpers/src/styles/app-css.scss"
// TODO: Make these not-global
import "ag-grid-community/dist/styles/ag-grid.css"
import "ag-grid-community/dist/styles/ag-theme-alpine.css"
@@ -20,6 +20,12 @@ function BloomApp({ Component, router, pageProps }: AppProps) {
const { locale } = router
const skipLoginRoutes = ["/forgot-password", "/reset-password", "/users/confirm", "/users/terms"]
+ // fix for rehydation
+ const [hasMounted, setHasMounted] = useState(false)
+ useEffect(() => {
+ setHasMounted(true)
+ }, [])
+
useMemo(() => {
addTranslation(translations.general, true)
if (locale && locale !== "en" && translations[locale]) {
@@ -56,9 +62,7 @@ function BloomApp({ Component, router, pageProps }: AppProps) {
signInMessage={signInMessage}
skipForRoutes={skipLoginRoutes}
>
-
- {typeof window === "undefined" ? null :
+ {hasMounted &&
diff --git a/sites/partners/src/pages/application/[id]/edit.tsx b/sites/partners/src/pages/application/[id]/edit.tsx
index a90d1b7cd4..6c178f81b8 100644
--- a/sites/partners/src/pages/application/[id]/edit.tsx
+++ b/sites/partners/src/pages/application/[id]/edit.tsx
@@ -1,8 +1,7 @@
import React from "react"
import Head from "next/head"
import { useRouter } from "next/router"
-import { t } from "@bloom-housing/ui-components"
-import { PageHeader } from "../../../../../../detroit-ui-components/src/headers/PageHeader"
+import { PageHeader, t } from "@bloom-housing/ui-components"
import Layout from "../../../layouts"
import PaperApplicationForm from "../../../components/applications/PaperApplicationForm/PaperApplicationForm"
import { useSingleApplicationData } from "../../../lib/hooks"
diff --git a/sites/partners/src/pages/application/[id]/index.tsx b/sites/partners/src/pages/application/[id]/index.tsx
index 393e88e43b..db2269a715 100644
--- a/sites/partners/src/pages/application/[id]/index.tsx
+++ b/sites/partners/src/pages/application/[id]/index.tsx
@@ -1,12 +1,16 @@
import React, { useMemo, useState, useContext } from "react"
import { useRouter } from "next/router"
import Head from "next/head"
-import { AppearanceStyleType, t, SiteAlert } from "@bloom-housing/ui-components"
+import {
+ AppearanceStyleType,
+ t,
+ SiteAlert,
+ Button,
+ PageHeader,
+ AlertBox,
+ Tag,
+} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../../detroit-ui-components/src/actions/Button"
-import { PageHeader } from "../../../../../../detroit-ui-components/src/headers/PageHeader"
-import { AlertBox } from "../../../../../../detroit-ui-components/src/notifications/AlertBox"
-import { Tag } from "../../../../../../detroit-ui-components/src/text/Tag"
import { useSingleApplicationData } from "../../../lib/hooks"
import Layout from "../../../layouts"
import { ApplicationStatus } from "@bloom-housing/backend-core/types"
diff --git a/sites/partners/src/pages/index.tsx b/sites/partners/src/pages/index.tsx
index e3d9000586..6fbd0de19b 100644
--- a/sites/partners/src/pages/index.tsx
+++ b/sites/partners/src/pages/index.tsx
@@ -1,18 +1,24 @@
import React, { useMemo, useContext, useState, useEffect } from "react"
import Head from "next/head"
import { ListingStatus } from "@bloom-housing/backend-core/types"
-import { t, LocalizedLink, SiteAlert, AppearanceStyleType } from "@bloom-housing/ui-components"
+import {
+ SiteAlert,
+ AlertBox,
+ AppearanceStyleType,
+ AgTable,
+ Button,
+ LocalizedLink,
+ PageHeader,
+ t,
+ useAgTable,
+} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../detroit-ui-components/src/actions/Button"
-import { PageHeader } from "../../../../detroit-ui-components/src/headers/PageHeader"
-import { AgTable, useAgTable } from "../../../../detroit-ui-components/src/tables/AgTable"
import dayjs from "dayjs"
import { ColDef, ColGroupDef } from "ag-grid-community"
import { useListingsData, useListingZip } from "../lib/hooks"
import Layout from "../layouts"
import { MetaTags } from "../../src/components/shared/MetaTags"
import { faFileExport } from "@fortawesome/free-solid-svg-icons"
-import { AlertBox } from "../../../../detroit-ui-components/src/notifications/AlertBox"
class formatLinkCell {
link: HTMLAnchorElement
@@ -43,6 +49,7 @@ class formatWaitlistStatus {
return this.text
}
}
+
class ListingsLink extends formatLinkCell {
init(params) {
super.init(params)
diff --git a/sites/partners/src/pages/listings/[id]/applications/add.tsx b/sites/partners/src/pages/listings/[id]/applications/add.tsx
index cc2a4ca887..3f2b37f430 100644
--- a/sites/partners/src/pages/listings/[id]/applications/add.tsx
+++ b/sites/partners/src/pages/listings/[id]/applications/add.tsx
@@ -1,7 +1,6 @@
import React from "react"
import Head from "next/head"
-import { SiteAlert, t } from "@bloom-housing/ui-components"
-import { PageHeader } from "../../../../../../../detroit-ui-components/src/headers/PageHeader"
+import { PageHeader, SiteAlert, t } from "@bloom-housing/ui-components"
import Layout from "../../../../layouts"
import PaperApplicationForm from "../../../../components/applications/PaperApplicationForm/PaperApplicationForm"
import { useRouter } from "next/router"
diff --git a/sites/partners/src/pages/listings/[id]/applications/index.tsx b/sites/partners/src/pages/listings/[id]/applications/index.tsx
index 5f085891d7..a064b7eb6d 100644
--- a/sites/partners/src/pages/listings/[id]/applications/index.tsx
+++ b/sites/partners/src/pages/listings/[id]/applications/index.tsx
@@ -3,19 +3,19 @@ import { useRouter } from "next/router"
import dayjs from "dayjs"
import Head from "next/head"
import {
- Field,
- t,
+ AG_PER_PAGE_OPTIONS,
+ AgPagination,
+ AlertBox,
+ Button,
debounce,
+ Field,
+ LoadingOverlay,
LocalizedLink,
- SiteAlert,
setSiteAlertMessage,
- AgPagination,
- AG_PER_PAGE_OPTIONS,
- LoadingOverlay,
+ SiteAlert,
+ t,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../../../detroit-ui-components/src/actions/Button"
-import { AlertBox } from "../../../../../../../detroit-ui-components/src/notifications/AlertBox"
import {
useSingleListingData,
useFlaggedApplicationsList,
diff --git a/sites/partners/src/pages/listings/[id]/edit.tsx b/sites/partners/src/pages/listings/[id]/edit.tsx
index 10945f52c7..7d0dc98530 100644
--- a/sites/partners/src/pages/listings/[id]/edit.tsx
+++ b/sites/partners/src/pages/listings/[id]/edit.tsx
@@ -1,8 +1,7 @@
import React from "react"
import Head from "next/head"
import axios from "axios"
-import { t } from "@bloom-housing/ui-components"
-import { PageHeader } from "../../../../../../detroit-ui-components/src/headers/PageHeader"
+import { PageHeader, t } from "@bloom-housing/ui-components"
import { Listing } from "@bloom-housing/backend-core/types"
import Layout from "../../../layouts"
import PaperListingForm from "../../../components/listings/PaperListingForm"
diff --git a/sites/partners/src/pages/listings/[id]/flags/[flagId]/index.tsx b/sites/partners/src/pages/listings/[id]/flags/[flagId]/index.tsx
deleted file mode 100644
index e0f18f7e36..0000000000
--- a/sites/partners/src/pages/listings/[id]/flags/[flagId]/index.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { useMemo, useState, useCallback, useContext, useEffect } from "react"
-import Head from "next/head"
-import { useRouter } from "next/router"
-import { AgGridReact } from "ag-grid-react"
-import { GridApi, RowNode, GridOptions } from "ag-grid-community"
-
-import Layout from "../../../../../layouts/"
-import { t, AppearanceStyleType, useMutate } from "@bloom-housing/ui-components"
-import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../../../../../detroit-ui-components/src/actions/Button"
-import { PageHeader } from "../../../../../../../../detroit-ui-components/src/headers/PageHeader"
-import { AlertBox } from "../../../../../../../../detroit-ui-components/src/notifications/AlertBox"
-import { useSingleFlaggedApplication } from "../../../../../lib/hooks"
-import { getCols } from "../../../../../components/flags/applicationsCols"
-import { StatusBar } from "../../../../../components/shared/StatusBar"
-
-import {
- EnumApplicationFlaggedSetStatus,
- ApplicationFlaggedSet,
-} from "@bloom-housing/backend-core/types"
-
-const Flag = () => {
- const { applicationFlaggedSetsService } = useContext(AuthContext)
-
- const router = useRouter()
- const flagsetId = router.query.flagId as string
- const listingId = router.query.id as string
-
- const [gridApi, setGridApi] = useState(null)
- const [selectedRows, setSelectedRows] = useState([])
-
- const columns = useMemo(() => getCols(), [])
-
- const { data, revalidate } = useSingleFlaggedApplication(flagsetId)
-
- const { mutate, reset, isSuccess, isLoading, isError } = useMutate()
-
- const gridOptions: GridOptions = {
- getRowNodeId: (data) => data.id,
- }
-
- /* It selects all flagged rows on init and update (revalidate). */
- const selectFlaggedApps = useCallback(() => {
- if (!data) return
-
- const duplicateIds = data.applications
- .filter((item) => item.markedAsDuplicate)
- .map((item) => item.id)
-
- gridApi.forEachNode((row) => {
- if (duplicateIds.includes(row.id)) {
- gridApi.selectNode(row, true)
- }
- })
- }, [data, gridApi])
-
- useEffect(() => {
- if (!gridApi) return
-
- selectFlaggedApps()
- }, [data, gridApi, selectFlaggedApps])
-
- const onGridReady = (params) => {
- setGridApi(params.api)
- }
-
- const onSelectionChanged = () => {
- const selected = gridApi.getSelectedNodes()
- setSelectedRows(selected)
- }
-
- const deselectAll = useCallback(() => {
- gridApi.deselectAll()
- }, [gridApi])
-
- const resolveFlag = useCallback(() => {
- const applicationIds = selectedRows?.map((item) => ({ id: item.data.id })) || []
-
- void reset()
-
- void mutate(() =>
- applicationFlaggedSetsService.resolve({
- body: {
- afsId: flagsetId,
- applications: applicationIds,
- },
- })
- ).then(() => {
- deselectAll()
- void revalidate()
- })
- }, [
- mutate,
- reset,
- revalidate,
- deselectAll,
- selectedRows,
- applicationFlaggedSetsService,
- flagsetId,
- ])
-
- if (!data) return null
-
- return (
-
-
- {t("nav.siteTitlePartners")}
-
-
-
-
-
-
- )
-}
-
-export default Flag
diff --git a/sites/partners/src/pages/listings/[id]/flags/index.tsx b/sites/partners/src/pages/listings/[id]/flags/index.tsx
deleted file mode 100644
index f14a126a9e..0000000000
--- a/sites/partners/src/pages/listings/[id]/flags/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useState, useMemo, useEffect } from "react"
-import Head from "next/head"
-import { useRouter } from "next/router"
-import { AgGridReact } from "ag-grid-react"
-import { t, AG_PER_PAGE_OPTIONS } from "@bloom-housing/ui-components"
-import { AgPagination } from "../../../../../../../detroit-ui-components/src/global/vendor/AgPagination"
-import { useFlaggedApplicationsList, useSingleListingData } from "../../../..//lib/hooks"
-import Layout from "../../../../layouts/index"
-import { getFlagSetCols } from "../../../../components/flags/flagSetCols"
-import { ApplicationSecondaryNav } from "../../../../components/applications/ApplicationSecondaryNav"
-
-const FlagsPage = () => {
- const router = useRouter()
- const listingId = router.query.id as string
-
- /* Pagination */
- const [itemsPerPage, setItemsPerPage] = useState(AG_PER_PAGE_OPTIONS[0])
- const [currentPage, setCurrentPage] = useState(1)
-
- // reset page to 1 when user change limit
- useEffect(() => {
- setCurrentPage(1)
- }, [itemsPerPage])
-
- const { listingDto } = useSingleListingData(listingId)
-
- const { data } = useFlaggedApplicationsList({
- listingId,
- page: currentPage,
- limit: itemsPerPage,
- })
-
- const listingName = listingDto?.name
-
- const defaultColDef = {
- resizable: true,
- maxWidth: 300,
- }
-
- const columns = useMemo(() => getFlagSetCols(), [])
-
- if (!data) return null
-
- return (
-
-
- {t("nav.siteTitlePartners")}
-
-
-
-
-
- )
-}
-
-export default FlagsPage
diff --git a/sites/partners/src/pages/listings/[id]/index.tsx b/sites/partners/src/pages/listings/[id]/index.tsx
index 7452f0e6cf..c1fb0cfde2 100644
--- a/sites/partners/src/pages/listings/[id]/index.tsx
+++ b/sites/partners/src/pages/listings/[id]/index.tsx
@@ -2,13 +2,16 @@ import React, { useMemo, useState } from "react"
import { useRouter } from "next/router"
import Head from "next/head"
import axios from "axios"
-import { AppearanceStyleType, t, SiteAlert } from "@bloom-housing/ui-components"
-import { Button } from "../../../../../../detroit-ui-components/src/actions/Button"
-import { PageHeader } from "../../../../../../detroit-ui-components/src/headers/PageHeader"
-import { AlertBox } from "../../../../../../detroit-ui-components/src/notifications/AlertBox"
-import { Tag } from "../../../../../../detroit-ui-components/src/text/Tag"
+import {
+ AlertBox,
+ AppearanceStyleType,
+ Button,
+ PageHeader,
+ SiteAlert,
+ t,
+ Tag,
+} from "@bloom-housing/ui-components"
import { Listing, ListingStatus } from "@bloom-housing/backend-core/types"
-
import ListingGuard from "../../../components/shared/ListingGuard"
import Layout from "../../../layouts"
import Aside from "../../../components/listings/Aside"
@@ -49,19 +52,19 @@ export default function ListingDetail(props: ListingProps) {
switch (listing?.status) {
case ListingStatus.active:
return (
-
+
{t(`listings.listingStatus.active`)}
)
case ListingStatus.closed:
return (
-
+
{t(`listings.listingStatus.closed`)}
)
default:
return (
-
+
{t(`listings.listingStatus.pending`)}
)
@@ -84,7 +87,7 @@ export default function ListingDetail(props: ListingProps) {
title={
<>
{data.rule}
- - } - /> - -
- router.push(`/listings/${listingId}/flags`)}
- >
- {t("t.back")}
-
- }
- tagStyle={
- data.status === EnumApplicationFlaggedSetStatus.resolved
- ? AppearanceStyleType.success
- : AppearanceStyleType.info
- }
- tagLabel={data.status}
- />
-
-
-
- {(isSuccess || isError) && (
- reset()}
- >
- {isSuccess ? "Updated" : t("account.settings.alerts.genericError")}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t("flags.markedAsDuplicate", {
- quantity: selectedRows.length,
- })}
-
-
-
-
-
-
-
-
-
{listing.name}
diff --git a/sites/partners/src/pages/listings/add.tsx b/sites/partners/src/pages/listings/add.tsx
index 9811d47f95..6c04f189d9 100644
--- a/sites/partners/src/pages/listings/add.tsx
+++ b/sites/partners/src/pages/listings/add.tsx
@@ -1,9 +1,8 @@
import React, { useContext, useEffect } from "react"
import Head from "next/head"
import { useRouter } from "next/router"
-import { SiteAlert, t } from "@bloom-housing/ui-components"
+import { PageHeader, SiteAlert, t } from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { PageHeader } from "../../../../../detroit-ui-components/src/headers/PageHeader"
import Layout from "../../layouts"
import PaperListingForm from "../../components/listings/PaperListingForm"
import { MetaTags } from "../../components/shared/MetaTags"
diff --git a/sites/partners/src/pages/reset-password.tsx b/sites/partners/src/pages/reset-password.tsx
index 401bdce0e7..9b53dc4a1a 100644
--- a/sites/partners/src/pages/reset-password.tsx
+++ b/sites/partners/src/pages/reset-password.tsx
@@ -3,17 +3,17 @@ import { useRouter } from "next/router"
import { useForm } from "react-hook-form"
import {
AppearanceStyleType,
+ Button,
Field,
Form,
t,
SiteAlert,
setSiteAlertMessage,
+ FormCard,
+ Icon,
+ AlertBox,
} from "@bloom-housing/ui-components"
import { AuthContext } from "@bloom-housing/shared-helpers"
-import { Button } from "../../../../detroit-ui-components/src/actions/Button"
-import { FormCard } from "../../../../detroit-ui-components/src/blocks/FormCard"
-import { Icon } from "../../../../detroit-ui-components/src/icons/Icon"
-import { AlertBox } from "../../../../detroit-ui-components/src/notifications/AlertBox"
import FormsLayout from "../layouts/forms"
const ResetPassword = () => {
diff --git a/sites/partners/src/pages/sign-in.tsx b/sites/partners/src/pages/sign-in.tsx
index c3d02399dd..f1a3770605 100644
--- a/sites/partners/src/pages/sign-in.tsx
+++ b/sites/partners/src/pages/sign-in.tsx
@@ -13,9 +13,6 @@ import {
t,
ResendConfirmationModal,
RequestType,
- FormSignInMFACode,
- FormSignInAddPhone,
- FormSignInMFAType,
} from "@bloom-housing/ui-components"
import FormsLayout from "../layouts/forms"
import {
@@ -29,6 +26,9 @@ import {
onSubmitMfaCodeWithPhone,
onSubmitMfaCode,
} from "../lib/users/signInHelpers"
+import { FormSignInAddPhone } from "../components/users/FormSignInAddPhone"
+import { FormSignInMFACode } from "../components/users/FormSignInMFACode"
+import { FormSignInMFAType } from "../components/users/FormSignInMFAType"
const SignIn = () => {
const { login, requestMfaCode, userService } = useContext(AuthContext)
diff --git a/sites/partners/src/pages/unauthorized.tsx b/sites/partners/src/pages/unauthorized.tsx
index 01a2827232..4858109761 100644
--- a/sites/partners/src/pages/unauthorized.tsx
+++ b/sites/partners/src/pages/unauthorized.tsx
@@ -1,7 +1,6 @@
import Layout from "../layouts"
import Head from "next/head"
-import { t } from "@bloom-housing/ui-components"
-import { Hero } from "../../../../detroit-ui-components/src/headers/Hero"
+import { Hero, t } from "@bloom-housing/ui-components"
export default () => {
const pageTitle = t("errors.unauthorized.title")
diff --git a/sites/partners/src/pages/users/index.tsx b/sites/partners/src/pages/users/index.tsx
index 65e2897a5c..f81c266850 100644
--- a/sites/partners/src/pages/users/index.tsx
+++ b/sites/partners/src/pages/users/index.tsx
@@ -1,12 +1,17 @@
import React, { useContext, useEffect, useMemo, useState } from "react"
import Head from "next/head"
import dayjs from "dayjs"
-import { t, SiteAlert, AlertBox } from "@bloom-housing/ui-components"
-import { Button } from "../../../../../detroit-ui-components/src/actions/Button"
-import { PageHeader } from "../../../../../detroit-ui-components/src/headers/PageHeader"
-import { Drawer } from "../../../../../detroit-ui-components/src/overlays/Drawer"
-import { AgTable, useAgTable } from "../../../../../detroit-ui-components/src/tables/AgTable"
-import { AppearanceStyleType } from "../../../../../detroit-ui-components/src/global/AppearanceTypes"
+import {
+ t,
+ SiteAlert,
+ AlertBox,
+ Button,
+ PageHeader,
+ Drawer,
+ AgTable,
+ useAgTable,
+ AppearanceStyleType,
+} from "@bloom-housing/ui-components"
import { User } from "@bloom-housing/backend-core/types"
import { AuthContext } from "@bloom-housing/shared-helpers"
import { faFileExport } from "@fortawesome/free-solid-svg-icons"
diff --git a/sites/partners/styles/overrides.scss b/sites/partners/styles/overrides.scss
index 608c456fad..ecb8934c5f 100644
--- a/sites/partners/styles/overrides.scss
+++ b/sites/partners/styles/overrides.scss
@@ -1,26 +1,36 @@
/* Overrides the default ui-components styles with Detroit-specific styles. */
-@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700");
+@import "../public/static/fonts/Montserrat.css";
+@import "@bloom-housing/ui-components/src/global/tokens/fonts.scss";
+@import "@bloom-housing/ui-components/src/global/tokens/borders.scss";
+@import "@bloom-housing/ui-components/src/global/tokens/colors.scss";
+@import "@bloom-housing/ui-components/src/global/tokens/screens.scss";
+@import "@bloom-housing/ui-components/src/global/tokens/sizes.scss";
+@import "@bloom-housing/ui-components/src/global/mixins.scss";
+@import "@bloom-housing/ui-components/src/global/text.scss";
+@import "@bloom-housing/ui-components/src/global/markdown.scss";
+@import "@bloom-housing/ui-components/src/global/lists.scss";
+@import "@bloom-housing/ui-components/src/global/accordion.scss";
#__next {
.site-header {
- --logo-title-font-size-desktop: var(--bloom-font-size-tiny);
- --logo-title-font-size-mobile: var(--bloom-font-size-sm);
+ --logo-title-font-size-desktop: var(--bloom-font-size-sm);
+ --logo-title-font-size-mobile: var(--bloom-font-size-xs);
--logo-image-desktop-max-height: var(--bloom-s20);
--logo-image-desktop-min-height: var(--bloom-s20);
- --mobile-menu-font-size: var(--bloom-font-size-sm);
- --mobile-dropdown-item-font-size: var(--bloom-font-size-tiny);
+ --mobile-menu-font-size: var(--bloom-font-size-xs);
+ --mobile-dropdown-item-font-size: var(--bloom-font-size-sm);
--logo-image-mobile-display: none;
--notice-display-mobile: none;
--link-text-hover-color: var(--bloom-color-gray-750);
--link-text-color: var(--bloom-color-gray-750);
- --link-font-size: var(--bloom-font-size-sm);
+ --link-font-size: var(--bloom-font-size-xs);
.button {
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
letter-spacing: var(--bloom-letter-spacing-widest);
- font-size: var(--bloom-font-size-sm);
+ font-size: var(--bloom-font-size-xs);
svg {
rect {
fill: var(--bloom-color-primary);
@@ -34,6 +44,34 @@
}
}
}
+
+ .button {
+ --inline-font-size: var(--bloom-font-size-sm);
+ --unstyled-inline-font-size: var(--bloom-font-size-sm);
+ --normal-font-size: var(--bloom-font-size-2xs);
+ }
+
+ .view-item {
+ --label-font-size: var(--bloom-font-size-sm);
+ }
+
+ .footer-sock {
+ --background-color: var(--bloom-color-black);
+ }
+
+ .grid-section__title {
+ font-size: 1.375rem;
+ }
+
+ .drawer__header {
+ h1 {
+ font-size: 1.375rem;
+ }
+ }
+
+ .page-header {
+ --padding-desktop: var(--bloom-s14) 0 var(--bloom-s10) 0;
+ }
}
// Listing table Detroit styles
@@ -47,21 +85,23 @@
}
:root {
- --bloom-font-sans: [ "Montserrat", "Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif" ];
- --bloom-font-alt-sans: [ "Montserrat", "Open Sans", "Helvetica", "Arial", "Verdana",
- "sans-serif" ];
+ --detroit-font-sans: "Montserrat", "Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif";
+ --detroit-font-serif: "Montserrat", "Droid Serif", "Georgia", "Times", "serif";
+
+ --bloom-font-sans: var(--detroit-font-sans);
+ --bloom-font-alt-sans: var(--detroit-font-sans);
+ --bloom-font-serif: var(--detroit-font-serif);
--bloom-color-accent-cool: #297e73;
- --bloom-color-gray-700: "#000000";
- --bloom-color-gray-800: "#18252A";
- --bloom-color-gray-950: "#000000";
- --bloom-color-lush: "#feb70d";
+ --bloom-color-gray-700: #000000;
+ --bloom-color-gray-800: #18252a;
+ --bloom-color-gray-950: #000000;
+ --bloom-color-lush: #feb70d;
--bloom-color-primary-dark: rgb(0, 68, 69);
- --bloom-color-primary-darker: "#004445";
- --bloom-color-primary-light: "#F2F2F2";
+ --bloom-color-primary-darker: #004445;
+ --bloom-color-primary-light: #f2f2f2;
--bloom-color-primary-lighter: #f2f2f2;
--bloom-color-primary: rgb(41, 126, 115);
- --bloom-color-warn: "#feb70d";
- --bloom-font-serif: var(--detroit-font-serif);
+ --bloom-color-warn: #feb70d;
--primary-appearance-hover-background-color: white;
--primary-appearance-hover-label-color: var(--bloom-color-primary);
--primary-appearance-hover-border-color: var(--bloom-color-primary);
diff --git a/sites/partners/tailwind.config.js b/sites/partners/tailwind.config.js
index a8032c1479..f0972617b0 100644
--- a/sites/partners/tailwind.config.js
+++ b/sites/partners/tailwind.config.js
@@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const cloneDeep = require("clone-deep")
-const bloomTheme = cloneDeep(require("../../detroit-ui-components/tailwind.config.js"))
+const bloomTheme = cloneDeep(require("@bloom-housing/ui-components/tailwind.config.js"))
// Modify bloomTheme to override any Tailwind vars
// For example:
// bloomTheme.theme.colors.white = "#f0f0e9"
@@ -47,7 +47,8 @@ module.exports = {
"./pages/**/*.tsx",
"./src/**/*.tsx",
"./layouts/**/*.tsx",
- "../../detroit-ui-components/src/**/*.tsx",
+ "../../shared-helpers/src/**/*.tsx",
+ "../../node_modules/@bloom-housing/ui-components/src/**/*.tsx",
],
safelist: [/grid-cols-/],
},
diff --git a/sites/partners/tsconfig.json b/sites/partners/tsconfig.json
index 3e47600f6d..3daa37b63c 100644
--- a/sites/partners/tsconfig.json
+++ b/sites/partners/tsconfig.json
@@ -3,8 +3,9 @@
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"jsx": "preserve",
- "allowJs": true
+ "allowJs": true,
+ "incremental": true
},
- "exclude": ["node_modules", "cypress", "cypress-file-upload"],
+ "exclude": ["node_modules", "cypress", "cypress-file-upload", "cypress.config.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
diff --git a/sites/public/.babelrc b/sites/public/.babelrc
deleted file mode 100644
index 55f3f85dc3..0000000000
--- a/sites/public/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["next/babel"],
- "plugins": ["istanbul"]
-}
diff --git a/sites/public/.env.template b/sites/public/.env.template
index f9f469a48e..953e4d47f9 100644
--- a/sites/public/.env.template
+++ b/sites/public/.env.template
@@ -16,4 +16,3 @@ NEW_RELIC_LICENSE_KEY=
GA_KEY=
GTM_KEY=
SHOW_FINDER=TRUE
-
diff --git a/sites/public/.jest/setup-tests.js b/sites/public/.jest/setup-tests.js
index 295298187d..31b77fe730 100644
--- a/sites/public/.jest/setup-tests.js
+++ b/sites/public/.jest/setup-tests.js
@@ -1,12 +1,11 @@
import { addTranslation } from "@bloom-housing/ui-components"
-import general from "../../../detroit-ui-components/src/locales/general.json"
+import generalTranslations from "../../../shared-helpers/src/locales/general.json"
import general_overrides from "../src/page_content/locale_overrides/general.json"
-import { configure } from "@testing-library/dom"
import { serviceOptions } from "@bloom-housing/backend-core"
import axios from "axios"
import "@testing-library/jest-dom/extend-expect"
-addTranslation(general)
+addTranslation(generalTranslations)
addTranslation(general_overrides)
process.env.backendApiBase = "http://localhost:3100"
@@ -17,8 +16,6 @@ global.beforeEach(() => {
})
})
-configure({ testIdAttribute: "data-test-id" })
-
// Need to set __next on base div to handle the overlay
const portalRoot = document.createElement("div")
portalRoot.setAttribute("id", "__next")
diff --git a/sites/public/__tests__/eligibility_questionnaire/EligibilityAge.test.tsx b/sites/public/__tests__/eligibility_questionnaire/EligibilityAge.test.tsx
index 900bde227c..ae5a01d177 100644
--- a/sites/public/__tests__/eligibility_questionnaire/EligibilityAge.test.tsx
+++ b/sites/public/__tests__/eligibility_questionnaire/EligibilityAge.test.tsx
@@ -39,19 +39,23 @@ describe("
- {title}
+ {title}
{subtitle}