@pyreweb/fabric 1.2.6

package/src/components/molecules/FBreadcrumb/FBreadcrumb.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FBreadcrumb from './FBreadcrumb.vue';
+
+describe('FBreadcrumb', () => {
+	const items = [
+		{ label: 'Home', href: '/' },
+		{ label: 'Products', href: '/products' },
+		{ label: 'Current Page' }
+	];
+
+	it('renders correctly with items', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		expect(wrapper.find('nav').exists()).toBe(true);
+	});
+
+	it('displays all items', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		expect(wrapper.text()).toContain('Home');
+		expect(wrapper.text()).toContain('Products');
+		expect(wrapper.text()).toContain('Current Page');
+	});
+
+	it('marks last item as current page', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		expect(wrapper.find('[aria-current="page"]').exists()).toBe(true);
+	});
+
+	it('renders links for non-current items', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		const links = wrapper.findAll('a');
+		expect(links.length).toBeGreaterThan(0);
+	});
+
+	it('shows separators between items', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		const icons = wrapper.findAllComponents({ name: 'FIcon' });
+		// Should have separators (number of items - 1)
+		expect(icons.length).toBeGreaterThanOrEqual(items.length - 1);
+	});
+
+	it('uses custom separator icon', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items, separatorIcon: 'arrow-right' }
+		});
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('emits navigate event when item is clicked', async () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		const buttons = wrapper.findAll('button');
+		if (buttons.length > 0) {
+			await buttons[0].trigger('click');
+			expect(wrapper.emitted('navigate')).toBeTruthy();
+		}
+	});
+
+	it('has correct aria-label', () => {
+		const wrapper = mount(FBreadcrumb, {
+			propsData: { items }
+		});
+		expect(wrapper.find('nav').attributes('aria-label')).toBe("Fil d'Ariane");
+	});
+});

package/src/components/molecules/FBreadcrumb/FBreadcrumb.vue

@@ -0,0 +1,117 @@
+<template>
+	<nav :class="breadcrumbClasses" :aria-label="ariaLabel">
+		<ol class="flex items-center flex-wrap gap-1">
+			<li v-for="(item, index) in items" :key="index" class="flex items-center">
+				<!-- Separator (displayed before all items except the first) -->
+				<f-icon
+					v-if="index > 0"
+					:name="separatorIcon"
+					size="sm"
+					:class="separatorClasses"
+				/>
+
+				<!-- Breadcrumb Item -->
+				<component
+					:is="isCurrentItem(index) ? 'span' : item.href ? 'a' : 'button'"
+					v-bind="!isCurrentItem(index) && item.href ? { href: item.href } : {}"
+					v-if="!isCurrentItem(index) || isCurrentItem(index)"
+					:class="getItemClasses(index)"
+					:aria-current="isCurrentItem(index) ? 'page' : undefined"
+					@click="handleItemClick($event, item, index)"
+				>
+					<f-icon v-if="item.icon" :name="item.icon" size="sm" class="mr-1" />
+					<f-typography
+						variant="body"
+						tag="span"
+						:class="getTextClasses(index)"
+					>
+						{{ item.label }}
+					</f-typography>
+				</component>
+			</li>
+		</ol>
+	</nav>
+</template>
+
+<script>
+import FIcon from '../../atoms/FIcon/FIcon.vue';
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+
+export default {
+	name: 'FBreadcrumb',
+	components: {
+		FIcon,
+		FTypography
+	},
+	props: {
+		items: {
+			type: Array,
+			required: true,
+			validator: (value) =>
+				value.every(
+					(item) =>
+						typeof item.label === 'string' &&
+						(item.href === undefined || typeof item.href === 'string') &&
+						(item.icon === undefined || typeof item.icon === 'string')
+				)
+		},
+		separatorIcon: {
+			type: String,
+			default: 'chevron-right'
+		},
+		ariaLabel: {
+			type: String,
+			default: "Fil d'Ariane"
+		}
+	},
+	computed: {
+		breadcrumbClasses() {
+			return 'inline-flex';
+		},
+		separatorClasses() {
+			return 'mx-2 text-neutral-400 flex-shrink-0';
+		}
+	},
+	methods: {
+		isCurrentItem(index) {
+			return index === this.items.length - 1;
+		},
+		getItemClasses(index) {
+			const baseClasses = 'inline-flex items-center';
+
+			if (this.isCurrentItem(index)) {
+				return [baseClasses, 'cursor-default'].join(' ');
+			}
+
+			return [
+				baseClasses,
+				'cursor-pointer',
+				'hover:underline',
+				'focus:outline-none',
+				'focus:ring-2',
+				'focus:ring-primary-500/20',
+				'focus:rounded'
+			].join(' ');
+		},
+		getTextClasses(index) {
+			if (this.isCurrentItem(index)) {
+				return 'font-semibold text-neutral-800';
+			}
+			return 'text-primary-600 hover:text-primary-800';
+		},
+		handleItemClick(event, item, index) {
+			if (this.isCurrentItem(index)) {
+				event.preventDefault();
+				return;
+			}
+
+			this.$emit('navigate', { item, index, event });
+
+			// If the item has no href, prevent default and let the parent handle navigation
+			if (!item.href) {
+				event.preventDefault();
+			}
+		}
+	}
+};
+</script>

