@pyreweb/fabric 1.2.6

package/src/components/organisms/FOnboardingStepper/FStepperProgress.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FStepperProgress from './FStepperProgress.vue';
+
+describe('FStepperProgress', () => {
+	const steps = ['Étape 1', 'Étape 2', 'Étape 3'];
+
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		expect(wrapper.find('nav').exists()).toBe(true);
+		expect(wrapper.find('ol').exists()).toBe(true);
+	});
+
+	it('displays all step titles', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		expect(wrapper.text()).toContain('Étape 1');
+		expect(wrapper.text()).toContain('Étape 2');
+		expect(wrapper.text()).toContain('Étape 3');
+	});
+
+	it('renders correct number of steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		const stepItems = wrapper.findAll('li');
+		expect(stepItems).toHaveLength(3);
+	});
+
+	it('starts at step 0 by default', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		expect(wrapper.vm.currentStep).toBe(0);
+	});
+
+	it('respects currentStep prop', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 1 }
+		});
+		expect(wrapper.vm.currentStep).toBe(1);
+	});
+
+	it('displays step numbers for future steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 0 }
+		});
+		// Step 2 and 3 should show numbers
+		expect(wrapper.text()).toContain('2');
+		expect(wrapper.text()).toContain('3');
+	});
+
+	it('displays checkmark for completed steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 2 }
+		});
+		// Completed steps should have SVG checkmarks
+		const svgs = wrapper.findAll('svg');
+		expect(svgs.length).toBeGreaterThanOrEqual(2);
+	});
+
+	it('applies correct classes for current step', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 1 }
+		});
+		const html = wrapper.html();
+		expect(html).toContain('bg-primary-600');
+	});
+
+	it('applies correct classes for completed steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 2 }
+		});
+		const html = wrapper.html();
+		expect(html).toContain('bg-success-600');
+	});
+
+	it('applies correct classes for future steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 0 }
+		});
+		const html = wrapper.html();
+		expect(html).toContain('bg-neutral-200');
+	});
+
+	it('renders connector lines between steps', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		// Should have 2 connector lines for 3 steps
+		const connectors = wrapper.findAll('.h-0\\.5');
+		expect(connectors.length).toBe(2);
+	});
+
+	it('has proper accessibility attributes', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps }
+		});
+		const nav = wrapper.find('nav');
+		expect(nav.attributes('aria-label')).toBe('Progression des étapes');
+	});
+
+	it('sets aria-current on current step', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps, currentStep: 1 }
+		});
+		const currentStepIndicator = wrapper.find('[aria-current="step"]');
+		expect(currentStepIndicator.exists()).toBe(true);
+	});
+
+	it('handles single step', () => {
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps: ['Seule étape'], currentStep: 0 }
+		});
+		expect(wrapper.findAll('li')).toHaveLength(1);
+		// No connectors for single step
+		expect(wrapper.findAll('.h-0\\.5').length).toBe(0);
+	});
+
+	it('handles many steps', () => {
+		const manySteps = ['A', 'B', 'C', 'D', 'E'];
+		const wrapper = mount(FStepperProgress, {
+			propsData: { steps: manySteps, currentStep: 2 }
+		});
+		expect(wrapper.findAll('li')).toHaveLength(5);
+	});
+});

package/src/components/organisms/FOnboardingStepper/FStepperProgress.vue

