fix(tabs): update Tabs to match style specs (#96)

.husky/pre-commit

@@ -2,5 +2,3 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
-
-yarn test

jest.config.js

@@ -1,6 +1,7 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   preset: "ts-jest",
+  moduleDirectories: ["node_modules", "<rootDir>"],
   testEnvironment: "jsdom",
   globals: {
     "ts-jest": {

src/core/Callout/components/CalloutTitle/style.ts

@@ -5,13 +5,13 @@ import { fontBody, getSpaces } from "src/core/styles";
 const fontBodyXs = fontBody("xs");
 
 export const StyledCalloutTitle = styled(AlertTitle)`
-  ${fontBodyXs};
+  ${fontBodyXs}
 
   ${(props) => {
     const spacings = getSpaces(props);
 
     return `
     margin: ${spacings?.xxxs}px 0 ${spacings?.xs}px;
   `;
-  }};
+  }}
 `;

src/core/Tabs/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tabs /> Test story renders snapshot 1`] = `
+<div
+  class="MuiTabs-root css-m4aju7"
+  data-testid="tabs"
+>
+  <div
+    class="MuiTabs-scroller MuiTabs-fixed"
+    style="overflow: hidden;"
+  >
+    <div
+      class="MuiTabs-flexContainer"
+      role="tablist"
+    >
+      <button
+        aria-selected="true"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit css-17gm9np Mui-selected"
+        role="tab"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiTab-wrapper"
+        >
+          Tab One
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        aria-selected="false"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit css-17gm9np"
+        role="tab"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="MuiTab-wrapper"
+        >
+          Tab Two
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <span
+      class="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 css-1r8eawc"
+      style="left: 0px; width: 0px;"
+    />
+  </div>
+</div>
+`;

src/core/Tabs/index.stories.tsx

@@ -1,8 +1,26 @@
-import { Meta, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React, { useState } from "react";
+import { noop } from "src/common/utils";
 import Tabs, { Tab, TabsProps } from "./index";
 
 export default {
+  argTypes: {
+    tabOneLabel: {
+      control: {
+        type: "text",
+      },
+    },
+    tabTwoLabel: {
+      control: {
+        type: "text",
+      },
+    },
+    underlined: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
   component: Tabs,
   title: "Tabs",
 } as Meta;
@@ -12,11 +30,9 @@ interface TabsArgs extends TabsProps {
   tabTwoLabel: string;
 }
 
-const Template: Story<TabsArgs> = ({
-  tabOneLabel,
-  tabTwoLabel,
-  ...args
-}: TabsArgs) => {
+const Template: Story<TabsArgs> = (props: TabsArgs) => {
+  const { tabOneLabel, tabTwoLabel, ...args } = props;
+
   const [value, setValue] = useState(0);
 
   const handleTabsChange = (
@@ -33,10 +49,85 @@ const Template: Story<TabsArgs> = ({
     </Tabs>
   );
 };
+
+// Default
 export const Default = Template.bind({});
 
 Default.args = {
   tabOneLabel: "Upload from Your Computer",
   tabTwoLabel: "Upload from Basespace",
   underlined: true,
 };
+
+Default.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
+
+// LivePreview
+const livePreviewWrapperStyle: React.CSSProperties = {
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  gap: "20px",
+  width: "100%",
+};
+
+function LivePreviewDemo(props: Args): JSX.Element {
+  const finalProps = {
+    ...props,
+    style: { width: "400px" },
+  };
+
+  return (
+    <div style={livePreviewWrapperStyle}>
+      <Template
+        tabOneLabel="Tab One"
+        tabTwoLabel="Tab Two"
+        onChange={noop}
+        {...finalProps}
+      />
+      <Template
+        {...finalProps}
+        onChange={noop}
+        tabOneLabel="Tab One"
+        tabTwoLabel="Tab Two"
+        underlined
+      />
+    </div>
+  );
+}
+
+const LivePreviewTemplate: Story = (args) => <LivePreviewDemo {...args} />;
+
+export const LivePreview = LivePreviewTemplate.bind({});
+
+LivePreview.args = {
+  tabOneLabel: "Upload from Your Computer",
+  tabTwoLabel: "Upload from Basespace",
+};
+
+LivePreview.parameters = {
+  snapshot: {
+    skip: true,
+  },
+};
+
+// Test
+function TestDemo(props: Args): JSX.Element {
+  return (
+    <Template
+      {...props}
+      onChange={noop}
+      tabOneLabel="Tab One"
+      tabTwoLabel="Tab Two"
+      data-testid="tabs"
+      underlined
+    />
+  );
+}
+
+const TestTemplate: Story = (args) => <TestDemo {...args} />;
+
+export const Test = TestTemplate.bind({});

src/core/Tabs/index.test.tsx

@@ -0,0 +1,31 @@
+import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { composeStory } from "@storybook/testing-react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import * as snapshotTestStoryFile from "./index.stories";
+import Meta, { Test as TestStory } from "./index.stories";
+
+// Returns a component that already contain all decorators from story level, meta level and global level.
+const Test = composeStory(TestStory, Meta);
+
+describe("<Tabs />", () => {
+  generateSnapshots(snapshotTestStoryFile);
+
+  it("renders Tabs component", () => {
+    render(<Test />);
+
+    const element = screen.getByTestId("tabs");
+
+    expect(element).not.toBeNull();
+  });
+
+  it("renders tab texts", () => {
+    render(<Test />);
+
+    const Label1 = screen.getByText(/Tab One/i);
+    const Label2 = screen.getByText(/Tab Two/i);
+
+    expect(Label1).toBeTruthy();
+    expect(Label2).toBeTruthy();
+  });
+});

src/core/Tabs/index.tsx

@@ -37,12 +37,15 @@ const StyledTabs = styled(TempTabs, {
   ${(props) => {
     const { underlined } = props;
     const colors = getColors(props);
+    const spaces = getSpaces(props);
 
     return `
       box-sizing: border-box;
       padding-bottom: 0px;
-      margin-bottom: 0px;
-      border-bottom: ${underlined ? `3px solid ${colors?.gray[200]};` : "none"};
+      margin-top: ${spaces?.l}px;
+      margin-bottom: ${spaces?.xl}px;
+      min-height: unset;
+      border-bottom: ${underlined ? `2px solid ${colors?.gray[200]};` : "none"};
       position: relative;
       z-index: 1;
       overflow: inherit;
@@ -59,8 +62,8 @@ const TabIndicator = (theme: AppThemeOptions) => {
 
   return css`
     background-color: ${colors?.primary[400]};
-    height: 3px;
-    bottom: -3px;
+    height: 2px;
+    bottom: -2px;
     z-index: 2;
   `;
 };
@@ -81,18 +84,22 @@ export default Tabs;
 export const Tab = styled(RawTab)`
   ${(props) => {
     const colors = getColors(props);
-    const spacings = getSpaces(props);
+    const spaces = getSpaces(props);
     const palette = getPalette(props);
 
     return `
-      color: ${colors?.gray[500]};
+      color: black;
       text-transform: none;
-      height: 20px;
+      min-height: unset;
+      // (thuang): Large Tab height is 30px, the offset is 4px
+      height: 26px;
       font-style: normal;
       font-weight: 600;
       font-size: 14px;
       line-height: 20px;
-      padding-bottom: ${spacings?.xxs}px;
+      padding: 0;
+      margin: 0 ${spaces?.xl}px ${spaces?.xxs}px 0;
+      min-width: 32px;
       &:hover {
         color: ${colors?.gray[600]};
       }