From 86e1e95362e5494dc54abc3ba9245b2782685d62 Mon Sep 17 00:00:00 2001 From: Ross Chapman Date: Wed, 23 Oct 2024 14:45:54 -0700 Subject: [PATCH] [OUR415-244] Adds styling to search result cards to distinguish Services from Organizations (#231) --- app/components/listing/LabelTagRows.test.tsx | 138 ++++++++++++++++++ app/components/listing/LabelTagRows.tsx | 38 ++--- .../search/SearchResults/SearchResult.tsx | 23 +-- app/components/ui/LabelTag.module.scss | 8 +- app/components/ui/LabelTag.tsx | 35 +++-- .../ui/Navigation/Navigation.module.scss | 5 - .../ServiceListingPage/ServiceListingPage.tsx | 13 +- app/styles/utils/_colors.scss | 4 - 8 files changed, 200 insertions(+), 64 deletions(-) create mode 100644 app/components/listing/LabelTagRows.test.tsx diff --git a/app/components/listing/LabelTagRows.test.tsx b/app/components/listing/LabelTagRows.test.tsx new file mode 100644 index 000000000..ebc65838e --- /dev/null +++ b/app/components/listing/LabelTagRows.test.tsx @@ -0,0 +1,138 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import LabelTagRows from "components/listing/LabelTagRows"; + +describe("", () => { + it("should show top level category labels if they exist", () => { + const fake_category = { + id: 4558736345530368, + name: "Rene Lebsack", + top_level: true, + featured: true, + }; + + render( + + + + +
+ ); + + expect(screen.getByTestId("top-level-categories")).toHaveTextContent( + fake_category.name + ); + }); + + it("should not show top level category labels if they are empty", () => { + const fake_category = { + id: 4558736345530368, + name: "Rene Lebsack", + top_level: false, + featured: true, + }; + + render( + + + + +
+ ); + + expect( + screen.queryByTestId("top-level-categories") + ).not.toBeInTheDocument(); + }); + + it("should show subcategory labels if they exist", () => { + const fake_category = { + id: 4558736345530368, + name: "Rene Lebsack", + top_level: false, + featured: true, + }; + + render( + + + + +
+ ); + + expect(screen.getByTestId("subcategories")).toHaveTextContent( + fake_category.name + ); + expect( + screen.queryByTestId("top-level-categories") + ).not.toBeInTheDocument(); + }); + + it("should not show subcategory labels if they are empty", () => { + const fake_category = { + id: 4558736345530368, + name: "Rene Lebsack", + top_level: true, + featured: true, + }; + + render( + + + + +
+ ); + + expect(screen.queryByTestId("subcategories")).not.toBeInTheDocument(); + }); + + it("should show eligibility labels if they exist", () => { + const fake_eligibility = { + id: 3185842451382272, + name: "Mr. Frank Larson DVM", + feature_rank: null, + }; + + render( + + + + +
+ ); + + expect(screen.getByTestId("eligibilities")).toHaveTextContent( + fake_eligibility.name + ); + }); + + it("should not show eligibility labels if they are empty", () => { + render( + + + + +
+ ); + + expect(screen.queryByTestId("eligibilities")).not.toBeInTheDocument(); + }); + + it("should not show eligibility or category labels if they are not passed", () => { + render( + + + + +
+ ); + + expect(screen.queryByTestId("eligibilities")).not.toBeInTheDocument(); + expect( + screen.queryByTestId("top-level-categories") + ).not.toBeInTheDocument(); + expect(screen.queryByTestId("subcategories")).not.toBeInTheDocument(); + }); +}); diff --git a/app/components/listing/LabelTagRows.tsx b/app/components/listing/LabelTagRows.tsx index 723231f00..e0451112d 100644 --- a/app/components/listing/LabelTagRows.tsx +++ b/app/components/listing/LabelTagRows.tsx @@ -3,44 +3,48 @@ import { LabelTag } from "components/ui/LabelTag"; import { Service } from "../../models"; import styles from "./LabelTagRows.module.scss"; -const LabelTagRows = ({ service }: { service: Service }) => { - const topLevelCategories = service.categories?.filter( +const LabelTagRows = ({ + categories, + eligibilities, +}: { + categories?: Service["categories"]; + eligibilities?: Service["eligibilities"]; +}) => { + const topLevelCategories = categories?.filter( (srv) => srv.top_level === true ); - const subcategories = service.categories?.filter( - (srv) => srv.top_level === false - ); + const subcategories = categories?.filter((srv) => srv.top_level === false); return ( <> - {topLevelCategories.length > 0 && ( + {topLevelCategories && topLevelCategories.length > 0 && ( Categories - - {topLevelCategories.map((srv) => ( - + + {topLevelCategories.map((category) => ( + ))} )} - {subcategories.length > 0 && ( + {subcategories && subcategories.length > 0 && ( Subcategories - - {subcategories.map((srv) => ( - + + {subcategories.map((category) => ( + ))} )} - {service.eligibilities.length > 0 && ( + {eligibilities && eligibilities.length > 0 && ( Eligibilities - - {service.eligibilities.map((srv) => ( - + + {eligibilities.map((eligibility) => ( + ))} diff --git a/app/components/search/SearchResults/SearchResult.tsx b/app/components/search/SearchResults/SearchResult.tsx index a92408f82..a585daac5 100644 --- a/app/components/search/SearchResults/SearchResult.tsx +++ b/app/components/search/SearchResults/SearchResult.tsx @@ -44,28 +44,7 @@ export const SearchResult = forwardRef( )}
- {hit.categories.length > 0 && ( - - )} - {hit.categories.length > 1 && ( - // After pckg update TS started complaining about this, pckg is possibly - // mis-typed - /* eslint-disable @typescript-eslint/ban-ts-comment */ - /* @ts-ignore */ - - - - )} +
diff --git a/app/components/ui/LabelTag.module.scss b/app/components/ui/LabelTag.module.scss index 9386cd039..e2ae78a49 100644 --- a/app/components/ui/LabelTag.module.scss +++ b/app/components/ui/LabelTag.module.scss @@ -20,6 +20,10 @@ } } -.withTooltip { - cursor: pointer; +// TODO: Ask design what how we should name/describe these colors +.serviceType { + background: #fce8e5; +} +.organizationType { + background: #e1effe; } diff --git a/app/components/ui/LabelTag.tsx b/app/components/ui/LabelTag.tsx index 92f26cd3f..c3d859e13 100644 --- a/app/components/ui/LabelTag.tsx +++ b/app/components/ui/LabelTag.tsx @@ -2,18 +2,31 @@ import React from "react"; import classNames from "classnames"; import styles from "./LabelTag.module.scss"; -interface LabelTagProps { - label: string; - withTooltip?: boolean; -} +// This component relies on the shape and naming conventions of data Shelter +// Tech syncs to Algolia which distinguishes service and organization results +// with a "type" field. It's unlikely this will change without our knowledge but developers +// should be aware of the possibility. +// +// THOUGHT: replacing with enum if another type is added +const SHELTER_TECH_TYPE_FOR_ORGANIZATION = "resource"; +const SHELTER_TECH_TYPE_FOR_SERVICE = "service"; -export const LabelTag = (props: LabelTagProps) => { - const { label, withTooltip = false } = props; +export const LabelTag = ({ label }: { label: string }) => { + if (label === SHELTER_TECH_TYPE_FOR_ORGANIZATION) { + return ( + + Organization + + ); + } - const tagClasses = classNames( - styles.labelTag, - withTooltip && styles.withTooltip - ); + if (label === SHELTER_TECH_TYPE_FOR_SERVICE) { + return ( + + Service + + ); + } - return {label}; + return {label}; }; diff --git a/app/components/ui/Navigation/Navigation.module.scss b/app/components/ui/Navigation/Navigation.module.scss index 086661de0..339b32ee5 100644 --- a/app/components/ui/Navigation/Navigation.module.scss +++ b/app/components/ui/Navigation/Navigation.module.scss @@ -9,11 +9,6 @@ border-bottom: 1px solid $color-grey3; } -// TODO: Remove with other white labeled sites -.siteNavSFFamilies { - background: $color-sffamilies-nav; -} - .primaryRow { display: flex; flex-wrap: nowrap; diff --git a/app/pages/ServiceListingPage/ServiceListingPage.tsx b/app/pages/ServiceListingPage/ServiceListingPage.tsx index 4ebd1857d..ab226eda2 100644 --- a/app/pages/ServiceListingPage/ServiceListingPage.tsx +++ b/app/pages/ServiceListingPage/ServiceListingPage.tsx @@ -134,7 +134,9 @@ export const ServiceListingPage = () => { } + rowRenderer={(srv) => ( + + )} /> @@ -234,7 +236,9 @@ export const ServiceListingPage = () => { } + rowRenderer={(srv) => ( + + )} /> @@ -274,7 +278,10 @@ export const ServiceListingPage = () => { data-cy="service-tags-section" > - + )} diff --git a/app/styles/utils/_colors.scss b/app/styles/utils/_colors.scss index 958625539..c5ff97c79 100644 --- a/app/styles/utils/_colors.scss +++ b/app/styles/utils/_colors.scss @@ -192,7 +192,3 @@ $link-blue-active: #233876; $card-hover: $gray-50; $border-primary: $gray-200; - -//////////////////////////////////////////////////////////////////////////////////////// -// SFFAMILIES COLORS -$color-sffamilies-nav: #ededed;