@@ -0,0 +1,146 @@
+<template>
+	<nav aria-label="Progression des étapes" class="w-full">
+		<ol class="flex items-center w-full">
+			<li
+				v-for="(step, index) in steps"
+				:key="index"
+				:class="stepContainerClasses(index)"
+			>
+				<!-- Step indicator circle -->
+				<div class="flex items-center">
+					<span
+						:class="stepCircleClasses(index)"
+						:aria-current="index === currentStep ? 'step' : null"
+					>
+						<!-- Completed step: checkmark -->
+						<svg
+							v-if="index < currentStep"
+							class="w-4 h-4"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+						<!-- Current or future step: number -->
+						<span v-else class="text-sm font-medium">{{ index + 1 }}</span>
+					</span>
+				</div>
+
+				<!-- Step title -->
+				<span :class="stepTitleClasses(index)">
+					{{ step }}
+				</span>
+
+				<!-- Connector line (not for last step) -->
+				<div
+					v-if="index < steps.length - 1"
+					:class="connectorClasses(index)"
+				></div>
+			</li>
+		</ol>
+	</nav>
+</template>
+
+<script>
+export default {
+	name: 'FStepperProgress',
+	props: {
+		/**
+		 * Array of step titles
+		 */
+		steps: {
+			type: Array,
+			required: true
+		},
+		/**
+		 * Current active step index (0-based)
+		 */
+		currentStep: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+		/**
+		 * Get container classes for each step
+		 */
+		stepContainerClasses(index) {
+			const isLast = index === this.steps.length - 1;
+			return ['flex', 'items-center', isLast ? '' : 'flex-1']
+				.filter(Boolean)
+				.join(' ');
+		},
+		/**
+		 * Get classes for step circle indicator
+		 */
+		stepCircleClasses(index) {
+			const baseClasses =
+				'flex items-center justify-center w-8 h-8 rounded-full ring-4 ring-white';
+			const transitionClasses =
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			if (index < this.currentStep) {
+				// Completed step
+				return [
+					baseClasses,
+					transitionClasses,
+					'bg-success-600 text-white'
+				].join(' ');
+			} else if (index === this.currentStep) {
+				// Current step
+				return [
+					baseClasses,
+					transitionClasses,
+					'bg-primary-600 text-white'
+				].join(' ');
+			} else {
+				// Future step
+				return [
+					baseClasses,
+					transitionClasses,
+					'bg-neutral-200 text-neutral-500'
+				].join(' ');
+			}
+		},
+		/**
+		 * Get classes for step title
+		 */
+		stepTitleClasses(index) {
+			const baseClasses = 'ml-2 text-sm font-medium';
+			const transitionClasses =
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			if (index < this.currentStep) {
+				// Completed step
+				return [baseClasses, transitionClasses, 'text-success-600'].join(' ');
+			} else if (index === this.currentStep) {
+				// Current step
+				return [baseClasses, transitionClasses, 'text-primary-600'].join(' ');
+			} else {
+				// Future step
+				return [baseClasses, transitionClasses, 'text-neutral-500'].join(' ');
+			}
+		},
+		/**
+		 * Get classes for connector line between steps
+		 */
+		connectorClasses(index) {
+			const baseClasses = 'flex-1 h-0.5 mx-4';
+			const transitionClasses =
+				'transition-colors duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			if (index < this.currentStep) {
+				// Connector before current step (completed)
+				return [baseClasses, transitionClasses, 'bg-success-600'].join(' ');
+			} else {
+				// Connector at or after current step
+				return [baseClasses, transitionClasses, 'bg-neutral-200'].join(' ');
+			}
+		}
+	}
+};
+</script>

package/src/components/organisms/FPageHeader/FPageHeader.stories.js

