@cnamts/synapse 0.0.0-alpha.0

package/src/components/SkipLink/SkipLink.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SkipLink from './SkipLink.vue'
+
+const meta = {
+	title: 'Components/SkipLink',
+	component: SkipLink,
+	argTypes: {
+		default: {
+			control: { type: 'text' },
+			default: 'Skip to content',
+		},
+	},
+	parameters: {
+		layout: 'fullscreen',
+	},
+} as Meta<typeof SkipLink>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		target: 'https://cnam-design-system.netlify.app/?path=/docs/components-skiplink--docs#main',
+	},
+	render: (args) => {
+		return {
+			components: { SkipLink },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-8">
+					<p>Pour afficher le composant, cliquez ici et appuyer sur <kbd>Tab</kbd>.</p>
+					<SkipLink 
+						:target="args.target"
+						:label="args.label"
+					>
+						<template #default v-if="args.default"><span v-html="args.default"/></template>
+					</SkipLink>
+				</div>
+			`,
+		}
+	},
+}
+
+export const WithSlot: Story = {
+	args: {
+		target: 'https://cnam-design-system.netlify.app/?path=/docs/components-skiplink--docs#main',
+		default: '<b>lorem ipsum</b>',
+	},
+	render: (args) => {
+		return {
+			components: { SkipLink },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-8">
+					<p>Pour afficher le composant, cliquez ici et appuyer sur <kbd>Tab</kbd>.</p>
+					<SkipLink 
+						v-bind="args"
+					>
+						<template #default v-if="args.default"><span v-html="args.default"/></template>
+					</SkipLink>
+				</div>
+			`,
+		}
+	},
+}

package/src/components/SkipLink/SkipLink.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+	import { locales } from './locales'
+	import { nextTick, ref, onMounted } from 'vue'
+	import { getCurrentInstance } from 'vue'
+	import type { Router } from 'vue-router'
+
+	withDefaults(
+		defineProps<{
+			label?: string
+			target?: string
+		}>(),
+		{
+			label: locales.label,
+			target: '#main',
+		},
+	)
+
+	const skipLinkSpan = ref<HTMLLinkElement | null>(null)
+
+	onMounted(() => {
+		const instance = getCurrentInstance()
+		if (!instance) return
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we test the existence of Nuxt
+		const nuxtApp = (instance?.appContext.app as any)?.$nuxt
+		let router: undefined | Router
+		if (nuxtApp && nuxtApp.$router) {
+			router = nuxtApp.$router as Router
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we test the existence of vue-router
+		const vueRouter = (instance.appContext.app.config.globalProperties as any)?.$router
+		if (vueRouter) {
+			router = vueRouter as Router
+		}
+
+		if (router && router.afterEach) {
+			router.afterEach((to, from, fail) => {
+				if (fail) return
+				if (to.path === from.path) return
+				nextTick(() => {
+					skipLinkSpan.value?.focus()
+				})
+			})
+		}
+	})
+</script>
+
+<template>
+	<div class="vd-skip-link-container">
+		<span
+			ref="skipLinkSpan"
+			tabindex="-1"
+		/>
+
+		<a
+			:href="target"
+			class="vd-skip-link text-primary d-block d-sr-only-focusable px-2"
+		>
+			<slot>{{ label }}</slot>
+		</a>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '/src/assets/tokens.scss';
+
+.vd-skip-link {
+  z-index: 150;
+  position: fixed;
+  top: 0;
+  right: 0;
+  transition: none;
+  width: 100%;
+  background: #fff;
+  outline: none; // Disable outline to use border
+  border: 2px solid tokens.$blue-darken-60;
+}
+</style>

package/src/components/SkipLink/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	label: 'Aller au contenu principal',
+}

package/src/components/SkipLink/tests/__snapshots__/skipLink.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SkipLink > renders correctly 1`] = `"<div data-v-bf1925a1="" class="vd-skip-link-container"><span data-v-bf1925a1="" tabindex="-1"></span><a data-v-bf1925a1="" href="#main" class="vd-skip-link text-primary d-block d-sr-only-focusable px-2">Aller au contenu principal</a></div>"`;

