feat: add more loading states

ICIJ · Jul 5, 2024 · 513cc3a · 513cc3a
1 parent 584f546
commit 513cc3a
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 8 deletions.
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
@@ -1,10 +1,22 @@
 <template>
   <b-button :to="to" v-bind="buttonProps" class="icon-button d-inline-flex align-items-center" :class="classList">
-    <phosphor-icon v-if="iconLeft" :name="iconLeftOrLoading" :spin="loading" class="icon-button__icon-left" />
+    <phosphor-icon
+      v-if="iconLeft"
+      :name="iconLeftOrSpinner"
+      :spin="loading"
+      :spin-duration="loadingDuration"
+      class="icon-button__icon-left"
+    />
     <span v-if="!hideLabel" class="icon-button__label">
-      <slot>{{ label }}</slot>
+      <slot v-bind="{ labelOrLoadingText }">{{ labelOrLoadingText }}</slot>
     </span>
-    <phosphor-icon v-if="iconRight" :name="iconRightOrLoading" :spin="loading" class="icon-button__icon-right" />
+    <phosphor-icon
+      v-if="iconRight"
+      :name="iconRightOrSpinner"
+      :spin="loading"
+      :spin-duration="loadingDuration"
+      class="icon-button__icon-right"
+    />
   </b-button>
 </template>
 
@@ -22,6 +34,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  iconSpinner: {
+    type: String,
+    default: 'circle-notch'
+  },
   hideLabel: {
     type: Boolean,
     default: false
@@ -64,6 +80,13 @@ const props = defineProps({
   },
   loading: {
     type: Boolean
+  },
+  loadingDuration: {
+    type: String,
+    default: '1s'
+  },
+  loadingText: {
+    type: String
   }
 })
 
@@ -74,12 +97,16 @@ const classList = computed(() => {
   }
 })
 
-const iconLeftOrLoading = computed(() => {
-  return props.loading ? 'circle-notch' : props.iconLeft
+const iconLeftOrSpinner = computed(() => {
+  return props.loading ? props.iconSpinner : props.iconLeft
+})
+
+const iconRightOrSpinner = computed(() => {
+  return props.loading ? props.iconSpinner : props.iconRight
 })
 
-const iconRightOrLoading = computed(() => {
-  return props.loading ? 'circle-notch' : props.iconRight
+const labelOrLoadingText = computed(() => {
+  return props.loading && props.loadingText ? props.loadingText : props.label
 })
 
 const buttonProps = {

diff --git a/src/stories/components/IconButtons.stories.js b/src/stories/components/IconButtons.stories.js
@@ -37,7 +37,7 @@ export default {
       }
     },
     template: `
-      <IconButton v-bind="args" >{{args.label}}</IconButton>
+      <IconButton v-bind="args" />
     `
   }),
   parameters: {
@@ -98,3 +98,56 @@ export const SquarePill = {
     iconRight: 'x'
   }
 }
+
+export const Loading = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    label: 'Save',
+    pill: true,
+    loading: true,
+    iconLeft: 'floppy-disk'
+  },
+  render: (args) => ({
+    components: {
+      IconButton
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <p class="text-muted">Click to toggle loading state.</p>
+      <icon-button v-bind="args" @click="args.loading = !args.loading" />
+    `
+  })
+}
+
+export const LoadingSpinner = {
+  args: {
+    variant: 'secondary',
+    size: 'md',
+    label: 'Refresh',
+    pill: true,
+    loading: true,
+    loadingDuration: '500ms',
+    loadingText: 'Refreshing...',
+    iconLeft: 'arrow-clockwise',
+    iconSpinner: 'arrow-clockwise'
+  },
+  render: (args) => ({
+    components: {
+      IconButton
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <p class="text-muted">Click to toggle loading state.</p>
+      <icon-button v-bind="args" @click="args.loading = !args.loading" />
+    `
+  })
+}