package/src/components/molecules/FButtonGroup/FButtonGroup.stories.js

@@ -0,0 +1,82 @@
+import FButtonGroup from './FButtonGroup.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+export default {
+	title: 'Molecules/FButtonGroup',
+	component: FButtonGroup,
+	tags: ['autodocs'],
+	argTypes: {
+		ariaLabel: {
+			control: 'text',
+			description: "Label pour l'accessibilité"
+		}
+	}
+};
+
+export const Default = () => ({
+	components: { FButtonGroup, FButton },
+	template: `
+		<FButtonGroup>
+			<FButton variant="outline">Gauche</FButton>
+			<FButton variant="outline">Centre</FButton>
+			<FButton variant="outline">Droite</FButton>
+		</FButtonGroup>
+	`
+});
+
+export const Primary = () => ({
+	components: { FButtonGroup, FButton },
+	template: `
+		<FButtonGroup>
+			<FButton variant="primary">Option 1</FButton>
+			<FButton variant="primary">Option 2</FButton>
+			<FButton variant="primary">Option 3</FButton>
+		</FButtonGroup>
+	`
+});
+
+export const Secondary = () => ({
+	components: { FButtonGroup, FButton },
+	template: `
+		<FButtonGroup>
+			<FButton variant="secondary">Jour</FButton>
+			<FButton variant="secondary">Semaine</FButton>
+			<FButton variant="secondary">Mois</FButton>
+			<FButton variant="secondary">Année</FButton>
+		</FButtonGroup>
+	`
+});
+
+export const WithActive = () => ({
+	components: { FButtonGroup, FButton },
+	data() {
+		return { active: 'jour' };
+	},
+	template: `
+		<FButtonGroup>
+			<FButton :variant="active === 'jour' ? 'primary' : 'outline'" @click="active = 'jour'">Jour</FButton>
+			<FButton :variant="active === 'semaine' ? 'primary' : 'outline'" @click="active = 'semaine'">Semaine</FButton>
+			<FButton :variant="active === 'mois' ? 'primary' : 'outline'" @click="active = 'mois'">Mois</FButton>
+		</FButtonGroup>
+	`
+});
+
+export const Sizes = () => ({
+	components: { FButtonGroup, FButton },
+	template: `
+		<div class="flex flex-col gap-4 items-start">
+			<FButtonGroup>
+				<FButton variant="outline" size="sm">Petit</FButton>
+				<FButton variant="outline" size="sm">Petit</FButton>
+			</FButtonGroup>
+			<FButtonGroup>
+				<FButton variant="outline" size="md">Moyen</FButton>
+				<FButton variant="outline" size="md">Moyen</FButton>
+			</FButtonGroup>
+			<FButtonGroup>
+				<FButton variant="outline" size="lg">Grand</FButton>
+				<FButton variant="outline" size="lg">Grand</FButton>
+			</FButtonGroup>
+		</div>
+	`
+});

package/src/components/molecules/FButtonGroup/FButtonGroup.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FButtonGroup from './FButtonGroup.vue';
+
+describe('FButtonGroup', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FButtonGroup, {
+			slots: {
+				default: '<button>Button 1</button><button>Button 2</button>'
+			}
+		});
+		expect(wrapper.find('[role="group"]').exists()).toBe(true);
+	});
+
+	it('displays slot content', () => {
+		const wrapper = mount(FButtonGroup, {
+			slots: {
+				default: '<button>Test Button</button>'
+			}
+		});
+		expect(wrapper.text()).toContain('Test Button');
+	});
+
+	it('has correct aria-label', () => {
+		const wrapper = mount(FButtonGroup, {
+			propsData: { ariaLabel: 'Custom Label' }
+		});
+		expect(wrapper.find('[role="group"]').attributes('aria-label')).toBe(
+			'Custom Label'
+		);
+	});
+
+	it('has default aria-label', () => {
+		const wrapper = mount(FButtonGroup);
+		expect(wrapper.find('[role="group"]').attributes('aria-label')).toBe(
+			'Groupe de boutons'
+		);
+	});
+
+	it('applies container classes', () => {
+		const wrapper = mount(FButtonGroup);
+		expect(wrapper.find('[role="group"]').classes()).toContain('inline-flex');
+	});
+});

