@bloom-housing/ui-components 4.0.1-alpha.16 → 4.0.1-alpha.17

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.
 
+## [4.0.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.16...@bloom-housing/ui-components@4.0.1-alpha.17) (2022-01-07)
+
+
+### Bug Fixes
+
+* listings group expandable section css updates ([#2377](https://github.com/bloom-housing/bloom/issues/2377)) ([fba77ef](https://github.com/bloom-housing/bloom/commit/fba77efc25ccb213a0e18a8b58ddf8ada07fbb8c))
+
+
+
+
+
 ## [4.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.15...@bloom-housing/ui-components@4.0.1-alpha.16) (2022-01-07)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.16",
+  "version": "4.0.1-alpha.17",
   "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",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "3d25f7fd5ae02d802042996bad55655cd5fe730f"
+  "gitHead": "b08adf48ec1e961f78e5d7111201c0781f5c96ca"
 }

package/src/icons/Icon.tsx

@@ -17,6 +17,7 @@ import {
   CloseRound,
   CloseSmall,
   Cross,
+  DoubleHouse,
   Down,
   Download,
   Draggable,
@@ -75,6 +76,7 @@ const IconMap = {
   closeRound: CloseRound,
   closeSmall: CloseSmall,
   cross: Cross,
+  doubleHouse: DoubleHouse,
   down: Down,
   download: Download,
   draggable: Draggable,

package/src/icons/Icons.tsx

@@ -243,6 +243,20 @@ export const Cross = (props: IconProps) => {
   )
 }
 
+export const DoubleHouse = (props: IconProps) => {
+  return (
+    <svg viewBox="0 0 32 32" fill={props.fill ?? "currentColor"}>
+      <path d="M8.68 24.053c0.173 0 0.347-0.080 0.48-0.213 0.12-0.12 0.187-0.28 0.187-0.467 0-0.16-0.067-0.333-0.187-0.469-0.253-0.251-0.707-0.24-0.947 0-0.12 0.122-0.2 0.294-0.2 0.469 0 0.187 0.080 0.347 0.2 0.478 0.12 0.122 0.293 0.202 0.467 0.202z"></path>
+      <path d="M18.019 22.714h1.384c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.384c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M18.019 18.714h1.384c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.384c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 22.714h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 26.715h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 18.714h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M31.51 15.406l-19.499-7.253c-0.342-0.128-0.728 0.046-0.858 0.392s0.048 0.73 0.394 0.858l1.805 0.672v6.784l-10.166 2.629c0 0 0 0-0.002 0l-2.618 0.675c-0.357 0.091-0.571 0.456-0.478 0.813 0.077 0.301 0.347 0.501 0.643 0.501 0.056 0 0.11-0.006 0.166-0.021l1.784-0.461v10.387c0 0.368 0.299 0.667 0.667 0.667h25.333c0.368 0 0.667-0.299 0.667-0.667v-15.354l1.693 0.629c0.077 0.027 0.157 0.042 0.234 0.042 0.27 0 0.525-0.166 0.626-0.435 0.128-0.344-0.045-0.728-0.39-0.856zM4.019 20.65l9.333-2.414v12.478h-1.333v-4.667c0-0.368-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667v4.667h-1.333v-10.064zM6.685 30.715v-4h4v4h-4zM18.686 30.715v-4h1.333v4h-1.333zM28.019 30.715h-6.667v-4.667c0-0.368-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667v4.667h-2.667v-20.144l13.333 4.962v15.182z"></path>
+    </svg>
+  )
+}
+
 export const Down = (props: IconProps) => {
   return (
     <svg viewBox={"0 0 32 32"} fill={props.fill ?? "currentColor"}>

package/src/page_components/listing/ListingsGroup.scss

@@ -6,44 +6,71 @@
 
 .listings-group__header {
   @apply flex;
-  @apply flex-row;
-  @apply flex-wrap;
+  @apply flex-col;
   @apply max-w-5xl;
   @apply m-auto;
   @apply mt-6;
   @apply mb-8;
   @apply p-3;
+  @apply justify-between;
+
+  @screen md {
+    @apply flex-row;
+  }
 }
 
 .listings-group__icon {
   @apply hidden;
-  @apply pt-2;
   @apply pr-5;
+  @apply mr-5;
+  @apply border-r-4;
+  @apply border-gray-700;
+  @apply items-center;
+  @apply hidden;
+  @screen md {
+    @apply flex;
+  }
+}
+
+.listings-group__content {
+  @apply flex;
+  @apply flex-row;
+  flex-grow: 2;
+  margin-right: 15px;
 
+  @apply max-w-full;
   @screen md {
-    @apply inline-block;
+    max-width: 70%;
   }
 }
 
 .listings-group__header-group {
-  @apply w-full;
+  max-width: inherit;
   @apply flex;
-  @apply items-center;
-  @apply mb-4;
+  @apply flex-col;
+  @apply items-start;
+  @apply justify-center;
+  @apply h-full;
+}
 
+.listings-group__info {
+  @apply text-gray-750;
+  @apply pt-1;
+  @apply pt-2;
   @screen md {
-    @apply w-7/12;
-    @apply mb-0;
+    @apply pt-0;
   }
 }
 
 .listings-group__button {
-  @apply w-full;
   @apply flex;
   @apply items-center;
-
+  flex-shrink: 0;
+  @apply ml-0;
+  @apply pt-5;
   @screen md {
-    @apply w-4/12;
+    @apply ml-6;
+    @apply pt-0;
   }
 }
 
@@ -51,15 +78,13 @@
   @apply uppercase;
   @apply font-alt-sans;
   @apply font-black;
-  @apply my-1;
   @apply tracking-widest;
   @apply border-b-4;
-  @apply border-gray-600;
+  @apply border-gray-700;
   @apply pb-1;
 
   @screen md {
-    @apply px-4;
-    @apply border-b-0;
-    @apply border-l-4;
+    @apply pb-0;
+    @apply border-0;
   }
 }

package/src/page_components/listing/ListingsGroup.tsx

@@ -1,43 +1,41 @@
 import React, { useState } from "react"
 import { Button } from "../../actions/Button"
-import { Icon } from "../../icons/Icon"
+import { Icon, IconTypes } from "../../icons/Icon"
 import "./ListingsGroup.scss"
 
 export interface ListingsGroupProps {
   children?: React.ReactNode
-  listingsCount: number
   header: string
+  hideButtonText: string
+  icon?: IconTypes
   info?: string
+  listingsCount: number
   showButtonText: string
-  hideButtonText: string
 }
 
 const ListingsGroup = (props: ListingsGroupProps) => {
   const [showListings, setShowListings] = useState(false)
   const toggleListings = () => setShowListings(!showListings)
 
-  let buttonText
-
   const listingsCount = ` (${props.listingsCount})`
-  if (showListings) {
-    buttonText = props.hideButtonText + listingsCount
-  } else {
-    buttonText = props.showButtonText + listingsCount
-  }
 
   return (
     <div className="listings-group">
       <div className="listings-group__header">
-        <div className="listings-group__icon">
-          <Icon size="xlarge" symbol="clock" />
-        </div>
-        <div className="listings-group__header-group">
-          <h2 className="listings-group__title">{props.header}</h2>
-          {props.info && <div className="px-4 my-2">{props.info}</div>}
+        <div className={"listings-group__content"}>
+          <div className="listings-group__icon">
+            <Icon size="xlarge" symbol={props.icon ?? `clock`} />
+          </div>
+          <div className="listings-group__header-group">
+            <h2 className="listings-group__title">{props.header}</h2>
+            {props.info && <div className="listings-group__info">{props.info}</div>}
+          </div>
         </div>
         <div className="listings-group__button">
           <Button className="w-full" onClick={() => toggleListings()}>
-            {buttonText}
+            {showListings
+              ? props.hideButtonText + listingsCount
+              : props.showButtonText + listingsCount}
           </Button>
         </div>
       </div>