@cnamts/synapse 1.0.1 → 1.0.2

package/src/stories/DesignTokens/StylesTypographiques.stories.new.ts

@@ -0,0 +1,397 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { computed } from 'vue'
+// Import Vue component with proper type declaration from vue-shims.d.ts
+import TypographyDisplay from './TypographyDisplay.vue'
+import { cnamFontsTokens } from '@/designTokens/tokens/cnam/cnamFonts'
+import { paFontsTokens } from '@/designTokens/tokens/pa/paFonts'
+
+const meta: Meta = {
+	title: 'Design Tokens/Styles typographiques',
+	component: TypographyDisplay,
+}
+
+export default meta
+
+export const Introduction: StoryObj = {
+	render: () => {
+		return {
+			setup() {
+				const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+				return {
+					theme,
+					cnamFontFamily: cnamFontsTokens.family.primary,
+					paFontFamily: paFontsTokens.family.primary,
+				}
+			},
+			template: `
+				<p style="font-size: 14px; margin: 16px 0; line-height: 24px; color: rgb(46, 52, 56);">
+					Les styles typographiques sont un élément essentiel de notre système de design. Ils permettent de créer une hiérarchie visuelle claire et cohérente dans nos interfaces.
+				</p>
+				<p style="font-size: 14px; margin: 16px 0; line-height: 24px; color: rgb(46, 52, 56);">
+					Notre système typographique utilise la police {{ theme === 'cnam' ? cnamFontFamily : paFontFamily }} pour tous les éléments textuels, avec différentes tailles et graisses pour créer une hiérarchie visuelle claire.
+				</p>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const HeadingStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					h1: {
+						fontFamily: cnamFontsTokens.heading.h1.fontFamily,
+						fontSize: cnamFontsTokens.heading.h1.fontSize,
+						fontWeight: cnamFontsTokens.heading.h1.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h1.lineHeight}`,
+						sample: 'Titre de niveau 1',
+						description: 'Utilisé pour les titres principaux de page',
+					},
+					h2: {
+						fontFamily: cnamFontsTokens.heading.h2.fontFamily,
+						fontSize: cnamFontsTokens.heading.h2.fontSize,
+						fontWeight: cnamFontsTokens.heading.h2.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h2.lineHeight}`,
+						sample: 'Titre de niveau 2',
+						description: 'Utilisé pour les sections principales',
+					},
+					h3: {
+						fontFamily: cnamFontsTokens.heading.h3.fontFamily,
+						fontSize: cnamFontsTokens.heading.h3.fontSize,
+						fontWeight: cnamFontsTokens.heading.h3.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h3.lineHeight}`,
+						sample: 'Titre de niveau 3',
+						description: 'Utilisé pour les sous-sections',
+					},
+					h4: {
+						fontFamily: cnamFontsTokens.heading.h4.fontFamily,
+						fontSize: cnamFontsTokens.heading.h4.fontSize,
+						fontWeight: cnamFontsTokens.heading.h4.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h4.lineHeight}`,
+						sample: 'Titre de niveau 4',
+						description: 'Utilisé pour les composants importants',
+					},
+					h5: {
+						fontFamily: cnamFontsTokens.heading.h5.fontFamily,
+						fontSize: cnamFontsTokens.heading.h5.fontSize,
+						fontWeight: cnamFontsTokens.heading.h5.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h5.lineHeight}`,
+						sample: 'Titre de niveau 5',
+						description: 'Utilisé pour les éléments secondaires',
+					},
+					h6: {
+						fontFamily: cnamFontsTokens.heading.h6.fontFamily,
+						fontSize: cnamFontsTokens.heading.h6.fontSize,
+						fontWeight: cnamFontsTokens.heading.h6.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h6.lineHeight}`,
+						sample: 'Titre de niveau 6',
+						description: 'Utilisé pour les éléments tertiaires',
+					},
+				}
+				const paTypography = {
+					h1: {
+						fontFamily: paFontsTokens.heading.h1.fontFamily,
+						fontSize: paFontsTokens.heading.h1.fontSize,
+						fontWeight: paFontsTokens.heading.h1.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h1.lineHeight}`,
+						sample: 'Titre de niveau 1',
+						description: 'Utilisé pour les titres principaux de page',
+					},
+					h2: {
+						fontFamily: paFontsTokens.heading.h2.fontFamily,
+						fontSize: paFontsTokens.heading.h2.fontSize,
+						fontWeight: paFontsTokens.heading.h2.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h2.lineHeight}`,
+						sample: 'Titre de niveau 2',
+						description: 'Utilisé pour les sections principales',
+					},
+					h3: {
+						fontFamily: paFontsTokens.heading.h3.fontFamily,
+						fontSize: paFontsTokens.heading.h3.fontSize,
+						fontWeight: paFontsTokens.heading.h3.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h3.lineHeight}`,
+						sample: 'Titre de niveau 3',
+						description: 'Utilisé pour les sous-sections',
+					},
+					h4: {
+						fontFamily: paFontsTokens.heading.h4.fontFamily,
+						fontSize: paFontsTokens.heading.h4.fontSize,
+						fontWeight: paFontsTokens.heading.h4.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h4.lineHeight}`,
+						sample: 'Titre de niveau 4',
+						description: 'Utilisé pour les composants importants',
+					},
+					h5: {
+						fontFamily: paFontsTokens.heading.h5.fontFamily,
+						fontSize: paFontsTokens.heading.h5.fontSize,
+						fontWeight: paFontsTokens.heading.h5.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h5.lineHeight}`,
+						sample: 'Titre de niveau 5',
+						description: 'Utilisé pour les éléments secondaires',
+					},
+					h6: {
+						fontFamily: paFontsTokens.heading.h6.fontFamily,
+						fontSize: paFontsTokens.heading.h6.fontSize,
+						fontWeight: paFontsTokens.heading.h6.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h6.lineHeight}`,
+						sample: 'Titre de niveau 6',
+						description: 'Utilisé pour les éléments tertiaires',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="headings" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const DisplayHeadingStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					'display-1': {
+						fontFamily: cnamFontsTokens.display.display1.fontFamily,
+						fontSize: cnamFontsTokens.display.display1.fontSize,
+						fontWeight: cnamFontsTokens.display.display1.fontWeight,
+						lineHeight: `${cnamFontsTokens.display.display1.lineHeight}`,
+						sample: 'Display 1',
+						description: 'Pour les mises en avant principales',
+					},
+					'display-2': {
+						fontFamily: cnamFontsTokens.display.display2.fontFamily,
+						fontSize: cnamFontsTokens.display.display2.fontSize,
+						fontWeight: cnamFontsTokens.display.display2.fontWeight,
+						lineHeight: `${cnamFontsTokens.display.display2.lineHeight}`,
+						sample: 'Display 2',
+						description: 'Pour les bannières et sections importantes',
+					},
+				}
+				const paTypography = {
+					'display-1': {
+						fontFamily: paFontsTokens.display?.display1?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.display?.display1?.fontSize || '2.5rem',
+						fontWeight: paFontsTokens.display?.display1?.fontWeight || 300,
+						lineHeight: `${paFontsTokens.display?.display1?.lineHeight || 1.2}`,
+						sample: 'Display 1',
+						description: 'Pour les mises en avant principales',
+					},
+					'display-2': {
+						fontFamily: paFontsTokens.display?.display2?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.display?.display2?.fontSize || '1.875rem',
+						fontWeight: paFontsTokens.display?.display2?.fontWeight || 300,
+						lineHeight: `${paFontsTokens.display?.display2?.lineHeight || 1.1}`,
+						sample: 'Display 2',
+						description: 'Pour les bannières et sections importantes',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="display-headings" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const BodyTextStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					'body-lg': {
+						fontFamily: cnamFontsTokens.body.body1.fontFamily,
+						fontSize: cnamFontsTokens.body.body1.fontSize,
+						fontWeight: cnamFontsTokens.body.body1.fontWeight,
+						lineHeight: `${cnamFontsTokens.body.body1.lineHeight}`,
+						sample: 'Texte corps large',
+						description: 'Pour les paragraphes importants et introductions',
+					},
+					'body': {
+						fontFamily: cnamFontsTokens.body.body2.fontFamily,
+						fontSize: cnamFontsTokens.body.body2.fontSize,
+						fontWeight: cnamFontsTokens.body.body2.fontWeight,
+						lineHeight: `${cnamFontsTokens.body.body2.lineHeight}`,
+						sample: 'Texte corps standard',
+						description: 'Pour le contenu principal des pages',
+					},
+					'body-sm': {
+						fontFamily: cnamFontsTokens.caption.fontFamily,
+						fontSize: cnamFontsTokens.caption.fontSize,
+						fontWeight: cnamFontsTokens.caption.fontWeight,
+						lineHeight: `${cnamFontsTokens.caption.lineHeight}`,
+						sample: 'Texte corps petit',
+						description: 'Pour les informations secondaires',
+					},
+					'body-xs': {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.xs,
+						fontWeight: cnamFontsTokens.weight.regular,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Texte corps très petit',
+						description: 'Pour les mentions légales et notes de bas de page',
+					},
+				}
+				const paTypography = {
+					'body-lg': {
+						fontFamily: paFontsTokens.body?.body1?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.body?.body1?.fontSize || '1.125rem',
+						fontWeight: paFontsTokens.body?.body1?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.body?.body1?.lineHeight || 1.5}`,
+						sample: 'Texte corps large',
+						description: 'Pour les paragraphes importants et introductions',
+					},
+					'body': {
+						fontFamily: paFontsTokens.body?.body2?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.body?.body2?.fontSize || '1rem',
+						fontWeight: paFontsTokens.body?.body2?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.body?.body2?.lineHeight || 1.5}`,
+						sample: 'Texte corps standard',
+						description: 'Pour le contenu principal des pages',
+					},
+					'body-sm': {
+						fontFamily: paFontsTokens.caption?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.caption?.fontSize || '0.875rem',
+						fontWeight: paFontsTokens.caption?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.caption?.lineHeight || 1.5}`,
+						sample: 'Texte corps petit',
+						description: 'Pour les informations secondaires',
+					},
+					'body-xs': {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.xs,
+						fontWeight: paFontsTokens.weight.regular,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Texte corps très petit',
+						description: 'Pour les mentions légales et notes de bas de page',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="body-text" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const LinksAndLabels: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					link: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.base,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Lien textuel',
+						description: 'Pour les liens dans le texte',
+					},
+					label: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.sm,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Label',
+						description: 'Pour les étiquettes et badges',
+					},
+					button: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.base,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Bouton',
+						description: 'Pour le texte des boutons',
+					},
+					caption: {
+						fontFamily: cnamFontsTokens.caption.fontFamily,
+						fontSize: cnamFontsTokens.caption.fontSize,
+						fontWeight: cnamFontsTokens.caption.fontWeight,
+						lineHeight: `${cnamFontsTokens.caption.lineHeight}`,
+						sample: 'Légende',
+						description: 'Pour les légendes et notes en petit',
+					},
+				}
+				const paTypography = {
+					link: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.base,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Lien textuel',
+						description: 'Pour les liens dans le texte',
+					},
+					label: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.sm,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Label',
+						description: 'Pour les étiquettes et badges',
+					},
+					button: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.base,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Bouton',
+						description: 'Pour le texte des boutons',
+					},
+					caption: {
+						fontFamily: paFontsTokens.caption?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.caption?.fontSize || '0.75rem',
+						fontWeight: paFontsTokens.caption?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.caption?.lineHeight || 1.5}`,
+						sample: 'Légende',
+						description: 'Pour les légendes et notes en petit',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="links-and-labels" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}