From 62e405161777538a16d78e48b32e52043c36cf4e Mon Sep 17 00:00:00 2001 From: znaim Date: Sun, 20 Oct 2024 22:01:24 -0400 Subject: [PATCH 1/8] created a header component with a progressbar underneath it --- .../HeaderWithMeter.stories.tsx | 21 ++++++++ .../__tests__/HeaderWithMeter.test.tsx | 49 +++++++++++++++++++ .../src/molecules/HeaderWithMeter/index.tsx | 42 ++++++++++++++++ 3 files changed, 112 insertions(+) create mode 100644 opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx create mode 100644 opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx create mode 100644 opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx new file mode 100644 index 00000000000..d495320770a --- /dev/null +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx @@ -0,0 +1,21 @@ +import { type Meta, type StoryObj } from '@storybook/react' +import { HeaderWithMeter as HeaderWithMeterComponent } from '.' +import { COLORS, Flex, SPACING } from '@opentrons/components' + +const meta: Meta = { + title: 'AI/Molecules/HeaderWithMeter', + component: HeaderWithMeterComponent, + decorators: [ + Story => ( + + + + ), + ] +} +export default meta + +type Story = StoryObj + +export const HeaderWithMeterExample: Story = { +} \ No newline at end of file diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx new file mode 100644 index 00000000000..8e0c3f42d6b --- /dev/null +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx @@ -0,0 +1,49 @@ +import { renderWithProviders } from '../../../__testing-utils__' +import { i18n } from '../../../i18n' +import { HeaderWithMeter } from '../index' +import { describe, expect, it } from 'vitest' +import { screen, render as rtlRender } from '@testing-library/react' + +const render = (): ReturnType => { + return renderWithProviders(, { + i18nInstance: i18n, + }) +} + +describe('HeaderWithMeter', () => { + it('should render Header component', () => { + render() + screen.getByText('Opentrons') + }) + + it('should render progress bar', () => { + render() + screen.getByRole('progressbar') + }) + + it('should render progress bar with correct value', () => { + render() + const progressBar = screen.getByRole('progressbar') + expect(progressBar).toHaveAttribute('value', '0.3') + }) + + it('should update when progressPercentage prop changes', () => { + const { rerender } = rtlRender(, {}) + + const progressBar = screen.getByRole('progressbar') + expect(progressBar).toHaveAttribute('value', '0.3') + + rerender() + expect(progressBar).toHaveAttribute('value', '0.6') + + rerender() + expect(progressBar).toHaveAttribute('value', '1') + + rerender() + expect(progressBar).toHaveAttribute('value', '0') + + rerender() + expect(progressBar).toHaveAttribute('value', '0.2') + }) + +}); diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx new file mode 100644 index 00000000000..25426d25bdd --- /dev/null +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx @@ -0,0 +1,42 @@ +import { Flex, DIRECTION_COLUMN, JUSTIFY_SPACE_BETWEEN, COLORS } from "@opentrons/components"; +import { Header } from "../Header"; +import styled from "styled-components"; + +const SquareProgressBar = styled.progress` + width: 100%; + height: 4px; + border-radius: 0; + appearance: none; + + &::-webkit-progress-bar { + background-color: ${COLORS.grey30}; /* Background color of the progress bar */ + border-radius: 0; + } + + &::-webkit-progress-value { + background-color: ${COLORS.blue50}; /* Color of the progress value */ + border-radius: 0; + transition: width 1s; + } + + &::-moz-progress-bar { + background-color: ${COLORS.blue50}; /* Color of the progress value for Firefox */ + border-radius: 0; + } +` + +export interface ChatHeaderProps { + progressPercentage: number +} + +export function HeaderWithMeter({ progressPercentage = 0.5 }: ChatHeaderProps): JSX.Element { + return ( + +
+ + + ) +} \ No newline at end of file From adf8ea2a00e25994be1def280db4e073dbe1d55a Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 10:12:21 -0400 Subject: [PATCH 2/8] fixed lint issue --- .../src/molecules/Header/__tests__/Header.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx index bb79a858936..e1d70f49095 100644 --- a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx +++ b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx @@ -1,7 +1,7 @@ import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { Header } from '../index' -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { screen } from '@testing-library/react' const render = (): ReturnType => { From dfdea5ad591d63e297e53d9790da915eb6f87329 Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 11:40:34 -0400 Subject: [PATCH 3/8] fix lint issue --- .../src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx index d495320770a..9b6b8ce6cf2 100644 --- a/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx @@ -1,4 +1,4 @@ -import { type Meta, type StoryObj } from '@storybook/react' +import type { Meta, StoryObj } from '@storybook/react' import { HeaderWithMeter as HeaderWithMeterComponent } from '.' import { COLORS, Flex, SPACING } from '@opentrons/components' From d8c9268255636d4747c5130c22f603def45ab38d Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 12:07:09 -0400 Subject: [PATCH 4/8] ran prettier --- .../HeaderWithMeter.stories.tsx | 21 +++-- .../__tests__/HeaderWithMeter.test.tsx | 80 ++++++++++--------- .../src/molecules/HeaderWithMeter/index.tsx | 44 +++++----- 3 files changed, 77 insertions(+), 68 deletions(-) diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx index 9b6b8ce6cf2..80608117379 100644 --- a/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx @@ -3,19 +3,18 @@ import { HeaderWithMeter as HeaderWithMeterComponent } from '.' import { COLORS, Flex, SPACING } from '@opentrons/components' const meta: Meta = { - title: 'AI/Molecules/HeaderWithMeter', - component: HeaderWithMeterComponent, - decorators: [ - Story => ( - - - - ), - ] + title: 'AI/Molecules/HeaderWithMeter', + component: HeaderWithMeterComponent, + decorators: [ + Story => ( + + + + ), + ], } export default meta type Story = StoryObj -export const HeaderWithMeterExample: Story = { -} \ No newline at end of file +export const HeaderWithMeterExample: Story = {} diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx index 8e0c3f42d6b..8d02aeb3e12 100644 --- a/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx @@ -5,45 +5,47 @@ import { describe, expect, it } from 'vitest' import { screen, render as rtlRender } from '@testing-library/react' const render = (): ReturnType => { - return renderWithProviders(, { - i18nInstance: i18n, - }) + return renderWithProviders(, { + i18nInstance: i18n, + }) } describe('HeaderWithMeter', () => { - it('should render Header component', () => { - render() - screen.getByText('Opentrons') - }) - - it('should render progress bar', () => { - render() - screen.getByRole('progressbar') - }) - - it('should render progress bar with correct value', () => { - render() - const progressBar = screen.getByRole('progressbar') - expect(progressBar).toHaveAttribute('value', '0.3') - }) - - it('should update when progressPercentage prop changes', () => { - const { rerender } = rtlRender(, {}) - - const progressBar = screen.getByRole('progressbar') - expect(progressBar).toHaveAttribute('value', '0.3') - - rerender() - expect(progressBar).toHaveAttribute('value', '0.6') - - rerender() - expect(progressBar).toHaveAttribute('value', '1') - - rerender() - expect(progressBar).toHaveAttribute('value', '0') - - rerender() - expect(progressBar).toHaveAttribute('value', '0.2') - }) - -}); + it('should render Header component', () => { + render() + screen.getByText('Opentrons') + }) + + it('should render progress bar', () => { + render() + screen.getByRole('progressbar') + }) + + it('should render progress bar with correct value', () => { + render() + const progressBar = screen.getByRole('progressbar') + expect(progressBar).toHaveAttribute('value', '0.3') + }) + + it('should update when progressPercentage prop changes', () => { + const { rerender } = rtlRender( + , + {} + ) + + const progressBar = screen.getByRole('progressbar') + expect(progressBar).toHaveAttribute('value', '0.3') + + rerender() + expect(progressBar).toHaveAttribute('value', '0.6') + + rerender() + expect(progressBar).toHaveAttribute('value', '1') + + rerender() + expect(progressBar).toHaveAttribute('value', '0') + + rerender() + expect(progressBar).toHaveAttribute('value', '0.2') + }) +}) diff --git a/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx b/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx index 25426d25bdd..24bc1a89805 100644 --- a/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx +++ b/opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx @@ -1,12 +1,17 @@ -import { Flex, DIRECTION_COLUMN, JUSTIFY_SPACE_BETWEEN, COLORS } from "@opentrons/components"; -import { Header } from "../Header"; -import styled from "styled-components"; +import { + Flex, + DIRECTION_COLUMN, + JUSTIFY_SPACE_BETWEEN, + COLORS, +} from '@opentrons/components' +import { Header } from '../Header' +import styled from 'styled-components' const SquareProgressBar = styled.progress` - width: 100%; + width: 100%; height: 4px; - border-radius: 0; - appearance: none; + border-radius: 0; + appearance: none; &::-webkit-progress-bar { background-color: ${COLORS.grey30}; /* Background color of the progress bar */ @@ -26,17 +31,20 @@ const SquareProgressBar = styled.progress` ` export interface ChatHeaderProps { - progressPercentage: number + progressPercentage: number } -export function HeaderWithMeter({ progressPercentage = 0.5 }: ChatHeaderProps): JSX.Element { - return ( - -
- - - ) -} \ No newline at end of file +export function HeaderWithMeter({ + progressPercentage = 0.5, +}: ChatHeaderProps): JSX.Element { + return ( + +
+ + + ) +} From 16b3e528755999c1688906aaa17f7631268a4af9 Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 12:18:09 -0400 Subject: [PATCH 5/8] ran prettier --- .../Header/__tests__/Header.test.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx index e1d70f49095..5606e8c1391 100644 --- a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx +++ b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx @@ -5,20 +5,19 @@ import { describe, it } from 'vitest' import { screen } from '@testing-library/react' const render = (): ReturnType => { - return renderWithProviders(
, { - i18nInstance: i18n, - }) + return renderWithProviders(
, { + i18nInstance: i18n, + }) } describe('Header', () => { - it('should render Header component', () => { - render() - screen.getByText('Opentrons') - }) + it('should render Header component', () => { + render() + screen.getByText('Opentrons') + }) - it('should render log out button', () => { - render() - screen.getByText('Log out') - }) - -}); \ No newline at end of file + it('should render log out button', () => { + render() + screen.getByText('Log out') + }) +}) From ae86c481fbe2b1b66fd5cfbcb68714822fde3914 Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 12:29:27 -0400 Subject: [PATCH 6/8] lint issue --- .../src/molecules/Header/Header.stories.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/opentrons-ai-client/src/molecules/Header/Header.stories.tsx b/opentrons-ai-client/src/molecules/Header/Header.stories.tsx index 1657c1b4f85..d451ee2d355 100644 --- a/opentrons-ai-client/src/molecules/Header/Header.stories.tsx +++ b/opentrons-ai-client/src/molecules/Header/Header.stories.tsx @@ -1,4 +1,4 @@ -import { type Meta, type StoryObj } from '@storybook/react' +import type { Meta, StoryObj } from '@storybook/react' import { Header as HeaderComponent } from '.' import { COLORS, Flex, SPACING } from '@opentrons/components' @@ -11,11 +11,10 @@ const meta: Meta = { ), - ] + ], } export default meta type Story = StoryObj -export const ChatHeaderExample: Story = { -} \ No newline at end of file +export const ChatHeaderExample: Story = {} From 5910909cb25d60d8d5391efbff272885f0414959 Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 13:09:05 -0400 Subject: [PATCH 7/8] ran prettier --- .../src/molecules/Header/index.tsx | 90 +++++++++---------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/opentrons-ai-client/src/molecules/Header/index.tsx b/opentrons-ai-client/src/molecules/Header/index.tsx index 99e54e0eeab..1963cf8f434 100644 --- a/opentrons-ai-client/src/molecules/Header/index.tsx +++ b/opentrons-ai-client/src/molecules/Header/index.tsx @@ -1,65 +1,63 @@ import { useTranslation } from 'react-i18next' -import styled from 'styled-components'; +import styled from 'styled-components' import { - Flex, - StyledText, - Link as LinkButton, - POSITION_ABSOLUTE, - TYPOGRAPHY, - COLORS, - POSITION_RELATIVE, - ALIGN_CENTER, - JUSTIFY_SPACE_BETWEEN, + Flex, + StyledText, + Link as LinkButton, + POSITION_ABSOLUTE, + TYPOGRAPHY, + COLORS, + POSITION_RELATIVE, + ALIGN_CENTER, + JUSTIFY_SPACE_BETWEEN, } from '@opentrons/components' import { useAuth0 } from '@auth0/auth0-react' const HeaderBar = styled(Flex)` - position: ${POSITION_RELATIVE}; - background-color: ${COLORS.white}; - width: 100%; - align-items: ${ALIGN_CENTER}; - height: 60px; -`; + position: ${POSITION_RELATIVE}; + background-color: ${COLORS.white}; + width: 100%; + align-items: ${ALIGN_CENTER}; + height: 60px; +` const HeaderBarContent = styled(Flex)` - position: ${POSITION_ABSOLUTE}; - padding: 18px 32px; - justify-content: ${JUSTIFY_SPACE_BETWEEN}; - width: 100%; -`; + position: ${POSITION_ABSOLUTE}; + padding: 18px 32px; + justify-content: ${JUSTIFY_SPACE_BETWEEN}; + width: 100%; +` const HeaderGradientTitle = styled(StyledText)` - background: linear-gradient(90deg, #562566 0%, #893BA4 47.5%, #C189D4 100%); + background: linear-gradient(90deg, #562566 0%, #893ba4 47.5%, #c189d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - font-size: 16px; -`; + font-size: 16px; +` const HeaderTitle = styled(StyledText)` - font-size: 16px; -`; + font-size: 16px; +` const LogoutButton = styled(LinkButton)` - color: ${COLORS.grey50}; - font-size: ${TYPOGRAPHY.fontSizeH3}; -`; + color: ${COLORS.grey50}; + font-size: ${TYPOGRAPHY.fontSizeH3}; +` export function Header(): JSX.Element { - const { t } = useTranslation('protocol_generator') - const { logout } = useAuth0() - - return ( - - - - {'Opentrons'} - {'AI'} - - logout()}> - {t('Log out')} - - - - ) -} \ No newline at end of file + const { t } = useTranslation('protocol_generator') + const { logout } = useAuth0() + + return ( + + + + {'Opentrons'} + {'AI'} + + logout()}>{t('Log out')} + + + ) +} From 950f07022c8299e18502fabc4280961eca5d9160 Mon Sep 17 00:00:00 2001 From: znaim Date: Mon, 21 Oct 2024 14:50:58 -0400 Subject: [PATCH 8/8] Update Header.test.tsx --- .../src/molecules/Header/__tests__/Header.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx index 5606e8c1391..31f3b01e629 100644 --- a/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx +++ b/opentrons-ai-client/src/molecules/Header/__tests__/Header.test.tsx @@ -18,6 +18,6 @@ describe('Header', () => { it('should render log out button', () => { render() - screen.getByText('Log out') + screen.getByText('Logout') }) })