From 29e4feaa7c9981c837155d049abf505d71a3239d Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Tue, 15 Oct 2024 13:45:41 +0200
Subject: [PATCH] Add SideLabel tests and stories (#70)

# Add SideLabel tests and stories

## :gear: Release Notes
* Add SideLabel tests and stories

![image](https://github.com/user-attachments/assets/f1e5a6bc-7778-4940-9d31-da6cfba44ab8)



### Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).
---
 .../SideLabel/SideLabel.stories.tsx           | 35 +++++++++++++++++++
 .../components/SideLabel/SideLabel.test.tsx   | 30 ++++++++++++++++
 .../src/components/SideLabel/SideLabel.tsx    |  4 +++
 3 files changed, 69 insertions(+)
 create mode 100644 packages/design-system/src/components/SideLabel/SideLabel.stories.tsx
 create mode 100644 packages/design-system/src/components/SideLabel/SideLabel.test.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..b9fea132
--- /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 WithSwitch = () => (
+  <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>
+)
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')
+  })
+})
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}