import { VBtn, VIcon, VRow, VCol, VCard, VCardText, VCardTitle } from 'vuetify/components' import type { StoryObj } from '@storybook/vue3' import { mdiArrowRight, mdiNpm } from '@mdi/js' import { version } from '../../../package.json' export default { title: 'Démarrer/Accueil', } export const Header: StoryObj = { render: () => { return { components: { VBtn, VIcon, VCol, VRow }, setup() { const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam' return { arrowRight: mdiArrowRight, npmIcon: mdiNpm, version, theme, } }, template: `

Design System de la CNAM

Synapse : thème Portail Agent thème Amelipro thème Amelipro 2026 thème CNAM

Veuillez sélectionner dans la barre d’outil en haut de l’écran le thème graphique de votre produit avant de consulter la documentation, elle s’actualisera en conséquence avec les tokens et composants disponibles.
Si vous ne connaissez pas le thème auquel votre produit est soumis veuillez consulter le dossier d’architecture du produit.

Par défaut la documentation est affichée avec le thème CNAM.

Configurer le thème {{arrowRight}} components

{{ npmIcon }} v{{ version }}

`, } }, tags: ['!dev'], } export const Welcome: StoryObj = { render: () => { return { setup() { const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam' return { theme, } }, template: `

Bienvenue dans notre guide d'aide à la conception, pensé par et pour les équipes d'AmeliProde Portail Agentde la CNAM.

Ce guide a été conçu pour accompagner chaque membre de l'équipe dans la création de plateformes web de qualité, alignées avec nos standards et nos valeurs.

Vous y trouverez toutes les ressources essentielles pour vous guider tout au long du processus de conception :

`, } }, tags: ['!dev'], } export const DesignSystem: StoryObj = { render: () => { return { setup() { const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam' return { theme, } }, components: { VRow, VCol, VCard, VCardTitle, VCardText }, template: `

Design System

Design Tokens Les Design Tokens fournissent des recommandations claires et des bonnes pratiques pour assurer l'uniformité et la qualité des interfaces numériques. Components

Composants Les Composants assurent une expérience utilisateur homogène en offrant des éléments réutilisables et standardisés.

Templates Les Templates facilitent la mise en page en proposant des structures prédéfinies garantissant cohérence et efficacité dans la conception des interfaces. Guide du dev

Guides du dev Les Guides du Dev accompagnent les équipes techniques dans l'implémentation du Design System en garantissant une intégration fluide et efficace.

`, } }, tags: ['!dev'], } export const Guidelines: StoryObj = { render: () => { return { setup() { const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam' return { theme, } }, components: { VRow, VCol, VCard, VCardTitle, VCardText }, template: `

Guidelines

Accessibilité L'Accessibilité permet de concevoir des interfaces inclusives respectant les normes d'accessibilité pour une expérience optimale pour tous les utilisateurs. Eco-conception

Éco-conception L'éco-conception vise à réduire l'impact environnemental des interfaces numériques en incluant des pratiques optimales en termes de performance, de consommation énergétique et d'accessibilité.

`, } }, tags: ['!dev'], } export const List: StoryObj = { render: () => { return { components: { VRow, VCol }, setup() { return { npmIcon: mdiNpm, version, } }, template: `

Qui sont nos principaux utilisateurs ?

Respectant les règles graphiques de la charte graphique de la CNAM, ce design system couvre prioritairement les produits à destination des assurés, des entreprises et des agents.

Comment accéder au design system ?

Afin d’améliorer la collaboration, il est disponible pour les développeurs depuis GitHub (accès open source) et pour les designers depuis Figma (accès sur demande).

Est-ce que le design system est complet ?

Face à l’ampleur des composants et des fonctionnalités nécessaires au bon fonctionnement d’un produit, le design system ne suffit pas seul. Vous devez composer avec la librairie vuetify et le framework vue.js.

Quels sont les bénéfices du design system ?

Utiliser un design system permet d’accélérer la fabrication, la collaboration et la prise de décision puisqu’il suffit à l’équipe-produit de piocher directement dans une collection de composants déjà adaptés aux besoins de CNAM.

`, } }, tags: ['!dev'], }