Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod

Author: masoudmanson

packages/components/src/core/CellHeader/__storybook__/index.stories.tsx

@@ -20,6 +20,9 @@ export default {
       control: { type: "select" },
       options: ["left", "center", "right"],
     },
+    hover: {
+      control: { type: "boolean" },
+    },
     shouldShowTooltipOnHover: {
       control: { type: "boolean" },
     },
@@ -44,6 +47,7 @@ export const Default = {
     active: false,
     direction: "desc",
     hideSortIcon: false,
+    hover: false,
     shouldShowTooltipOnHover: true,
     tooltipProps: { sdsStyle: "dark" },
     tooltipText: "This is a header cell",

packages/components/src/core/CellHeader/__storybook__/stories/test.tsx

@@ -1,6 +1,7 @@
+import { Args } from "@storybook/types";
 import RawCellHeader from "src/core/CellHeader";
 
-export const TestDemo = (): JSX.Element => (
+export const TestDemo = (props: Args): JSX.Element => (
   <table>
     <tbody>
       <tr>
@@ -10,6 +11,8 @@ export const TestDemo = (): JSX.Element => (
           shouldShowTooltipOnHover
           active
           tooltipText="testTooltipTitle"
+          hover
+          {...props}
         >
           Header
         </RawCellHeader>

packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx

@@ -12,6 +12,7 @@ const CellBasicNameSpaceTest = (props: CellHeaderProps) => {
             direction="asc"
             active
             hideSortIcon
+            hover
             horizontalAlign="center"
             shouldShowTooltipOnHover
             tooltipProps={{ sdsStyle: "light" }}

packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,32 +5,15 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
   <tbody>
     <tr>
       <th
-        class="css-bony3j"
-        data-mui-internal-clone-element="true"
+        class="css-ezzkc2"
         direction="desc"
-        tabindex="0"
       >
         <div
           class="css-rm9mvq"
         >
           <span>
             Header
           </span>
-          <div
-            class="css-1ft6wgl"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-11x9hfs-MuiSvgIcon-root"
-              data-file-name="IconChevronDownSmall"
-              data-testid="IconChevronDownSmall"
-              fillcontrast="white"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-            />
-          </div>
         </div>
       </th>
     </tr>

packages/components/src/core/CellHeader/__tests__/index.test.tsx

@@ -16,7 +16,7 @@ describe("<CellHeader />", () => {
   });
 
   it("renders tooltip on hover", async () => {
-    render(<Test />);
+    render(<Test hover={true} />);
     const headerCellElement = screen.getByTestId("CellHeader");
     fireEvent.mouseOver(headerCellElement);
     await screen.findByText("testTooltipTitle");
@@ -29,8 +29,8 @@ describe("<CellHeader />", () => {
     expect(style.textAlign).toBe("right");
   });
 
-  it("renders a sort icon when header is active", async () => {
-    render(<Test />);
+  it("renders a sort icon when header is active and hover is true", async () => {
+    render(<Test hover={true} />);
     const headerCellElement = screen.getByTestId("CellHeader");
     const sortIcon =
       headerCellElement.getElementsByClassName("MuiSvgIcon-root")[0];

packages/components/src/core/CellHeader/index.tsx

@@ -16,6 +16,7 @@ interface CellHeaderContentProps {
   hideSortIcon?: boolean;
   horizontalAlign?: "left" | "center" | "right";
   children: React.ReactNode;
+  hover?: boolean;
 }
 
 interface CellHeaderRawProps
@@ -39,6 +40,7 @@ const CellHeaderContent = (
     direction = "desc",
     hideSortIcon = false,
     horizontalAlign,
+    hover,
   } = props;
 
   const sdsIconName: keyof IconNameToSizes =
@@ -61,7 +63,7 @@ const CellHeaderContent = (
   return (
     <StyledCellHeaderContainer horizontalAlign={horizontalAlign}>
       <span>{children}</span>
-      {(!hideSortIcon || active) && sortIcon}
+      {(!hideSortIcon || active) && hover && sortIcon}
     </StyledCellHeaderContainer>
   );
 };
@@ -74,10 +76,11 @@ const CellHeader = forwardRef<HTMLTableCellElement, CellHeaderProps>(
       tooltipProps,
       tooltipText = "",
       tooltipSubtitle,
+      hover = false,
       ...rest
     } = props;
 
-    if (shouldShowTooltipOnHover) {
+    if (shouldShowTooltipOnHover && hover) {
       return (
         <Tooltip
           arrow
@@ -87,15 +90,19 @@ const CellHeader = forwardRef<HTMLTableCellElement, CellHeaderProps>(
           title={tooltipText}
           {...tooltipProps}
         >
-          <StyledTableHeader ref={ref} {...rest}>
-            <CellHeaderContent {...props}>{children}</CellHeaderContent>
+          <StyledTableHeader ref={ref} hover={hover} {...rest}>
+            <CellHeaderContent {...props} hover={hover}>
+              {children}
+            </CellHeaderContent>
           </StyledTableHeader>
         </Tooltip>
       );
     }
     return (
-      <StyledTableHeader ref={ref} {...rest}>
-        <CellHeaderContent {...props}>{children}</CellHeaderContent>
+      <StyledTableHeader ref={ref} hover={hover} {...rest}>
+        <CellHeaderContent hover={hover} {...props}>
+          {children}
+        </CellHeaderContent>
       </StyledTableHeader>
     );
   }

packages/components/src/core/CellHeader/style.ts

@@ -12,6 +12,7 @@ export interface CellHeaderExtraProps extends CommonThemeProps {
   active?: boolean;
   hideSortIcon?: boolean;
   horizontalAlign?: "left" | "center" | "right";
+  hover?: boolean;
 }
 
 const contentPositionMapping = {
@@ -27,6 +28,7 @@ const doNotForwardProps = [
   "tooltipProps",
   "tooltipText",
   "hideSortIcon",
+  "hover",
 ];
 
 export const StyledSortingIcon = styled(Icon, {
@@ -55,28 +57,36 @@ export const StyledTableHeader = styled("th", {
   ${focusVisibleA11yStyle}
 
   ${(props: CellHeaderExtraProps) => {
-    const { active = false, horizontalAlign = "left" } = props;
+    const { active = false, horizontalAlign = "left", hover = true } = props;
 
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
 
+    const defaultColor = active
+      ? semanticColors?.accent?.textAction
+      : semanticColors?.base?.textSecondary;
+
+    const hoverColor = active
+      ? semanticColors?.accent?.textActionHover
+      : semanticColors?.base?.textPrimary;
+
     return `
-      color: ${active ? semanticColors?.accent?.textAction : semanticColors?.base?.textSecondary};
+      color: ${defaultColor};
       padding: ${spaces?.l}px ${spaces?.m}px;
       text-align: ${horizontalAlign};
       min-width: 96px;
-      cursor: pointer;
+      cursor: ${hover ? "pointer" : "default"};
       vertical-align: bottom;
 
       & .MuiButtonBase-root {
         outline: none;
       }
 
       &:hover {
-        color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary};
+        color: ${hover ? hoverColor : defaultColor};
 
         & .MuiButtonBase-root {
-          color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary};
+          color: ${hoverColor};
           opacity: 1;
         }
 

packages/components/src/core/Table/__storybook__/stories/default.tsx

@@ -19,8 +19,10 @@ export const Table = (props: Args): JSX.Element => {
         <CellHeader horizontalAlign="center" hideSortIcon>
           Category
         </CellHeader>
-        <CellHeader active>Active Header</CellHeader>
-        <CellHeader>
+        <CellHeader active hover>
+          Active Header
+        </CellHeader>
+        <CellHeader hover>
           A very long table header title to test sort icon positioning
         </CellHeader>
         <CellHeader hideSortIcon>Component</CellHeader>

packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
       class="css-fitsu2"
     >
       <th
-        class="css-13v2ecb"
+        class="css-t4gp9z"
       >
         <div
           class="css-187gjam"
@@ -74,7 +74,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-bony3j"
+        class="css-ezzkc2"
       >
         <div
           class="css-rm9mvq"
@@ -85,7 +85,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         </div>
       </th>
       <th
-        class="css-148k9j7"
+        class="css-1scpxyh"
       >
         <div
           class="css-wg04tn"

packages/components/src/core/TableHeader/__storybook__/stories/default.tsx

@@ -6,9 +6,11 @@ export const TableHeader = (props: Args): JSX.Element => {
   return (
     <table>
       <RawTableHeader {...props}>
-        <CellHeader active>Column 1</CellHeader>
-        <CellHeader>Column 2</CellHeader>
-        <CellHeader>Column 3</CellHeader>
+        <CellHeader active hover>
+          Column 1
+        </CellHeader>
+        <CellHeader hover>Column 2</CellHeader>
+        <CellHeader hover>Column 3</CellHeader>
       </RawTableHeader>
     </table>
   );

packages/components/src/core/TableHeader/__storybook__/stories/test.tsx

@@ -4,9 +4,11 @@ import RawTableHeader from "src/core/TableHeader";
 export const TestDemo = (): JSX.Element => (
   <table>
     <RawTableHeader data-testid="TableHeader">
-      <CellHeader active>Column 1</CellHeader>
-      <CellHeader>Column 2</CellHeader>
-      <CellHeader>Column 3</CellHeader>
+      <CellHeader active hover>
+        Column 1
+      </CellHeader>
+      <CellHeader hover>Column 2</CellHeader>
+      <CellHeader hover>Column 3</CellHeader>
     </RawTableHeader>
   </table>
 );