[OUR415-244] Adds styling to search result cards to distinguish Servi…

…ces from Organizations (#231)

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("<LabelTagRows />", () => {
+  it("should show top level category labels if they exist", () => {
+    const fake_category = {
+      id: 4558736345530368,
+      name: "Rene Lebsack",
+      top_level: true,
+      featured: true,
+    };
+
+    render(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[fake_category]} eligibilities={[]} />
+        </tbody>
+      </table>
+    );
+
+    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(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[fake_category]} eligibilities={[]} />
+        </tbody>
+      </table>
+    );
+
+    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(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[fake_category]} eligibilities={[]} />
+        </tbody>
+      </table>
+    );
+
+    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(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[fake_category]} eligibilities={[]} />
+        </tbody>
+      </table>
+    );
+
+    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(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[]} eligibilities={[fake_eligibility]} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.getByTestId("eligibilities")).toHaveTextContent(
+      fake_eligibility.name
+    );
+  });
+
+  it("should not show eligibility labels if they are empty", () => {
+    render(
+      <table>
+        <tbody>
+          <LabelTagRows categories={[]} eligibilities={[]} />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.queryByTestId("eligibilities")).not.toBeInTheDocument();
+  });
+
+  it("should not show eligibility or category labels if they are not passed", () => {
+    render(
+      <table>
+        <tbody>
+          <LabelTagRows />
+        </tbody>
+      </table>
+    );
+
+    expect(screen.queryByTestId("eligibilities")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("top-level-categories")
+    ).not.toBeInTheDocument();
+    expect(screen.queryByTestId("subcategories")).not.toBeInTheDocument();
+  });
+});

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 && (
         <tr>
           <th>Categories</th>
-          <td className={styles.labelTags}>
-            {topLevelCategories.map((srv) => (
-              <LabelTag label={srv.name} />
+          <td data-testid={"top-level-categories"} className={styles.labelTags}>
+            {topLevelCategories.map((category) => (
+              <LabelTag key={category.id} label={category.name} />
             ))}
           </td>
         </tr>
       )}
 
-      {subcategories.length > 0 && (
+      {subcategories && subcategories.length > 0 && (
         <tr>
           <th>Subcategories</th>
-          <td className={styles.labelTags}>
-            {subcategories.map((srv) => (
-              <LabelTag label={srv.name} />
+          <td data-testid={"subcategories"} className={styles.labelTags}>
+            {subcategories.map((category) => (
+              <LabelTag key={category.id} label={category.name} />
             ))}
           </td>
         </tr>
       )}
 
-      {service.eligibilities.length > 0 && (
+      {eligibilities && eligibilities.length > 0 && (
         <tr>
           <th>Eligibilities</th>
-          <td className={styles.labelTags}>
-            {service.eligibilities.map((srv) => (
-              <LabelTag label={srv.name} />
+          <td data-testid={"eligibilities"} className={styles.labelTags}>
+            {eligibilities.map((eligibility) => (
+              <LabelTag key={eligibility.id} label={eligibility.name} />
             ))}
           </td>
         </tr>

app/components/search/SearchResults/SearchResult.tsx

@@ -44,28 +44,7 @@ export const SearchResult = forwardRef<HTMLDivElement, SearchResultProps>(
                 )}
               </div>
               <div className={styles.searchResultSubcatContainer}>
-                {hit.categories.length > 0 && (
-                  <LabelTag label={hit.categories[0].toString()} />
-                )}
-                {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 */
-                  <Tooltip
-                    title={hit.categories.slice(1).join(", ")}
-                    position="top"
-                    trigger="mouseenter"
-                    delay={100}
-                    animation="none"
-                    arrow
-                  >
-                    <LabelTag
-                      label={`+${hit.categories.length - 1}`}
-                      withTooltip
-                    />
-                  </Tooltip>
-                )}
+                <LabelTag label={hit.type} />
               </div>
             </div>
           </div>

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;
 }

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 (
+      <span className={classNames(styles.labelTag, styles.organizationType)}>
+        Organization
+      </span>
+    );
+  }
 
-  const tagClasses = classNames(
-    styles.labelTag,
-    withTooltip && styles.withTooltip
-  );
+  if (label === SHELTER_TECH_TYPE_FOR_SERVICE) {
+    return (
+      <span className={classNames(styles.labelTag, styles.serviceType)}>
+        Service
+      </span>
+    );
+  }
 
-  return <span className={tagClasses}>{label}</span>;
+  return <span className={classNames(styles.labelTag)}>{label}</span>;
 };

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;

app/pages/ServiceListingPage/ServiceListingPage.tsx

@@ -134,7 +134,9 @@ export const ServiceListingPage = () => {
         <ListingInfoSection title="Contact" data-cy="service-contact-section">
           <ListingInfoTable
             rows={[serviceFallback]}
-            rowRenderer={(srv) => <ContactInfoTableRows service={srv} />}
+            rowRenderer={(srv) => (
+              <ContactInfoTableRows key={srv.id} service={srv} />
+            )}
           />
         </ListingInfoSection>
       </ListingPageWrapper>
@@ -234,7 +236,9 @@ export const ServiceListingPage = () => {
       <ListingInfoSection title="Contact" data-cy="service-contact-section">
         <ListingInfoTable
           rows={[service]}
-          rowRenderer={(srv) => <ContactInfoTableRows service={srv} />}
+          rowRenderer={(srv) => (
+            <ContactInfoTableRows key={srv.id} service={srv} />
+          )}
         />
       </ListingInfoSection>
 
@@ -274,7 +278,10 @@ export const ServiceListingPage = () => {
           data-cy="service-tags-section"
         >
           <ListingInfoTable>
-            <LabelTagRows service={service} />
+            <LabelTagRows
+              categories={service.categories}
+              eligibilities={service.eligibilities}
+            />
           </ListingInfoTable>
         </ListingInfoSection>
       )}

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;