@cnamts/synapse 1.0.9 → 1.0.10

package/src/components/Amelipro/AmeliproAccordionFrieze/types.d.ts

@@ -0,0 +1,6 @@
+export interface IAmeliproAccordionFriezeItem {
+	title?: string
+	linkStyleText?: string
+	uniqueId: string
+	isEmpty?: boolean
+}

package/src/components/Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue

@@ -189,7 +189,7 @@
 				<AmeliproSelect
 					v-if="sortSelectItems.length > 0"
 					v-model="sortSelectModel"
-					class="ml-2 mb-0 pt-0 amelipro-accordion-list__sort-select"
+					classes="ml-2 mb-0 pt-0 amelipro-accordion-list__sort-select"
 					global-max-width="170px"
 					:hide-error-message="true"
 					:items="sortSelectItems"
@@ -202,7 +202,7 @@
 				<AmeliproSelect
 					v-if="mdAndUp"
 					v-model="paginationSelectModel"
-					class="ml-2 mb-0 pt-0 amelipro-accordion-list__pagination-select"
+					classes="ml-2 mb-0 pt-0 amelipro-accordion-list__pagination-select"
 					global-max-width="170px"
 					:hide-error-message="true"
 					:items="paginationSelectItems"

package/src/components/Amelipro/AmeliproAccordionList/__tests__/__snapshots__/AmeliproAccordionList.spec.ts.snap

@@ -70,11 +70,7 @@ exports[`AmeliproAccordionList > render correctly 1`] = `
             </label>
           </div>
           <div class="
-            amelipro-accordion-list__pagination-select
             amelipro-select
-            mb-0
-            ml-2
-            pt-0
             pt-0
             v-input
             v-input--center-affix

package/src/components/Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue

@@ -180,7 +180,7 @@
 				<AmeliproSelect
 					v-if="sortSelectItems.length > 0"
 					v-model="sortSelectModel"
-					class="ml-2 mb-0 pt-0 amelipro-accordion-result-list__sort-select"
+					classes="ml-2 mb-0 pt-0 amelipro-accordion-result-list__sort-select"
 					global-max-width="170px"
 					:hide-error-message="true"
 					:items="sortSelectItems"
@@ -193,7 +193,7 @@
 				<AmeliproSelect
 					v-if="mdAndUp"
 					v-model="paginationSelectModel"
-					class="ml-2 mb-0 pt-0 amelipro-accordion-result-list__pagination-select"
+					classes="ml-2 mb-0 pt-0 amelipro-accordion-result-list__pagination-select"
 					global-max-width="170px"
 					:hide-error-message="true"
 					:items="paginationSelectItems"

package/src/components/Amelipro/AmeliproAccordionResultList/__tests__/__snapshots__/AmeliproAccordionResultList.spec.ts.snap

@@ -71,11 +71,7 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
             </label>
           </div>
           <div class="
-            amelipro-accordion-result-list__pagination-select
             amelipro-select
-            mb-0
-            ml-2
-            pt-0
             pt-0
             v-input
             v-input--center-affix

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

@@ -50,5 +50,102 @@ export const Default: Story = {
 			/>
 		`,
 	}),