package/src/components/molecules/FButtonGroup/FButtonGroup.vue

@@ -0,0 +1,31 @@
+<template>
+	<div :class="containerClasses" role="group" :aria-label="ariaLabel">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FButtonGroup',
+	props: {
+		ariaLabel: {
+			type: String,
+			default: 'Groupe de boutons'
+		}
+	},
+	computed: {
+		containerClasses() {
+			const baseClasses = 'inline-flex';
+			const childClasses = [
+				'[&>*]:rounded-none',
+				'[&>*:first-child]:rounded-l',
+				'[&>*:last-child]:rounded-r',
+				'[&>*:not(:first-child)]:-ml-px',
+				'[&>*]:focus:z-10'
+			].join(' ');
+
+			return `${baseClasses} ${childClasses}`;
+		}
+	}
+};
+</script>

package/src/components/molecules/FCard/FCard.stories.js

@@ -0,0 +1,136 @@
+import FCard from './FCard.vue';
+import FButton from '../../atoms/FButton/FButton.vue';
+
+export default {
+	title: 'Molecules/FCard',
+	component: FCard,
+	tags: ['autodocs'],
+	argTypes: {
+		title: {
+			control: 'text',
+			description: 'Titre de la carte'
+		},
+		subtitle: {
+			control: 'text',
+			description: 'Sous-titre de la carte'
+		},
+		clickable: {
+			control: 'boolean',
+			description: 'Carte cliquable'
+		},
+		bordered: {
+			control: 'boolean',
+			description: 'Afficher une bordure'
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FCard },
+	props: Object.keys(argTypes),
+	template: `
+		<FCard v-bind="$props">
+			<p>Contenu de la carte.</p>
+		</FCard>
+	`
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: 'Titre de la carte',
+	subtitle: 'Sous-titre optionnel'
+};
+
+export const Simple = () => ({
+	components: { FCard },
+	template: `
+		<FCard>
+			<p>Une carte simple avec uniquement du contenu.</p>
+		</FCard>
+	`
+});
+
+export const WithActions = () => ({
+	components: { FCard, FButton },
+	template: `
+		<FCard title="Confirmation" subtitle="Action requise">
+			<p>Êtes-vous sûr de vouloir continuer ?</p>
+			<template #actions>
+				<FButton variant="outline">Annuler</FButton>
+				<FButton variant="primary">Confirmer</FButton>
+			</template>
+		</FCard>
+	`
+});
+
+export const WithMedia = () => ({
+	components: { FCard, FButton },
+	template: `
+		<FCard title="Article de blog" subtitle="Publié le 12 janvier">
+			<template #media>
+				<img src="https://picsum.photos/400/200" alt="Image de démonstration" />
+			</template>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			<template #actions>
+				<FButton variant="link">Lire la suite</FButton>
+			</template>
+		</FCard>
+	`
+});
+
+export const Clickable = () => ({
+	components: { FCard },
+	methods: {
+		handleClick() {
+			alert('Carte cliquée !');
+		}
+	},
+	template: `
+		<FCard title="Carte cliquable" clickable @click="handleClick">
+			<p>Cliquez sur cette carte pour déclencher une action.</p>
+		</FCard>
+	`
+});
+
+export const NoBorder = () => ({
+	components: { FCard },
+	template: `
+		<div class="bg-neutral-100 p-4">
+			<FCard title="Sans bordure" :bordered="false">
+				<p>Cette carte n'a pas de bordure visible.</p>
+			</FCard>
+		</div>
+	`
+});
+
+export const CustomHeader = () => ({
+	components: { FCard, FButton },
+	template: `
+		<FCard>
+			<template #header>
+				<div class="flex justify-between items-center">
+					<h3 class="font-bold text-lg">En-tête personnalisé</h3>
+					<FButton variant="ghost" size="sm">Action</FButton>
+				</div>
+			</template>
+			<p>Contenu de la carte avec un en-tête personnalisé.</p>
+		</FCard>
+	`
+});
+
+export const Grid = () => ({
+	components: { FCard },
+	template: `
+		<div class="grid grid-cols-3 gap-4">
+			<FCard title="Carte 1">
+				<p>Contenu de la première carte.</p>
+			</FCard>
+			<FCard title="Carte 2">
+				<p>Contenu de la deuxième carte.</p>
+			</FCard>
+			<FCard title="Carte 3">
+				<p>Contenu de la troisième carte.</p>
+			</FCard>
+		</div>
+	`
+});

package/src/components/molecules/FCard/FCard.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FCard from './FCard.vue';
+
+describe('FCard', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FCard, {
+			slots: { default: 'Card content' }
+		});
+		expect(wrapper.text()).toContain('Card content');
+	});
+
+	it('displays title when provided', () => {
+		const wrapper = mount(FCard, {
+			propsData: { title: 'Card Title' }
+		});
+		expect(wrapper.text()).toContain('Card Title');
+	});
+
+	it('displays subtitle when provided', () => {
+		const wrapper = mount(FCard, {
+			propsData: { title: 'Title', subtitle: 'Subtitle text' }
+		});
+		expect(wrapper.text()).toContain('Subtitle text');
+	});
+
+	it('renders slot content', () => {
+		const wrapper = mount(FCard, {
+			slots: { default: '<p>Content paragraph</p>' }
+		});
+		expect(wrapper.html()).toContain('Content paragraph');
+	});
+
+	it('renders header slot', () => {
+		const wrapper = mount(FCard, {
+			slots: { header: '<h2>Custom Header</h2>' }
+		});
+		expect(wrapper.html()).toContain('Custom Header');
+	});
+
+	it('renders actions slot', () => {
+		const wrapper = mount(FCard, {
+			slots: { actions: '<button>Action</button>' }
+		});
+		expect(wrapper.html()).toContain('Action');
+	});
+
+	it('renders media slot', () => {
+		const wrapper = mount(FCard, {
+			slots: { media: '<img src="test.jpg" />' }
+		});
+		expect(wrapper.html()).toContain('test.jpg');
+	});
+
+	it('applies bordered class by default', () => {
+		const wrapper = mount(FCard);
+		expect(wrapper.classes()).toContain('border');
+	});
+
+	it('removes border when bordered is false', () => {
+		const wrapper = mount(FCard, {
+			propsData: { bordered: false }
+		});
+		expect(wrapper.classes()).not.toContain('border');
+	});
+
+	it('applies clickable styles when clickable', () => {
+		const wrapper = mount(FCard, {
+			propsData: { clickable: true }
+		});
+		expect(wrapper.classes()).toContain('cursor-pointer');
+	});
+
+	it('emits click event when clickable and clicked', async () => {
+		const wrapper = mount(FCard, {
+			propsData: { clickable: true }
+		});
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toBeTruthy();
+	});
+
+	it('does not emit click when not clickable', async () => {
+		const wrapper = mount(FCard);
+		await wrapper.trigger('click');
+		expect(wrapper.emitted('click')).toBeFalsy();
+	});
+});

