@cnamts/synapse 1.0.2 → 1.0.3

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

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproCallback from '../AmeliproCallback.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproCallback', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproCallback, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				contentText: 'Contenu texte de la callback.',
+				contentTitle: 'titre de la callback.',
+				uniqueId: 'my-callback-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproCallback/tests/__snapshots__/AmeliproCallback.spec.ts.snap

@@ -0,0 +1,154 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproCallback > render correctly 1`] = `
+<div
+  class="
+    amelipro-callback
+    w-100
+  "
+  id="my-callback-id-container"
+>
+  <div
+    class="
+      amelipro-callback__card
+      amelipro-card
+      d-flex
+      flex-column
+      flex-md-row
+      w-100
+    "
+    id="my-callback-id-card-container"
+    style="background-color: #FFFFFF; border: 1px solid #DDDEDE;"
+  >
+    <div
+      class="amelipro-card__left-part"
+      id="my-callback-id-card-left-part"
+      style="width: 100%;"
+    >
+      <div
+        class="
+          amelipro-card__header
+          w-100
+        "
+        id="my-callback-id-card-header"
+      >
+        <div
+          class="
+            align-sm-center
+            amelipro-card__header-content
+            d-flex
+            flex-column
+            flex-sm-row
+            w-100
+          "
+          style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DDDEDE;"
+        >
+          <div
+            class="amelipro-card__header-slot-wrapper--left"
+            id="my-callback-id-card-header-left-part"
+            style="width: 100%;"
+          >
+            <!-- v-if -->
+          </div>
+          <!-- v-if -->
+        </div>
+      </div>
+      <div
+        class="amelipro-card__content"
+        id="my-callback-id-card-content"
+      >
+        <div
+          class="
+            align-center
+            amelipro-callback__card__main-content
+            d-flex
+            flex-column
+            flex-sm-row
+            w-100
+          "
+          id="my-callback-id-card-main-content"
+        >
+          <div class="
+            d-flex
+            w-100
+          ">
+            <span
+              class="
+                amelipro-callback__img
+                amelipro-icon
+                mx-4
+              "
+              id="my-callback-id-icon"
+            >
+              <span
+                aria-hidden="true"
+                class="
+                  amelipro-custom-icon
+                  custom-color
+                "
+                focusable="false"
+                role="img"
+                style="color: #FFFFFF; height: 32px; width: 32px;"
+              >
+                <span>
+                  <svg
+                    aria-hidden="true"
+                    style="enable-background:new 0 0 46 46;"
+                    viewBox="0 0 46 46"
+                    x="0px"
+                    xml:space="preserve"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    y="0px"
+                  >
+                    <circle
+                      class="circle-color"
+                      cx="23"
+                      cy="23"
+                      r="23"
+                    />
+                    <path
+                      class="shape-color"
+                      d="M31.5,15.3c-0.3-0.3-0.7-0.3-0.9,0l-9.8,9.8c-0.3,0.3-0.7,0.3-0.9,0l-4.3-4.3c-0.1-0.2-0.3-0.2-0.4-0.2 s-0.4,0-0.5,0.2l-1.9,1.7c-0.1,0.1-0.2,0.3-0.2,0.4s0,0.4,0.2,0.4l4.3,4.6c0.3,0.3,0.7,0.7,0.9,0.9l1.8,1.9c0.3,0.2,0.7,0.2,0.9,0 l12.6-12.6c0.3-0.3,0.3-0.7,0-0.9L31.5,15.3L31.5,15.3L31.5,15.3z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+            <div class="
+              amelipro-callback__content
+              d-flex
+              flex-column
+              ml-2
+            ">
+              <span
+                aria-level="3"
+                class="
+                  amelipro-callback__title
+                  font-weight-bold
+                  mb-2
+                  text-h6
+                "
+                id="my-callback-id-card-main-content-title"
+                role="heading"
+                style="color: #1A1B1B;"
+              >
+                titre de la callback.
+              </span>
+              <p
+                class="amelipro-callback__text"
+                id="my-callback-id-card-main-content-text"
+              >
+                Contenu texte de la callback.
+              </p>
+            </div>
+          </div>
+          <!-- v-if -->
+        </div>
+      </div>
+    </div>
+    <!-- v-if -->
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproCard/AmeliproCard.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproCardStories from './AmeliproCard.stories';
+
+<Meta of={AmeliproCardStories} />
+
+# AmeliproCard
+
+L’élément `AmeliproCard` est utilisé pour afficher tous les éléments de type Card dans la charte Amelipro
+
+<Canvas of={AmeliproCardStories.Default} />
+
+## API
+
+<Controls of={AmeliproCardStories.Default} />

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproCard from './AmeliproCard.vue'
+
+const meta = {
+	argTypes: {
+		borderColor: { description: 'Couleur des bordures de la card' },
+		bordered: { description: 'Permet d’activer ou de desactiver les bordures de la card' },
+		cardColor: { description: 'Couleur du background de la card' },
+		cardTitle: { description: 'Valeur du titre de la card' },
+		classes: { description: 'Classes personnalisée de la card' },
+		contentClasses: { description: 'Partie droite du header du panneau dépliant' },
+		default: { description: 'Contenu de la card' },
+		divider: { description: 'Permet d’activer ou de desactiver le divider de la card entre le titre et le contenu' },
+		fullSizeImg: { description: 'Slot permettant d’ajouter une image qui couvre toute la largeur du bloc entre le header et le contenu' },
+		headerLeft: { description: 'Titre de la card' },
+		headerRight: { description: 'Header droit de la card' },
+		headerRightWidth: { description: 'Défini la largeur de la partie droite des headers des cartes. Cette props est utile seulement si le slot accordion-header-right est utilisé' },
+		noCardHeader: { description: 'Permet de supprimer la partie header de la card' },
+		rightPart: { description: 'Permet de créer un encart à droite de la card' },
+		rightPartClasses: { description: 'Permet des classes sur l’encart à droite de la card' },
+		rightPartContent: { description: 'Contenu de la partie droite de la carte, ne sert que si la propriété rightPart est activée' },
+		rightPartWidth: { description: 'Permet de gérer la largeur l’encart à droite de la card' },
+		titleColor: { description: 'Couleur du titre de la card' },
+		titleLevel: { description: 'Permet de changer le niveau du titre' },
+		uniqueId: { description: 'Identifiant unique de la carte' },
+
+	},
+	component: AmeliproCard,
+	title: 'Composants/Amelipro/Cartes/AmeliproCard',
+} as Meta<typeof AmeliproCard>
+export default meta
+
+type Story = StoryObj<typeof AmeliproCard>
+
+export const Default: Story = {
+	args: {
+		cardTitle: 'Mon titre',
+		default: '[Slot: default]',
+		headerRight: '[Slot: headerRight]',
+		uniqueId: 'amelipro-card-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproCard
+		card-title="Mon titre"
+		unique-id="amelipro-card-unique-id"
+	>
+		<template #headerRight>
+			<p class="mb-0">
+				[Slot: headerRight]
+			</p>
+		</template>
+
+		<template #default>
+			<p class="mb-0">
+				[Slot: default]
+			</p>
+		</template>
+	</AmeliproCard>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproCard } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproCard },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproCard
+	v-bind="args"
+>
+	<template #headerRight>
+		<p class="mb-0">
+			[Slot: headerRight]
+		</p>
+	</template>
+
+	<template #default>
+		<p class="mb-0">
+			[Slot: default]
+		</p>
+	</template>
+</AmeliproCard>`,
+	}),
+}

package/src/components/Amelipro/AmeliproCard/AmeliproCard.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+	import { computed, useSlots } from 'vue'
+	import type { IndexedObject } from '../types'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		borderColor: {
+			type: String,
+			default: 'ap-grey-lighten-2',
+		},
+		bordered: {
+			type: Boolean,
+			default: true,
+		},
+		cardColor: {
+			type: String,
+			default: 'ap-white',
+		},
+		cardTitle: {
+			type: String,
+			default: undefined,
+		},
+		classes: {
+			type: String,
+			default: undefined,
+		},
+		contentClasses: {
+			type: String,
+			default: undefined,
+		},
+		divider: {
+			type: Boolean,
+			default: true,
+		},
+		headerRightWidth: {
+			type: String,
+			default: '50%',
+		},
+		noCardHeader: {
+			type: Boolean,
+			default: false,
+		},
+		rightPart: {
+			type: Boolean,
+			default: false,
+		},
+		rightPartClasses: {
+			type: String,
+			default: undefined,
+		},
+		rightPartWidth: {
+			type: String,
+			default: '25%',
+		},
+		titleColor: {
+			type: String,
+			default: 'ap-grey-darken-1',
+		},
+		titleLevel: {
+			type: Number,
+			default: 2,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const computedContentClass = computed(() => {
+		const classes = { 'amelipro-card__content--left': props.rightPart } as Record<string, boolean>
+		if (props.contentClasses) {
+			props.contentClasses.split(' ').forEach((className: string) => {
+				classes[className] = true
+			})
+		}
+		return classes
+	})
+
+	const { mdAndUp } = useDisplay()
+	const slots = useSlots()
+	const cardTitleStyle = computed(() => ({ color: convertToHex(props.titleColor) }))
+	const borderColorValue = computed(() => convertToHex(props.borderColor))
+
+	const generalCardStyles = computed(() => {
+		const cardStyle: IndexedObject = { backgroundColor: `${convertToHex(props.cardColor)}` }
+
+		if (props.bordered) {
+			cardStyle.border = `1px solid ${borderColorValue.value}`
+		}
+
+		return cardStyle
+	})
+
+	const cardHeaderStyles = computed(() => {
+		if (props.divider && !props.noCardHeader) {
+			return { borderBottom: `1px solid ${borderColorValue.value}` }
+		}
+		return undefined
+	})
+
+	const hasRightSlot = computed((): boolean => Boolean(slots.headerRight))
+
+	const headerLeftStyles = computed(() => {
+		if (hasRightSlot.value && mdAndUp.value) {
+			return {
+				width: `calc( 100% - (${props.headerRightWidth} + 10px))`,
+				marginRight: '10px',
+			}
+		}
+		return { width: '100%' }
+	})
+
+	const headerRightStyles = computed(() => {
+		if (hasRightSlot.value && mdAndUp.value) {
+			return {
+				width: `calc(${props.headerRightWidth} - 10px)`,
+				marginLeft: '10px',
+			}
+		}
+		return { width: '100%' }
+	})
+
+	const rightPartStyle = computed(() => {
+		if (mdAndUp.value) {
+			return {
+				maxWidth: props.rightPartWidth,
+				minWidth: props.rightPartWidth,
+				width: props.rightPartWidth,
+			}
+		}
+		return { width: '100%' }
+	})
+
+	const leftPartWidth = computed(() => {
+		if (props.rightPart && mdAndUp.value) {
+			return {
+				maxWidth: `calc( 100% - ${props.rightPartWidth} )`,
+				minWidth: `calc( 100% - ${props.rightPartWidth} )`,
+				width: `calc( 100% - ${props.rightPartWidth} )`,
+			}
+		}
+
+		return { width: '100%' }
+	})
+</script>
+
+<template>
+	<div
+		:id="uniqueId ? `${uniqueId}-container` : undefined"
+		class="amelipro-card w-100 d-flex flex-column flex-md-row"
+		:class="classes"
+		:style="generalCardStyles"
+	>
+		<div
+			:id="uniqueId ? `${uniqueId}-left-part` : undefined"
+			class="amelipro-card__left-part"
+			:style="leftPartWidth"
+		>
+			<div
+				v-if="!noCardHeader"
+				:id="uniqueId ? `${uniqueId}-header` : undefined"
+				class="amelipro-card__header w-100"
+				:class="{
+					'amelipro-card__header--left': rightPart,
+				}"
+			>
+				<div
+					class="w-100 d-flex flex-column flex-sm-row align-sm-center amelipro-card__header-content"
+					:style="cardHeaderStyles"
+				>
+					<div
+						:id="uniqueId ? `${uniqueId}-header-left-part` : undefined"
+						class="amelipro-card__header-slot-wrapper--left"
+						:style="headerLeftStyles"
+					>
+						<slot name="headerLeft">
+							<p
+								v-if="cardTitle"
+								:id="uniqueId ? `${uniqueId}-title` : undefined"
+								:aria-level="titleLevel"
+								class="text-h2 mb-0 amelipro-card__title"
+								role="heading"
+								:style="cardTitleStyle"
+							>
+								{{ cardTitle }}
+							</p>
+						</slot>
+					</div>
+
+					<div
+						v-if="hasRightSlot"
+						:id="uniqueId ? `${uniqueId}-header-right-part` : undefined"
+						class="amelipro-card__header__slot-wrapper--right"
+						:style="headerRightStyles"
+					>
+						<slot name="headerRight" />
+					</div>
+				</div>
+			</div>
+
+			<slot name="fullSizeImg" />
+
+			<div
+				:id="uniqueId ? `${uniqueId}-content` : undefined"
+				class="amelipro-card__content"
+				:class="computedContentClass"
+			>
+				<slot />
+			</div>
+		</div>
+
+		<div
+			v-if="rightPart"
+			:id="uniqueId ? `${uniqueId}-right-part` : undefined"
+			class="amelipro-card__right-part"
+			:style="rightPartStyle"
+		>
+			<div
+				class="w-100 amelipro-card__right-part-content"
+				:class="rightPartClasses"
+			>
+				<slot name="rightPartContent" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.amelipro-card {
+	display: block;
+	position: relative;
+	max-width: 100%;
+	border-radius: apTokens.$card-radius;
+	text-decoration: none;
+	overflow-wrap: break-word;
+	white-space: normal;
+}
+
+.amelipro-card__header {
+	padding-top: apTokens.$card-padding-desktop;
+	padding-left: apTokens.$card-padding-desktop;
+	padding-right: apTokens.$card-padding-desktop;
+	padding-bottom: 0 !important;
+	word-break: break-all;
+}
+
+.amelipro-card__header-content {
+	padding-bottom: 1rem;
+}
+
+.amelipro-card__content {
+	width: 100%;
+	padding: apTokens.$card-padding-desktop;
+	font-size: apTokens.$font-size-xs;
+	font-weight: apTokens.$ap-font-weight-regular;
+
+	@media #{apTokens.$media-down-md} {
+		padding-left: apTokens.$card-padding-tablet;
+		padding-right: apTokens.$card-padding-tablet;
+		padding-bottom: apTokens.$card-padding-tablet;
+	}
+
+	@media #{apTokens.$media-down-sm} {
+		padding-left: apTokens.$card-padding-mobile;
+		padding-right: apTokens.$card-padding-mobile;
+		padding-bottom: apTokens.$card-padding-tablet;
+	}
+}
+
+.amelipro-card__header--left,
+.amelipro-card__content--left {
+	@media #{apTokens.$media-up-md} {
+		padding-right: 1rem;
+	}
+}
+
+.amelipro-card__header-slot-wrapper--left {
+	display: inline-block;
+}
+
+.amelipro-card__right-part {
+	padding: apTokens.$card-padding-desktop apTokens.$card-padding-desktop apTokens.$card-padding-desktop 0;
+
+	@media #{apTokens.$media-down-md} {
+		padding: 0 apTokens.$card-padding-tablet apTokens.$card-padding-tablet apTokens.$card-padding-tablet;
+	}
+
+	@media #{apTokens.$media-down-sm} {
+		padding: 0 apTokens.$card-padding-mobile apTokens.$card-padding-mobile apTokens.$card-padding-mobile;
+	}
+}
+
+.amelipro-card__right-part-content {
+	@media #{apTokens.$media-up-md} {
+		padding-left: 1rem;
+		min-height: 100%;
+		border-left: 1px solid v-bind(borderColorValue);
+	}
+
+	@media #{apTokens.$media-down-md} {
+		padding-top: apTokens.$card-padding-tablet;
+		border-top: 1px solid v-bind(borderColorValue);
+	}
+
+	@media #{apTokens.$media-down-sm} {
+		padding-top: apTokens.$card-padding-mobile;
+	}
+}
+</style>

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

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproCard from '../AmeliproCard.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproCard', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproCard, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				cardTitle: 'Titre de ma carte',
+				uniqueId: 'my-card-id',
+			},
+			slots: {
+				default: '<p>Contenu de ma carte</p>',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproCard/tests/__snapshots__/AmeliproCard.spec.ts.snap

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproCard > render correctly 1`] = `
+<div
+  class="
+    amelipro-card
+    d-flex
+    flex-column
+    flex-md-row
+    w-100
+  "
+  id="my-card-id-container"
+  style="background-color: #FFFFFF; border: 1px solid #DDDEDE;"
+>
+  <div
+    class="amelipro-card__left-part"
+    id="my-card-id-left-part"
+    style="width: 100%;"
+  >
+    <div
+      class="
+        amelipro-card__header
+        w-100
+      "
+      id="my-card-id-header"
+    >
+      <div
+        class="
+          align-sm-center
+          amelipro-card__header-content
+          d-flex
+          flex-column
+          flex-sm-row
+          w-100
+        "
+        style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DDDEDE;"
+      >
+        <div
+          class="amelipro-card__header-slot-wrapper--left"
+          id="my-card-id-header-left-part"
+          style="width: 100%;"
+        >
+          <p
+            aria-level="2"
+            class="
+              amelipro-card__title
+              mb-0
+              text-h2
+            "
+            id="my-card-id-title"
+            role="heading"
+            style="color: #1A1B1B;"
+          >
+            Titre de ma carte
+          </p>
+        </div>
+        <!-- v-if -->
+      </div>
+    </div>
+    <div
+      class="amelipro-card__content"
+      id="my-card-id-content"
+    >
+      <p>
+        Contenu de ma carte
+      </p>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproCheckbox/AmeliproCheckbox.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproCheckboxStories from './AmeliproCheckbox.stories';
+
+<Meta of={AmeliproCheckboxStories} />
+
+# AmeliproCheckbox
+
+L’élément `AmeliproCheckbox` est utilisé lorsque vous voulez donner la possibilité à l’utilisateur d’avoir une seule case à cocher
+
+<Canvas of={AmeliproCheckboxStories.Default}  />
+
+## API
+
+<Controls of={AmeliproCheckboxStories.Default} />