sprintify-ui 0.0.35 → 0.0.36

package/src/components/BaseTimelineItem.stories.js

@@ -0,0 +1,78 @@
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+const colors = [
+  'primary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'grey',
+  'black',
+];
+
+export default {
+  title: 'Components/BaseTimelineItem',
+  component: BaseTimelineItem,
+};
+
+const Template = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
+});
+
+const ColorsTemplate = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    const items = colors.map((color) => {
+      return {
+        title: 'Advanced to phone screening by Bethany Blake',
+        icon: 'heroicons:shield-check-20-solid',
+        description:
+          'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+        color: color,
+        date: '15 Jan',
+      };
+    });
+    return { args, items };
+  },
+  template: `
+  <div class="max-w-md">
+  <ul role="list" class="-mb-8">
+  <li v-for="(item, index) in items" :key="index">
+  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
+        <div class="relative pb-8">
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+      </ul>
+      </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  item: {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description: '',
+    color: 'warning',
+    date: '15 Jan',
+  },
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  item: {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description:
+      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+    color: 'primary',
+    date: '15 Jan',
+  },
+};
+
+export const Colors = ColorsTemplate.bind({});

package/src/components/BaseTimelineItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="relative flex space-x-3">
+    <div>
+      <span
+        :class="[
+          iconBackgroundClass,
+          'flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white',
+        ]"
+      >
+        <BaseIcon
+          class="w-5 h-5 text-white"
+          aria-hidden="true"
+          :icon="item.icon"
+        />
+      </span>
+    </div>
+    <div
+      class="flex justify-between flex-1 min-w-0 space-x-4"
+      :class="{ 'pt-1.5': !item.description }"
+    >
+      <div>
+        <p class="text-sm leading-tight text-slate-600">
+          {{ item.title }}
+        </p>
+        <p
+          v-if="item.description"
+          class="mt-1 text-xs leading-tight text-slate-500"
+        >
+          {{ item.description }}
+        </p>
+      </div>
+      <div
+        v-if="item.date"
+        class="text-sm text-right text-gray-500 whitespace-nowrap"
+      >
+        <time :datetime="item.date">{{ item.date }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { Colors } from '../types/Colors';
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<TimelineItem>,
+  },
+});
+
+const iconBackgroundClass = computed((): string => {
+  if (props.item.color == Colors.primary) {
+    return 'bg-primary-600';
+  }
+  if (props.item.color == Colors.danger) {
+    return 'bg-red-600';
+  }
+  if (props.item.color == Colors.warning) {
+    return 'bg-yellow-600';
+  }
+  if (props.item.color == Colors.info) {
+    return 'bg-blue-500';
+  }
+  if (props.item.color == Colors.grey) {
+    return 'bg-slate-500';
+  }
+  if (props.item.color == Colors.black) {
+    return 'bg-slate-900';
+  }
+  if (props.item.color == Colors.success) {
+    return 'bg-green-500';
+  }
+  return 'bg-gray-500';
+});
+</script>

package/src/components/index.ts

@@ -49,9 +49,11 @@ import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
+import BaseShortcut from './BaseShortcut.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
 import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
 import BaseSkeleton from './BaseSkeleton.vue';
+import BaseStatistic from './BaseStatistic.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
 import BaseTabs from './BaseTabs.vue';
@@ -62,6 +64,8 @@ import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseTimeline from './BaseTimeline.vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
 
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
@@ -120,9 +124,11 @@ export {
   BaseRadioGroup,
   BaseReadMore,
   BaseSelect,
+  BaseShortcut,
   BaseSideNavigation,
   BaseSideNavigationItem,
   BaseSkeleton,
+  BaseStatistic,
   BaseSwitch,
   BaseSystemAlert,
   BaseTabs,
@@ -133,6 +139,8 @@ export {
   BaseTableColumn,
   BaseTextarea,
   BaseTextareaAutoresize,
+  BaseTimeline,
+  BaseTimelineItem,
   BaseLayoutStacked,
   BaseLayoutStackedConfigurable,
   BaseLayoutSidebar,

package/src/types/Colors.ts

@@ -0,0 +1,9 @@
+export enum Colors {
+  primary = 'primary',
+  danger = 'danger',
+  warning = 'warning',
+  info = 'info',
+  grey = 'grey',
+  black = 'black',
+  success = 'success',
+}

package/src/types/TimelineItem.ts

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