@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproRadioGroup/AmeliproRadioGroup.stories.ts

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import AmeliproRadioGroup from './AmeliproRadioGroup.vue'
+
+const meta = {
+	argTypes: {
+		'`append-${index}`': { description: 'Permet de rajouter un élément après le label des boutons radios, il y a un slot par item de la liste' },
+		'`subItem-${index}`': { description: 'Permet de rajouter un élément sous un bouton radio seulement lorsqu’il est coché (existe seulement si les props horizontal et fullHorizontal sont à false)' },
+		'append': { description: 'Permet de rajouter un élément générique après le label des boutons radios' },
+		'ariaRequired': { description: 'Permet de rendre la selection obligatoire' },
+		'change:selected': { description: 'Événement émis au click sur un bouton radio retourne la valeur sélectionnée' },
+		'disabled': { description: 'Permet de désactiver le groupe de boutons radios' },
+		'error': { description: 'Permet de mettre le champ en erreur' },
+		'fullHorizontal': { description: 'Permet d’afficher le radioGroup ainsi que le titre a l’horizontal' },
+		'groupLabel': { description: 'Libellé du groupe de boutons radios' },
+		'hiddenLabel': { description: 'Permet de masquer le label du groupe de checkbox, dans une démarche d’amélioration de l’accessibilité, il est recommandé de ne pas utiliser cette property dans la mesure du possible' },
+		'horizontal': { description: 'Permet d’afficher le radioGroup à l’horizontal' },
+		'horizontalLabel': { description: 'Permet d’afficher le radioGroup avec le label à l’horizontal tout en gardant les boutons radios sous forme de colonnes' },
+		'labelInfo': { description: 'Slot pour ajouter une tooltip après le label du groupe si besoin' },
+		'modelValue': {
+			description: 'Tableau d’objets qui permet de générer les boutons radios',
+			table: {
+				type: {
+					detail: `Array<{
+	isChecked: boolean;
+	label: string;
+    value: string;
+}[]>`,
+					summary: 'AmeliproRadioGroupItem[]',
+				},
+			},
+		},
+		'pills': { description: 'Change le style du groupe de bouttons radio' },
+		'requiredErrorMessage': { description: 'Message d’erreur qui s’affiche si le champ est obligatoire et qu’aucune valeur n’est sélectionnée' },
+		'subItem': { description: 'Permet de rajouter un élément générique sous un bouton radio seulement lorsqu’il est coché (existe seulement si les props horizontal et fullHorizontal sont à false)' },
+		'uniqueId': { description: 'Id du groupe de boutons radios, il doit être unique' },
+		'update:model-value': { description: 'Événement émis au changement du v-model' },
+	},
+	component: AmeliproRadioGroup,
+	title: 'Composants/Amelipro/Formulaires/AmeliproRadioGroup',
+} as Meta<typeof AmeliproRadioGroup>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproRadioGroup>
+
+const items = [
+	{
+		isChecked: false,
+		label: '1',
+		value: 'Valeur 1',
+	},
+	{
+		isChecked: false,
+		label: '2',
+		value: 'Valeur 2',
+	},
+	{
+		isChecked: true,
+		label: '3',
+		value: 'Valeur 3',
+	},
+	{
+		isChecked: false,
+		label: '4',
+		value: 'Valeur 4',
+	},
+	{
+		isChecked: false,
+		label: '5',
+		value: 'Valeur 5',
+	},
+]
+
+export const Default: Story = {
+	args: {
+		groupLabel: 'Libellé du groupe',
+		modelValue: items,
+		uniqueId: 'radio-id',
+	},
+	parameters: {
+		args: {},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproRadioGroup
+		v-model="items"
+		group-label="Libellé du groupe"
+		unique-id="radio-id"
+	/>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { AmeliproRadioGroup } from '@cnamts/synapse'
+
+	const items = ref([
+		{
+			isChecked: false,
+			label: '1',
+			value: 'Valeur 1',
+		},
+		{
+			isChecked: false,
+			label: '2',
+			value: 'Valeur 2',
+		},
+		{
+			isChecked: true,
+			label: '3',
+			value: 'Valeur 3',
+		},
+		{
+			isChecked: false,
+			label: '4',
+			value: 'Valeur 4',
+		},
+		{
+			isChecked: false,
+			label: '5',
+			value: 'Valeur 5',
+		},
+	])
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproRadioGroup },
+		setup() {
+			const model = ref(args.modelValue)
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+<AmeliproRadioGroup
+	v-bind="args"
+	v-model="model"
+/>`,
+	}),
+}

package/src/components/Amelipro/AmeliproRadioGroup/AmeliproRadioGroup.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+	/* eslint-disable vuejs-accessibility/label-has-for */
+	import { type PropType, computed, useSlots } from 'vue'
+	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
+	import type { AmeliproRadioGroupItem } from './types'
+
+	const props = defineProps({
+		ariaRequired: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		error: {
+			type: Boolean,
+			default: false,
+		},
+		fullHorizontal: {
+			type: Boolean,
+			default: false,
+		},
+		groupLabel: {
+			type: String,
+			default: '',
+		},
+		hiddenLabel: {
+			type: Boolean,
+			default: false,
+		},
+		horizontal: {
+			type: Boolean,
+			default: false,
+		},
+		horizontalLabel: {
+			type: Boolean,
+			default: false,
+		},
+		modelValue: {
+			type: Array as PropType<AmeliproRadioGroupItem[]>,
+			required: true,
+		},
+		pills: {
+			type: Boolean,
+			default: false,
+		},
+		requiredErrorMessage: {
+			type: String,
+			default: 'Ce champ est obligatoire',
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const emit = defineEmits(['update:model-value', 'change:selected'])
+
+	const currentValue = computed<AmeliproRadioGroupItem[]>({
+		get: () => props.modelValue,
+		set: (newValue: AmeliproRadioGroupItem[]) => {
+			emit('update:model-value', newValue)
+		},
+	})
+
+	const selectedValue = computed<string | null>(() => {
+		const checkedItem = currentValue.value.filter(e => e.isChecked)
+		return checkedItem.length === 1 ? checkedItem[0].value : null
+	})
+
+	const emitChangeEvent = (item: AmeliproRadioGroupItem) => {
+		currentValue.value = currentValue.value.map((currentItem: AmeliproRadioGroupItem) => {
+			if (currentItem.value === item.value) {
+				currentItem.isChecked = true
+			}
+			else {
+				currentItem.isChecked = false
+			}
+			return currentItem
+		})
+		emit('change:selected', item.value)
+	}
+
+	const slots = useSlots()
+	const slotSubItem = (index: number): boolean => {
+		if (props.horizontal || props.fullHorizontal) {
+			return false
+		}
+		return Boolean(slots[`subItem-${index}`] || slots.subItem)
+	}
+
+	const checkErrorCondition = computed(() => Boolean(props.ariaRequired && selectedValue.value === null && props.error))
+
+	const ariaExpandedValue = (item: AmeliproRadioGroupItem, index: number): 'true' | 'false' | undefined => {
+		if (slotSubItem(index)) {
+			return selectedValue.value === item.value ? 'true' : 'false'
+		}
+		return undefined
+	}
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		class="amelipro-radio-group"
+		:class="{
+			'pills': pills,
+			'classic': !pills,
+		}"
+	>
+		<div
+			class="d-flex flex-column radio-group"
+			:class="{
+				'flex-md-row': horizontalLabel || fullHorizontal,
+				'align-md-center': !horizontalLabel && fullHorizontal,
+				'align-md-start': horizontalLabel && !fullHorizontal,
+			}"
+		>
+			<div class="d-flex align-center mr-2 radio-group__label-wrapper">
+				<p
+					:id="uniqueId"
+					class="radio-group__label d-inline-flex"
+					:class="{
+						'mb-1': !fullHorizontal && !pills,
+						'mb-0 mb-md-4': fullHorizontal || pills,
+						'margin-label': horizontalLabel && !fullHorizontal,
+						'd-sr-only': hiddenLabel,
+					}"
+				>
+					<slot name="groupLabel">
+						{{ groupLabel }}
+					</slot>
+
+					<span
+						v-if="ariaRequired"
+						aria-hidden="true"
+						class="d-inline-flex"
+					>
+						&nbsp;*
+					</span>
+					<span
+						v-if="ariaRequired"
+						class="d-sr-only"
+					>
+						&nbsp;Champ obligatoire
+					</span>
+				</p>
+
+				<slot name="labelInfo" />
+			</div>
+
+			<div
+				:aria-labelledby="uniqueId"
+				:aria-required="ariaRequired"
+				class="radio-group__wrapper"
+				:class="{
+					'mt-1 mt-md-0': fullHorizontal && !pills,
+					'mt-2': pills
+				}"
+				role="radiogroup"
+			>
+				<ul
+					:id="`${uniqueId}-list`"
+					class="d-flex flex-wrap list-style-none radio-group__list"
+					:class="{
+						'flex-column': !pills,
+						'flex-md-row align-md-center': !horizontalLabel && (horizontal || fullHorizontal),
+					}"
+				>
+					<li
+						v-for="(item, index) in currentValue"
+						:id="`${uniqueId}-item-${index}`"
+						:key="index"
+						class="radio-group__item"
+						:class="{
+							'mb-2': pills,
+							'mb-4': !pills,
+						}"
+					>
+						<div class="d-flex align-center mr-2 amelipro-radio-group__label-wrapper">
+							<label
+								:id="`${uniqueId}-label-${index}`"
+								class="d-inline-flex flex-row align-center mr-0 text-body-1 radio-group__item__label"
+								:class="{
+									'mr-md-2': !pills && (horizontal || fullHorizontal),
+								}"
+							>
+								<input
+									:id="`${uniqueId}-input-${index}`"
+									:aria-checked="item.isChecked"
+									:aria-controls="slotSubItem(index) ? `${uniqueId}-subitem-${index}` : undefined"
+									:aria-describedby="checkErrorCondition ? `${uniqueId}-error` : undefined"
+									:aria-expanded="ariaExpandedValue(item, index)"
+									:checked="item.isChecked"
+									:disabled="item.disabled || disabled"
+									:name="`${uniqueId}-name`"
+									:required="ariaRequired"
+									type="radio"
+									:value="item.value"
+									@input="emitChangeEvent(item)"
+								>
+
+								<span
+									:id="`${uniqueId}-label-text-${index}`"
+									:class="{
+										'text-ap-grey': !pills && disabled,
+										'text-ap-blue-darken-1': pills && !checkErrorCondition && !disabled,
+										'text-ap-red radio-group__item-label-span-error': checkErrorCondition && !disabled,
+										'text-ap-grey-darken-1': (!pills && !checkErrorCondition && !disabled) || (pills && disabled),
+									}"
+								>
+									{{ item.label }}
+								</span>
+							</label>
+
+							<slot :name="`append-${index}`">
+								<slot
+									name="append"
+									v-bind="item"
+								/>
+							</slot>
+						</div>
+
+						<div
+							v-if="slotSubItem(index) && item.isChecked"
+							:id="`${uniqueId}-subitem-${index}`"
+						>
+							<slot :name="`subItem-${index}`">
+								<slot
+									name="subItem"
+									v-bind="item"
+								/>
+							</slot>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<AmeliproMessage
+			v-if="checkErrorCondition"
+			no-icon
+			text
+			type="error"
+			:unique-id="`${uniqueId}-error`"
+		>
+			<p class="mb-0">
+				{{ requiredErrorMessage }}
+			</p>
+		</AmeliproMessage>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.margin-label {
+	@media #{apTokens.$media-up-md} {
+		margin-top: 3px;
+	}
+}
+
+input {
+	position: absolute;
+	width: 0;
+	height: 0;
+	opacity: 0;
+
+	& + span {
+		position: relative;
+		cursor: pointer;
+	}
+
+	&:focus {
+		& + span {
+			outline: 1px dotted apTokens.$ap-grey-darken1;
+		}
+	}
+
+	&:disabled {
+		& + span {
+			cursor: default;
+		}
+	}
+}
+
+.amelipro-radio-group.classic input {
+	& + span {
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+		padding-left: 2rem;
+
+		&::before {
+			position: absolute;
+			top: 0.075rem;
+			left: 0;
+			width: 1.625rem;
+			height: 1.625rem;
+			border-radius: 50%;
+			border: 3px solid apTokens.$ap-blue-darken1;
+			background-color: transparent;
+			content: '';
+		}
+	}
+
+	&:checked {
+		& + span {
+			&::after {
+				position: absolute;
+				top: 0.45rem;
+				left: 0.4rem;
+				width: 0.825rem;
+				height: 0.825rem;
+				border-radius: 50%;
+				background-color: apTokens.$ap-blue-darken1;
+				content: '';
+			}
+		}
+	}
+
+	&:disabled {
+		& + span {
+			&::before {
+				opacity: 0.3;
+			}
+		}
+	}
+}
+
+.amelipro-radio-group.pills {
+	& label {
+		&:not(:last-child) {
+			@media #{apTokens.$media-up-sm} {
+				margin-right: 16px;
+			}
+		}
+	}
+
+	& input {
+		& + span {
+			font-size: apTokens.$font-size-sm;
+			font-weight: apTokens.$filter-font-weight;
+			padding: apTokens.$filter-padding-y apTokens.$filter-padding-x;
+			border-radius: apTokens.$filter-radius;
+			border: 1px solid apTokens.$ap-blue-darken1;
+			background-color: apTokens.$ap-white;
+			color: apTokens.$ap-blue-darken1;
+
+			&.radio-group__item-label-span-error {
+				background-color: apTokens.$ap-red-lighten4;
+				border-color: apTokens.$ap-red;
+			}
+		}
+
+		&:checked {
+			& + span {
+				background-color: apTokens.$ap-blue-lighten3;
+
+				&::after {
+					position: absolute;
+					top: 1rem;
+					left: 1.1rem;
+					width: 1rem;
+					height: 0.5rem;
+					border-bottom: 2px solid apTokens.$ap-blue-darken1;
+					border-left: 2px solid apTokens.$ap-blue-darken1;
+					transform: rotate(-50deg);
+					content: '';
+				}
+			}
+		}
+
+		&:disabled {
+			& + span {
+				background-color: apTokens.$ap-grey-lighten2;
+				border-color: apTokens.$ap-grey;
+
+				&::after {
+					border-bottom-color: apTokens.$ap-grey-darken1;
+					border-left-color: apTokens.$ap-grey-darken1;
+				}
+			}
+		}
+	}
+}
+
+.radio-group__label {
+	font-weight: apTokens.$label-font-weight;
+}
+</style>

package/src/components/Amelipro/AmeliproRadioGroup/locales.ts

@@ -0,0 +1 @@
+export const locales = { errorMessage: 'Ce champ est obligatoire' }

package/src/components/Amelipro/AmeliproRadioGroup/tests/AmeliproRadioGroup.spec.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproRadioGroup from '../AmeliproRadioGroup.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproRadioGroup', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproRadioGroup, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				groupLabel: 'Label du groupe',
+				modelValue: [
+					{
+						isChecked: false,
+						label: '1',
+						value: 'Valeur 1',
+					},
+					{
+						isChecked: false,
+						label: '2',
+						value: 'Valeur 2',
+					},
+					{
+						isChecked: true,
+						label: '3',
+						value: 'Valeur 3',
+					},
+					{
+						isChecked: false,
+						label: '4',
+						value: 'Valeur 4',
+					},
+					{
+						isChecked: false,
+						label: '5',
+						value: 'Valeur 5',
+					},
+				],
+				uniqueId: 'my-radio-group-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})