@bloom-housing/ui-components 4.1.3-alpha.1 → 4.1.3-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.3-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.3...@bloom-housing/ui-components@4.1.3-alpha.4) (2022-04-05)
+
+
+### Features
+
+* open preference links in new tab/window ([#2618](https://github.com/bloom-housing/bloom/issues/2618)) ([ba07a7f](https://github.com/bloom-housing/bloom/commit/ba07a7ff2d01fadf1439671557ae44ce583426de))
+
+
+
+
+
+## [4.1.3-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.2...@bloom-housing/ui-components@4.1.3-alpha.3) (2022-04-04)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.1.3-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.1...@bloom-housing/ui-components@4.1.3-alpha.2) (2022-04-04)
+
+
+### Features
+
+* listing card title redesign, multiple tags possible ([#2531](https://github.com/bloom-housing/bloom/issues/2531)) ([2b795cb](https://github.com/bloom-housing/bloom/commit/2b795cb6c47c084937e996332d1583e9e5bcbc54))
+
+
+
+
+
 ## [4.1.3-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.0...@bloom-housing/ui-components@4.1.3-alpha.1) (2022-04-04)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.1.3-alpha.1",
+  "version": "4.1.3-alpha.4",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.1.3-alpha.0",
+    "@bloom-housing/backend-core": "^4.1.3-alpha.1",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -80,7 +80,7 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
-    "axios": "0.21.1",
+    "axios": "0.21.2",
     "body-scroll-lock": "^3.1.5",
     "dayjs": "^1.10.7",
     "jwt-decode": "^2.2.0",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "cf5c2f24a088665630fd3830bb6758e316b2cbb4"
+  "gitHead": "c461d8695c7166c108a30e653445c8d542261f2e"
 }

package/src/blocks/ImageCard.scss

@@ -19,12 +19,13 @@
   @apply absolute;
   @apply z-10;
   @apply w-full;
-  @apply mt-4;
+  @apply mt-1;
+  @apply px-4;
+  @apply flex-wrap;
 
   @screen md {
     @apply items-start;
     @apply justify-start;
-    @apply ml-4;
   }
 }
 
@@ -35,35 +36,6 @@
   @apply py-1;
 }
 
-.image-card__overlay {
-  background: linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.9) 0%,
-    rgba(0, 0, 0, 0.8) 10%,
-    rgba(0, 0, 0, 0.7) 50%,
-    rgba(0, 0, 0, 0.3) 90%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  @screen md {
-    background: linear-gradient(
-      0deg,
-      rgba(0, 0, 0, 0.9) 20%,
-      rgba(0, 0, 0, 0.5) 50%,
-      rgba(0, 0, 0, 0.2) 65%,
-      rgba(0, 0, 0, 0.1) 70%,
-      rgba(0, 0, 0, 0) 80%
-    );
-  }
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  @apply w-full;
-  height: 100%;
-  @screen md {
-    height: 100%;
-  }
-}
-
 .image-card__placeholder {
   height: 300px;
 }

package/src/blocks/ImageCard.tsx

@@ -6,7 +6,7 @@ import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceStyleType } from "../global/AppearanceTypes"
 import { t } from "../helpers/translator"
