From 4f0997ef1b26f82990ebac6d9a4c9d98a4011dc9 Mon Sep 17 00:00:00 2001
From: steveoh <sgourley@utah.gov>
Date: Tue, 3 Dec 2024 18:38:36 -0700
Subject: [PATCH] feat(toggle-button): introduce a toggle button

---
 .../src/components/ToggleButton.stories.tsx   | 20 +++++++++++
 .../src/components/ToggleButton.tsx           | 33 +++++++++++++++++++
 packages/utah-design-system/src/index.ts      |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 packages/utah-design-system/src/components/ToggleButton.stories.tsx
 create mode 100644 packages/utah-design-system/src/components/ToggleButton.tsx

diff --git a/packages/utah-design-system/src/components/ToggleButton.stories.tsx b/packages/utah-design-system/src/components/ToggleButton.stories.tsx
new file mode 100644
index 00000000..4a62728c
--- /dev/null
+++ b/packages/utah-design-system/src/components/ToggleButton.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+import { PenLineIcon } from 'lucide-react';
+import { ToggleButton as Component } from './ToggleButton';
+const meta: Meta<typeof Component> = {
+  component: Component,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+export const Example = (args: any) => <Component {...args}>Pin</Component>;
+export const Icon = (args: any) => (
+  <Component {...args}>
+    <PenLineIcon />
+  </Component>
+);
diff --git a/packages/utah-design-system/src/components/ToggleButton.tsx b/packages/utah-design-system/src/components/ToggleButton.tsx
new file mode 100644
index 00000000..1e5134b8
--- /dev/null
+++ b/packages/utah-design-system/src/components/ToggleButton.tsx
@@ -0,0 +1,33 @@
+import {
+  ToggleButton as RACToggleButton,
+  type ToggleButtonProps,
+  composeRenderProps,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { focusRing } from './utils';
+
+let styles = tv({
+  extend: focusRing,
+  base: 'min-h-9 cursor-default rounded-full border border-black/10 px-8 text-center text-base shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:border-white/10 dark:shadow-none [&:has(svg:only-child)]:min-h-0 [&:has(svg:only-child)]:p-0.5',
+  variants: {
+    isSelected: {
+      false:
+        'bg-gray-100 text-gray-800 hover:bg-gray-200 pressed:bg-gray-300 dark:bg-zinc-600 dark:text-zinc-100 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 forced-colors:!bg-[ButtonFace] forced-colors:!text-[ButtonText]',
+      true: 'bg-gray-700 text-white hover:bg-gray-800 pressed:bg-gray-900 dark:bg-accent-300 dark:text-black dark:hover:bg-accent-200 dark:pressed:bg-accent-100 forced-colors:!bg-[Highlight] forced-colors:!text-[HighlightText]',
+    },
+    isDisabled: {
+      true: 'border-black/5 bg-gray-100 text-gray-300 dark:border-white/5 dark:bg-zinc-800 dark:text-zinc-600 forced-colors:border-[GrayText] forced-colors:!bg-[ButtonFace] forced-colors:!text-[GrayText]',
+    },
+  },
+});
+
+export function ToggleButton(props: ToggleButtonProps) {
+  return (
+    <RACToggleButton
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        styles({ ...renderProps, className }),
+      )}
+    />
+  );
+}
diff --git a/packages/utah-design-system/src/index.ts b/packages/utah-design-system/src/index.ts
index b6c8d05b..8f30bce8 100644
--- a/packages/utah-design-system/src/index.ts
+++ b/packages/utah-design-system/src/index.ts
@@ -25,6 +25,7 @@ export * from './components/Switch';
 export * from './components/Tabs';
 export * from './components/TagGroup';
 export * from './components/TextField';
+export * from './components/ToggleButton';
 export * from './components/UtahIdLogin';
 export * from './contexts/FirebaseAnalyticsProvider';
 export * from './contexts/FirebaseAppProvider';