package/src/components/molecules/FCard/FCard.vue

@@ -0,0 +1,75 @@
+<template>
+	<div :class="cardClasses" @click="handleClick">
+		<div v-if="$slots.header || title" class="px-4 pt-4">
+			<slot name="header">
+				<f-typography v-if="title" variant="h5">{{ title }}</f-typography>
+				<f-typography v-if="subtitle" variant="caption">{{
+					subtitle
+				}}</f-typography>
+			</slot>
+		</div>
+		<div
+			v-if="$slots.media"
+			class="w-full [&_img]:w-full [&_img]:h-auto [&_img]:block"
+		>
+			<slot name="media" />
+		</div>
+		<div class="p-4">
+			<slot />
+		</div>
+		<div v-if="$slots.actions" class="px-4 pb-4 flex gap-2">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script>
+import FTypography from '../../atoms/FTypography/FTypography.vue';
+
+export default {
+	name: 'FCard',
+	components: {
+		FTypography
+	},
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		bordered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		cardClasses() {
+			const baseClasses = 'bg-white rounded-lg overflow-hidden';
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+			const borderedClasses = this.bordered ? 'border border-neutral-200' : '';
+			const clickableClasses = this.clickable
+				? 'cursor-pointer hover:shadow-lg hover:-translate-y-0.5'
+				: '';
+
+			return [baseClasses, transitionClasses, borderedClasses, clickableClasses]
+				.filter(Boolean)
+				.join(' ');
+		}
+	},
+	methods: {
+		handleClick(event) {
+			if (this.clickable) {
+				this.$emit('click', event);
+			}
+		}
+	}
+};
+</script>