Added story & renamed prop type to variant

youcan-shop · Jun 19, 2024 · bb5faf3 · bb5faf3
1 parent 21ac5f6
commit bb5faf3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/packages/alto/src/_dev/App.vue b/packages/alto/src/_dev/App.vue
@@ -6,9 +6,9 @@ import { Loader } from '~/components';
 
 <template>
   <div class="container">
-    <Loader type="spinner" label="Loading..." />
-    <Loader type="brand" />
-    <Loader type="bar" />
+    <Loader variant="spinner" label="Loading..." />
+    <Loader variant="brand" />
+    <Loader variant="bar" />
   </div>
 </template>
 

diff --git a/packages/alto/src/components/Loader/Loader.stories.ts b/packages/alto/src/components/Loader/Loader.stories.ts
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Loader } from '~/components';
+
+type Story = StoryObj<typeof Loader>;
+const meta: Meta<typeof Loader> = {
+  title: 'Application/Loader',
+  component: Loader,
+  tags: ['loader', 'loading', 'spinner'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['spinner', 'brand', 'bar'],
+    },
+    labelFontSize: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+  args: {
+    variant: 'spinner',
+    size: 40,
+    label: '',
+    labelFontSize: 'md',
+    color: 'var(--brand-500)',
+    labelColor: 'var(--brand-500)',
+  },
+};
+
+export const Default: Story = {
+  render: args => ({
+    components: { Loader },
+    setup() {
+      return { args };
+    },
+    template: '<Loader v-bind="args" />',
+  }),
+};
+
+export default meta;
diff --git a/packages/alto/src/components/Loader/Loader.vue b/packages/alto/src/components/Loader/Loader.vue
@@ -9,12 +9,12 @@ const props = withDefaults(
     size: 40,
     labelColor: 'var(--brand-500)',
     labelFontSize: 'md',
-    type: 'spinner',
+    variant: 'spinner',
   },
 );
 
 const loader = computed (() => {
-  switch (props.type) {
+  switch (props.variant) {
     case 'brand':
       return defineAsyncComponent(() => import('./internal/BrandLoading.vue'));
 

diff --git a/packages/alto/src/components/Loader/types.ts b/packages/alto/src/components/Loader/types.ts
@@ -1,4 +1,4 @@
-export type SpinnerType = 'brand' | 'bar' | 'spinner';
+export type SpinnerVariant = 'brand' | 'bar' | 'spinner';
 export type LabelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 interface SharedProps {
@@ -19,5 +19,5 @@ export interface LoaderProps {
   color?: string
   labelColor?: string
   labelFontSize?: LabelSize
-  type?: SpinnerType
+  variant?: SpinnerVariant
 }