sprintify-ui 0.0.47 → 0.0.48

package/src/components/BaseStepperItem.stories.js

@@ -0,0 +1,65 @@
+import BaseStepperItem from './BaseStepperItem.vue';
+
+export default {
+  title: 'Components/BaseStepperItem',
+  component: BaseStepperItem,
+  argTypes: {
+    status: {
+      control: { type: 'select' },
+      options: ['pending', 'current', 'completed'],
+    },
+    description: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseStepperItem },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="lg:border-t lg:border-b lg:border-gray-200">
+    <nav class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8" aria-label="Progress">
+      <ol
+        role="list"
+        class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"
+      >
+        <li
+          class="relative overflow-hidden lg:flex-1"
+        >
+          <div
+            :class="[
+              'rounded-t-md border-b-0',
+              'overflow-hidden border border-gray-200 lg:border-0',
+            ]"
+          >
+  <BaseStepperItem v-bind="args"/>
+  </div>
+  </li>
+  </ol>
+  </nav>
+  </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+
+Simple.args = {
+  title: 'Job application',
+  description: '',
+  stepNumber: 1,
+  status: 'pending',
+  index: 0,
+};
+
+export const WithDescription = Template.bind({});
+
+WithDescription.args = {
+  title: 'Job application',
+  description: 'Vitae sed mi luctus laoreet.',
+  stepNumber: 1,
+  status: 'current',
+  index: 0,
+};

package/src/components/BaseStepperItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <button
+    v-if="status === 'completed'"
+    type="button"
+    class="group"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600"
+        >
+          <BaseIcon
+            :icon="'mdi-check'"
+            class="h-6 w-6 text-white"
+            aria-hidden="true"
+          />
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span class="mb-0.5 text-left text-sm font-medium leading-tight">{{
+          title
+        }}</span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    v-else-if="status === 'current'"
+    aria-current="step"
+    type="button"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-indigo-600 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-600"
+        >
+          <span class="text-indigo-600">{{ stepNumber }}</span>
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span
+          class="mb-0.5 text-left text-sm font-medium leading-tight text-indigo-600"
+        >
+          {{ title }}
+        </span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    v-else-if="status == 'pending'"
+    type="button"
+    class="group"
+    @click="$emit('click')"
+  >
+    <span
+      class="absolute top-0 left-0 h-full w-1 bg-transparent group-hover:bg-slate-200 lg:bottom-0 lg:top-auto lg:h-1 lg:w-full"
+      aria-hidden="true"
+    />
+    <span
+      :class="[
+        index !== 0 ? 'lg:pl-9' : '',
+        'flex items-start px-6 py-5 text-sm font-medium',
+      ]"
+    >
+      <span class="flex-shrink-0">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-slate-300"
+        >
+          <span class="text-slate-500">{{ stepNumber }}</span>
+        </span>
+      </span>
+      <span class="mt-0.5 ml-4 flex min-w-0 flex-col items-start">
+        <span
+          class="mb-0.5 text-left text-sm font-medium leading-tight text-slate-600"
+        >
+          {{ title }}
+        </span>
+        <span
+          v-if="description"
+          class="text-left text-sm font-normal leading-snug text-slate-500"
+        >
+          {{ description }}
+        </span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+
+defineProps({
+  stepNumber: {
+    required: true,
+    type: Number,
+  },
+  title: {
+    required: true,
+    type: String,
+  },
+  description: {
+    required: false,
+    default: null,
+    type: String as PropType<string | null>,
+  },
+  status: {
+    required: true,
+    type: String,
+  },
+  index: {
+    required: true,
+    type: Number,
+  },
+});
+
+defineEmits(['click']);
+</script>

package/src/components/BaseTimelineItem.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { TimelineItem } from '../types/TimelineItem';
-import { Colors } from '../types/Colors';
+import { Color } from '../types/Color';
 import { PropType } from 'vue';
 import { BaseIcon } from '.';
 
@@ -53,25 +53,25 @@ const props = defineProps({
 });
 
 const iconBackgroundClass = computed((): string => {
-  if (props.item.color == Colors.primary) {
+  if (props.item.color == Color.primary) {
     return 'bg-primary-600';
   }
-  if (props.item.color == Colors.danger) {
+  if (props.item.color == Color.danger) {
     return 'bg-red-600';
   }
-  if (props.item.color == Colors.warning) {
+  if (props.item.color == Color.warning) {
     return 'bg-yellow-600';
   }
-  if (props.item.color == Colors.info) {
+  if (props.item.color == Color.info) {
     return 'bg-blue-500';
   }
-  if (props.item.color == Colors.grey) {
+  if (props.item.color == Color.grey) {
     return 'bg-slate-500';
   }
-  if (props.item.color == Colors.black) {
+  if (props.item.color == Color.black) {
     return 'bg-slate-900';
   }
-  if (props.item.color == Colors.success) {
+  if (props.item.color == Color.success) {
     return 'bg-green-500';
   }
   return 'bg-slate-500';

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

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

package/src/types/Status.ts

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

package/src/types/StepperItem.ts

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

package/src/types/TimelineItem.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;
 }