@cnamts/synapse 0.0.7-alpha → 0.0.8-alpha

package/src/components/DialogBox/DialogBox.vue

@@ -151,6 +151,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens' as *;
+
 .v-card__title > * {
 	line-height: 1em;
 }
@@ -166,7 +167,7 @@ h2 {
 	text-wrap: balance;
 }
 
-.vd-dialog-box-actions-ctn  {
+.vd-dialog-box-actions-ctn {
 	display: flex;
 	flex-direction: column-reverse;
 	justify-content: stretch;
@@ -174,7 +175,7 @@ h2 {
 }
 
 @media screen and (min-width: $container-mobile-max-width) {
-	.vd-dialog-box-actions-ctn  {
+	.vd-dialog-box-actions-ctn {
 		flex-direction: row;
 	}
 }

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -102,12 +102,13 @@
 	.v-btn__content {
 		flex-wrap: wrap;
 	}
+
 	.v-icon {
 		flex: none;
 	}
 }
 
 .outlined-style {
-	border: 1px solid currentColor;
+	border: 1px solid currentcolor;
 }
 </style>

package/src/components/ExternalLinks/ExternalLinks.mdx

@@ -0,0 +1,86 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as ExternalLinksStories from './ExternalLinks.stories.ts'
+
+<Meta of={ExternalLinksStories} />
+
+
+# ExternalLinks
+
+L'élément `ExternalLinks` est utilisé pour afficher un menu avec une liste vers des liens externes.
+
+<Canvas of={ExternalLinksStories.Default} />
+
+
+# API
+
+<Controls of={ExternalLinksStories.Default} />
+
+
+## Décalage
+
+Vous pouvez décaler le composant vers le haut ou vers le bas en utilisant les props `nudge-top` et `nude-bottom`.
+
+<Canvas of={ExternalLinksStories.NudgeTop} />
+
+
+## Absence de données
+
+Lorsqu'il n'y a pas de données, un message par défaut est affiché.
+
+<Canvas of={ExternalLinksStories.NoData} />
+
+## Composants Vuetify
+
+Il est possibles de personnalisé les props passé aux composants utilisés en interne en utilisant la props `vuetifyOptions`.
+
+<Canvas of={ExternalLinksStories.VuetifyOptions} />
+
+
+## Slot `link-icon`
+
+Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
+
+<Canvas
+	of={ExternalLinksStories.CustomLinksIcon}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { ExternalLinks } from '@cnamts/synapse'
+			import { VIcon } from 'vuetify/components'
+			import { mdiArrowTopRight } from '@mdi/js'
+
+			const items = [
+				{
+					text: 'ameli.fr',
+					href: 'https://www.ameli.fr',
+				},
+				{
+					text: 'Github',
+					href: 'https://www.github.com',
+				},
+				{
+					text: 'Twitter',
+					href: 'https://www.twitter.com',
+				},
+			]
+
+			const arrowIcon = mdiArrowTopRight
+		</script>
+
+		<template>
+			<ExternalLinks
+				:items
+			>
+				<template #link-icon>
+					<VIcon>
+						{{ arrowIcon }}
+					</VIcon>
+				</template>
+			</ExternalLinks>
+		</template>
+		`
+	}}
+/>

package/src/components/ExternalLinks/ExternalLinks.stories.ts

@@ -0,0 +1,553 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ExternalLinks from './ExternalLinks.vue'
+import { mdiArrowTopRight } from '@mdi/js'
+import { VIcon } from 'vuetify/components'
+
+const meta = {
+	title: 'Composants/Navigation/ExternalLinks',
+	component: ExternalLinks,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		'position': {
+			control: {
+				type: 'select',
+			},
+			options: ['top left', 'top right', 'bottom left', 'bottom right'],
+			table: {
+				defaultValue: {
+					summary: 'top left',
+				},
+				type: {
+					summary: `'top left' | 'top right' | 'bottom left' | 'bottom right'`,
+				},
+			},
+		},
+		'items': {
+			control: {
+				type: 'object',
+			},
+			table: {
+				type: {
+					summary: 'Array<{ text: string, href: string }>',
+				},
+				category: 'props',
+			},
+			description: 'List des liens',
+		},
+		'btnText': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				defaultValue: {
+					summary: 'Consulter les données externes',
+				},
+				type: {
+					summary: 'string',
+				},
+			},
+			description: 'Text affiché dans le bouton',
+		},
+		'nudgeTop': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				defaultValue: {
+					summary: '0px',
+				},
+				type: {
+					summary: 'string|number',
+				},
+			},
+		},
+		'nudgeBottom': {
+			control: {
+				type: 'text',
+			},
+			table: {
+				defaultValue: {
+					summary: '0px',
+				},
+				type: {
+					summary: 'string|number',
+				},
+			},
+		},
+		'fixed': {
+			control: {
+				type: 'boolean',
+			},
+			table: {
+				defaultValue: {
+					summary: 'false',
+				},
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		'link-icon': {
+			description: 'Remplace l\'icône des liens',
+			control: {
+				type: 'text',
+			},
+		},
+		'vuetifyOptions': {
+			control: { type: 'object' },
+			description:
+        'Permet de personnaliser les props des composants vuetify `VMenu`, `VBtn`, `VIcon`, `VList`, `VListItem` et `VSheet` utilisés en interne.',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'object',
+					detail: `{
+	menu: Record<string, any>,
+	btn: Record<string, any>,
+	btnIcon: Record<string, any>,
+	linkIcon: Record<string, any>,
+	list: Record<string, any>,
+	listItem: Record<string, any>,
+	sheet: Record<string, any>,
+}`,
+				},
+				defaultValue: {
+					summary: 'object',
+					detail: `{
+	menu: {
+		tile: true,
+		zIndex: 4,
+		offset: 0,
+	},
+	btn: {
+		tile: true,
+		minHeight: '48px',
+		minWidth: '328px',
+		color: cnamColorsTokens.blue.lighten20,
+		class: 'd-flex px-3',
+	},
+	btnIcon: {
+		color: 'white',
+	},
+	linkIcon: {
+		color: 'rgba(0, 0, 0, .54)',
+	},
+	list: {
+		border: false,
+		elevation: 0,
+		class: 'py-0',
+	},
+	listItem: {
+		target: '_blank',
+		rel: 'noopener noreferrer',
+	},
+	sheet: {
+		class: 'px-4 py-3',
+	},
+}`,
+				},
+			},
+		},
+	},
+	decorators: [() => ({ template: '<div style="min-height: 300px; overflow: hidden; position: relative"><story/></div>' })],
+} satisfies Meta<typeof ExternalLinks>
+
+export default meta
+
+type Story = StoryObj<typeof ExternalLinks>
+
+export const Default: Story = {
+	args: {
+		position: 'top left',
+		items: [
+			{
+				text: 'ameli.fr',
+				href: 'https://www.ameli.fr',
+			},
+			{
+				text: 'Github',
+				href: 'https://www.github.com',
+			},
+			{
+				text: 'Twitter',
+				href: 'https://www.twitter.com',
+			},
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	position="top left"
+	:items="items"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+`,
+			},
+		],
+	},
+}
+
+export const NudgeTop: Story = {
+	args: {
+		position: 'top left',
+		nudgeTop: '50px',
+		items: [
+			{
+				text: 'ameli.fr',
+				href: 'https://www.ameli.fr',
+			},
+			{
+				text: 'Github',
+				href: 'https://www.github.com',
+			},
+			{
+				text: 'Twitter',
+				href: 'https://www.twitter.com',
+			},
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	position="top left"
+	:items="items"
+	nudgeTop="50px"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+`,
+			},
+		],
+	},
+}
+
+export const NudgeBottom: Story = {
+	args: {
+		position: 'bottom left',
+		nudgeBottom: '50px',
+		items: [
+			{
+				text: 'ameli.fr',
+				href: 'https://www.ameli.fr',
+			},
+			{
+				text: 'Github',
+				href: 'https://www.github.com',
+			},
+			{
+				text: 'Twitter',
+				href: 'https://www.twitter.com',
+			},
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	position="bottom left"
+	:items="items"
+	nudgeBottom="50px"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+`,
+			},
+		],
+	},
+}
+
+export const NoData: Story = {
+	args: {
+		position: 'top left',
+		items: [],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	position="top left"
+	:items="[]"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+`,
+			},
+		],
+	},
+}
+
+export const BtnText: Story = {
+	args: {
+		items: [
+			{
+				text: 'ameli.fr',
+				href: 'https://www.ameli.fr',
+			},
+			{
+				text: 'Github',
+				href: 'https://www.github.com',
+			},
+			{
+				text: 'Twitter',
+				href: 'https://www.twitter.com',
+			},
+		],
+		btnText: 'Afficher les liens externes',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	position="top left"
+	btn-text="Afficher les liens externes"
+	:items="items"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+`,
+			},
+		],
+	},
+}
+
+export const VuetifyOptions: Story = {
+	args: {
+		vuetifyOptions: {
+			btn: {
+				color: 'secondary',
+			},
+			list: {
+				density: 'compact',
+			},
+		},
+		items: [
+			{
+				text: 'ameli.fr',
+				href: 'https://www.ameli.fr',
+			},
+			{
+				text: 'Github',
+				href: 'https://www.github.com',
+			},
+			{
+				text: 'Twitter',
+				href: 'https://www.twitter.com',
+			},
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks
+	:items
+	:vuetifyOptions="options"
+/>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+
+const options = {
+	btn: {
+		color: 'secondary',
+	},
+	list: {
+		density: 'compact',
+	},
+}
+`,
+			},
+		],
+	},
+}
+
+export const CustomLinksIcon: Story = {
+	render: (args) => {
+		return {
+			components: { ExternalLinks, VIcon },
+			setup() {
+				const items = [
+					{
+						text: 'ameli.fr',
+						href: 'https://www.ameli.fr',
+					},
+					{
+						text: 'Github',
+						href: 'https://www.github.com',
+					},
+					{
+						text: 'Twitter',
+						href: 'https://www.twitter.com',
+					},
+				]
+				const arrowIcon = mdiArrowTopRight
+				return { args, items, arrowIcon }
+			},
+			template: `
+			<ExternalLinks :items>
+				<template #link-icon>
+					<VIcon color="rgba(0, 0, 0, 0.5)">
+						{{ arrowIcon }}
+					</VIcon>
+				</template>
+			</ExternalLinks>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<ExternalLinks :items>
+	<template #link-icon>
+		<VIcon color="rgba(0, 0, 0, 0.5)">
+			{{ arrowIcon }}
+		</VIcon>
+	</template>
+</ExternalLinks>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+import { ExternalLinks } from '@cnamts/synapse'
+import { VIcon } from 'vuetify/components'
+import { mdiArrowTopRight } from '@mdi/js'
+
+const items = [
+	{
+		text: 'ameli.fr',
+		href: 'https://www.ameli.fr',
+	},
+	{
+		text: 'Github',
+		href: 'https://www.github.com',
+	},
+	{
+		text: 'Twitter',
+		href: 'https://www.twitter.com',
+	},
+]
+
+const arrowIcon = mdiArrowTopRight
+`,
+			},
+		],
+	},
+}