@cnamts/synapse 0.0.2-alpha → 0.0.4-alpha

package/src/components/BackBtn/BackBtn.stories.ts

@@ -6,7 +6,7 @@ import Alert from '../Alert/Alert.vue'
 import { VSheet } from 'vuetify/components'
 
 const meta = {
-	title: 'Components/BackBtn',
+	title: 'Composants/Boutons/BackBtn',
 	component: BackBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -26,6 +26,26 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VSheet class="pa-4">
+		<BackBtn />
+	</VSheet>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		dark: false,
 	},
@@ -55,6 +75,26 @@ export const Default: Story = {
 }
 
 export const Dark: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VSheet color="primary" class="pa-4">
+		<BackBtn dark />
+	</VSheet>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		dark: true,
 	},
@@ -77,6 +117,26 @@ export const Dark: Story = {
 }
 
 export const HideBackIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VSheet class="pa-4">
+		<BackBtn hide-back-icon />
+	</VSheet>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideBackIcon: true,
 	},
@@ -96,6 +156,29 @@ export const HideBackIcon: Story = {
 }
 
 export const DarkAndHideBackIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VSheet class="pa-4">
+		<BackBtn
+			dark 
+			hide-back-icon 
+		/>
+	</VSheet>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		dark: true,
 		hideBackIcon: true,

package/src/components/BackToTopBtn/BackToTopBtn.mdx

@@ -8,7 +8,7 @@ import * as BackToTopBtnStories from './BackToTopBtn.stories';
 
 Le composant `BackToTopBtn` est utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.
 
-Le boutton apparaît lorsque l'utilisateur scroll en dessous d'une certaine hauteur de la page. Cette hauteur est définie par la prop `threshold`, elle est de 120px par defaut.
+Le bouton apparaît lorsque l'utilisateur scroll en dessous d'une certaine hauteur de la page. Cette hauteur est définie par la prop `threshold`, elle est de 120px par defaut.
 
 <Canvas of={BackToTopBtnStories.Default}  />
 
@@ -18,13 +18,13 @@ Le boutton apparaît lorsque l'utilisateur scroll en dessous d'une certaine haut
 
 ## Context d'utilisation
 
