feat(ViewportActionMenu): window level per viewport / new patient info / colorbars/ 3D presets and 3D volume rendering (#3963)

Co-authored-by: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>

platform/ui/src/components/SwitchButton/SwitchButton.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback, useState } from 'react';
+
+import './switchButton.css';
+
+export enum SwitchLabelLocation {
+  left,
+  right,
+}
+
+export type SwitchButtonProps = {
+  checked?: boolean;
+  label?: string;
+  labelLocation?: SwitchLabelLocation;
+  onChange?: (checked: boolean) => void;
+};
+
+const SwitchButton = ({
+  label,
+  checked = false,
+  onChange,
+  labelLocation = SwitchLabelLocation.left,
+}: SwitchButtonProps) => {
+  const [isInputChecked, setIsInputChecked] = useState(checked);
+
+  const onHandleChange = useCallback(
+    event => {
+      setIsInputChecked(event.target.checked);
+      onChange?.(event.target.checked);
+    },
+    [onChange]
+  );
+
+  // Thanks goes to https://codepen.io/lhermann/pen/EBGZRZ for the inspiration to the code below.
+  return (
+    <label className="switch-button flex w-full cursor-pointer items-center justify-between text-[14px]">
+      {label && labelLocation === SwitchLabelLocation.left && <div>{label}</div>}
+      <div className="relative">
+        <input
+          className="absolute hidden"
+          type="checkbox"
+          onChange={onHandleChange}
+          checked={isInputChecked}
+        />
+        <div className="switch-button-outer border-common-bright bg-primary-dark block h-[16px] w-[30px] rounded-full border"></div>
+        <div className="switch-button-dot bg-common-bright absolute left-[4px] top-[3px] h-[10px] w-[10px] rounded-full transition duration-150 ease-in-out"></div>
+      </div>
+      {label && labelLocation === SwitchLabelLocation.right && <div>{label}</div>}
+    </label>
+  );
+};
+
+export default SwitchButton;

platform/ui/src/components/SwitchButton/__stories__/switchButton.stories.mdx

@@ -0,0 +1,58 @@
+import SwitchButton, { SwitchLabelLocation } from '../SwitchButton';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: SwitchButton,
+  title: 'Components/SwitchButton',
+};
+
+<Meta
+  title="Components/SwitchButton"
+  component={SwitchButton}
+/>
+
+export const SwitchButtonTemplate = args => (
+  <div className="w-[200px]">
+    <SwitchButton {...args} />
+  </div>
+);
+
+<Heading
+  title="SwitchButton"
+  componentRelativePath="SwitchButton/SwitchButton.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+A SwitchButton is a checkbox type input/button that can either be on or off (like a light switch).
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Switch Button Label',
+      labelLocation: SwitchLabelLocation.left,
+      onChange: (checked) => console.info(`${checked ? 'The switch is on.' : 'The switch is off.'}`)
+    }}
+>
+
+    {SwitchButtonTemplate.bind({})}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={SwitchButton} />
+
+## Usage
+
+## Contribute
+
+<Footer componentRelativePath="SwitchButton/__stories__/SwitchButton.stories.mdx" />

platform/ui/src/components/SwitchButton/index.js

@@ -0,0 +1,3 @@
+import SwitchButton, { SwitchLabelLocation } from './SwitchButton';
+export default SwitchButton;
+export { SwitchLabelLocation };

platform/ui/src/components/SwitchButton/switchButton.css

@@ -0,0 +1,7 @@
+.switch-button input:checked ~ .switch-button-outer {
+  @apply border-primary-light;
+}
+.switch-button input:checked ~ .switch-button-dot {
+  @apply bg-primary-light;
+  transform: translateX(12px);
+}