@@ -0,0 +1,142 @@
+import FPageHeader from './FPageHeader.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+import FBreadcrumb from '../../molecules/FBreadcrumb/FBreadcrumb.vue';
+
+export default {
+	title: 'Organisms/FPageHeader',
+	component: FPageHeader,
+	tags: ['autodocs'],
+	argTypes: {
+		title: {
+			control: 'text',
+			description: 'Titre de la page'
+		},
+		subtitle: {
+			control: 'text',
+			description: 'Sous-titre'
+		},
+		showBack: {
+			control: 'boolean',
+			description: 'Afficher le bouton retour'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Bordure en bas'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FPageHeader },
+	props: Object.keys(argTypes),
+	template: '<FPageHeader v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: 'Tableau de bord'
+};
+
+export const WithSubtitle = Template.bind({});
+WithSubtitle.args = {
+	title: 'Utilisateurs',
+	subtitle: 'Gérez les comptes utilisateurs'
+};
+
+export const WithBackButton = Template.bind({});
+WithBackButton.args = {
+	title: 'Détail du projet',
+	showBack: true
+};
+
+export const WithActions = () => ({
+	components: { FPageHeader, FButton },
+	template: `
+		<FPageHeader title="Projets" subtitle="Liste de tous vos projets">
+			<template #actions>
+				<FButton variant="outline">Exporter</FButton>
+				<FButton variant="primary">Nouveau projet</FButton>
+			</template>
+		</FPageHeader>
+	`
+});
+
+export const WithBreadcrumb = () => ({
+	components: { FPageHeader, FBreadcrumb, FButton },
+	data() {
+		return {
+			breadcrumbItems: [
+				{ label: 'Accueil', href: '/' },
+				{ label: 'Projets', href: '/projects' },
+				{ label: 'Mon projet' }
+			]
+		};
+	},
+	template: `
+		<FPageHeader title="Mon projet" subtitle="Créé le 12 janvier 2024">
+			<template #breadcrumb>
+				<FBreadcrumb :items="breadcrumbItems" />
+			</template>
+			<template #actions>
+				<FButton variant="outline">Paramètres</FButton>
+				<FButton variant="primary">Modifier</FButton>
+			</template>
+		</FPageHeader>
+	`
+});
+
+export const Bordered = Template.bind({});
+Bordered.args = {
+	title: 'Paramètres',
+	subtitle: 'Configurez votre application',
+	bordered: true
+};
+
+export const Complex = () => ({
+	components: { FPageHeader, FBreadcrumb, FButton },
+	data() {
+		return {
+			breadcrumbItems: [
+				{ label: 'Dashboard', href: '/' },
+				{ label: 'Équipe', href: '/team' },
+				{ label: 'Jean Dupont' }
+			]
+		};
+	},
+	methods: {
+		handleBack() {
+			alert('Retour cliqué');
+		}
+	},
+	template: `
+		<FPageHeader
+			title="Jean Dupont"
+			subtitle="Développeur Senior"
+			showBack
+			bordered
+			@back="handleBack"
+		>
+			<template #breadcrumb>
+				<FBreadcrumb :items="breadcrumbItems" />
+			</template>
+			<template #actions>
+				<FButton variant="ghost">Archiver</FButton>
+				<FButton variant="outline">Message</FButton>
+				<FButton variant="primary">Modifier</FButton>
+			</template>
+		</FPageHeader>
+	`
+});
+
+export const MinimalWithSlot = () => ({
+	components: { FPageHeader },
+	template: `
+		<FPageHeader title="Statistiques">
+			<div class="flex gap-4 text-sm text-neutral-600">
+				<span>Dernière mise à jour: il y a 5 min</span>
+				<span>•</span>
+				<span>Données en temps réel</span>
+			</div>
+		</FPageHeader>
+	`
+});

package/src/components/organisms/FPageHeader/FPageHeader.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FPageHeader from './FPageHeader.vue';
+
+describe('FPageHeader', () => {
+	it('renders correctly with required props', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Page Title' }
+		});
+		expect(wrapper.text()).toContain('Page Title');
+	});
+
+	it('displays title', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Dashboard' }
+		});
+		expect(wrapper.text()).toContain('Dashboard');
+	});
+
+	it('displays subtitle when provided', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title', subtitle: 'Subtitle text' }
+		});
+		expect(wrapper.text()).toContain('Subtitle text');
+	});
+
+	it('renders actions slot', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title' },
+			slots: { actions: '<button>Action</button>' }
+		});
+		expect(wrapper.html()).toContain('Action');
+	});
+
+	it('renders default slot', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title' },
+			slots: { default: '<span>Extra content</span>' }
+		});
+		expect(wrapper.html()).toContain('Extra content');
+	});
+
+	it('shows back button when showBack is true', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title', showBack: true }
+		});
+		expect(wrapper.findComponent({ name: 'FButton' }).exists()).toBe(true);
+	});
+
+	it('hides back button by default', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title' }
+		});
+		// No back button by default
+		expect(wrapper.html()).not.toContain('Retour');
+	});
+
+	it('emits back event when back button is clicked', async () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title', showBack: true }
+		});
+		const backButton = wrapper.findComponent({ name: 'FButton' });
+		if (backButton.exists()) {
+			await backButton.trigger('click');
+			expect(wrapper.emitted('back')).toBeTruthy();
+		}
+	});
+
+	it('renders breadcrumb slot', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title' },
+			slots: { breadcrumb: '<nav>Breadcrumb</nav>' }
+		});
+		expect(wrapper.html()).toContain('Breadcrumb');
+	});
+
+	it('applies bordered class when bordered is true', () => {
+		const wrapper = mount(FPageHeader, {
+			propsData: { title: 'Title', bordered: true }
+		});
+		expect(wrapper.classes().join(' ')).toContain('border');
+	});
+});