From 55e380fbded4b93900eaf66661fa27d36b1804a0 Mon Sep 17 00:00:00 2001 From: Timmy Huang Date: Tue, 21 Dec 2021 13:41:38 -0800 Subject: [PATCH] fix(tabs): update Tabs to match style specs (#96) --- .husky/pre-commit | 2 - jest.config.js | 1 + .../Callout/components/CalloutTitle/style.ts | 4 +- .../Tabs/__snapshots__/index.test.tsx.snap | 55 ++++++++++ src/core/Tabs/index.stories.tsx | 103 +++++++++++++++++- src/core/Tabs/index.test.tsx | 31 ++++++ src/core/Tabs/index.tsx | 23 ++-- 7 files changed, 201 insertions(+), 18 deletions(-) create mode 100644 src/core/Tabs/__snapshots__/index.test.tsx.snap create mode 100644 src/core/Tabs/index.test.tsx diff --git a/.husky/pre-commit b/.husky/pre-commit index 024436961..d2ae35e84 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,5 +2,3 @@ . "$(dirname "$0")/_/husky.sh" yarn lint-staged - -yarn test \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index e88f1e0b5..901328f2d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,7 @@ /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ module.exports = { preset: "ts-jest", + moduleDirectories: ["node_modules", ""], testEnvironment: "jsdom", globals: { "ts-jest": { diff --git a/src/core/Callout/components/CalloutTitle/style.ts b/src/core/Callout/components/CalloutTitle/style.ts index 9c7f4554f..a3a39dbc0 100644 --- a/src/core/Callout/components/CalloutTitle/style.ts +++ b/src/core/Callout/components/CalloutTitle/style.ts @@ -5,7 +5,7 @@ import { fontBody, getSpaces } from "src/core/styles"; const fontBodyXs = fontBody("xs"); export const StyledCalloutTitle = styled(AlertTitle)` - ${fontBodyXs}; + ${fontBodyXs} ${(props) => { const spacings = getSpaces(props); @@ -13,5 +13,5 @@ export const StyledCalloutTitle = styled(AlertTitle)` return ` margin: ${spacings?.xxxs}px 0 ${spacings?.xs}px; `; - }}; + }} `; diff --git a/src/core/Tabs/__snapshots__/index.test.tsx.snap b/src/core/Tabs/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000..acf11e864 --- /dev/null +++ b/src/core/Tabs/__snapshots__/index.test.tsx.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Test story renders snapshot 1`] = ` +
+
+
+ + +
+ +
+
+`; diff --git a/src/core/Tabs/index.stories.tsx b/src/core/Tabs/index.stories.tsx index 561b64fb6..ae348afee 100644 --- a/src/core/Tabs/index.stories.tsx +++ b/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 = ({ - tabOneLabel, - tabTwoLabel, - ...args -}: TabsArgs) => { +const Template: Story = (props: TabsArgs) => { + const { tabOneLabel, tabTwoLabel, ...args } = props; + const [value, setValue] = useState(0); const handleTabsChange = ( @@ -33,6 +49,8 @@ const Template: Story = ({
); }; + +// Default export const Default = Template.bind({}); Default.args = { @@ -40,3 +58,76 @@ Default.args = { 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 ( +
+