@bloom-housing/ui-components 5.0.1-alpha.10 → 5.0.1-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.10...@bloom-housing/ui-components@5.0.1-alpha.11) (2022-07-11)
+
+
+### Bug Fixes
+
+* ux updates and bug fixes for sidebar components ([#2859](https://github.com/bloom-housing/bloom/issues/2859)) ([1bd3b36](https://github.com/bloom-housing/bloom/commit/1bd3b36415ff55be88ea5ada6184de2c232f2da5))
+
+
+
+
+
 ## [5.0.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.9...@bloom-housing/ui-components@5.0.1-alpha.10) (2022-07-08)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -116,6 +116,7 @@ export * from "./src/page_components/listing/listing_sidebar/NumberedHeader"
 export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 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/SidebarBlock"
 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/ExpandableSection"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.10",
+  "version": "5.0.1-alpha.11",
   "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",
@@ -108,5 +108,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "1af8ace49178551e8c6cbeea3dfdc6fc1240e3c9"
+  "gitHead": "7641496db149c31bf7307ed44367ae1b3688e2b7"
 }

package/src/actions/Button.scss

@@ -29,6 +29,10 @@
   font-weight: var(--label-weight);
   line-height: var(--bloom-line-height-snug);
 
+  &.transition {
+    transition: all 200ms ease-out;
+  }
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
@@ -36,6 +40,9 @@
 
   &:hover {
     border-color: var(--bloom-color-primary-dark);
+    &.transition {
+      transition: all 200ms ease-in;
+    }
   }
 
   &:disabled {

package/src/actions/Button.tsx

@@ -4,25 +4,26 @@ import { AppearanceProps, classNamesForAppearanceTypes } from "../global/Appeara
 import { Icon, IconSize, UniversalIconType } from "../icons/Icon"
 
 export interface ButtonProps extends AppearanceProps {
-  id?: string
-  type?: "button" | "submit" | "reset"
+  "data-test-id"?: string
+  ariaHidden?: boolean
+  ariaLabel?: string
   children: React.ReactNode
-  onClick?: (e: React.MouseEvent) => void
+  className?: string
+  dataTestId?: string
+  disabled?: boolean
+  fullWidth?: boolean
   icon?: UniversalIconType
   iconPlacement?: "left" | "right"
   iconSize?: IconSize
+  id?: string
   // TODO: inlineIcon is deprecated
-  inlineIcon?: "left" | "right"
   inline?: boolean
-  unstyled?: boolean
-  fullWidth?: boolean
-  className?: string
-  disabled?: boolean
+  inlineIcon?: "left" | "right"
   loading?: boolean
-  ariaHidden?: boolean
-  ariaLabel?: string
-  dataTestId?: string
-  "data-test-id"?: string
+  onClick?: (e: React.MouseEvent) => void
+  transition?: boolean
+  type?: "button" | "submit" | "reset"
+  unstyled?: boolean
 }
 
 export const buttonClassesForProps = (props: Omit<ButtonProps, "onClick">) => {
@@ -36,6 +37,7 @@ export const buttonClassesForProps = (props: Omit<ButtonProps, "onClick">) => {
   if (props.fullWidth) classNames.push("is-fullwidth")
   if (props.className) classNames.push(props.className)
   if (props.loading) classNames.push("is-loading")
+  if (props.transition) classNames.push("transition")
   return classNames
 }
 

package/src/actions/ExpandableContent.tsx

@@ -15,6 +15,7 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
 
   return (
     <div className={rootClassNames}>
+      {isExpanded && <div>{children}</div>}
       <button
         type="button"
         className="button is-unstyled m-0 no-underline has-toggle"
@@ -25,7 +26,6 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
       >
         {isExpanded ? strings.readLess : strings.readMore}
       </button>
-      {isExpanded && <div className="mt-6">{children}</div>}
     </div>
   )
 }

package/src/actions/LinkButton.tsx

@@ -3,10 +3,14 @@ import "./Button.scss"
 import { buttonClassesForProps, buttonInner, ButtonProps } from "./Button"
 import { NavigationContext } from "../config/NavigationContext"
 import { isExternalLink } from "../helpers/links"
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"
+import { Icon } from "../icons/Icon"
 
 export interface LinkButtonProps extends Omit<ButtonProps, "onClick"> {
   href: string
   dataTestId?: string
+  newTab?: boolean
+  newTabIcon?: boolean
 }
 
 const LinkButton = (props: LinkButtonProps) => {
@@ -15,8 +19,19 @@ const LinkButton = (props: LinkButtonProps) => {
 
   if (isExternalLink(props.href)) {
     return (
-      <a href={props.href} className={buttonClasses.join(" ")} data-test-id={props.dataTestId}>
+      <a
+        href={props.href}
+        className={buttonClasses.join(" ")}
+        data-test-id={props.dataTestId}
+        target={props.newTab ? "_blank" : "_self"}
+      >
         {buttonInner(props)}
+        {props.newTabIcon && (
+          <>
+            <Icon symbol={faUpRightFromSquare} size={"small"} className={"ml-2"} />
+            <span className="sr-only">{"Opens in a new tab"}</span>
+          </>
+        )}
       </a>
     )
   } else {

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

@@ -3,7 +3,7 @@ import Markdown from "markdown-to-jsx"
 import { ExpandableContent } from "../../../actions/ExpandableContent"
 
 export interface ExpandableSectionProps {
-  content: string
+  content: string | React.ReactNode
   expandableContent?: string
   strings: {
     title: string
@@ -18,7 +18,11 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
     <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>
+        {typeof content === "string" ? (
+          <Markdown options={{ disableParsingRawHTML: false }}>{content}</Markdown>
+        ) : (
+          content
+        )}
         {expandableContent && (
           <div className={"mt-2"}>
             <ExpandableContent strings={{ readMore: strings.readMore, readLess: strings.readLess }}>

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

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Heading, HeaderType, HeadingProps } from "../../../headers/Heading"
+
+export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "className"> {
+  children: React.ReactNode
+  className?: string
+  title?: string
+}
+
+const SidebarBlock = ({ children, className, title, priority, style }: SidebarBlockProps) => {
+  return (
+    <section className={`aside-block ${className ? className : ""}`}>
+      {title && (
+        <Heading priority={priority ?? 4} style={style ?? "sidebarHeader"}>
+          {title}
+        </Heading>
+      )}
+      <div className="text-tiny text-gray-750">{children}</div>
+    </section>
+  )
+}
+
+export { SidebarBlock as default, SidebarBlock }