Add SideLabel tests and stories

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>
+)

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')
+  })
+})

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}