From 442313e2d54057f1e45402b78752cdec2c62ab99 Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:30:45 +0200
Subject: [PATCH 1/4] Add reverse prop

---
 packages/design-system/src/components/SideLabel/SideLabel.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/design-system/src/components/SideLabel/SideLabel.tsx b/packages/design-system/src/components/SideLabel/SideLabel.tsx
index 3b9ea138..259f7c76 100644
--- a/packages/design-system/src/components/SideLabel/SideLabel.tsx
+++ b/packages/design-system/src/components/SideLabel/SideLabel.tsx
@@ -10,6 +10,8 @@ import { cn } from '../../utils/className'
 
 type SideLabelProps = Omit<HTMLProps<HTMLLabelElement>, 'label'> & {
   label?: ReactNode
+  /* Show label on right side */
+  reverse?: boolean
 }
 
 /**
@@ -19,11 +21,13 @@ export const SideLabel = ({
   children,
   className,
   label,
+  reverse,
   ...props
 }: SideLabelProps) => (
   <label
     className={cn(
       'flex cursor-pointer select-none items-center gap-2.5',
+      reverse && 'flex-row-reverse',
       className,
     )}
     {...props}

From cf2f0b73a6fb58028556befaa3cb38b46f371942 Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:31:06 +0200
Subject: [PATCH 2/4] Add SideLabel story

---
 .../SideLabel/SideLabel.stories.tsx           | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 packages/design-system/src/components/SideLabel/SideLabel.stories.tsx

diff --git a/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx b/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
new file mode 100644
index 00000000..fbed2d31
--- /dev/null
+++ b/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
@@ -0,0 +1,35 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { type Meta } from '@storybook/react'
+import { SideLabel } from './SideLabel'
+import { Switch } from '../Switch'
+
+const meta: Meta<typeof SideLabel> = {
+  title: 'Components/SideLabel',
+  component: SideLabel,
+}
+
+export default meta
+
+export const WithInput = () => (
+  <SideLabel label="Check me">
+    <Switch />
+  </SideLabel>
+)
+
+export const Reversed = () => (
+  <SideLabel label="Check me" reverse>
+    <Switch />
+  </SideLabel>
+)
+
+export const NoInput = () => (
+  <SideLabel label="Check me">
+    <span className="hidden">input goes here</span>
+  </SideLabel>
+)

From fa3d99c33b6fa2d63638072002bf605a30d77347 Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:36:05 +0200
Subject: [PATCH 3/4] Add SideLabel story

---
 .../components/SideLabel/SideLabel.test.tsx   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 packages/design-system/src/components/SideLabel/SideLabel.test.tsx

diff --git a/packages/design-system/src/components/SideLabel/SideLabel.test.tsx b/packages/design-system/src/components/SideLabel/SideLabel.test.tsx
new file mode 100644
index 00000000..dc744a8c
--- /dev/null
+++ b/packages/design-system/src/components/SideLabel/SideLabel.test.tsx
@@ -0,0 +1,30 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vitest } from 'vitest'
+import { SideLabel } from '.'
+
+describe('SideLabel', () => {
+  it('renders functional label element', () => {
+    const onChange = vitest.fn()
+
+    render(
+      <SideLabel label="Toggle">
+        <input type="checkbox" onChange={onChange} />
+      </SideLabel>,
+    )
+
+    const textElement = screen.getByText('Toggle')
+    fireEvent.click(textElement)
+
+    expect(onChange).toHaveBeenCalledOnce()
+
+    const element = screen.getByLabelText('Toggle')
+    expect(element.tagName).toBe('INPUT')
+  })
+})

From 95c1098cb6b79631631a0e56a999101cd6fed2fb Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:37:53 +0200
Subject: [PATCH 4/4] Rename WithInput to WithSwitch

---
 .../src/components/SideLabel/SideLabel.stories.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx b/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
index fbed2d31..b9fea132 100644
--- a/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
+++ b/packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof SideLabel> = {
 
 export default meta
 
-export const WithInput = () => (
+export const WithSwitch = () => (
   <SideLabel label="Check me">
     <Switch />
   </SideLabel>