@bloom-housing/ui-components 4.4.1-alpha.13 → 4.4.1-alpha.16

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.15...@bloom-housing/ui-components@4.4.1-alpha.16) (2022-06-07)
+
+
+### Bug Fixes
+
+* changed aria-selected to aria-current issue [#698](https://github.com/bloom-housing/bloom/issues/698) ([bed1b23](https://github.com/bloom-housing/bloom/commit/bed1b23d63af134542f6760aa70d1ccac87940fa))
+
+
+### Features
+
+* **sidenav component:** update Prototype SideNav Component for Production Usage ([4ae5e5c](https://github.com/bloom-housing/bloom/commit/4ae5e5c159c7150a808df85b2aa47e443256eb5f)), closes [#698](https://github.com/bloom-housing/bloom/issues/698)
+
+
+
+
+
+## [4.4.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.14...@bloom-housing/ui-components@4.4.1-alpha.15) (2022-06-07)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.4.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.13...@bloom-housing/ui-components@4.4.1-alpha.14) (2022-06-06)
+
+
+### Features
+
+* create table card component ([#2781](https://github.com/bloom-housing/bloom/issues/2781)) ([7cb3147](https://github.com/bloom-housing/bloom/commit/7cb31477268733b8b3d51dd77b2e33afb713ffbc))
+
+
+
+
+
 ## [4.4.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.12...@bloom-housing/ui-components@4.4.1-alpha.13) (2022-06-04)
 
 

package/index.ts

@@ -16,6 +16,7 @@ export * from "./src/blocks/ImageCard"
 export * from "./src/blocks/InfoCard"
 export * from "./src/blocks/StatusBar"
 export * from "./src/blocks/ViewItem"
+export * from "./src/blocks/StandardCard"
 
 /* Contexts */
 export * from "./src/authentication"
@@ -116,7 +117,7 @@ export * from "./src/page_components/listing/listing_sidebar/ReferralApplication
 export * from "./src/page_components/listing/listing_sidebar/ContactAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
 export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
-export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
+export * from "./src/page_components/listing/listing_sidebar/ExpandableSection"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.4.1-alpha.13",
+  "version": "4.4.1-alpha.16",
   "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",
@@ -103,5 +103,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "c4fd2c06598100355cb253cad4e51a1f8bc3035d"
+  "gitHead": "24998ae0a2c0566bebd60573d117496967042f71"
 }

package/src/actions/ExpandableContent.tsx

@@ -1,11 +1,14 @@
 import React, { useState } from "react"
-import { t } from "@bloom-housing/ui-components"
 
 type ExpandableContentProps = {
   children: React.ReactChild
+  strings: {
+    readMore?: string
+    readLess?: string
+  }
 }
 
-const ExpandableContent = ({ children }: ExpandableContentProps) => {
+const ExpandableContent = ({ children, strings }: ExpandableContentProps) => {
   const [isExpanded, setExpanded] = useState(false)
 
   return (
@@ -18,7 +21,7 @@ const ExpandableContent = ({ children }: ExpandableContentProps) => {
           setExpanded(!isExpanded)
         }}
       >
-        {t(isExpanded ? "t.readLess" : "t.readMore")}
+        {isExpanded ? strings.readLess : strings.readMore}
       </button>
 
       {isExpanded && <div className="mt-6">{children}</div>}

package/src/blocks/StandardCard.docs.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { StandardCard } from "./StandardCard"
+
+# Standard Card
+
+The standard card component displays a title with a child element (e.g table) and optional footer.
+
+<Canvas>
+  <Story id="blocks-standard-card" />
+</Canvas>
+
+
+## Component Properties
+
+<ArgsTable of={StandardCard} />
+
+## Theming Variables
+
+<Canvas>
+  <Story id="blocks-standard-card--style-overrides" />
+</Canvas>
+
+You can apply CSS variables to the `.standard-card` selector to customize the appearance of the component.
+
+| Name                         | Type  | Description                                               | Default                         |
+| ---------------------------- | ----- | --------------------------------------------------------- | ------------------------------- |
+| `--font-family`              | Font  | Title font family                                         | `--bloom-font-alt-sans`         |
+| `--border-radius`            | Size  | Card border radius                                        | `--bloom-rounded-lg`            |
+| `--border-width`             | Size  | Card border width                                         | `--bloom-border-1`              |
+| `--border-color`             | Size  | Card border color                                         | `--bloom-color-gray-500`        |
+| `--title-color`              | Color | Card title color                                          | `--bloom-color-gray-900`        |
+| `--background-color`         | Size  | Card background color                                     | `--bloom-color-white`           |
+| `--blank-color`              | Color | Empty state text color                                    | `--bloom-color-gray-750`        |
+| `--blank-background`         | Color | Empty state background color                              | `--bloom-color-gray-200`        |

package/src/blocks/StandardCard.scss

@@ -0,0 +1,33 @@
+.standard-card {
+  --font-family: var(--bloom-font-alt-sans);
+  --border-radius: var(--bloom-rounded-lg);
+  --border-width: var(--bloom-border-1);
+  --border-color: var(--bloom-color-gray-500);
+  --title-color: var(--bloom-color-gray-900);
+  --background-color: var(--bloom-color-white);
+  --blank-color: var(--bloom-color-gray-750);
+  --blank-background: var(--bloom-color-gray-200);
+}
+
+.standard-card__inner {
+  @apply overflow-hidden;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  background-color: var(--background-color);
+}
+
+.standard-card__title {
+  color: var(--title-color);
+  font-family: var(--font-family);
+  padding: var(--bloom-s6) var(--bloom-s6) var(--bloom-s2) var(--bloom-s7);
+}
+
+.standard-card__blank {
+  color: var(--blank-color);
+  background-color: var(--blank-background);
+  padding: var(--bloom-s3) var(--bloom-s7);
+}
+
+.standard-card__footer {
+  margin-top: var(--bloom-s3);
+}

package/src/blocks/StandardCard.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Heading } from "../headers/Heading"
+import "./StandardCard.scss"
+
+export interface StandardCardProps {
+  className?: string
+  title?: string
+  children?: React.ReactNode
+  footer?: React.ReactNode
+  emptyStateMessage: string
+}
+
+const StandardCard = ({
+  className = "",
+  title,
+  children,
+  footer,
+  emptyStateMessage,
+}: StandardCardProps) => {
+  return (
+    <div className={`standard-card ${className}`}>
+      <div className="standard-card__inner">
+        {title && (
+          <Heading className="standard-card__title" priority={3}>
+            {title}
+          </Heading>
+        )}
+
+        {children ? children : <div className="standard-card__blank">{emptyStateMessage}</div>}
+      </div>
+
+      {footer && <div className="standard-card__footer">{footer}</div>}
+    </div>
+  )
+}
+
+export { StandardCard as default, StandardCard }

package/src/forms/FieldGroup.tsx

@@ -103,7 +103,7 @@ const FieldGroup = ({
 
         {item.description && (
           <div className="ml-8 -mt-1 mb-5">
-            <ExpandableContent>
+            <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
               <p className="field-note mb-2 -mt-2">{item.description}</p>
             </ExpandableContent>
           </div>

package/src/{prototypes → navigation}/SideNav.scss

@@ -3,13 +3,26 @@
   @apply rounded-lg;
 
   li {
-    &:first-of-type a {
+    &:first-of-type {
       @apply rounded-t-lg;
     }
 
-    &:last-of-type a {
+    &:last-of-type {
       @apply rounded-b-lg;
     }
+
+    &.is-current {
+      cursor: pointer;
+      @apply text-gray-900;
+      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
+      @apply block;
+      @apply px-4;
+      @apply py-2;
+    }
+
+    &:not(:last-child) {
+      @apply border-b;
+    }
   }
 
   a {
@@ -17,16 +30,9 @@
     @apply block;
     @apply px-4;
     @apply py-2;
-    @apply border-b;
-
     &:hover {
       @apply bg-primary-lighter;
       @apply text-primary;
     }
-
-    &.is-current {
-      @apply text-gray-900;
-      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
-    }
   }
 }

package/src/navigation/SideNav.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { NavigationContext } from "../config/NavigationContext"
+import "./SideNav.scss"
+
+export interface SideNavItemProps {
+  current?: boolean
+  url: string
+  label: string
+}
+
+export interface SideNavProps {
+  navItems?: SideNavItemProps[]
+}
+
+const SideNav = (props: SideNavProps) => {
+  const { LinkComponent } = React.useContext(NavigationContext)
+
+  return (
+    <nav className="side-nav" aria-label="Secondary navigation">
+      <ul>
+        {props.navItems?.map((navItem: SideNavItemProps, index: number) => {
+          if (navItem.current) {
+            return (
+              <li className="is-current" key={index} aria-current="page">
+                {navItem.label}
+              </li>
+            )
+          }
+          return (
+            <li key={index}>
+              <LinkComponent href={navItem.url}>{navItem.label}</LinkComponent>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+export { SideNav as default, SideNav }

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

@@ -0,0 +1,34 @@
+import * as React from "react"
+import Markdown from "markdown-to-jsx"
+import { ExpandableContent } from "../../../actions/ExpandableContent"
+
+export interface ExpandableSectionProps {
+  content: string
+  expandableContent?: string
+  strings: {
+    title: string
+    readMore?: string
+    readLess?: string
+  }
+}
+
+const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSectionProps) => {
+  if (!content) return null
+  return (
+    <section className="aside-block">
+      <h4 className="text-caps-underline">{strings.title}</h4>
+      <div className="text-tiny text-gray-750">
+        <Markdown options={{ disableParsingRawHTML: false }}>{content}</Markdown>
+        {expandableContent && (
+          <div className={"mt-2"}>
+            <ExpandableContent strings={{ readMore: strings.readMore, readLess: strings.readLess }}>
+              <Markdown options={{ disableParsingRawHTML: false }}>{expandableContent}</Markdown>
+            </ExpandableContent>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export { ExpandableSection as default, ExpandableSection }

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

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { t } from "../../../helpers/translator"
-import { Listing } from "@bloom-housing/backend-core/types"
-
-interface WhatToExpectProps {
-  listing: Listing
-}
-
-const WhatToExpect = (props: WhatToExpectProps) => {
-  const listing = props.listing
-
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("whatToExpect.label")}</h4>
-      <p className="text-tiny text-gray-800">
-        {listing.whatToExpect ? listing.whatToExpect : t("whatToExpect.default")}
-      </p>
-    </section>
-  )
-}
-
-export { WhatToExpect as default, WhatToExpect }

package/src/prototypes/SideNav.tsx

@@ -1,14 +0,0 @@
-import * as React from "react"
-import "./SideNav.scss"
-
-export interface SideNavProps {
-  children: React.ReactNode[]
-}
-
-const SideNav = (props: SideNavProps) => (
-  <nav className="side-nav" aria-label="Secondary navigation">
-    <ul>{props.children}</ul>
-  </nav>
-)
-
-export { SideNav as default, SideNav }