From 4c87890a03f7cea4ab22ff7b182c80317541aec7 Mon Sep 17 00:00:00 2001
From: ben-basten <45583362+ben-basten@users.noreply.github.com>
Date: Tue, 4 Jun 2024 23:06:03 -0400
Subject: [PATCH] feat: migrate CircleIconButton and add it to Storybook

Breaking change: removing the "buttonSize" prop
---
 web/src/lib/ui/CircleIconButton.svelte        | 44 +++++++++++++++
 web/src/stories/Button.stories.svelte         |  2 +-
 .../stories/CircleIconButton.stories.svelte   | 53 +++++++++++++++++++
 3 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/ui/CircleIconButton.svelte
 create mode 100644 web/src/stories/CircleIconButton.stories.svelte

diff --git a/web/src/lib/ui/CircleIconButton.svelte b/web/src/lib/ui/CircleIconButton.svelte
new file mode 100644
index 0000000000..9eb67df3d5
--- /dev/null
+++ b/web/src/lib/ui/CircleIconButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
+
+  export let color: Color = 'transparent';
+  export let hideMobile = false;
+  export let icon: string;
+  export let padding = 3;
+  export let size = 24;
+  export let title: string; // done
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  /**
+   * viewBox attribute for the SVG icon.
+   */
+  export let viewBox: string | undefined = undefined;
+
+  /**
+   * Override the default styling of the button for specific use cases, such as the icon color.
+   */
+  let className = '';
+  export { className as class };
+
+  const colorClasses: Record<Color, string> = {
+    transparent: 'bg-transparent hover:bg-[#d3d3d3] dark:text-immich-dark-fg',
+    opaque: 'bg-transparent hover:bg-immich-bg/30 text-white hover:dark:text-white',
+    light: 'bg-white hover:bg-[#d3d3d3]',
+    dark: 'bg-[#202123] hover:bg-[#d3d3d3]',
+    gray: 'bg-[#d3d3d3] hover:bg-[#e2e7e9] text-immich-dark-gray hover:text-black',
+    primary:
+      'bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 hover:dark:bg-immich-dark-primary/80 text-white dark:text-immich-dark-gray',
+  };
+
+  $: colorClass = colorClasses[color];
+  $: mobileClass = hideMobile ? 'hidden sm:flex' : '';
+</script>
+
+<button
+  {title}
+  {type}
+  class="flex place-content-center place-items-center rounded-full {colorClass} p-{padding} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
+  on:click
+>
+  <Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
+</button>
diff --git a/web/src/stories/Button.stories.svelte b/web/src/stories/Button.stories.svelte
index 000045d44e..64f9e908a0 100644
--- a/web/src/stories/Button.stories.svelte
+++ b/web/src/stories/Button.stories.svelte
@@ -2,7 +2,7 @@
   import Button from '$lib/ui/Button.svelte';
   import { Template } from '@storybook/addon-svelte-csf';
   export const meta = {
-    title: 'Button',
+    title: 'Components/Buttons/Button',
     component: Button,
   };
 </script>
diff --git a/web/src/stories/CircleIconButton.stories.svelte b/web/src/stories/CircleIconButton.stories.svelte
new file mode 100644
index 0000000000..ac9af96dc6
--- /dev/null
+++ b/web/src/stories/CircleIconButton.stories.svelte
@@ -0,0 +1,53 @@
+<script context="module" lang="ts">
+  import CircleIconButton from '$lib/ui/CircleIconButton.svelte';
+  import { mdiDotsVertical, mdiInformation, mdiPartyPopper } from '@mdi/js';
+  export const meta = {
+    title: 'Components/Buttons/Circle Icon Button',
+    component: CircleIconButton,
+    argTypes: {
+      color: {
+        control: 'select',
+        options: ['transparent', 'light', 'dark', 'gray', 'primary', 'opaque'],
+      },
+      icon: {
+        options: {
+          mdiInformation,
+          mdiDotsVertical,
+          mdiPartyPopper,
+        },
+        control: 'select',
+      },
+      title: {
+        control: 'text',
+      },
+      type: {
+        control: 'select',
+        options: ['button', 'submit', 'reset'],
+      },
+      viewBox: {
+        control: 'text',
+      },
+    },
+    args: {
+      class: '',
+      hideMobile: false,
+      icon: mdiInformation,
+      padding: 3,
+      size: 24,
+      title: 'Information',
+      type: 'button',
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+  <!--👇 'on:click' allows to forward event to addon-actions  -->
+  <CircleIconButton {...args} on:click />
+</Template>
+
+<Story name="Primary" args={{ color: 'primary' }} />
+<Story name="Transparent" args={{ color: 'transparent' }} />