sprintify-ui 0.0.46 → 0.0.48

package/dist/types/src/components/BaseAutocomplete.vue.d.ts

@@ -284,6 +284,7 @@ declare const _default: {
         footer: (_: {
             options: NormalizedOption[];
             keywords: string;
+            hideDropdown: () => void;
         }) => any;
     };
 });

package/dist/types/src/components/BaseAutocompleteFetch.vue.d.ts

@@ -264,6 +264,7 @@ declare const _default: {
         footer: (_: {
             options: import("@/types").NormalizedOption[];
             keywords: string;
+            hideDropdown: () => void;
         } & {
             keywords: string;
         }) => any;

package/dist/types/src/components/BaseBelongsTo.vue.d.ts

@@ -273,6 +273,7 @@ declare const _default: {
         footer: (_: {
             options: import("@/types").NormalizedOption[];
             keywords: string;
+            hideDropdown: () => void;
         } & {
             keywords: string;
         }) => any;

package/dist/types/src/components/BaseForm.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
             successHandler: (response: any) => void;
             errorHandler: (error: AxiosError) => void;
             loadingMaskClass: string;
+            showNotificationOnError: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             url: {
                 required: true;
@@ -51,10 +52,14 @@ declare const _default: {
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass" | "showNotificationOnError">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -107,6 +112,10 @@ declare const _default: {
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
@@ -124,6 +133,7 @@ declare const _default: {
             successHandler: (response: any) => void;
             errorHandler: (error: AxiosError) => void;
             loadingMaskClass: string;
+            showNotificationOnError: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -183,6 +193,10 @@ declare const _default: {
             default: string;
             type: StringConstructor;
         };
+        showNotificationOnError: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onSuccess?: ((...args: any[]) => any) | undefined;
@@ -236,6 +250,10 @@ declare const _default: {
         default: string;
         type: StringConstructor;
     };
+    showNotificationOnError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     onError?: ((...args: any[]) => any) | undefined;
     onSuccess?: ((...args: any[]) => any) | undefined;
@@ -253,6 +271,7 @@ declare const _default: {
     successHandler: (response: any) => void;
     errorHandler: (error: AxiosError) => void;
     loadingMaskClass: string;
+    showNotificationOnError: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {

package/dist/types/src/components/BaseLocaleForm.vue.d.ts

@@ -81,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 url: {
                     required: true;
@@ -120,10 +121,14 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass" | "showNotificationOnError">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -176,6 +181,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
@@ -193,6 +202,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -252,6 +262,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
@@ -305,6 +319,10 @@ declare const _default: import("vue").DefineComponent<{
             default: string;
             type: StringConstructor;
         };
+        showNotificationOnError: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onSuccess?: ((...args: any[]) => any) | undefined;
@@ -322,6 +340,7 @@ declare const _default: import("vue").DefineComponent<{
         successHandler: (response: any) => void;
         errorHandler: (error: import("axios").AxiosError<any, any>) => void;
         loadingMaskClass: string;
+        showNotificationOnError: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default: (_: {

package/dist/types/src/components/BaseNumberForm.vue.d.ts

@@ -58,6 +58,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 url: {
                     required: true;
@@ -97,10 +98,14 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass" | "showNotificationOnError">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -153,6 +158,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
@@ -170,6 +179,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -229,6 +239,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
@@ -282,6 +296,10 @@ declare const _default: import("vue").DefineComponent<{
             default: string;
             type: StringConstructor;
         };
+        showNotificationOnError: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onSuccess?: ((...args: any[]) => any) | undefined;
@@ -299,6 +317,7 @@ declare const _default: import("vue").DefineComponent<{
         successHandler: (response: any) => void;
         errorHandler: (error: import("axios").AxiosError<any, any>) => void;
         loadingMaskClass: string;
+        showNotificationOnError: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default: (_: {

package/dist/types/src/components/BasePasswordForm.vue.d.ts

@@ -51,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 url: {
                     required: true;
@@ -90,10 +91,14 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass" | "showNotificationOnError">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -146,6 +151,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
@@ -163,6 +172,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -222,6 +232,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
@@ -275,6 +289,10 @@ declare const _default: import("vue").DefineComponent<{
             default: string;
             type: StringConstructor;
         };
+        showNotificationOnError: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onSuccess?: ((...args: any[]) => any) | undefined;
@@ -292,6 +310,7 @@ declare const _default: import("vue").DefineComponent<{
         successHandler: (response: any) => void;
         errorHandler: (error: import("axios").AxiosError<any, any>) => void;
         loadingMaskClass: string;
+        showNotificationOnError: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default: (_: {

package/dist/types/src/components/BaseStepper.vue.d.ts

@@ -0,0 +1,16 @@
+import { PropType } from 'vue';
+import { StepperItem } from '@/types/StepperItem';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        required: true;
+        type: PropType<StepperItem[]>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        required: true;
+        type: PropType<StepperItem[]>;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/dist/types/src/components/BaseStepperItem.vue.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    stepNumber: {
+        required: true;
+        type: NumberConstructor;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        required: false;
+        default: null;
+        type: PropType<string | null>;
+    };
+    status: {
+        required: true;
+        type: StringConstructor;
+    };
+    index: {
+        required: true;
+        type: NumberConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    stepNumber: {
+        required: true;
+        type: NumberConstructor;
+    };
+    title: {
+        required: true;
+        type: StringConstructor;
+    };
+    description: {
+        required: false;
+        default: null;
+        type: PropType<string | null>;
+    };
+    status: {
+        required: true;
+        type: StringConstructor;
+    };
+    index: {
+        required: true;
+        type: NumberConstructor;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    description: string | null;
+}>;
+export default _default;

package/dist/types/src/components/BaseTextareaForm.vue.d.ts

@@ -65,6 +65,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 url: {
                     required: true;
@@ -104,10 +105,14 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "axiosInstance" | "format" | "beforeSubmit" | "successHandler" | "errorHandler" | "loadingMaskClass" | "showNotificationOnError">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -160,6 +165,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: string;
                     type: StringConstructor;
                 };
+                showNotificationOnError: {
+                    default: boolean;
+                    type: BooleanConstructor;
+                };
             }>> & {
                 onError?: ((...args: any[]) => any) | undefined;
                 onSuccess?: ((...args: any[]) => any) | undefined;
@@ -177,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
                 successHandler: (response: any) => void;
                 errorHandler: (error: import("axios").AxiosError<any, any>) => void;
                 loadingMaskClass: string;
+                showNotificationOnError: boolean;
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -236,6 +246,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: string;
                 type: StringConstructor;
             };
+            showNotificationOnError: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
         }>> & {
             onError?: ((...args: any[]) => any) | undefined;
             onSuccess?: ((...args: any[]) => any) | undefined;
@@ -289,6 +303,10 @@ declare const _default: import("vue").DefineComponent<{
             default: string;
             type: StringConstructor;
         };
+        showNotificationOnError: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
     }>> & {
         onError?: ((...args: any[]) => any) | undefined;
         onSuccess?: ((...args: any[]) => any) | undefined;
@@ -306,6 +324,7 @@ declare const _default: import("vue").DefineComponent<{
         successHandler: (response: any) => void;
         errorHandler: (error: import("axios").AxiosError<any, any>) => void;
         loadingMaskClass: string;
+        showNotificationOnError: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default: (_: {

package/dist/types/src/types/{Colors.d.ts → Color.d.ts}

@@ -1,4 +1,4 @@
-export declare enum Colors {
+export declare enum Color {
     primary = "primary",
     danger = "danger",
     warning = "warning",

package/dist/types/src/types/Status.d.ts

@@ -0,0 +1,5 @@
+export declare enum Status {
+    pending = "pending",
+    completed = "completed",
+    current = "current"
+}

package/dist/types/src/types/StepperItem.d.ts

@@ -0,0 +1,7 @@
+import { Status } from './Status';
+export interface StepperItem {
+    title: string;
+    description?: string | null;
+    stepNumber: number;
+    status: Status;
+}

package/dist/types/src/types/TimelineItem.d.ts

@@ -1,8 +1,8 @@
-import { Colors } from './Colors';
+import { Color } from './Color';
 export interface TimelineItem {
     title: string;
     icon: string;
     description?: null | string;
     date?: string | null;
-    color?: Colors | null;
+    color?: Color | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocomplete.vue

@@ -98,6 +98,7 @@
             <slot
               :options="filteredNormalizedOptions"
               :keywords="keywords"
+              :hide-dropdown="hideDropdown"
               name="footer"
             />
           </div>
@@ -367,9 +368,12 @@ const clear = () => {
 
 const onSelect = (normalizedModelValue: Option | null | undefined) => {
   update(normalizedModelValue);
-  inputElement.value?.blur();
 };
 
+function hideDropdown() {
+  inputElement.value?.blur();
+}
+
 const update = (normalizedSelection: Option | null | undefined) => {
   const selection = normalizedSelection ? normalizedSelection.option : null;
   if (normalizedSelection) {

package/src/components/BaseCard.vue

@@ -22,7 +22,8 @@ defineProps({
   },
 });
 
-const windowWidth = ref(0);
+// windowWidth should not be equal to width when the card is mounted
+const windowWidth = ref(1);
 const width = ref(0);
 const card = ref(null) as Ref<HTMLElement | null>;
 

package/src/components/BaseForm.vue

@@ -44,7 +44,7 @@ import { serialize } from 'object-to-formdata';
 import { Method, DataFormat } from '@/types';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { config, useNotificationsStore } from '@/index';
-import { isArray } from 'lodash';
+import { get, isArray } from 'lodash';
 
 const notifications = useNotificationsStore();
 
@@ -97,6 +97,10 @@ const props = defineProps({
     default: 'bg-white',
     type: String,
   },
+  showNotificationOnError: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const i18n = useI18n();
@@ -214,6 +218,16 @@ function query() {
 
       props.errorHandler(error);
 
+      const errorMessage = get(error, 'response.data.message', null);
+
+      if (props.showNotificationOnError && errorMessage) {
+        notifications.push({
+          color: 'danger',
+          title: i18n.t('sui.error'),
+          text: errorMessage,
+        });
+      }
+
       emit('error', error);
     });
 }

package/src/components/BaseStepper.stories.js

@@ -0,0 +1,94 @@
+import BaseStepper from './BaseStepper.vue';
+
+export default {
+  title: 'Components/BaseStepper',
+  component: BaseStepper,
+};
+
+const Template = (args) => ({
+  components: { BaseStepper },
+  setup() {
+    return { args };
+  },
+  template: `<BaseStepper v-bind="args"/>`,
+});
+
+const threeItems = [
+  {
+    title: 'Job details',
+    description: 'Vitae sed mi luctus laoreet.',
+    stepNumber: 1,
+    status: 'completed',
+    index: 0,
+  },
+  {
+    title: 'Application form',
+    description: 'Cursus semper viverra.',
+    stepNumber: 2,
+    status: 'current',
+    index: 1,
+  },
+  {
+    title: 'Preview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 3,
+    status: 'pending',
+    index: 2,
+  },
+];
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  items: threeItems,
+};
+
+const sixItems = [
+  {
+    title: 'Job details',
+    description: 'Vitae sed mi luctus laoreet.',
+    stepNumber: 1,
+    status: 'completed',
+    index: 0,
+  },
+  {
+    title: 'Application form',
+    description: 'Cursus semper viverra.',
+    stepNumber: 2,
+    status: 'completed',
+    index: 1,
+  },
+  {
+    title: 'Preview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 3,
+    status: 'completed',
+    index: 2,
+  },
+  {
+    title: 'HR interview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 4,
+    status: 'completed',
+    index: 3,
+  },
+  {
+    title: 'Technical interview',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 5,
+    status: 'current',
+    index: 4,
+  },
+  {
+    title: 'Hiring',
+    description: 'Penatibus eu quis ante.',
+    stepNumber: 6,
+    status: 'pending',
+    index: 5,
+  },
+];
+
+export const ManyItems = Template.bind({});
+ManyItems.args = {
+  items: sixItems,
+};