package/src/components/SkipLink/tests/skipLink.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import SkipLink from '../SkipLink.vue'
+
+// Create a mock router
+const router = createRouter({
+	history: createWebHistory(),
+	routes: [
+		{ path: '/', component: { template: '<div>Home</div>' } },
+		{ path: '/about', component: { template: '<div>About</div>' } },
+	],
+})
+
+describe('SkipLink', () => {
+	beforeEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('renders correctly', async () => {
+		const wrapper = mount(SkipLink, {
+			global: {
+				plugins: [router],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('focuses the skip link on route change', async () => {
+		const wrapper = mount(SkipLink, {
+			global: {
+				plugins: [router],
+			},
+		})
+
+		// Create a mock for the focus method
+		const spy = vi.spyOn(wrapper.vm.$refs.skipLinkSpan as HTMLLinkElement, 'focus')
+
+		// Trigger the route change
+		await router.push('/about')
+		await router.isReady() // Ensure the router is ready
+
+		expect(spy).toHaveBeenCalled()
+	})
+})

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as Alert } from './Alert/Alert.vue'
+export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
+export { default as SkipLink } from './SkipLink/SkipLink.vue'
+export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
+export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
+export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
+export { default as LangBtn } from './LangBtn/LangBtn.vue'

package/src/composables/useCustomizableOptions.ts

@@ -0,0 +1,23 @@
+import { computed, toRaw, type ComputedRef } from 'vue'
+import deepmerge from 'deepmerge'
+
+type PropsList = Record<string, unknown>
+type ComponentsProps = Record<string, PropsList>
+export interface CustomizableOptions {
+	vuetifyOptions?: ComponentsProps
+}
+
+export default function useCustomizableOptions<T1 extends ComponentsProps, T2 extends ComponentsProps>(
+	defaultOptions: T1,
+	props: { vuetifyOptions?: T2 },
+): ComputedRef<T1 & T2>
+export default function useCustomizableOptions<T extends ComponentsProps>(
+	defaultOptions: Partial<T>,
+	props: { vuetifyOptions?: Partial<T> },
+): ComputedRef<T>
+export default function useCustomizableOptions(
+	defaultOptions: ComponentsProps,
+	props: CustomizableOptions,
+) {
+	return computed(() => deepmerge(defaultOptions, toRaw(props.vuetifyOptions) ?? {}))
+}

package/src/designTokens/bootstrapColors.md

@@ -0,0 +1,66 @@
+# Color Bootstrap Cnam Light
+
+## Primary
+
+<span style="background-color:#084298"></span>
+
+## Secondary
+
+<span style="background-color:#801F4F"></span>
+
+## Accent
+
+<span style="background-color:#0dcaf0"></span>
+
+## Error
+
+<span style="background-color:#B02A37"></span>
+
+## Info
+
+<span style="background-color:#052C64"></span>
+
+## Success
+
+<span style="background-color:#479F76"></span>
+
+## Warning
+
+<span style="background-color:#FFF2CD"></span>
+
+## Risque Pro
+
+<span style="background-color:#dc3545"></span>
+
+## Light
+
+<span style="background-color:#DEE2E6"></span>
+
+## Dark
+
+<span style="background-color:#212529"></span>
+
+## Brand
+
+<span style="background-color:#4a3f59"></span>
+
+## BrandSecondary
+
+<span style="background-color:#ac1c81"></span>
+
+## BrandMuted
+
+<span style="background-color:#b7cbd6"></span>
+
+## BrandMutedLite
+
+<span style="background-color:#E7F3F9"></span>
+
+
+## HilitePrimary
+
+<span style="background-color:#0062ac"></span>
+
+## HiliteSecondary
+
+<span style="background-color:#e6bebf"></span>

package/src/designTokens/cnamColors.md

@@ -0,0 +1,193 @@
+# Color Palette Cnam Light
+
+## Primary
+
+<span style="background-color:#0000ff"></span>
+
+## Secondary
+
+<span style="background-color:#00bcd4"></span>
+
+## Accent
+
+<span style="background-color:#00bcd4"></span>
+
+## Error
+
+<span style="background-color:#ff9800"></span>
+
+## Info
+
+<span style="background-color:#0000ff"></span>
+
+## Success
+
+<span style="background-color:#4caf50"></span>
+
+## Warning
+
+<span style="background-color:#ffeb3b"></span>
+
+## Risk Pro
+
+<span style="background-color:#b22222"></span>
+
+## On Background
+
+<span style="background-color:#ffffff"></span>
+
+## On Surface Alt
+
+<span style="background-color:#e7ecf5"></span>
+
+## On Surface
+
+<span style="background-color:#ffffff"></span>
+
+## On Warning
+
+<span style="background-color:#fcf0d3">On Warning</span>
+
+## Overlay Fullpage
+
+<span style="background-color:#989b9b">Overlay Fullpage</span>
+
+## Overlay On Dark
+
+<span style="background-color:#ffffff">Overlay On Dark</span>
+
+## Overlay On Light
+
+<span style="background-color:#0c419a">Overlay On Light</span>
+
+## Interactive Default
+
+<span style="background-color:rgba(255, 255, 255, 0.0000)">Interactive Default</span>
+
+## Interactive Hover
+
+<span style="background-color:#e7ecf5">Interactive Hover</span>
+
+## Interactive Pressed
+
+<span style="background-color:#ced9eb">Interactive Pressed</span>
+
+## Interactive Focus
+
+<span style="background-color:#e7ecf5">Interactive Focus</span>
+
+## Interactive Disabled
+
+<span style="background-color:rgba(255, 255, 255, 0.0000)">Interactive Disabled</span>
+
+## Interactive Hover On Selected
+
+<span style="background-color:#ced9eb">Interactive Hover On Selected</span>
+
+## Background Main
+
+<span style="background-color:#e7ecf5">Background Main</span>
+
+## Background Surface
+
+<span style="background-color:#ffffff">Background Surface</span>
+
+## Background Surface Alt
+
+<span style="background-color:#e7ecf5">Background Surface Alt</span>
+
+## Background Main Alt
+
+<span style="background-color:#ffffff">Background Main Alt</span>
+
+## Background Raised
+
+<span style="background-color:#f8f9fc">Background Raised</span>
+
+## Background Accent
+
+<span style="background-color:#0c419a">Background Accent</span>
+
+## Background Accent Contrasted
+
+<span style="background-color:#07275c">Background Accent Contrasted</span>
+
+## Background Accent Alt
+
+<span style="background-color:#111212">Background Accent Alt</span>
+
+## Background Info
+
+<span style="background-color:#ced9eb">Background Info</span>
+
+## Background Info Subdued
+
+<span style="background-color:#e7ecf5">Background Info Subdued</span>
+
+## Background Info Contrasted
+
+<span style="background-color:#0c419a">Background Info Contrasted</span>
+
+## Background Success
+
+<span style="background-color:#cceee8">Background Success</span>
+
+## Background Success Subdued
+
+<span style="background-color:#e5f7f4">Background Success Subdued</span>
+
+## Background Success Contrasted
+
+<span style="background-color:#56c271">Background Success Contrasted</span>
+
+## Background Warning
+
+<span style="background-color:#fcf0d3">Background Warning</span>
+
+## Background Warning Subdued
+
+<span style="background-color:#fdf7e9">Background Warning Subdued</span>
+
+## Background Warning Contrasted
+
+<span style="background-color:#f0b323">Background Warning Contrasted</span>
+
+## Background Error
+
+<span style="background-color:#f9dcd7">Background Error</span>
+
+## Background Error Subdued
+
+<span style="background-color:#fcedeb">Background Error Subdued</span>
+
+## Background Error Contrasted
+
+<span style="background-color:#b33f2e">Background Error Contrasted</span>
+
+## Background Disabled
+
+<span style="background-color:#dddede">Background Disabled</span>
+
+## Background Disabled On Dark
+
+<span style="background-color:rgba(255, 255, 255, 0.0800)">Background Disabled On Dark</span>
+
+## Background Assure
+
+<span style="background-color:#ed76b3">Background Assure</span>
+
+## Background Professionnel
+
+<span style="background-color:#66c9ec">Background Professionnel</span>
+
+## Background Entreprise
+
+<span style="background-color:#f0b323">Background Entreprise</span>
+
+## transparentBlue18
+
+<span style="background-color:#a6d4eb">transparentBlue18</span>
+
+## transparentBlue8
+
+<span style="background-color:#ebf0f7">transparentBlue8</span>

package/src/designTokens/index.ts

@@ -0,0 +1,15 @@
+import { cnamSemanticTokens } from './tokens/cnam/cnamSemantic'
+import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
+import { cnamColorsTokens } from './tokens/cnam/cnamColors'
+import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
+import { bootstrapColorsTokens } from './tokens/bootstrap/bootstrapColors'
+import { bootstrapLightTheme } from './tokens/bootstrap/bootstrapLightTheme'
+
+export {
+	cnamColorsTokens,
+	cnamSemanticTokens,
+	cnamContextualTokens,
+	cnamLightTheme,
+	bootstrapColorsTokens,
+	bootstrapLightTheme,
+}

package/src/designTokens/tokens/bootstrap/bootstrapColors.ts

@@ -0,0 +1,158 @@
+export const bootstrapColorsTokens = {
+	amBlue: {
+		darken80: '#020d1f',
+		darken60: '#052C64',
+		darken40: '#084298',
+		darken20: '#0B58CA',
+		base: '#0d6efd',
+		lighten20: '#0C6DFD',
+		lighten40: '#3D8BFD',
+		lighten60: '#6EA7FD',
+		lighten80: '#9EC5FE',
+		lighten90: '#CFE1FE',
+		lighten97: '#f8f9fc',
+	},
+	cyan: {
+		darken80: '#032830',
+		darken60: '#055160',
+		darken40: '#06798F',
+		darken20: '#07A2C0',
+		base: '#0dcaf0',
+		lighten20: '#10CAF0',
+		lighten40: '#37BFDB',
+		lighten60: '#6DDEF6',
+		lighten80: '#9EEAF9',
+		lighten90: '#CEF4FC',
+		lighten97: '#f7fcfe',
+	},
+	frostedBlue: {
+		darken80: '#142327',
+		darken60: '#28464d',
+		darken40: '#3d6874',
+		darken20: '#518b9a',
+		base: '#65aec1',
+		lighten20: '#84becd',
+		lighten40: '#a3ceda',
+		lighten60: '#c1dfe6',
+		lighten80: '#e0eff3',
+		lighten90: '#f0f7f9',
+		lighten97: '#fafdfd',
+	},
+	parme: {
+		darken80: '#150330',
+		darken60: '#290661',
+		darken40: '#3D0A91',
+		darken20: '#520DC1',
+		base: '#6610f2',
+		lighten20: '#661de3',
+		lighten40: '#8540F5',
+		lighten60: '#A270F7',
+		lighten80: '#C19EFA',
+		lighten90: '#E0CFFC',
+		lighten97: '#fbfcfd',
+	},
+	mauve: {
+		darken80: '#170D26',
+		darken60: '#2B1A4D',
+		darken40: '#3D0A91',
+		darken20: '#59359A',
+		base: '#6f42c1',
+		lighten20: '#6F42C1',
+		lighten40: '#8B67CD',
+		lighten60: '#A98EDA',
+		lighten80: '#C5B3E5',
+		lighten90: '#E1D9F3',
+		lighten97: '#fcfafd',
+	},
+	pink: {
+		darken80: '#2B0A1B',
+		darken60: '#561435',
+		darken40: '#801F4F',
+		darken20: '#AA2869',
+		base: '#d63384',
+		lighten20: '#D63384',
+		lighten40: '#DD5C9D',
+		lighten60: '#E685B5',
+		lighten80: '#EFADCD',
+		lighten90: '#F7D6E6',
+		lighten97: '#fef8fb',
+	},
+	brick: {
+		darken80: '#2C0B0F',
+		darken60: '#58151C',
+		darken40: '#831F29',
+		darken20: '#B02A37',
+		base: '#dc3545',
+		lighten20: '#dc3d4d',
+		lighten40: '#E35C6A',
+		lighten60: '#E9868F',
+		lighten80: '#F1AEB5',
+		lighten90: '#F8D7D9',
+		lighten97: '#fdfafa',
+	},
+	orange: {
+		darken80: '#321904',
+		darken60: '#643208',
+		darken40: '#984C0B',
+		darken20: '#CA6410',
+		base: '#fd7e14',
+		lighten20: '#fb8325',
+		lighten40: '#FD9843',
+		lighten60: '#FEB272',
+		lighten80: '#FECBA1',
+		lighten90: '#FFE5D0',
+		lighten97: '#fefaf9',
+	},
+	yellow: {
+		darken80: '#332602',
+		darken60: '#664D04',
+		darken40: '#997305',
+		darken20: '#CB9A07',
+		base: '#ffc107',
+		lighten20: '#fdc312',
+		lighten40: '#FFCD38',
+		lighten60: '#FFD969',
+		lighten80: '#FFE69C',
+		lighten90: '#FFF2CD',
+		lighten97: '#fffdf8',
+	},
+	green: {
+		darken80: '#051C12',
+		darken60: '#0B3622',
+		darken40: '#0F5132',
+		darken20: '#136B42',
+		base: '#198754',
+		lighten20: '#1e8a57',
+		lighten40: '#479F76',
+		lighten60: '#75B798',
+		lighten80: '#A3CFBB',
+		lighten90: '#D1E6DD',
+		lighten97: '#fafdfb',
+	},
+	turquoise: {
+		darken80: '#051C12',
+		darken60: '#0B3622',
+		darken40: '#0F5132',
+		darken20: '#1AA179',
+		base: '#20c997',
+		lighten20: '#28cf9e',
+		lighten40: '#4DD4AC',
+		lighten60: '#78DFC0',
+		lighten80: '#A5E9D5',
+		lighten90: '#D2F4E9',
+		lighten97: '#f7fcfc',
+	},
+	grey: {
+		darken80: '#212529',
+		darken60: '#343A3F',
+		darken40: '#485056',
+		darken20: '#6C757D',
+		base: '#adb5bd',
+		lighten20: '#b5bcc3',
+		lighten40: '#CED4D9',
+		lighten60: '#DEE2E6',
+		lighten80: '#E9ECEF',
+		lighten90: '#F8F9FA',
+		lighten97: '#fafafa',
+	},
+}

package/src/designTokens/tokens/bootstrap/bootstrapLightTheme.ts

@@ -0,0 +1,22 @@
+import { bootstrapColorsTokens } from './bootstrapColors'
+import { cnamColorsTokens } from '../cnam/cnamColors'
+
+// Pour l'utiilser cf : dev/main.ts -> a ajouter a la place des cnamColorsTokens
+export const bootstrapLightTheme = {
+	primary: bootstrapColorsTokens.amBlue.darken40,
+	secondary: bootstrapColorsTokens.pink.darken40,
+	accent: bootstrapColorsTokens.cyan.base,
+	error: bootstrapColorsTokens.brick.darken20,
+	info: bootstrapColorsTokens.amBlue.darken60,
+	success: bootstrapColorsTokens.green.lighten40,
+	warning: bootstrapColorsTokens.yellow.lighten90,
+	risquePro: cnamColorsTokens.brick.base,
+	light: cnamColorsTokens.grey.lighten60,
+	dark: cnamColorsTokens.grey.darken80,
+	brand: '#4a3f59',
+	brandSecondary: '#ac1c81',
+	brandMuted: '#b7cbd6',
+	brandMutedLite: '#E7F3F9',
+	hilitePrimary: '#0062ac',
+	hiliteSecondary: '#e6bebf',
+}