From 80177679f2aa0d7f0e39e639a02d527a06e6172c Mon Sep 17 00:00:00 2001 From: J-Michalek <71264422+J-Michalek@users.noreply.github.com> Date: Fri, 30 May 2025 15:27:11 +0200 Subject: [PATCH] feat(Timeline): new component (#4215) Co-authored-by: Benjamin Canac Co-authored-by: Jakub --- .../TimelineAlternatingLayoutExample.vue | 34 + .../timeline/TimelineCustomSlotExample.vue | 52 + .../timeline/TimelineModelValueExample.vue | 42 + .../timeline/TimelineSlotsExample.vue | 60 + docs/content/3.components/stepper.md | 4 + docs/content/3.components/tabs.md | 4 + docs/content/3.components/timeline.md | 228 +++ docs/content/3.components/tree.md | 9 +- docs/public/components/dark/timeline.png | Bin 0 -> 18084 bytes docs/public/components/light/timeline.png | Bin 0 -> 17763 bytes playground-vue/src/app.vue | 1 + playground/app/app.vue | 1 + playground/app/pages/components/timeline.vue | 60 + src/runtime/components/Timeline.vue | 129 ++ src/runtime/types/index.ts | 1 + src/theme/index.ts | 1 + src/theme/timeline.ts | 168 +++ test/components/Timeline.spec.ts | 57 + .../__snapshots__/Timeline-vue.spec.ts.snap | 1306 +++++++++++++++++ .../__snapshots__/Timeline.spec.ts.snap | 1306 +++++++++++++++++ 20 files changed, 3462 insertions(+), 1 deletion(-) create mode 100644 docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue create mode 100644 docs/app/components/content/examples/timeline/TimelineCustomSlotExample.vue create mode 100644 docs/app/components/content/examples/timeline/TimelineModelValueExample.vue create mode 100644 docs/app/components/content/examples/timeline/TimelineSlotsExample.vue create mode 100644 docs/content/3.components/timeline.md create mode 100644 docs/public/components/dark/timeline.png create mode 100644 docs/public/components/light/timeline.png create mode 100644 playground/app/pages/components/timeline.vue create mode 100644 src/runtime/components/Timeline.vue create mode 100644 src/theme/timeline.ts create mode 100644 test/components/Timeline.spec.ts create mode 100644 test/components/__snapshots__/Timeline-vue.spec.ts.snap create mode 100644 test/components/__snapshots__/Timeline.spec.ts.snap diff --git a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue new file mode 100644 index 00000000..bd6174fd --- /dev/null +++ b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue @@ -0,0 +1,34 @@ + + + diff --git a/docs/app/components/content/examples/timeline/TimelineCustomSlotExample.vue b/docs/app/components/content/examples/timeline/TimelineCustomSlotExample.vue new file mode 100644 index 00000000..2f933fa5 --- /dev/null +++ b/docs/app/components/content/examples/timeline/TimelineCustomSlotExample.vue @@ -0,0 +1,52 @@ + + + diff --git a/docs/app/components/content/examples/timeline/TimelineModelValueExample.vue b/docs/app/components/content/examples/timeline/TimelineModelValueExample.vue new file mode 100644 index 00000000..35452938 --- /dev/null +++ b/docs/app/components/content/examples/timeline/TimelineModelValueExample.vue @@ -0,0 +1,42 @@ + + + diff --git a/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue b/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue new file mode 100644 index 00000000..6eaa5590 --- /dev/null +++ b/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue @@ -0,0 +1,60 @@ + + + diff --git a/docs/content/3.components/stepper.md b/docs/content/3.components/stepper.md index 5622d123..2f4cdcee 100644 --- a/docs/content/3.components/stepper.md +++ b/docs/content/3.components/stepper.md @@ -200,6 +200,10 @@ Use the `#content` slot to customize the content of each item. Use the `slot` property to customize a specific item. +You will have access to the following slots: + +- `#{{ item.slot }}`{lang="ts-type"} + :component-example{name="stepper-custom-slot-example"} ## API diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md index 3dc8a564..45b0e1fd 100644 --- a/docs/content/3.components/tabs.md +++ b/docs/content/3.components/tabs.md @@ -222,6 +222,10 @@ Use the `#content` slot to customize the content of each item. Use the `slot` property to customize a specific item. +You will have access to the following slots: + +- `#{{ item.slot }}`{lang="ts-type"} + :component-example{name="tabs-custom-slot-example"} ## API diff --git a/docs/content/3.components/timeline.md b/docs/content/3.components/timeline.md new file mode 100644 index 00000000..85b39155 --- /dev/null +++ b/docs/content/3.components/timeline.md @@ -0,0 +1,228 @@ +--- +title: Timeline +description: 'A component that displays a sequence of events with dates, titles, icons or avatars.' +category: data +links: + - label: GitHub + icon: i-simple-icons-github + to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue +navigation.badge: Soon +--- + +## Usage + +### Items + +Use the `items` prop as an array of objects with the following properties: + +- `date?: string`{lang="ts-type"} +- `title?: string`{lang="ts-type"} +- `description?: AvatarProps`{lang="ts-type"} +- `icon?: string`{lang="ts-type"} +- `avatar?: AvatarProps`{lang="ts-type"} +- `value?: string | number`{lang="ts-type"} +- [`slot?: string`{lang="ts-type"}](#with-custom-slot) +- `class?: any`{lang="ts-type"} +- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, separator?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"} + +::component-code +--- +ignore: + - items + - class + - defaultValue +external: + - items +externalTypes: + - TimelineItem[] +props: + defaultValue: 2 + items: + - date: 'Mar 15, 2025' + title: 'Project Kickoff' + description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.' + icon: 'i-lucide-rocket' + - date: 'Mar 22 2025' + title: 'Design Phase' + description: 'User research and design workshops. Created wireframes and prototypes for user testing.' + icon: 'i-lucide-palette' + - date: 'Mar 29 2025' + title: 'Development Sprint' + description: 'Frontend and backend development. Implemented core features and integrated with APIs.' + icon: 'i-lucide-code' + - date: 'Apr 5 2025' + title: 'Testing & Deployment' + description: 'QA testing and performance optimization. Deployed the application to production.' + icon: 'i-lucide-check-circle' + class: 'w-96' +--- +:: + +### Color + +Use the `color` prop to change the color of the active items in a Timeline. + +::component-code +--- +ignore: + - items + - class + - defaultValue +external: + - items +externalTypes: + - TimelineItem[] +props: + color: neutral + defaultValue: 2 + items: + - date: 'Mar 15, 2025' + title: 'Project Kickoff' + description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.' + icon: 'i-lucide-rocket' + - date: 'Mar 22 2025' + title: 'Design Phase' + description: 'User research and design workshops. Created wireframes and prototypes for user testing.' + icon: 'i-lucide-palette' + - date: 'Mar 29 2025' + title: 'Development Sprint' + description: 'Frontend and backend development. Implemented core features and integrated with APIs.' + icon: 'i-lucide-code' + - date: 'Apr 5 2025' + title: 'Testing & Deployment' + description: 'QA testing and performance optimization. Deployed the application to production.' + icon: 'i-lucide-check-circle' + class: 'w-96' +--- +:: + +### Size + +Use the `size` prop to change the size of the Timeline. + +::component-code +--- +ignore: + - items + - class + - defaultValue +external: + - items +externalTypes: + - TimelineItem[] +props: + size: xs + defaultValue: 2 + items: + - date: 'Mar 15, 2025' + title: 'Project Kickoff' + description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.' + icon: 'i-lucide-rocket' + - date: 'Mar 22 2025' + title: 'Design Phase' + description: 'User research and design workshops. Created wireframes and prototypes for user testing.' + icon: 'i-lucide-palette' + - date: 'Mar 29 2025' + title: 'Development Sprint' + description: 'Frontend and backend development. Implemented core features and integrated with APIs.' + icon: 'i-lucide-code' + - date: 'Apr 5 2025' + title: 'Testing & Deployment' + description: 'QA testing and performance optimization. Deployed the application to production.' + icon: 'i-lucide-check-circle' + class: 'w-96' +--- +:: + +### Orientation + +Use the `orientation` prop to change the orientation of the Timeline. Defaults to `vertical`. + +::component-code +--- +ignore: + - items + - class + - defaultValue +external: + - items +externalTypes: + - TimelineItem[] +props: + orientation: 'horizontal' + defaultValue: 2 + items: + - date: 'Mar 15, 2025' + title: 'Project Kickoff' + description: 'Kicked off the project with team alignment.' + icon: 'i-lucide-rocket' + - date: 'Mar 22 2025' + title: 'Design Phase' + description: 'User research and design workshops.' + icon: 'i-lucide-palette' + - date: 'Mar 29 2025' + title: 'Development Sprint' + description: 'Frontend and backend development.' + icon: 'i-lucide-code' + - date: 'Apr 5 2025' + title: 'Testing & Deployment' + description: 'QA testing and performance optimization.' + icon: 'i-lucide-check-circle' + class: 'w-full' +--- +:: + +## Examples + +### Control active item + +You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item. + +:component-example{name="timeline-model-value-example" prettier} + +::tip +You can also pass the `value` of one of the items if provided. +:: + +### With alternating layout + +Use the `ui` prop to create a Timeline with alternating layout. + +:component-example{name="timeline-alternating-layout-example" prettier} + +### With custom slot + +Use the `slot` property to customize a specific item. + +You will have access to the following slots: + +- `#{{ item.slot }}-indicator`{lang="ts-type"} +- `#{{ item.slot }}-date`{lang="ts-type"} +- `#{{ item.slot }}-title`{lang="ts-type"} +- `#{{ item.slot }}-description`{lang="ts-type"} + +:component-example{name="timeline-custom-slot-example" prettier} + +### With slots + +Use the available slots to create a more complex Timeline. + +:component-example{name="timeline-slots-example" prettier} + +## API + +### Props + +:component-props + +### Slots + +:component-slots + +### Emits + +:component-emits + +## Theme + +:component-theme diff --git a/docs/content/3.components/tree.md b/docs/content/3.components/tree.md index 35fe5aca..93452397 100644 --- a/docs/content/3.components/tree.md +++ b/docs/content/3.components/tree.md @@ -407,7 +407,14 @@ This lets you select a parent item without expanding or collapsing its children. ### With custom slot -Use the `item.slot` property to customize a specific item. +Use the `slot` property to customize a specific item. + +You will have access to the following slots: + +- `#{{ item.slot }}`{lang="ts-type"} +- `#{{ item.slot }}-leading`{lang="ts-type"} +- `#{{ item.slot }}-label`{lang="ts-type"} +- `#{{ item.slot }}-trailing`{lang="ts-type"} ::component-example --- diff --git a/docs/public/components/dark/timeline.png b/docs/public/components/dark/timeline.png new file mode 100644 index 0000000000000000000000000000000000000000..7e0609485ea4fcfdc40dc4b47a05081478aca31d GIT binary patch literal 18084 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 OoL?!aD^|#xhy7o1saQ<_ literal 0 HcmV?d00001 diff --git a/docs/public/components/light/timeline.png b/docs/public/components/light/timeline.png new file mode 100644 index 0000000000000000000000000000000000000000..ed187b4a1088b765c041409508f7b6dca26c81e0 GIT binary patch literal 17763 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 +import type { TimelineItem } from '@nuxt/ui' +import theme from '#build/ui/timeline' + +const sizes = Object.keys(theme.variants.size) +const colors = Object.keys(theme.variants.color) +const orientations = Object.keys(theme.variants.orientation) + +const orientation = ref('vertical' as const) +const color = ref('primary' as const) +const size = ref('md' as const) + +const items = [{ + date: 'Mar 15, 2025', + title: 'Project Kickoff', + description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.', + icon: 'i-lucide-rocket', + value: 'kickoff' +}, { + date: 'Mar 22, 2025', + title: 'Design Phase', + description: 'User research and design workshops. Created wireframes and prototypes for user testing', + icon: 'i-lucide-palette', + value: 'design' +}, { + date: 'Mar 29, 2025', + title: 'Development Sprint', + description: 'Frontend and backend development. Implemented core features and integrated with APIs.', + icon: 'i-lucide-code', + value: 'development' +}, { + date: 'Apr 5, 2025', + title: 'Testing & Deployment', + description: 'QA testing and performance optimization. Deployed the application to production.', + icon: 'i-lucide-check-circle', + value: 'deployment' +}] satisfies TimelineItem[] + +const value = ref('kickoff') + + + diff --git a/src/runtime/components/Timeline.vue b/src/runtime/components/Timeline.vue new file mode 100644 index 00000000..4676c2d1 --- /dev/null +++ b/src/runtime/components/Timeline.vue @@ -0,0 +1,129 @@ + + + + + + diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts index c5e73f66..f2a9d684 100644 --- a/src/runtime/types/index.ts +++ b/src/runtime/types/index.ts @@ -46,6 +46,7 @@ export * from '../components/Switch.vue' export * from '../components/Table.vue' export * from '../components/Tabs.vue' export * from '../components/Textarea.vue' +export * from '../components/Timeline.vue' export * from '../components/Toast.vue' export * from '../components/Toaster.vue' export * from '../components/Tooltip.vue' diff --git a/src/theme/index.ts b/src/theme/index.ts index 752065ec..c5253130 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -44,6 +44,7 @@ export { default as switch } from './switch' export { default as table } from './table' export { default as tabs } from './tabs' export { default as textarea } from './textarea' +export { default as timeline } from './timeline' export { default as toast } from './toast' export { default as toaster } from './toaster' export { default as tooltip } from './tooltip' diff --git a/src/theme/timeline.ts b/src/theme/timeline.ts new file mode 100644 index 00000000..023c2d4e --- /dev/null +++ b/src/theme/timeline.ts @@ -0,0 +1,168 @@ +import type { ModuleOptions } from '../module' + +export default (options: Required) => ({ + slots: { + root: 'flex gap-1.5', + item: 'group relative flex flex-1 gap-3', + container: 'relative flex items-center gap-1.5', + indicator: 'group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted', + separator: 'flex-1 rounded-full bg-elevated', + wrapper: 'w-full', + date: 'text-dimmed text-xs/5', + title: 'font-medium text-highlighted text-sm', + description: 'text-muted text-wrap text-sm' + }, + + variants: { + orientation: { + horizontal: { + root: 'flex-row w-full', + item: 'flex-col', + separator: 'h-0.5' + }, + vertical: { + root: 'flex-col', + container: 'flex-col', + separator: 'w-0.5' + } + }, + + color: { + ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { + indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`, + separator: `group-data-[state=completed]:bg-${color}` + }])), + neutral: { + indicator: 'group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted', + separator: 'group-data-[state=completed]:bg-inverted' + } + }, + + size: { + '3xs': '', + '2xs': '', + 'xs': '', + 'sm': '', + 'md': '', + 'lg': '', + 'xl': '', + '2xl': '', + '3xl': '' + } + }, + + compoundVariants: [{ + orientation: 'horizontal', + size: '3xs', + class: { + wrapper: 'pe-4.5' + } + }, { + orientation: 'horizontal', + size: '2xs', + class: { + wrapper: 'pe-5' + } + }, { + orientation: 'horizontal', + size: 'xs', + class: { + wrapper: 'pe-5.5' + } + }, { + orientation: 'horizontal', + size: 'sm', + class: { + wrapper: 'pe-6' + } + }, { + orientation: 'horizontal', + size: 'md', + class: { + wrapper: 'pe-6.5' + } + }, { + orientation: 'horizontal', + size: 'lg', + class: { + wrapper: 'pe-7' + } + }, { + orientation: 'horizontal', + size: 'xl', + class: { + wrapper: 'pe-7.5' + } + }, { + orientation: 'horizontal', + size: '2xl', + class: { + wrapper: 'pe-8' + } + }, { + orientation: 'horizontal', + size: '3xl', + class: { + wrapper: 'pe-8.5' + } + }, { + orientation: 'vertical', + size: '3xs', + class: { + wrapper: '-mt-0.5 pb-4.5' + } + }, { + orientation: 'vertical', + size: '2xs', + class: { + wrapper: 'pb-5' + } + }, { + orientation: 'vertical', + size: 'xs', + class: { + wrapper: 'mt-0.5 pb-5.5' + } + }, { + orientation: 'vertical', + size: 'sm', + class: { + wrapper: 'mt-1 pb-6' + } + }, { + orientation: 'vertical', + size: 'md', + class: { + wrapper: 'mt-1.5 pb-6.5' + } + }, { + orientation: 'vertical', + size: 'lg', + class: { + wrapper: 'mt-2 pb-7' + } + }, { + orientation: 'vertical', + size: 'xl', + class: { + wrapper: 'mt-2.5 pb-7.5' + } + }, { + orientation: 'vertical', + size: '2xl', + class: { + wrapper: 'mt-3 pb-8' + } + }, { + orientation: 'vertical', + size: '3xl', + class: { + wrapper: 'mt-3.5 pb-8.5' + } + }], + + defaultVariants: { + size: 'md', + color: 'primary' + } +}) diff --git a/test/components/Timeline.spec.ts b/test/components/Timeline.spec.ts new file mode 100644 index 00000000..d33ab666 --- /dev/null +++ b/test/components/Timeline.spec.ts @@ -0,0 +1,57 @@ +import { describe, it, expect } from 'vitest' +import Timeline, { type TimelineProps, type TimelineSlots } from '../../src/runtime/components/Timeline.vue' +import ComponentRender from '../component-render' +import theme from '#build/ui/timeline' + +describe('Timeline', () => { + const sizes = Object.keys(theme.variants.size) as any + + const items = [{ + date: 'Mar 15, 2025', + title: 'Project Kickoff', + description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.', + icon: 'i-lucide-rocket', + value: 'kickoff' + }, { + date: 'Mar 22, 2025', + title: 'Design Phase', + description: 'User research and design workshops. Created wireframes and prototypes for user testing', + icon: 'i-lucide-palette', + value: 'design' + }, { + date: 'Mar 29, 2025', + title: 'Development Sprint', + description: 'Frontend and backend development. Implemented core features and integrated with APIs.', + icon: 'i-lucide-code', + value: 'development' + }, { + date: 'Apr 5, 2025', + title: 'Testing & Deployment', + description: 'QA testing and performance optimization. Deployed the application to production.', + icon: 'i-lucide-check-circle', + value: 'deployment' + }] + + const props = { items } + + it.each([ + // Props + ['with items', { props }], + ['with modelValue', { props: { ...props, modelValue: 'assigned' } }], + ['with defaultValue', { props: { ...props, defaultValue: 'assigned' } }], + ['with neutral color', { props: { ...props, color: 'neutral' } }], + ...sizes.map((size: string) => [`with size ${size} horizontal`, { props: { ...props, size } }]), + ...sizes.map((size: string) => [`with size ${size} vertical`, { props: { ...props, size, orientation: 'vertical' } }]), + ['with as', { props: { ...props, as: 'section' } }], + ['with class', { props: { ...props, class: 'gap-8' } }], + ['with ui', { props: { ...props, ui: { title: 'font-bold' } } }], + // Slots + ['with indicator slot', { props, slots: { indicator: () => 'Indicator slot' } }], + ['with date slot', { props, slots: { date: () => 'Date slot' } }], + ['with title slot', { props, slots: { title: () => 'Title slot' } }], + ['with description slot', { props, slots: { description: () => 'Description slot' } }] + ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TimelineProps, slots?: Partial }) => { + const html = await ComponentRender(nameOrHtml, options, Timeline) + expect(html).toMatchSnapshot() + }) +}) diff --git a/test/components/__snapshots__/Timeline-vue.spec.ts.snap b/test/components/__snapshots__/Timeline-vue.spec.ts.snap new file mode 100644 index 00000000..1b71fc0c --- /dev/null +++ b/test/components/__snapshots__/Timeline-vue.spec.ts.snap @@ -0,0 +1,1306 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Timeline > renders with as correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with class correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with date slot correctly 1`] = ` +"
+
+
+ +
+
+
Date slot
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Date slot
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Date slot
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Date slot
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with defaultValue correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with description slot correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Description slot
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
Description slot
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Description slot
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
Description slot
+
+
+
" +`; + +exports[`Timeline > renders with indicator slot correctly 1`] = ` +"
+
+
Indicator slot + +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
Indicator slot + +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
Indicator slot + +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
Indicator slot + +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with items correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with modelValue correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with neutral color correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size lg horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size lg vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size md horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size md vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size sm horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size sm vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with title slot correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Title slot
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Title slot
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Title slot
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Title slot
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with ui correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; diff --git a/test/components/__snapshots__/Timeline.spec.ts.snap b/test/components/__snapshots__/Timeline.spec.ts.snap new file mode 100644 index 00000000..c25f8580 --- /dev/null +++ b/test/components/__snapshots__/Timeline.spec.ts.snap @@ -0,0 +1,1306 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Timeline > renders with as correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with class correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with date slot correctly 1`] = ` +"
+
+
+ +
+
+
Date slot
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Date slot
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Date slot
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Date slot
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with defaultValue correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with description slot correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Description slot
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
Description slot
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Description slot
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
Description slot
+
+
+
" +`; + +exports[`Timeline > renders with indicator slot correctly 1`] = ` +"
+
+
Indicator slot + +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
Indicator slot + +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
Indicator slot + +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
Indicator slot + +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with items correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with modelValue correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with neutral color correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 2xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size 3xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size lg horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size lg vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size md horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size md vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size sm horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size sm vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xl horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xl vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xs horizontal correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with size xs vertical correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with title slot correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Title slot
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Title slot
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Title slot
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Title slot
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`; + +exports[`Timeline > renders with ui correctly 1`] = ` +"
+
+
+ +
+
+
Mar 15, 2025
+
Project Kickoff
+
Kicked off the project with team alignment. Set up project milestones and allocated resources.
+
+
+
+
+ +
+
+
Mar 22, 2025
+
Design Phase
+
User research and design workshops. Created wireframes and prototypes for user testing
+
+
+
+
+ +
+
+
Mar 29, 2025
+
Development Sprint
+
Frontend and backend development. Implemented core features and integrated with APIs.
+
+
+
+
+ +
+
+
Apr 5, 2025
+
Testing & Deployment
+
QA testing and performance optimization. Deployed the application to production.
+
+
+
" +`;