-import { IconTypes } from "../icons/Icon"
+import { Icon, IconFillColors, IconTypes } from "../icons/Icon"
 
 export interface StatusBarType {
   status?: ApplicationStatusType
@@ -16,16 +16,32 @@ export interface StatusBarType {
   iconType?: IconTypes
 }
 
+export interface ImageTag {
+  text?: string
+  iconType?: IconTypes
+  iconColor?: string
+}
+
 export interface ImageCardProps {
-  imageUrl?: string
-  subtitle?: string
-  title: string
-  href?: string
   description?: string
-  tagLabel?: string
+  href?: string
+  imageUrl?: string
   statuses?: StatusBarType[]
+  tags?: ImageTag[]
 }
 
+/**
+ * @component ImageCard
+ *
+ * A component that renders an image with optional status bars below it
+ *
+ * @prop description - A description of the image, used as alt text
+ * @prop href - A link, used to wrap the entire component
+ * @prop imageUrl - An image URL, used as a background image
+ * @prop statuses - A list of status indicators, an ApplicationStatus component is rendered for each item at the bottom of the card
+ * @prop tags - A list of image tags, a Tag component is rendered for each over the image
+ *
+ */
 const ImageCard = (props: ImageCardProps) => {
   const getStatuses = () => {
     return props.statuses?.map((status, index) => {
@@ -46,22 +62,31 @@ const ImageCard = (props: ImageCardProps) => {
 
   const image = (
     <div className="image-card__wrapper">
-      {props.tagLabel && (
-        <div className="image-card-tag__wrapper">
-          <Tag styleType={AppearanceStyleType.warning}>{props.tagLabel}</Tag>
-        </div>
-      )}
+      <div className="image-card-tag__wrapper">
+        {props.tags?.map((tag, index) => {
+          return (
+            <React.Fragment key={index}>
+              <Tag styleType={AppearanceStyleType.warning} className={"mt-3 mr-2 ml-2"}>
+                {tag.iconType && (
+                  <Icon
+                    size={"medium"}
+                    symbol={tag.iconType}
+                    fill={tag.iconColor ?? IconFillColors.primary}
+                    className={"mr-2"}
+                  />
+                )}
+                {tag.text}
+              </Tag>
+            </React.Fragment>
+          )
+        })}
+      </div>
       <figure className="image-card">
         {props.imageUrl ? (
           <img src={props.imageUrl} alt={props.description || t("listings.buildingImageAltText")} />
         ) : (
           <div className={"image-card__placeholder"} />
         )}
-        <div className={"image-card__overlay"} />
-        <figcaption className="image-card__figcaption">
-          <h2 className="image-card__title">{props.title}</h2>
-          {props.subtitle && <p className="image-card__subtitle">{props.subtitle}</p>}
-        </figcaption>
       </figure>
       {getStatuses()}
     </div>

package/src/global/text.scss

@@ -139,3 +139,33 @@ h1.title {
 .icon-item {
   @apply block;
 }
+
+.card-header {
+  @apply font-alt-sans;
+  @apply font-semibold;
+  @apply text-blue-700;
+  @apply text-3xl;
+  @apply mb-1;
+}
+
+.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;
+}

package/src/headers/Heading.tsx

@@ -3,15 +3,26 @@ import * as React from "react"
 export interface HeadingProps {
   children?: React.ReactNode
   className?: string
-  underline?: boolean
   priority?: number
+  style?: HeaderType
 }
+
+export type HeaderType = keyof typeof HeaderStyleMap
+
+const HeaderStyleMap = {
+  cardHeader: "card-header",
+  cardSubheader: "card-subheader",
+  tableHeader: "table-header",
+  tableSubheader: "table-subheader",
+  sidebarHeader: "text-caps-underline",
+}
+
 const Heading = (props: HeadingProps) => {
-  const Tag = `h${props.priority || 1}` as keyof JSX.IntrinsicElements
-  let classNames = props.className || ""
-  if (props.underline) {
-    classNames += " text-caps-underline"
-  }
+  const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
+  const Tag = `h${priority}` as keyof JSX.IntrinsicElements
+  const classNames = `${props.style && HeaderStyleMap[props.style]} ${
+    props.className && props.className
+  }`
   return <Tag className={classNames}>{props.children}</Tag>
 }
 

package/src/lists/PreferencesList.tsx

@@ -54,7 +54,9 @@ const PreferencesList = (props: PreferencesListProps) => {
           <div className="preferences-list__links">
             {preference.links.map((link: ListPreferenceLink, linkIndex: number) => (
               <span key={linkIndex}>
-                <a href={link.url}>{link.title}</a>
+                <a href={link.url} target="_blank">
+                  {link.title}
+                </a>
               </span>
             ))}
           </div>

package/src/page_components/listing/ListingCard.scss

@@ -34,19 +34,17 @@
   }
 }
 
-.listings-row_title {
-  @apply font-alt-sans;
-  @apply font-semibold;
-  @apply text-gray-900;
-  @apply text-base;
-  @apply mb-2;
+.listings-row_table {
+  @apply mb-4;
 }
 
-.listings-row_subtitle {
-  @apply font-alt-sans;
-  @apply text-gray-800;
-  @apply text-sm;
-  @apply mb-3;
+.listings-row_footer {
+  @apply flex;
+  @apply justify-end;
+  @apply w-full;
+  a:not(:first-child) {
+    @apply ml-1;
+  }
 }
 
 .listings-row_table {

package/src/page_components/listing/ListingCard.tsx

@@ -1,70 +1,133 @@
 import * as React from "react"
-import { ImageCard, ImageCardProps } from "../../blocks/ImageCard"
+import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
-
-import { t } from "../../helpers/translator"
-import "./ListingCard.scss"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
+import { Heading, HeaderType } from "../../headers/Heading"
+import { Tag } from "../../text/Tag"
+import { AppearanceStyleType } from "../../global/AppearanceTypes"
+import { Icon, IconFillColors } from "../../icons/Icon"
+import "./ListingCard.scss"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
-export interface ListingCardHeaderProps {
-  tableHeader?: string
-  tableHeaderClass?: string
-  tableSubHeader?: string
-  tableSubHeaderClass?: string
-  stackedTable?: boolean
+export interface CardHeader {
+  customClass?: string
+  text: string
+}
+
+export interface FooterButton {
+  href: string
+  text: string
+}
+
+export interface ListingCardContentProps {
+  contentHeader?: CardHeader
+  contentSubheader?: CardHeader
+  tableHeader?: CardHeader
+  tableSubheader?: CardHeader
 }
 export interface ListingCardProps {
-  imageCardProps: ImageCardProps
+  cardTags?: ImageTag[]
   children?: React.ReactElement
-  seeDetailsLink?: string
-  tableHeaderProps?: ListingCardHeaderProps
+  contentProps?: ListingCardContentProps
+  footerButtons?: FooterButton[]
+  footerContainerClass?: string
+  footerContent?: React.ReactNode
+  imageCardProps: ImageCardProps
+  stackedTable?: boolean
   tableProps?: ListingCardTableProps
-  detailsLinkClass?: string
 }
 
+/**
+ * @component ListingCard
+ *
+ * A component that renders an image with optional status bars below it,
+ * and a content section associated with the image which can include titles, a table, and custom content
+ *
+ * @prop cardTags -A list of tags to be rendered below the content header, a Tag component is rendered for each
+ * @prop children - Custom content rendered in the content section above the table
+ * @prop footerButtons - A list of buttons to render in the footer of the content section
+ * @prop footerContent - Custom content rendered below the content table
+ * @prop footerContainerClass - A class name applied to the footer container of the content section
+ * @prop imageCardProps - Prop interface for the ImageCard component
+ * @prop stackedTable - Toggles on the StackedTable component in place of the default StandardTable component - they are functionally equivalent with differing UIs
+ * @prop contentProps - An object containing fields that render optional headers above the content section's table
+ * @prop tableProps - Prop interface for the StandardTable and StackedTable components
+ *
+ */
 const ListingCard = (props: ListingCardProps) => {
-  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps, children } = props
+  const {
+    cardTags,
+    children,
+    footerButtons,
+    footerContent,
+    footerContainerClass,
+    imageCardProps,
+    stackedTable,
+    contentProps,
+    tableProps,
+  } = props
 
-  const tableHeader = () => {
-    return (
-      <h3
-        className={`listings-row_title ${
-          tableHeaderProps?.tableHeaderClass && tableHeaderProps?.tableHeaderClass
-        }`}
-      >
-        {tableHeaderProps?.tableHeader}
-      </h3>
-    )
+  const getHeader = (
+    header: CardHeader | undefined,
+    priority: number,
+    style?: HeaderType,
+    customClass?: string
+  ) => {
+    if (header && header.text) {
+      return (
+        <Heading priority={priority} style={style} className={customClass}>
+          {header.text}
+        </Heading>
+      )
+    } else {
+      return <></>
+    }
   }
 
-  const tableSubHeader = () => {
+  const getContentHeader = () => {
     return (
-      <h4
-        className={`listings-row_subtitle ${
-          tableHeaderProps?.tableSubHeaderClass && tableHeaderProps?.tableSubHeaderClass
-        }`}
-      >
-        {tableHeaderProps?.tableSubHeader}
-      </h4>
+      <>
+        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
+        {cardTags && cardTags?.length > 0 && (
+          <div className={"inline-flex flex-wrap justify-start w-full"}>
+            {cardTags?.map((cardTag, index) => {
+              return (
+                <Tag styleType={AppearanceStyleType.warning} className={"mr-2 mb-2"} key={index}>
+                  {cardTag.iconType && (
+                    <Icon
+                      size={"medium"}
+                      symbol={cardTag.iconType}
+                      fill={cardTag.iconColor ?? IconFillColors.primary}
+                      className={"mr-2"}
+                    />
+                  )}
+                  {cardTag.text}
+                </Tag>
+              )
+            })}
+          </div>
+        )}
+      </>
     )
   }
 
-  return (
-    <article className="listings-row" data-test-id={"listing-card-component"}>
-      <div className="listings-row_figure">
-        <ImageCard {...imageCardProps} />
-      </div>
-      <div className="listings-row_content">
-        {tableHeaderProps?.tableHeader && tableHeader()}
-        {tableHeaderProps?.tableSubHeader && tableSubHeader()}
+  const getContent = () => {
+    return (
+      <>
         <div className="listings-row_table">
+          {(contentProps?.tableHeader?.text || contentProps?.tableSubheader?.text) &&
+            (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
+              <hr className={"mb-2"} />
+            )}
+          {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+          {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
-              {tableHeaderProps?.stackedTable ? (
+              {stackedTable ? (
                 <StackedTable {...(tableProps as StackedTableProps)} />
               ) : (
                 <StandardTable {...(tableProps as StandardTableProps)} />
@@ -72,11 +135,32 @@ const ListingCard = (props: ListingCardProps) => {
             </>
           )}
         </div>
-        {props.seeDetailsLink && (
-          <LinkButton className={detailsLinkClass} href={props.seeDetailsLink}>
-            {t("t.seeDetails")}
-          </LinkButton>
-        )}
+        <div className={"flex flex-col"}>
+          {footerContent && footerContent}
+          {footerButtons && footerButtons?.length > 0 && (
+            <div className={footerContainerClass ?? "listings-row_footer"}>
+              {footerButtons?.map((footerButton, index) => {
+                return (
+                  <LinkButton href={footerButton.href} key={index}>
+                    {footerButton.text}
+                  </LinkButton>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <article className="listings-row" data-test-id={"listing-card-component"}>
+      <div className="listings-row_figure">
+        <ImageCard {...imageCardProps} />
+      </div>
+      <div className="listings-row_content">
+        <div>{getContentHeader()}</div>
+        {getContent()}
       </div>
     </article>
   )