Merge pull request #647 from zendesk/daniel_munera/GG-4255_Fix_Use_colors_from_team_settings

GG-4255: fix: Use colours from team settings in the services page

Author: dmuneras

package.json

@@ -109,7 +109,8 @@
     "wait-on": "8.0.3"
   },
   "resolutions": {
-    "@types/react": "^17.x"
+    "@types/react": "^17.x",
+    "nwsapi": "^2.2.20"
   },
   "commitlint": {
     "extends": [

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

@@ -0,0 +1,107 @@
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "styled-components";
+import { DEFAULT_THEME } from "@zendeskgarden/react-theming";
+import ServiceCatalogListItem from "./ServiceCatalogListItem";
+import type { ServiceCatalogItem } from "../../data-types/ServiceCatalogItem";
+import { userEvent } from "@testing-library/user-event";
+
+jest.mock("@zendeskgarden/svg-icons/src/16/shapes-fill.svg", () => {
+  return function MockShapesIcon() {
+    return <div data-testid="atl-nacional" />;
+  };
+});
+
+const theme = {
+  ...DEFAULT_THEME,
+  colors: {
+    ...DEFAULT_THEME.colors,
+    foreground: "#ff0000",
+    primaryHue: "#0000ff",
+  },
+};
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
+};
+
+describe("ServiceCatalogListItem", () => {
+  const mockServiceItem: ServiceCatalogItem = {
+    id: 1989,
+    name: "Atl Nacional keyboard",
+    description: "This is a keyboard from Atl Nacional",
+    form_id: 456,
+  };
+
+  const mockHelpCenterPath = "/hc/en-us";
+
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("Rendering", () => {
+    it("should render the service item with correct content", () => {
+      renderWithTheme(
+        <ServiceCatalogListItem
+          serviceItem={mockServiceItem}
+          helpCenterPath={mockHelpCenterPath}
+        />
+      );
+
+      expect(screen.getByText(mockServiceItem.name)).toBeInTheDocument();
+      expect(screen.getByText(mockServiceItem.description)).toBeInTheDocument();
+      expect(screen.getByTestId("atl-nacional")).toBeInTheDocument();
+    });
+
+    it("should render as a link with correct href", () => {
+      renderWithTheme(
+        <ServiceCatalogListItem
+          serviceItem={mockServiceItem}
+          helpCenterPath={mockHelpCenterPath}
+        />
+      );
+
+      const linkElement = screen.getByRole("link");
+
+      expect(linkElement).toHaveAttribute(
+        "href",
+        `${mockHelpCenterPath}/services/${mockServiceItem.id}`
+      );
+    });
+
+    it("should use the theme foreground color as text color", () => {
+      renderWithTheme(
+        <ServiceCatalogListItem
+          serviceItem={mockServiceItem}
+          helpCenterPath={mockHelpCenterPath}
+        />
+      );
+
+      const itemContainer = screen.getByTestId(
+        "service-catalog-list-item-container"
+      );
+      expect(itemContainer).toHaveStyle(`color: ${theme.colors.foreground}`);
+    });
+
+    it("should use primaryHue as card border color on hover", async () => {
+      renderWithTheme(
+        <ServiceCatalogListItem
+          serviceItem={mockServiceItem}
+          helpCenterPath={mockHelpCenterPath}
+        />
+      );
+
+      const user = userEvent.setup();
+      const itemContainer = screen.getByTestId(
+        "service-catalog-list-item-container"
+      );
+      const defaultBorderColor = DEFAULT_THEME.palette.grey?.[300];
+
+      expect(defaultBorderColor).toBeTruthy();
+      expect(itemContainer).toHaveStyle(`border-color: ${defaultBorderColor}`);
+
+      await user.hover(itemContainer);
+
+      expect(itemContainer).toHaveStyle(
+        `border-color: ${theme.colors.primaryHue}`
+      );
+    });
+  });
+});

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

@@ -11,17 +11,15 @@ const ItemContainer = styled.a`
   padding: ${(props) => props.theme.space.md};
   border: ${(props) => props.theme.borders.sm}
     ${(props) => getColorV8("grey", 300, props.theme)};
-  color: ${(props) => getColorV8("grey", 800, props.theme)};
+  color: ${(props) => props.theme.colors.foreground};
 
   &:hover {
-    text-decoration: none;
-    border: ${(props) => props.theme.borders.sm};
-    border-color: ${(props) => getColorV8("blue", 600, props.theme)};
+    border-color: ${(props) => props.theme.colors.primaryHue};
   }
 
+  &:hover,
   &:visited {
     text-decoration: none;
-    color: ${(props) => getColorV8("grey", 800, props.theme)};
   }
 `;
 
@@ -49,6 +47,7 @@ const TextContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: ${(props) => props.theme.space.xxs};
+  color: ${(props) => props.theme.colors.foreground};
 `;
 
 const IconContainer = styled.div`
@@ -69,7 +68,10 @@ const ServiceCatalogListItem = ({
   helpCenterPath: string;
 }) => {
   return (
-    <ItemContainer href={`${helpCenterPath}/services/${serviceItem.id}`}>
+    <ItemContainer
+      data-testid="service-catalog-list-item-container"
+      href={`${helpCenterPath}/services/${serviceItem.id}`}
+    >
       <IconContainer>
         <ShapesIcon />
       </IconContainer>

yarn.lock

@@ -10836,10 +10836,10 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.2:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
-  integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
+nwsapi@^2.2.2, nwsapi@^2.2.20:
+  version "2.2.20"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.20.tgz#22e53253c61e7b0e7e93cef42c891154bcca11ef"
+  integrity sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==
 
 object-assign@^4, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"