wip: add switch-card, section-spinner and spinner

kouprlabs · Oct 29, 2024 · 4a93cae · 4a93cae
1 parent 112e0ab
commit 4a93cae
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 42 deletions.
diff --git a/src/components/switch-card.tsx b/src/components/switch-card.tsx
@@ -71,57 +71,61 @@ export const SwitchCard = ({
 
   if (isCollapsed) {
     return (
-      <Popover>
-        <PopoverTrigger>
-          <div>
-            <Tooltip label={label}>
-              <IconButton
-                icon={icon}
-                variant="outline"
-                className={cx('w-[50px]', 'h-[50px]', 'p-1.5', 'rounded-md')}
-                aria-label={label}
-                title={label}
-              />
-            </Tooltip>
-          </div>
-        </PopoverTrigger>
-        <PopoverContent>
-          <PopoverBody>{children}</PopoverBody>
-        </PopoverContent>
-      </Popover>
+      <div className={cx('inline-block')}>
+        <Popover>
+          <PopoverTrigger>
+            <div>
+              <Tooltip label={label}>
+                <IconButton
+                  icon={icon}
+                  variant="outline"
+                  className={cx('w-[50px]', 'h-[50px]', 'p-1.5', 'rounded-md')}
+                  aria-label={label}
+                  title={label}
+                />
+              </Tooltip>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverBody>{children}</PopoverBody>
+          </PopoverContent>
+        </Popover>
+      </div>
     )
   } else {
     return (
-      <div
-        className={cx(
-          'flex',
-          'flex-col',
-          'gap-0',
-          'border',
-          'border-gray-200',
-          'dark:border-gray-600',
-          'rounded-md',
-        )}
-        style={{ minWidth: expandedMinWidth }}
-      >
+      <div className={cx('inline-block')}>
         <div
           className={cx(
             'flex',
-            'flex-row',
-            'items-center',
-            'gap-1',
-            'h-[50px]',
-            'px-1',
-            'shrink-0',
+            'flex-col',
+            'gap-0',
+            'border',
+            'border-gray-200',
+            'dark:border-gray-600',
+            'rounded-md',
           )}
+          style={{ minWidth: expandedMinWidth }}
         >
-          {icon}
-          <span className={cx('grow')}>{label}</span>
-          <Switch isChecked={isActive} onChange={handleChange} />
+          <div
+            className={cx(
+              'flex',
+              'flex-row',
+              'items-center',
+              'gap-1',
+              'h-[50px]',
+              'px-1',
+              'shrink-0',
+            )}
+          >
+            {icon}
+            <span className={cx('grow')}>{label}</span>
+            <Switch isChecked={isActive} onChange={handleChange} />
+          </div>
+          {isActive ? (
+            <div className={cx('pt-0', 'pr-1', 'pb-1', 'pl-1')}>{children}</div>
+          ) : null}
         </div>
-        {isActive ? (
-          <div className={cx('pt-0', 'pr-1', 'pb-1', 'pl-1')}>{children}</div>
-        ) : null}
       </div>
     )
   }

diff --git a/src/stories/components/section-spinner.stories.tsx b/src/stories/components/section-spinner.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { SectionSpinner } from '../../components'
+
+const meta: Meta<typeof SectionSpinner> = {
+  title: 'Components/Section Spinner',
+  component: SectionSpinner,
+}
+
+export default meta
+type Story = StoryObj<typeof SectionSpinner>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/src/stories/components/spinner.stories.tsx b/src/stories/components/spinner.stories.tsx
@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Spinner } from '../../components'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {}
diff --git a/src/stories/components/switch-card.stories.tsx b/src/stories/components/switch-card.stories.tsx
@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react'
+import cx from 'classnames'
+import { IconInfo, SwitchCard } from '../../components'
+
+const meta: Meta<typeof SwitchCard> = {
+  title: 'Components/Switch Card',
+  component: SwitchCard,
+}
+
+export default meta
+type Story = StoryObj<typeof SwitchCard>
+
+export const NotCollapsed: Story = {
+  args: {
+    icon: <IconInfo />,
+    label: 'Show info',
+    isCollapsed: false,
+    localStorageNamespace: 'switch-card',
+    expandedMinWidth: '200px',
+    children: (
+      <p>
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Duis nascetur
+        magnis morbi laoreet; montes porta. Pulvinar nunc per accumsan sed
+        suspendisse sit sapien. Venenatis maximus inceptos taciti vestibulum
+        porta sagittis quisque ipsum erat. Risus sodales conubia leo facilisi
+        dignissim potenti senectus. Lectus feugiat ornare amet iaculis metus
+        inceptos adipiscing placerat. Vestibulum faucibus facilisis viverra
+        magna litora. Molestie lorem leo malesuada dictumst porta erat sagittis
+        ullamcorper sollicitudin. Hendrerit ante maximus tincidunt, venenatis
+        mauris molestie.
+      </p>
+    ),
+  },
+  render: (args) => (
+    <div className={cx('w-[300px]')}>
+      <SwitchCard {...args} />
+    </div>
+  ),
+}
+
+export const Collapsed: Story = {
+  args: {
+    icon: <IconInfo />,
+    label: 'Show info',
+    isCollapsed: true,
+    localStorageNamespace: 'switch-card',
+    expandedMinWidth: '200px',
+    children: (
+      <p>
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Duis nascetur
+        magnis morbi laoreet; montes porta. Pulvinar nunc per accumsan sed
+        suspendisse sit sapien. Venenatis maximus inceptos taciti vestibulum
+        porta sagittis quisque ipsum erat. Risus sodales conubia leo facilisi
+        dignissim potenti senectus. Lectus feugiat ornare amet iaculis metus
+        inceptos adipiscing placerat. Vestibulum faucibus facilisis viverra
+        magna litora. Molestie lorem leo malesuada dictumst porta erat sagittis
+        ullamcorper sollicitudin. Hendrerit ante maximus tincidunt, venenatis
+        mauris molestie.
+      </p>
+    ),
+  },
+  render: (args) => (
+    <div className={cx('w-[300px]')}>
+      <SwitchCard {...args} />
+    </div>
+  ),
+}