From 21a711f5f1e44b5c67d0e4e86cd70d52053d7caa Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Wed, 17 May 2023 08:13:40 +0100
Subject: [PATCH] Merge pull request #13103 from
 overleaf/mj-figure-modal-to-components

[web] Add figure modal components to storybook

GitOrigin-RevId: 9916de620785e3a7dd982f6494f7b471f69c58f7
---
 .../web/frontend/stories/select.stories.tsx   | 35 +++++++++++++++++++
 .../web/frontend/stories/switcher.stories.tsx | 28 +++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 services/web/frontend/stories/select.stories.tsx
 create mode 100644 services/web/frontend/stories/switcher.stories.tsx

diff --git a/services/web/frontend/stories/select.stories.tsx b/services/web/frontend/stories/select.stories.tsx
new file mode 100644
index 0000000000..6f83e67143
--- /dev/null
+++ b/services/web/frontend/stories/select.stories.tsx
@@ -0,0 +1,35 @@
+import { Select } from '../js/shared/components/select'
+
+const items = [1, 2, 3, 4].map(index => ({
+  key: index,
+  value: `Demo item ${index}`,
+  group: index >= 3 ? 'Large numbers' : undefined,
+}))
+
+export const Base = () => {
+  return (
+    <Select
+      items={items}
+      itemToString={x => String(x?.value)}
+      itemToKey={x => String(x.key)}
+      defaultText="Choose an item"
+    />
+  )
+}
+
+export const WithSubtitles = () => {
+  return (
+    <Select
+      items={items}
+      itemToString={x => String(x?.value)}
+      itemToKey={x => String(x.key)}
+      itemToSubtitle={x => x?.group ?? ''}
+      defaultText="Choose an item"
+    />
+  )
+}
+
+export default {
+  title: 'Shared / Components / Select',
+  component: Select,
+}
diff --git a/services/web/frontend/stories/switcher.stories.tsx b/services/web/frontend/stories/switcher.stories.tsx
new file mode 100644
index 0000000000..c713aaf025
--- /dev/null
+++ b/services/web/frontend/stories/switcher.stories.tsx
@@ -0,0 +1,28 @@
+import { Switcher, SwitcherItem } from '../js/shared/components/switcher'
+
+export const Base = () => {
+  return (
+    <Switcher name="figure-width" defaultValue="0.5">
+      <SwitcherItem value="0.25" label="¼ width" />
+      <SwitcherItem value="0.5" label="½ width" />
+      <SwitcherItem value="0.75" label="¾ width" />
+      <SwitcherItem value="1.0" label="Full width" />
+    </Switcher>
+  )
+}
+
+export const Disabled = () => {
+  return (
+    <Switcher name="figure-width" defaultValue="0.5" disabled>
+      <SwitcherItem value="0.25" label="¼ width" />
+      <SwitcherItem value="0.5" label="½ width" />
+      <SwitcherItem value="0.75" label="¾ width" />
+      <SwitcherItem value="1.0" label="Full width" />
+    </Switcher>
+  )
+}
+
+export default {
+  title: 'Shared / Components / Switcher',
+  component: Switcher,
+}