From d8c9268255636d4747c5130c22f603def45ab38d Mon Sep 17 00:00:00 2001
From: znaim <zair.naim@thoughtworks.com>
Date: Mon, 21 Oct 2024 12:07:09 -0400
Subject: [PATCH] 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<typeof HeaderWithMeterComponent> = {
-    title: 'AI/Molecules/HeaderWithMeter',
-    component: HeaderWithMeterComponent,
-    decorators: [
-        Story => (
-            <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
-                <Story />
-            </Flex>
-        ),
-    ]
+  title: 'AI/Molecules/HeaderWithMeter',
+  component: HeaderWithMeterComponent,
+  decorators: [
+    Story => (
+      <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
+        <Story />
+      </Flex>
+    ),
+  ],
 }
 export default meta
 
 type Story = StoryObj<typeof HeaderWithMeterComponent>
 
-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<typeof renderWithProviders> => {
-    return renderWithProviders(<HeaderWithMeter progressPercentage={0.3} />, {
-        i18nInstance: i18n,
-    })
+  return renderWithProviders(<HeaderWithMeter progressPercentage={0.3} />, {
+    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(<HeaderWithMeter progressPercentage={0.3} />, {})
-
-        const progressBar = screen.getByRole('progressbar')
-        expect(progressBar).toHaveAttribute('value', '0.3')
-
-        rerender(<HeaderWithMeter progressPercentage={0.6} />)
-        expect(progressBar).toHaveAttribute('value', '0.6')
-
-        rerender(<HeaderWithMeter progressPercentage={1} />)
-        expect(progressBar).toHaveAttribute('value', '1')
-
-        rerender(<HeaderWithMeter progressPercentage={0} />)
-        expect(progressBar).toHaveAttribute('value', '0')
-
-        rerender(<HeaderWithMeter progressPercentage={0.2} />)
-        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(
+      <HeaderWithMeter progressPercentage={0.3} />,
+      {}
+    )
+
+    const progressBar = screen.getByRole('progressbar')
+    expect(progressBar).toHaveAttribute('value', '0.3')
+
+    rerender(<HeaderWithMeter progressPercentage={0.6} />)
+    expect(progressBar).toHaveAttribute('value', '0.6')
+
+    rerender(<HeaderWithMeter progressPercentage={1} />)
+    expect(progressBar).toHaveAttribute('value', '1')
+
+    rerender(<HeaderWithMeter progressPercentage={0} />)
+    expect(progressBar).toHaveAttribute('value', '0')
+
+    rerender(<HeaderWithMeter progressPercentage={0.2} />)
+    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 (
-        <Flex
-            flexDirection={DIRECTION_COLUMN}
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-            width="100%">
-            <Header />
-            <SquareProgressBar value={progressPercentage}></SquareProgressBar>
-        </Flex>
-    )
-}
\ No newline at end of file
+export function HeaderWithMeter({
+  progressPercentage = 0.5,
+}: ChatHeaderProps): JSX.Element {
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width="100%"
+    >
+      <Header />
+      <SquareProgressBar value={progressPercentage}></SquareProgressBar>
+    </Flex>
+  )
+}