+}
+
+export const CouleurPersonnalisee: Story = {
+	name: 'Couleur personnalisée',
+	args: {
+		badgeContent: 'Badge vert',
+		badgeColor: '#007863',
+		badgeTextColor: '#fff',
+		uniqueId: 'badge-vert',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBadge
+        badge-content="Badge vert"
+        badge-color="#007863"
+        badge-text-color="#fff"
+        unique-id="badge-vert"
+    />
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBadge },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Badge avec couleur de fond et couleur de texte personnalisées.</p>
+<AmeliproBadge v-bind="args" />
+        `,
+	}),
+}
 
+export const ArrondiDroite: Story = {
+	name: 'Arrondi à droite',
+	args: {
+		badgeContent: 'Arrondi à droite',
+		roundedRight: true,
+		uniqueId: 'badge-arrondi',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBadge
+        badge-content="Arrondi à droite"
+        rounded-right
+        unique-id="badge-arrondi"
+    />
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBadge },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Badge avec arrondi à droite (<code>roundedRight</code>).</p>
+<AmeliproBadge v-bind="args" />
+        `,
+	}),
+}
+
+export const BaliseSpan: Story = {
+	name: 'Balise span',
+	args: {
+		badgeContent: 'Badge en span',
+		isSpan: true,
+		uniqueId: 'badge-span',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBadge
+        badge-content="Badge en span"
+        is-span
+        unique-id="badge-span"
+    />
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBadge },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Badge affiché avec une balise <code>span</code> (<code>isSpan</code>).</p>
+<AmeliproBadge v-bind="args" />
+        `,
+	}),
 }

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

@@ -17,10 +17,6 @@ const meta = {
 		disabled: { description: 'Désactive le bouton.' },
 		hoverColor: { description: 'Cette propriété est similaire à la propriété `color` mais pour le survol du bouton/lien.' },
 		hoverUnderline: { description: 'Souligne le texte du bouton/lien au survol.' },
-		href: {
-			table: { category: 'props' },
-			description: 'Ajoute une url au bouton',
-		},
 		icon: {
 			table: { category: 'props' },
 			description: 'Slot pour utiliser une icône MDI',
@@ -39,11 +35,8 @@ const meta = {
 		textColor: { description: 'La couleur du texte si la propriété `text` est désactivée.' },
 		textFocusColor: { description: 'La couleur du texte au focus si la propriété `text` est désactivée.' },
 		textHoverColor: { description: 'La couleur du texte au survol si la propriété `text` est désactivée.' },
-		to: {
-			table: { category: 'props' },
-			description: 'Ajoute une route au bouton',
-		},
 		underline: { description: 'Souligne le texte du bouton/lien.' },
+		uniqueId: { description: 'Identifiant unique du bouton/lien' },
 	},
 	component: AmeliproBtn,
 	title: 'Composants/Amelipro/AmeliproBtn',
@@ -180,3 +173,192 @@ export const SecundaryBtn: Story = {
 		],
 	},
 }
+
+export const CouleurEtTexteParDefaut: Story = {
+	name: 'Couleur et texte par défaut',
+	args: {
+		default: 'Bouton par défaut',
+		uniqueId: 'btn-default',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBtn unique-id="btn-default">
+        Bouton par défaut
+    </AmeliproBtn>
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton avec couleur et texte par défaut.</p>
+<AmeliproBtn v-bind="args">
+    {{ args.default }}
+</AmeliproBtn>
+        `,
+	}),
+}
+
+export const AvecIconeAGauche: Story = {
+	name: 'Icône à gauche',
+	args: {
+		default: 'Bouton avec icône à gauche',
+		iconName: 'chrono',
+		iconLeft: true,
+		uniqueId: 'btn-icon-left',
+		color: 'ap-blue-darken-1',
+		textColor: 'ap-white',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBtn
+        icon-name="chrono"
+        icon-left
+        unique-id="btn-icon-left"
+        color="ap-blue-darken-1"
+        text-color="ap-white"
+    >
+        Bouton avec icône à gauche
+    </AmeliproBtn>
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton avec une icône à gauche (<code>iconLeft</code>).</p>
+<AmeliproBtn v-bind="args">
+    {{ args.default }}
+</AmeliproBtn>
+        `,
+	}),
+}
+
+export const Desactive: Story = {
+	name: 'Désactivé',
+	args: {
+		default: 'Bouton désactivé',
+		disabled: true,
+		uniqueId: 'btn-disabled',
+		color: 'ap-blue-darken-1',
+		textColor: 'ap-white',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBtn
+        disabled
+        unique-id="btn-disabled"
+        color="ap-blue-darken-1"
+        text-color="ap-white"
+    >
+        Bouton désactivé
+    </AmeliproBtn>
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton désactivé (<code>disabled</code>).</p>
+<AmeliproBtn v-bind="args">
+    {{ args.default }}
+</AmeliproBtn>
+        `,
+	}),
+}
+
+export const TexteSeul: Story = {
+	name: 'Texte seul',
+	args: {
+		default: 'Bouton texte seul',
+		text: true,
+		color: 'ap-blue-darken-1',
+		textColor: 'ap-blue-darken-1',
+		uniqueId: 'btn-text-only',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBtn
+        text
+        color="ap-blue-darken-1"
+        text-color="ap-blue-darken-1"
+        unique-id="btn-text-only"
+    >
+        Bouton texte seul
+    </AmeliproBtn>
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton affiché sans fond, uniquement en texte (<code>text</code>).</p>
+<AmeliproBtn v-bind="args">
+    {{ args.default }}
+</AmeliproBtn>
+        `,
+	}),
+}
+
+export const AvecBadge: Story = {
+	name: 'Avec badge',
+	args: {
+		default: 'Bouton avec badge',
+		badge: 3,
+		badgeBgColor: 'ap-pink',
+		badgeColor: 'ap-white',
+		uniqueId: 'btn-badge',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproBtn
+        badge="3"
+        badge-bg-color="ap-pink"
+        badge-color="ap-white"
+        unique-id="btn-badge"
+    >
+        Bouton avec badge
+    </AmeliproBtn>
+</template>
+                `,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton avec badge (<code>badge</code>, <code>badgeBgColor</code>, <code>badgeColor</code>).</p>
+<AmeliproBtn v-bind="args">
+    {{ args.default }}
+</AmeliproBtn>
+        `,
+	}),
+}