-Ce composant peut être utilisé à la racine de la page ou bien dans un composant avant son propre context de scroll. Dans ce dernier cas, il conviens de passer la prop `target` un id unique de l'élément scrollable.
+Ce composant peut être utilisé à la racine de la page ou bien dans un composant avant son propre context de scroll. Dans ce dernier cas, il convient de passer la prop `target` un id unique de l'élément scrollable.
 
 ### Exemple d'utilisation
 
 <Source dark code={`
 <script setup lang="ts">
-import BackToTopBtn from '@/components/BackToTopBtn/BackToTopBtn.vue'
+import BackToTopBtn from '@cnamts/synapse'
 import { VCard, VSheet } from 'vuetify/components'
 </script>
 

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -4,7 +4,7 @@ import BackToTopBtn from './BackToTopBtn.vue'
 import { VCard, VSheet } from 'vuetify/components'
 
 const meta = {
-	title: 'Components/BackToTopBtn',
+	title: 'Composants/Boutons/BackToTopBtn',
 	component: BackToTopBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -45,6 +45,43 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VCard
+		id="target"
+		width="100%"
+		max-height="200px"
+		class="overflow-y-auto"
+		style="scroll-behavior: smooth"
+	>
+		<VSheet
+			height="600px"
+			class="d-flex flex-column align-center"
+		>
+			<p class="pa-2">
+				Haut de la section.
+			</p>
+		</VSheet>
+		<BackToTopBtn :target="target">
+			Retour en haut
+		</BackToTopBtn>
+	</VCard>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackToTopBtn from '@cnamts/BackToTopBtn'
+	import { VCard, VSheet } from 'vuetify/components'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		target: 'target',
 		vuetifyOptions: {
@@ -101,6 +138,57 @@ export const Default: Story = {
 }
 
 export const Customization: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VCard
+		id="btn-customization"
+		width="100%"
+		max-height="200px"
+		class="overflow-y-auto"
+		style="scroll-behavior: smooth"
+	>
+		<VSheet
+			height="600px"
+			class="d-flex flex-column align-center"
+		>
+			<p class="pa-2">
+				Haut de la section.
+			</p>
+		</VSheet>
+		<BackToTopBtn 
+			:target="btn-customization" 
+			:vuetify-options="vuetifyOptions"
+		>
+			Retour en haut
+		</BackToTopBtn>
+	</VCard>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackToTopBtn from '@cnamts/BackToTopBtn'
+	import { VCard, VSheet } from 'vuetify/components'
+	
+	const vuetifyOptions = {
+		btn: {
+			variant: 'elevated',
+			color: 'primary',
+			rounded: true,
+		},
+		icon: {
+			color: 'white',
+		},
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		target: 'btn-customization',
 		vuetifyOptions: {
@@ -152,13 +240,66 @@ export const Customization: Story = {
 	},
 }
 
-export const PillBtn: Story = {
+export const CustomPosition: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VCard
+		id="pill-btn"
+		width="100%"
+		max-height="200px"
+		class="overflow-y-auto"
+		style="scroll-behavior: smooth"
+	>
+		<VSheet
+			height="600px"
+			class="d-flex flex-column align-center"
+		>
+			<p class="pa-2">
+				Haut de la section.
+			</p>
+		</VSheet>
+		<BackToTopBtn 
+			:target="pill-btn"
+			:nudge-right="30"
+			:nudge-bottom="30"
+			:vuetify-options="vuetifyOptions"
+		>
+			Retour en haut
+		</BackToTopBtn>
+	</VCard>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import BackToTopBtn from '@cnamts/BackToTopBtn'
+	import { VCard, VSheet } from 'vuetify/components'
+	
+	const vuetifyOptions = {
+		btn: {
+			variant: 'outlined',
+			color: 'primary',
+			minWidth: 92,
+			rounded: true,
+		}
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		target: 'pill-btn',
+		nudgeRight: 30,
+		nudgeBottom: 30,
 		vuetifyOptions: {
 			btn: {
 				variant: 'outlined',
-				color: 'medium-emphasis',
+				color: 'primary',
 				minWidth: 92,
 				rounded: true,
 			},
@@ -173,16 +314,36 @@ export const PillBtn: Story = {
 				return { args }
 			},
 			template: `
-				<v-btn
-					color="primary"
-					variant="outlined"
-					size="small"
-					rounded
-					@click="() => { window.location.href = '' }"
+				<VCard
+					id="pill-btn"
+					width="100%"
+					max-height="200px"
+					class="overflow-y-auto"
+					style="scroll-behavior: smooth"
 				>
-					VuetifyOptions
-				</v-btn>
+					<VSheet
+						height="600px"
+						class="d-flex flex-column align-center"
+					>
+						<p class="pa-2">
+							Haut de la section.
+						</p>
+					</VSheet>
+					<BackToTopBtn 
+						v-bind="args" 
+						:nudge-right="args.nudgeRight"
+						:nudge-bottom="args.nudgeBottom"
+						:vuetify-options="args.vuetifyOptions"
+					>
+						{{args.default}}
+					</BackToTopBtn>
+				</VCard>
 			`,
 		}
 	},
+	play: async ({ canvasElement }) => {
+		await new Promise((resolve: (v: unknown) => void) => setTimeout(resolve, 1000))
+		const container = canvasElement.querySelector('#pill-btn')
+		container?.scrollTo(0, 1000)
+	},
 }

package/src/components/CollapsibleList/CollapsibleList.mdx

@@ -15,8 +15,8 @@ L’élément `CollapsibleList` est utilisé pour afficher des listes de liens.
 
 <Source dark code={`
 <script setup lang="ts">
-	import CollapsibleList from '@/components/CollapsibleList/CollapsibleList.vue'
-	import type { ListItem } from '@/components/CollapsibleList/types'
+	import CollapsibleList from '@cnamts/synapse'
+	import type { ListItem } from '@cnamts/synapse/src/components/CollapsibleList/types'
 
 	const remboursementItems = [
 		{

package/src/components/CollapsibleList/CollapsibleList.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CollapsibleList from './CollapsibleList.vue'
 
 const meta = {
-	title: 'Components/CollapsibleList',
+	title: 'Composants/Données/CollapsibleList',
 	component: CollapsibleList,
 	parameters: {
 		layout: 'fullscreen',
@@ -23,6 +23,42 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="pa-4">
+		<CollapsibleList 
+			:list-title="listTitle"
+			:items="items" 
+		/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import CollapsibleList from '@cnamts/synapse'
+	
+	const listTitle = 'Santé'
+	
+	const items = [
+        		{
+			text: 'Mon espace santé',
+			href: 'https://www.ameli.fr/assure/sante/mon-espace-sante',
+		},
+		{
+			text: 'Accomplir les bons gestes',
+			href: 'https://www.ameli.fr/assure/sante/bons-gestes',
+		},
+	]
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		listTitle: 'Santé',
 		items: [

package/src/components/CopyBtn/CopyBtn.mdx

@@ -18,7 +18,7 @@ Le composant `CopyBtn` est utilisé pour afficher un bouton permettant à l’ut
 
 <Source dark code={`
 <script setup lang="ts">
-import CopyBtn from '@/components/CopyBtn/CopyBtn.vue'
+import CopyBtn from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/CopyBtn/CopyBtn.stories.ts

@@ -6,7 +6,7 @@ import { mdiContentDuplicate } from '@mdi/js'
 const duplicateIcon = mdiContentDuplicate
 
 const meta = {
-	title: 'Components/CopyBtn',
+	title: 'Composants/Boutons/CopyBtn',
 	component: CopyBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -60,6 +60,33 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="d-flex flex-wrap align-center pa-4">
+		<p class="mb-0 mr-1">
+		  Patient n°<b>1970756541</b>
+		</p>
+
+		<CopyBtn
+			label="Copier le numéro de patient"
+			text-to-copy="1970756541"
+		/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import CopyBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		ariaLabel: 'Copier le numéro de patient',
 		ariaOwns: 'copy-btn-1',
@@ -108,6 +135,34 @@ export const Default: Story = {
 }
 
 export const NoTooltip: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="d-flex flex-wrap align-center pa-4">
+		<p class="mb-0 mr-1">
+		  Patient n°<b>1970756541</b>
+		</p>
+
+		<CopyBtn
+			label="Copier le numéro de patient"
+			text-to-copy="1970756541"
+			hide-tooltip
+		/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import CopyBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		ariaLabel: 'Copier le numéro de patient',
 		textToCopy: '1970756541',
@@ -139,6 +194,37 @@ export const NoTooltip: Story = {
 }
 
 export const SlotIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="d-flex flex-wrap align-center pa-4">
+		<p class="mb-0 mr-1">
+		  Patient n°<b>1970756541</b>
+		</p>
+
+		<CopyBtn
+			label="Copier le numéro de patient"
+			text-to-copy="1970756541"
+			:icon="duplicateIcon"
+		/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import CopyBtn from '@cnamts/synapse'
+	import { mdiContentDuplicate } from '@mdi/js'
+	
+	const duplicateIcon = mdiContentDuplicate
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		ariaLabel: 'Copier le numéro de patient',
 		textToCopy: '1970756541',
@@ -174,6 +260,39 @@ export const SlotIcon: Story = {
 }
 
 export const SlotTooltip: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="d-flex flex-wrap align-center pa-4">
+		<p class="mb-0 mr-1">
+		  Patient n°<b>1970756541</b>
+		</p>
+
+		<CopyBtn
+			label="Copier le numéro de patient"
+			text-to-copy="1970756541"
+		>
+			<template #tooltip>
+				{{ tooltip }}
+			</template>
+		</CopyBtn>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import CopyBtn from '@cnamts/synapse'
+	
+	const tooltip = 'Texte personalisé'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		ariaLabel: 'Copier le numéro de patient',
 		textToCopy: '1970756541',

package/src/components/CopyBtn/CopyBtn.vue

@@ -93,7 +93,7 @@
   padding: 6px 16px;
   box-shadow: none;
   margin-top: 2px;
-  background: rgba(97, 97, 97, 0.9);
+  background: rgba(84, 88, 89, 0.95);
   color: white;
 }
 

package/src/components/Customs/CustomInputSelect/CustomInputSelect.mdx

@@ -3,7 +3,7 @@ import * as CustomInputSelectStories from "./CustomInputSelect.stories.ts";
 
 <Meta of={CustomInputSelectStories} />
 
-# CustomSelect
+# CustomInputSelect
 
 Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
 
@@ -19,12 +19,12 @@ Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `
 
 <Source dark code={`
 <script setup lang="ts">
-	import CustomInputSelect from '@/components/Customs/CustomInputSelect/CustomInputSelect.vue'
-	import { ref } from 'vue'
+	import CustomInputSelect from '@cnamts/synapse'
 
-	const value = ref('fr')
-	const items = ['fr', 'en', 'co']
-	const ariaLabel = 'Choix de la langue'
+	const items = [
+        { text: 'Option 1', value: '1' },
+        { text: 'Option 2', value: '2' },
+    ],
 </script>
 
 <template>
@@ -33,8 +33,6 @@ Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `
 			<CustomInputSelect
 				v-model="value"
 				:items="items"
-				:label="ariaLabel"
-				aria-label="Choix de la langue"
 			/>
 		</div>
 	</main>