@cnamts/synapse 0.0.2-alpha → 0.0.4-alpha

package/src/components/LangBtn/LangBtn.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 
 const meta: Meta<typeof LangBtn> = {
-	title: 'Components/LangBtn',
+	title: 'Composants/Boutons/LangBtn',
 	component: LangBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -16,7 +16,7 @@ const meta: Meta<typeof LangBtn> = {
 		// @ts-expect-error Type '"array"' is not assignable to type 'Control | undefined'.
 		availableLanguages: { control: { type: 'array' } },
 		vuetifyOptions: {
-			constrol: { type: 'object' },
+			control: { type: 'object' },
 			default: () => ({
 				menu: {
 					offsetY: true,
@@ -39,11 +39,38 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<LangBtn
+		v-model="value"
+		:items="items"
+		:aria-label="ariaLabel"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import LangBtn from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('fr')
+	const items = ['fr', 'en', 'es']
+	const ariaLabel = 'Choix de la langue'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
-		modelValue: 'en',
+		modelValue: 'fr',
 		hideDownArrow: false,
-		ariaLabel: 'Select a language',
-		availableLanguages: ['fr', 'co', 'es'],
+		ariaLabel: 'Choix de la langue',
+		availableLanguages: ['fr', 'en', 'es'],
 		vuetifyOptions: {
 			menu: {
 				offsetY: true,
@@ -74,10 +101,36 @@ export const Default: Story = {
 }
 
 export const AllLanguages: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<LangBtn
+		v-model="value"
+		:aria-label="ariaLabel"
+		available-languages="*"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import LangBtn from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('fr')
+	const ariaLabel = 'Choix de la langue'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		modelValue: 'fr',
 		hideDownArrow: false,
-		ariaLabel: 'Select a language',
+		ariaLabel: 'Choix de la langue',
 		availableLanguages: '*',
 	},
 	render: (args) => {
@@ -96,10 +149,38 @@ export const AllLanguages: Story = {
 }
 
 export const NoDownArrow: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<LangBtn
+		v-model="value"
+		:items="items"
+		:aria-label="ariaLabel"
+		hide-down-arrow
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import LangBtn from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('fr')
+	const items = ['fr', 'en', 'es']
+	const ariaLabel = 'Choix de la langue'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		modelValue: 'fr',
 		hideDownArrow: true,
-		ariaLabel: 'Select a language',
+		ariaLabel: 'Choix de la langue',
 		availableLanguages: ['fr', 'en', 'de'],
 	},
 	render: (args) => {
@@ -118,10 +199,46 @@ export const NoDownArrow: Story = {
 }
 
 export const FlatBtn: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<LangBtn
+		v-model="value"
+		:items="items"
+		:aria-label="ariaLabel"
+		:vuetify-options="vuetifyOptions"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import LangBtn from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const value = ref('fr')
+	const items = ['fr', 'en', 'es']
+	const ariaLabel = 'Choix de la langue'
+	
+	const vuetifyOptions = {
+		btn: {
+			color: 'primary',
+			variant: 'flat',
+			ripple: true,
+		},
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		modelValue: 'fr',
 		hideDownArrow: false,
-		ariaLabel: 'Select a language',
+		ariaLabel: 'Choix de la langue',
 		availableLanguages: ['fr', 'en', 'de'],
 		vuetifyOptions: {
 			btn: {

package/src/components/Logo/Logo.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Controls, Source } from '@storybook/blocks';
 import * as LogoStories from './Logo.stories.ts';
 import Logo from './Logo.vue';
 
-<Meta title="Components/Logo" component={Logo} />
+<Meta title="Composants/Données/Logo" component={Logo} />
 
 # Logo
 
@@ -18,7 +18,7 @@ Le composant `Logo` est utilisé pour afficher le logo de l'application avec dif
 
 <Source dark code={`
 <script setup lang='ts'>
-    import Logo from '@/components/Logo/Logo.vue'
+    import Logo from '@cnamts/synapse'
 </script>
 <template>
   <Logo :hideSignature="false" :hideOrganism="false" :risquePro="false" ariaLabel="" :avatar="false" :dark="false" />

package/src/components/Logo/Logo.stories.ts

@@ -3,7 +3,7 @@ import Logo from './Logo.vue'
 import { VSheet } from 'vuetify/components'
 
 const meta = {
-	title: 'Components/Logo',
+	title: 'Composants/Données/Logo',
 	component: Logo,
 	parameters: {
 		layout: 'fullscreen',
@@ -28,6 +28,24 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,
@@ -54,6 +72,24 @@ export const Default: Story = {
 }
 
 export const small: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo size="small" />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,
@@ -77,6 +113,24 @@ export const small: Story = {
 }
 
 export const xSmall: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo size="x-small" />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,
@@ -100,6 +154,24 @@ export const xSmall: Story = {
 }
 
 export const hideSignature: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo hide-signature />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: true,
 		hideOrganism: false,
@@ -123,6 +195,24 @@ export const hideSignature: Story = {
 }
 
 export const hideOrganism: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo hide-organism />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: true,
@@ -146,6 +236,24 @@ export const hideOrganism: Story = {
 }
 
 export const risquePro: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo risque-pro />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,
@@ -169,6 +277,24 @@ export const risquePro: Story = {
 }
 
 export const avatar: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<Logo avatar />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,
@@ -192,6 +318,26 @@ export const avatar: Story = {
 }
 
 export const dark: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VSheet color="primary" class="pa-4">
+		<Logo dark />
+	</VSheet>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import Logo from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		hideSignature: false,
 		hideOrganism: false,

package/src/components/LogoBrandSection/LogoBrandSection.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Controls, Source } from '@storybook/blocks';
+import * as LogoBrandSectionStories from './LogoBrandSection.stories.ts';
+
+<Meta title="Composants/Données/LogoBrandSection" component={LogoBrandSectionStories} />
+
+# LogoBrandSection
+
+Il permet d'afficher le logo de l'Assurance Maladie avec des logos ou un titre secondaire et contient des présets pour différentes marques de l'Assurance Maladie grace a la props `theme` (ex: `ameli`, `ameli-pro`, `compte-entreprise`...).
+
+<Canvas of={LogoBrandSectionStories.Default} />
+
+## API
+
+<Controls of={LogoBrandSectionStories.Default} />

package/src/components/LogoBrandSection/LogoBrandSection.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import LogoBrandSection from './LogoBrandSection.vue'
+
+const meta = {
+	title: 'Composants/Données/LogoBrandSection',
+	component: LogoBrandSection,
+	argTypes: {
+		'theme': {
+			description: 'Applique un preset de style à la section.',
+			control: {
+				type: 'select',
+			},
+			options: [
+				'ameli',
+				'ameli-pro',
+				'cnam',
+				'compte-ameli',
+				'compte-entreprise',
+				'default',
+				'risque-pro',
+			],
+		},
+		'serviceTitle': {
+			description: 'Le titre du service (titre de niveau 1).',
+		},
+		'serviceSubTitle': {
+			description: 'Le sous-titre du service (titre de niveau 2).',
+		},
+		'mobileVersion': {
+			control: {
+				type: 'boolean',
+			},
+			description: 'Affiche la version mobile.',
+		},
+		'reduceLogo': {
+			control: {
+				type: 'boolean',
+			},
+			description: 'Affiche la version Avatar du logo de l’Assurance Maladie s’il y a une marque secondaire. Sinon, masque la signature.<br> Déprécié, la ronde seule ne devrait plus être utilisée.',
+		},
+		'homeLink': {
+			description: 'Le lien vers la page d’accueil. <br>La valeur `false` permet de désactiver le lien..',
+			table: {
+				type: {
+					summary: '{ href?: string, to?: RouteLocationRaw, ariaLabel?: string }',
+				},
+				defaultValue: { summary: `{ href: '/'}` },
+			},
+		},
+		'default': {
+			control: {
+				type: 'text',
+			},
+			description: 'Slot pour remplacer le contenu et afficher une marque partenaire.',
+			table: {
+				type: {
+					summary: '{}',
+				},
+			},
+		},
+		'brand-content': {
+			control: {
+				type: 'text',
+			},
+			description: 'Slot pour personnaliser le contenu de la marque.',
+			table: {
+				type: {
+					summary: '{}',
+				},
+			},
+		},
+	},
+	args: {
+		theme: 'default',
+	},
+} satisfies Meta<typeof LogoBrandSection>
+
+export default meta
+
+type Story = StoryObj<typeof LogoBrandSection>
+
+export const Default: Story = {
+	args: {
+		serviceTitle: 'Synapse',
+		serviceSubTitle: 'Documentation du Design System',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LogoBrandSection
+						:service-title="Synapse"
+						:service-sub-title="Documentation du Design System"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { LogoBrandSection } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const WithBrand: Story = {
+	args: {
+		serviceTitle: 'Synapse',
+		serviceSubTitle: ' Documentation du Design System',
+	},
+	render: (args) => {
+		return {
+			components: { LogoBrandSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<LogoBrandSection v-bind="args">
+					<img
+						src="/logo-msa.svg"
+						alt="Logo MSA"
+						width="115px"
+						height="52px"
+						class="ml-8 my-auto"
+					/>
+				</LogoBrandSection>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<LogoBrandSection>
+						<img src="/logo-msa.svg" alt="Logo MSA" width="115px" height="52px" class="ml-8 my-auto">
+					</LogoBrandSection>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { LogoBrandSection } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}