@bloom-housing/ui-components 4.2.3 → 4.3.1-alpha.1

package/tailwind.config.js

@@ -12,106 +12,101 @@ module.exports = {
       print: { raw: "print" },
     },
     fontSize: {
-      "2xs": ".6875rem",
-      xs: ".75rem",
-      sm: ".8125rem",
-      tiny: ".875rem",
-      base: "1rem",
-      lg: "1.25rem",
-      xl: "1.375rem",
-      "2xl": "1.5rem",
-      "3xl": "1.625rem",
-      "4xl": "2rem",
-      "5xl": "2.5rem",
-      "6xl": "3rem",
-      "6.5xl": "4rem",
-      "7xl": "4.5rem",
+      "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: ["Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif"],
-      serif: ["Droid Serif", "Georgia", "Times", "serif"],
-      "alt-sans": ["Lato", "Helvetica", "Arial", "Verdana", "sans-serif"],
+      sans: "var(--bloom-font-sans)",
+      serif: "var(--bloom-font-serif)",
+      "alt-sans": "var(--bloom-font-alt-sans)",
     },
     colors: {
-      primary: "#0077DA",
-      "primary-dark": "#0067be",
-      "primary-darker": "#205493",
-      "primary-light": "#DAEEFF",
-      "primary-lighter": "#F5F8F9",
-      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)",
+      lush: "var(--bloom-color-lush)",
+      white: "var(--bloom-color-white)",
+      black: "var(--bloom-color-black)",
       blue: {
-        800: "#205493",
-        700: "#0067be",
-        600: "#0077DA",
-        300: "#DAEEFF",
-        200: "#F5F8F9",
+        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: "#E41D3D",
-        300: "#F9D2D8",
+        700: "var(--bloom-color-red-700)",
+        300: "var(--bloom-color-red-300)",
       },
       yellow: {
-        700: "#FDB81E",
-        300: "#FEE8B6",
+        700: "var(--bloom-color-yellow-700)",
+        300: "var(--bloom-color-yellow-300)",
       },
       green: {
-        700: "#2E8540",
-        300: "#B4E5BE",
+        700: "var(--bloom-color-green-700)",
+        300: "var(--bloom-color-green-300)",
       },
       teal: {
-        700: "#2E8540",
-        300: "#B4E5BE",
+        700: "var(--bloom-color-green-700)",
+        300: "var(--bloom-color-green-300)",
       },
       gray: {
-        950: "#242C2E",
-        900: "#222222",
-        850: "#333333",
-        800: "#30383A",
-        750: "#555555",
-        700: "#767676",
-        600: "#999999",
-        550: "#AAAAAA",
-        500: "#CCCCCC",
-        450: "#DEDEE0",
-        400: "#EFEFEF",
-        300: "#F6F6F6",
-        200: "#F7F7F7",
-        100: "#F9F9F9",
+        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: "-.075em",
-      tighter: "-.05em",
-      tight: "-.025em",
+      tightest: "var(--bloom-letter-spacing-tightest)",
+      tighter: "var(--bloom-letter-spacing-tighter)",
+      tight: "var(--bloom-letter-spacing-tight)",
       normal: "0",
-      wide: ".025em",
-      wider: ".05em",
-      widest: ".12em",
-      ultrawide: ".25em",
+      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) => ({

package/tailwind.tosass.js

@@ -1,6 +1,7 @@
 /* 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
@@ -17,7 +18,7 @@ const tailwindToSassVars = (bloomTheme) => {
     }
   })
   const bloomScreenVars = Object.keys(bloomTheme.theme.screens).map((screenKey) => {
-    return `$tailwind-screens-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
+    return `$screen-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
   })
 
   // Uncomment this if you want to debug:

package/src/helpers/address.tsx

@@ -1,46 +0,0 @@
-import * as React from "react"
-import Markdown from "markdown-to-jsx"
-
-export interface Address {
-  city?: string
-  latitude?: number
-  longitude?: number
-  placeName?: string
-  state?: string
-  street2?: string
-  street?: string
-  zipCode?: string
-}
-
-interface AddressProps {
-  address: Address
-}
-
-export const OneLineAddress = (props: AddressProps) => {
-  if (!props.address) return null
-
-  return (
-    <>
-      {props.address.street},{` `}
-      {props.address.city}, {props.address.state} {props.address.zipCode}
-    </>
-  )
-}
-
-export const MultiLineAddress = (props: AddressProps) => {
-  if (!props.address) return null
-
-  return (
-    <>
-      {props.address.placeName && (
-        <>
-          {props.address.placeName}
-          <br />
-        </>
-      )}
-      <Markdown children={props.address.street || ""} />
-      <br />
-      {props.address.city}, {props.address.state} {props.address.zipCode}
-    </>
-  )
-}

package/src/page_components/listing/listing_sidebar/LeasingAgent.tsx

@@ -1,72 +0,0 @@
-import * as React from "react"
-import { SidebarAddress } from "./SidebarAddress"
-import { t } from "../../../helpers/translator"
-import { Icon, IconFillColors } from "../../../icons/Icon"
-import { Listing } from "@bloom-housing/backend-core/types"
-
-interface LeasingAgentProps {
-  listing: Listing
-  managementCompany?: { name: string; website: string }
-}
-
-const LeasingAgent = (props: LeasingAgentProps) => {
-  const listing = props.listing
-
-  const phoneNumber = listing.leasingAgentPhone
-    ? `tel:${listing.leasingAgentPhone.replace(/[-()]/g, "")}`
-    : ""
-
-  let managementWebsite = props.managementCompany?.website
-  if (managementWebsite && !managementWebsite.startsWith("http")) {
-    managementWebsite = `http://${managementWebsite}`
-  }
-
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("leasingAgent.contact")}</h4>
-
-      {listing.leasingAgentName && <p className="text-xl">{listing.leasingAgentName}</p>}
-      {listing.leasingAgentTitle && <p className="text-gray-700">{listing.leasingAgentTitle}</p>}
-      {props.managementCompany?.name && (
-        <p className="text-gray-700">{props.managementCompany.name}</p>
-      )}
-
-      {listing.leasingAgentPhone && (
-        <>
-          <p className="mt-5">
-            <a href={phoneNumber}>
-              <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
-              {listing.leasingAgentPhone}
-            </a>
-          </p>
-          <p className="text-sm text-gray-700">{t("leasingAgent.dueToHighCallVolume")}</p>
-        </>
-      )}
-
-      {listing.leasingAgentEmail && (
-        <p className="my-5">
-          <a href={`mailto:${listing.leasingAgentEmail}`}>
-            <Icon symbol="mail" size="medium" fill={IconFillColors.primary} /> {t("t.email")}
-          </a>
-        </p>
-      )}
-
-      {managementWebsite && (
-        <p className="my-5">
-          <a href={managementWebsite} target="_blank" rel="noreferrer noopener">
-            <Icon symbol="globe" size="medium" fill={IconFillColors.primary} /> {t("t.website")}
-          </a>
-        </p>
-      )}
-
-      {listing.leasingAgentAddress && (
-        <SidebarAddress
-          address={listing.leasingAgentAddress}
-          officeHours={listing.leasingAgentOfficeHours}
-        />
-      )}
-    </section>
-  )
-}
-
-export { LeasingAgent as default, LeasingAgent }

package/src/page_components/listing/listing_sidebar/SidebarAddress.tsx

@@ -1,56 +0,0 @@
-import * as React from "react"
-import ReactDOMServer from "react-dom/server"
-import { Icon, IconFillColors } from "../../../icons/Icon"
-import { OneLineAddress, MultiLineAddress, Address } from "../../../helpers/address"
-import { t } from "../../../helpers/translator"
-import Markdown from "markdown-to-jsx"
-
-export interface SidebarAddressProps {
-  address?: Address
-  officeHours?: string
-}
-
-const SidebarAddress = (props: SidebarAddressProps) => {
-  const { address, officeHours } = props
-  let mainAddress = null
-  let googleMapsHref = ""
-  let hours = <></>
-
-  if (address?.street) {
-    const oneLineAddress = <OneLineAddress address={address} />
-    mainAddress = <MultiLineAddress address={address} />
-
-    googleMapsHref =
-      "https://www.google.com/maps/place/" + ReactDOMServer.renderToStaticMarkup(oneLineAddress)
-  }
-
-  if (officeHours) {
-    hours = (
-      <>
-        <h3 className="text-caps-tiny ">{t("leasingAgent.officeHours")}</h3>
-        <div className="text-gray-800 text-tiny markdown">
-          <Markdown children={officeHours} options={{ disableParsingRawHTML: true }} />
-        </div>
-      </>
-    )
-  }
-
-  return (
-    <>
-      {address?.street && (
-        <>
-          <p className="text-gray-700 mb-1">{mainAddress}</p>
-          <p className="mb-4">
-            <a href={googleMapsHref} className="inline-block pt-1" target="_blank">
-              <Icon symbol="map" size="medium" fill={IconFillColors.primary} />{" "}
-              {t("t.getDirections")}
-            </a>
-          </p>
-        </>
-      )}
-      {hours}
-    </>
-  )
-}
-
-export { SidebarAddress as default, SidebarAddress }

package/src/page_components/listing/listing_sidebar/Waitlist.tsx

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { t } from "../../../helpers/translator"
-
-export interface WaitlistProps {
-  isWaitlistOpen: boolean
-  waitlistMaxSize?: number | null
-  waitlistCurrentSize?: number | null
-  waitlistOpenSpots?: number | null
-}
-
-const WaitlistItem = (props: { className?: string; value: number; text: string }) => (
-  <li className={`uppercase text-gray-800 text-tiny ${props.className}`}>
-    <span className="text-right w-12 inline-block pr-2">{props.value}</span>
-    <span>{props.text}</span>
-  </li>
-)
-
-const Waitlist = (props: WaitlistProps) => {
-  if (!props.isWaitlistOpen) return <></>
-
-  return (
-    <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{t("listings.waitlist.unitsAndWaitlist")}</h4>
-      <div>
-        <p className="text-tiny text-gray-800 pb-3">{t("listings.waitlist.submitAnApplication")}</p>
-        <ul>
-          {props.waitlistCurrentSize !== null && props.waitlistCurrentSize !== undefined && (
-            <WaitlistItem
-              value={props.waitlistCurrentSize}
-              text={t("listings.waitlist.currentSize")}
-            />
-          )}
-          {props.waitlistOpenSpots !== null && props.waitlistOpenSpots !== undefined && (
-            <WaitlistItem
-              value={props.waitlistOpenSpots}
-              text={t("listings.waitlist.openSlots")}
-              className={"font-semibold"}
-            />
-          )}
-          {props.waitlistMaxSize != null && (
-            <WaitlistItem value={props.waitlistMaxSize} text={t("listings.waitlist.finalSize")} />
-          )}
-        </ul>
-      </div>
-    </section>
-  )
-}
-
-export { Waitlist as default, Waitlist }