Merge pull request #650 from zendesk/maciejlorens/GG-4327-cph-theme-display-thumbnails-in-the-services-page

feat: display thumbnails in the services item list

Author: zendesk-maciej-lorens

src/modules/service-catalog/components/item-thumbnail/ItemThumbnail.tsx

@@ -0,0 +1,29 @@
+import ShapesIcon from "@zendeskgarden/svg-icons/src/16/shapes-fill.svg";
+import styled from "styled-components";
+import { getColorV8 } from "@zendeskgarden/react-theming";
+import { Avatar } from "@zendeskgarden/react-avatars";
+
+const StyledAvatar = styled(Avatar)<{ size: "medium" | "large" }>`
+  background-color: ${(props) => getColorV8("grey", 100, props.theme)};
+  width: ${(props) => (props.size === "large" ? 72 : 40)}px !important;
+  height: ${(props) => (props.size === "large" ? 72 : 40)}px !important;
+
+  && > svg {
+    width: ${(props) => (props.size === "large" ? 28 : 16)}px;
+    height: ${(props) => (props.size === "large" ? 28 : 16)}px;
+    color: ${(props) => getColorV8("grey", 600, props.theme)};
+  }
+`;
+
+type ItemThumbnailProps = {
+  size: "medium" | "large";
+  url?: string | null;
+};
+
+export const ItemThumbnail = ({ size, url }: ItemThumbnailProps) => {
+  return (
+    <StyledAvatar size={size} isSystem>
+      {url ? <img src={url} alt="" /> : <ShapesIcon aria-hidden="true" />}
+    </StyledAvatar>
+  );
+};

src/modules/service-catalog/components/service-catalog-item/CollapsibleDescription.tsx

@@ -6,6 +6,7 @@ import ChevronDown from "@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg";
 import { useTranslation } from "react-i18next";
 import { getColorV8 } from "@zendeskgarden/react-theming";
 import { XXXL } from "@zendeskgarden/react-typography";
+import { ItemThumbnail } from "../item-thumbnail/ItemThumbnail";
 
 const DescriptionWrapper = styled.div`
   border-bottom: ${(props) => props.theme.borders.sm}
@@ -20,6 +21,7 @@ const DescriptionWrapper = styled.div`
 
 const ItemTitle = styled(XXXL)`
   font-weight: ${(props) => props.theme.fontWeights.semibold};
+  margin-bottom: 0;
 `;
 
 const CollapsibleText = styled.div<{ expanded: boolean }>`
@@ -44,16 +46,25 @@ const ToggleButton = styled(Button)`
   }
 `;
 
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(props) => props.theme.space.md};
+`;
+
 interface CollapsibleDescriptionProps {
   title: string;
   description: string;
+  thumbnailUrl: string;
 }
 
 const DESCRIPTION_LENGTH_THRESHOLD = 270;
 
 export const CollapsibleDescription = ({
   title,
   description,
+  thumbnailUrl,
 }: CollapsibleDescriptionProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const { t } = useTranslation();
@@ -66,7 +77,10 @@ export const CollapsibleDescription = ({
 
   return (
     <DescriptionWrapper>
-      <ItemTitle tag="h1">{title}</ItemTitle>
+      <HeaderContainer>
+        <ItemThumbnail size="large" url={thumbnailUrl} />
+        <ItemTitle tag="h1">{title}</ItemTitle>
+      </HeaderContainer>
       {description && (
         <CollapsibleText
           className="service-catalog-description"

src/modules/service-catalog/components/service-catalog-item/ItemRequestForm.tsx

@@ -113,6 +113,7 @@ export function ItemRequestForm({
         <CollapsibleDescription
           title={serviceCatalogItem.name}
           description={serviceCatalogItem.description}
+          thumbnailUrl={serviceCatalogItem.thumbnail_url}
         />
         <FieldsContainer>
           {requestFields.map((field) => (

src/modules/service-catalog/components/service-catalog-list/ServiceCatalogListItem.spec.tsx

@@ -30,6 +30,7 @@ describe("ServiceCatalogListItem", () => {
     name: "Atl Nacional keyboard",
     description: "This is a keyboard from Atl Nacional",
     form_id: 456,
+    thumbnail_url: "",
   };
 
   const mockHelpCenterPath = "/hc/en-us";

src/modules/service-catalog/components/service-catalog-list/ServiceCatalogListItem.tsx

@@ -1,7 +1,7 @@
 import type { ServiceCatalogItem } from "../../data-types/ServiceCatalogItem";
-import ShapesIcon from "@zendeskgarden/svg-icons/src/16/shapes-fill.svg";
 import styled from "styled-components";
 import { getColorV8 } from "@zendeskgarden/react-theming";
+import { ItemThumbnail } from "../item-thumbnail/ItemThumbnail";
 
 const ItemContainer = styled.a`
   display: flex;
@@ -48,16 +48,7 @@ const TextContainer = styled.div`
   align-items: flex-start;
   gap: ${(props) => props.theme.space.xxs};
   color: ${(props) => props.theme.colors.foreground};
-`;
-
-const IconContainer = styled.div`
-  color: ${(props) => getColorV8("grey", 600, props.theme)};
-  background-color: ${(props) => getColorV8("grey", 100, props.theme)};
-  margin-bottom: ${(props) => props.theme.space.sm};
-  width: ${(props) => props.theme.space.xl};
-  height: ${(props) => props.theme.space.xl};
-  text-align: center;
-  align-content: center;
+  margin-top: ${(props) => props.theme.space.sm};
 `;
 
 const ServiceCatalogListItem = ({
@@ -72,9 +63,7 @@ const ServiceCatalogListItem = ({
       data-testid="service-catalog-list-item-container"
       href={`${helpCenterPath}/services/${serviceItem.id}`}
     >
-      <IconContainer>
-        <ShapesIcon />
-      </IconContainer>
+      <ItemThumbnail size="medium" url={serviceItem.thumbnail_url} />
       <TextContainer>
         <ItemTitle>{serviceItem.name}</ItemTitle>
         <ItemDescription>{serviceItem.description}</ItemDescription>

src/modules/service-catalog/data-types/ServiceCatalogItem.ts

@@ -3,4 +3,5 @@ export interface ServiceCatalogItem {
   name: string;
   description: string;
   form_id: number;
+  thumbnail_url: string;
 }

src/modules/service-catalog/hooks/useItemFormFields.spec.ts

@@ -8,6 +8,7 @@ describe("useItemFormFields", () => {
     name: "Test Item",
     description: "Test Description",
     form_id: 1,
+    thumbnail_url: "",
   };
 
   const textField = {