@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/stories/Components/Components.stories.ts

@@ -0,0 +1,398 @@
+import { VCard, VCardText, VCardTitle, VRow, VCol, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+export default {
+	title: 'Composants/Vue d\'ensemble',
+}
+
+export const Header: StoryObj = {
+	render: () => {
+		return {
+			template: `
+        <div class="mb-8">
+          <h1 class="text-h4 font-weight-bold mb-4">Composants</h1>
+          <p class="text-body-1">Découvrez notre collection de composants réutilisables conçus pour créer des interfaces utilisateur cohérentes et accessibles.</p>
+        </div>
+      `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const ComponentsList: StoryObj = {
+	render: () => {
+		return {
+			components: { VCard, VCardText, VCardTitle, VRow, VCol, VIcon },
+			setup() {
+				const components = [
+					{
+						title: 'HeaderBar',
+						description: 'Utilisé pour afficher l’en-tête d’une page ainsi qu’une barre de navigation.',
+						link: '/?path=/docs/composants-structure-headerbar--docs',
+						img: '/components/header-bar.svg',
+						category: 'Structure',
+					},
+					{
+						title: 'HeaderToolbar',
+						description: 'Utilisé pour afficher une barre d\'outils en haut de la page. Il est composé de deux zones customisables.',
+						link: '/?path=/docs/composants-structure-headertoolbar--docs',
+						img: '/components/header-toolbar.svg',
+						category: 'Structure',
+					},
+					{
+						title: 'HeaderLoading',
+						description: 'Utilisé pour afficher un élément de chargement avec des dimensions personnalisées.',
+						link: '/?path=/docs/composants-structure-headerloading--docs',
+						img: '/components/header-loading.svg',
+						category: 'Structure',
+					},
+					{
+						title: 'SubHeader',
+						description: 'Utilisé pour afficher un bloc d’informations sous l’en-tête principale.',
+						link: '/?path=/docs/composants-structure-subheader--docs',
+						img: '/components/sub-header.svg',
+						category: 'Structure',
+					},
+					{
+						title: 'FooterBar',
+						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
+						link: '/?path=/docs/composants-structure-footerbar--docs',
+						img: '/components/footer-bar.svg',
+						category: 'Structure',
+					},
+					{
+						title: 'PageContainer',
+						description: 'Conteneur transparent utilisé pour afficher une page.',
+						link: '/?path=/docs/composants-layout-pagecontainer--docs',
+						img: '/components/page-container.svg',
+						category: 'Layout',
+					},
+					{
+						title: 'ContextualMenu',
+						description: 'Utilisé pour afficher un menu avec une liste d’ancres pour la navigation.',
+						link: '/?path=/docs/composants-navigation-contextualmenu--docs',
+						img: '/components/contextual-menu.svg',
+						category: 'Navigation',
+					},
+					{
+						title: 'ExternalLinks',
+						description: 'Utilisé pour afficher un menu avec une liste vers des liens externes.',
+						link: '/?path=/docs/composants-navigation-externallinks--docs',
+						img: '/components/external-links.svg',
+						category: 'Navigation',
+					},
+					{
+						title: 'SocialMediaLinks',
+						description: 'Utilisé pour afficher des liens de réseaux sociaux dans le composant Footer.',
+						link: '/?path=/docs/composants-navigation-socialmedialinks--docs',
+						img: '/components/social-media-links.svg',
+						category: 'Navigation',
+					},
+					{
+						title: 'SkipLink',
+						description: 'Utilisé pour permettre à l\'utilisateur utilisant la navigation au clavier de passer directement à une section de contenu.',
+						link: '/?path=/docs/composants-navigation-skiplink--docs',
+						img: '/components/skip-link.svg',
+						category: 'Navigation',
+					},
+					{
+						title: 'BackBtn',
+						description: 'Utilisé pour permettre à l’utilisateur de revenir à la page précédente.',
+						link: '/?path=/docs/composants-boutons-backbtn--docs',
+						img: '/components/back-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'BackToTopBtn',
+						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.',
+						link: '/?path=/docs/composants-boutons-backtotopbtn--docs',
+						img: '/components/back-to-top-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'CopyBtn',
+						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de copier du texte.',
+						link: '/?path=/docs/composants-boutons-copybtn--docs',
+						img: '/components/copy-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'LangBtn',
+						description: 'Utilisé pour permettre à l’utilisateur de choisir la langue de l’application.',
+						link: '/?path=/docs/composants-boutons-langbtn--docs',
+						img: '/components/lang-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'DownloadBtn',
+						description: 'Utilisé pour permettre à l’utilisateur de télécharger un document provenant d’une API.',
+						link: '/?path=/docs/composants-boutons-downloadbtn--docs',
+						img: '/components/download-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'FranceConnectBtn',
+						description: 'Utilisé pour afficher un bouton de connexion à FranceConnect.',
+						link: '/?path=/docs/composants-boutons-franceconnectbtn--docs',
+						img: '/components/france-connect-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'UserMenuBtn',
+						description: 'Utilisé pour afficher un bouton de menu utilisateur avec un menu déroulant.',
+						link: '/?path=/docs/composants-boutons-usermenubtn--docs',
+						img: '/components/user-menu-btn.svg',
+						category: 'Boutons',
+					},
+					{
+						title: 'SyTextField',
+						description: 'Utilisé pour proposer une alternative au TextField de Vuetify, conforme au style du Design System et qui respecte les règles d\'accessibilité RGAA.',
+						link: '/?path=/docs/composants-formulaires-sytextfield--docs',
+						img: '/components/sy-text-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'SySelect',
+						description: 'Utilisé pour proposer une alternative au v-select de Vuetify qui ne respecte pas les règles d\'accessibilité RGAA. Il est basé sur un v-textfield.',
+						link: '/?path=/docs/composants-formulaires-syselect--docs',
+						img: '/components/sy-select.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyInputSelect',
+						description: 'Utilisé pour proposer une alternative au v-select de Vuetify qui ne respecte pas les règles RGAA.Il est basé sur un v-input.',
+						link: '/?path=/docs/composants-formulaires-syinputselect--docs',
+						img: '/components/sy-input-select.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyBtnSelect',
+						description: 'Utilisé pour proposer une sélection d\'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d\'accessibilité RGAA. Il est basé sur un v-btn.',
+						link: '/?path=/docs/composants-formulaires-sybtnselect--docs',
+						img: '/components/sy-btn-select.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'DatePicker',
+						description: ' Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
+						link: '/?path=/docs/composants-formulaires-datepicker--docs',
+						img: '/components/date-picker.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'FileUpload',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de glisser-déposer des fichiers.',
+						link: '/?path=/docs/composants-formulaires-fileupload--docs',
+						img: '/components/file-upload.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'NirField',
+						description: 'Utilisé pour permettre à l’utilisateur de saisir un numéro de Sécurité sociale (NIR).',
+						link: '/?path=/docs/composants-formulaires-nirfield--docs',
+						img: '/components/nir-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'PasswordField',
+						description: 'Utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.',
+						link: '/?path=/docs/composants-formulaires-passwordfield--docs',
+						img: '/components/password-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'PeriodField',
+						description: 'Utilisé pour permettre à l’utilisateur de saisir une période.',
+						link: '/?path=/docs/composants-formulaires-periodfield--docs',
+						img: '/components/period-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'PhoneField',
+						description: 'Utilisé pour saisir des numéros de téléphone avec différentes options de formatage.',
+						link: '/?path=/docs/composants-formulaires-phonefield--docs',
+						img: '/components/phone-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'RangeField',
+						description: 'Utilisé pour permettre à l\'utilisateur de sélectionner un interval.',
+						link: '/?path=/docs/composants-formulaires-rangefield--docs',
+						img: '/components/range-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'SearchListField',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.',
+						link: '/?path=/docs/composants-formulaires-searchlistfield--docs',
+						img: '/components/search-list-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'SelectBtnField',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner une valeur dans une liste.',
+						link: '/?path=/docs/composants-formulaires-selectbtnfield--docs',
+						img: '/components/select-btn-field.svg',
+						category: 'Formulaires',
+					},
+					{
+						title: 'PaginatedTable',
+						description: 'Utilisé pour afficher une VDataTable de Vuetify avec une pagination persistante.',
+						link: '/?path=/docs/composants-tableaux-paginatedtable--docs',
+						img: '/components/paginated-table.svg',
+						category: 'Tableaux',
+					},
+					{
+						title: 'TableToolbar',
+						description: 'Utilisé pour afficher une barre d\'outils pour les tableaux.',
+						link: '/?path=/docs/composants-tableaux-tabletoolbar--docs',
+						img: '/components/table-toolbar.svg',
+						category: 'Tableaux',
+					},
+					{
+						title: 'Logo',
+						description: 'Utilisé pour afficher le logo de l\'application avec différentes options de personnalisation.',
+						link: '/?path=/docs/composants-donn%C3%A9es-logo--docs',
+						img: '/components/logo.svg',
+						category: 'Données',
+					},
+					{
+						title: 'LogoBrandSection',
+						description: 'Permet d\'afficher le logo de l\'Assurance Maladie avec des logos ou un titre secondaire.',
+						link: '/?path=/docs/composants-donn%C3%A9es-logobrandsection--docs',
+						img: '/components/logo-brand-section.svg',
+						category: 'Données',
+					},
+					{
+						title: 'CollapsibleList',
+						description: 'Utilisé pour afficher des listes de liens. Les éléments peuvent être dépliés ou repliés.',
+						link: '/?path=/docs/composants-donn%C3%A9es-collapsiblelist--docs',
+						img: '/components/collapsible-list.svg',
+						category: 'Données',
+					},
+					{
+						title: 'ChipList',
+						description: 'Utilisé pour afficher une liste de puces.',
+						link: '/?path=/docs/composants-donn%C3%A9es-chiplist--docs',
+						img: '/components/chip-list.svg',
+						category: 'Données',
+					},
+					{
+						title: 'DataList',
+						description: 'Utilisé pour afficher une liste d’informations.',
+						link: '/?path=/docs/composants-donn%C3%A9es-datalist--docs',
+						img: '/components/data-list.svg',
+						category: 'Données',
+					},
+					{
+						title: 'DataListGroup',
+						description: 'Utilisé pour afficher une liste de DataList.',
+						link: '/?path=/docs/composants-donn%C3%A9es-datalistgroup--docs',
+						img: '/components/data-list-group.svg',
+						category: 'Données',
+					},
+					{
+						title: 'FilePreview',
+						description: 'Utilisé pour afficher l\'aperçu d\'un fichier.',
+						link: '/?path=/docs/composants-donn%C3%A9es-filepreview--docs',
+						img: '/components/file-preview.svg',
+						category: 'Données',
+					},
+					{
+						title: 'FileList',
+						description: 'Utilisé pour afficher une liste de document à téléverser.',
+						link: '/?path=/docs/composants-donn%C3%A9es-filelist--docs',
+						img: '/components/file-list.svg',
+						category: 'Données',
+					},
+					{
+						title: 'SyAlert',
+						description: 'Utilisé pour afficher une alerte à l’utilisateur.',
+						link: '/?path=/docs/composants-feedback-syalert--docs',
+						img: '/components/sy-alert.svg',
+						category: 'Feedback',
+					},
+					{
+						title: 'DialogBox',
+						description: 'Utilisé pour afficher une boîte de dialogue avec des boutons d\'action.',
+						link: '/?path=/docs/composants-feedback-dialogbox--docs',
+						img: '/components/dialog-box.svg',
+						category: 'Feedback',
+					},
+					{
+						title: 'NotificationBar',
+						description: 'Utilisé pour afficher des notifications à l’utilisateur.',
+						link: '/?path=/docs/composants-feedback-notificationbar--docs',
+						img: '/components/notification-bar.svg',
+						category: 'Feedback',
+					},
+					{
+						title: 'CookieBanner',
+						description: 'Utilisé pour afficher une bannière de consentement pour les cookies.',
+						link: '/?path=/docs/composants-feedback-cookiebanner--docs',
+						img: '/components/cookie-banner.svg',
+						category: 'Feedback',
+					},
+					{
+						title: 'RatingPicker',
+						description: 'Permet de recueillir l’avis d’un utilisateur.',
+						link: '/?path=/docs/composants-feedback-ratingpicker--docs',
+						img: '/components/rating-picker.svg',
+						category: 'Feedback',
+					},
+				]
+
+				const categoryOrder = [
+					'Structure',
+					'Layout',
+					'Navigation',
+					'Boutons',
+					'Formulaires',
+					'Tableaux',
+					'Données',
+					'Feedback',
+				]
+
+				const groupedComponents = categoryOrder.map(category => ({
+					category,
+					components: components.filter(component => component.category === category),
+				}))
+
+				return {
+					groupedComponents,
+				}
+			},
+			template: `
+				<div>
+					<div v-for="group in groupedComponents" :key="group.category">
+						<h2 class="mt-6 mb-4">{{ group.category }}</h2>
+						<VRow>
+							<VCol v-for="component in group.components" :key="component.title" cols="12" sm="6" md="4" lg="3">
+								<VCard
+									:href="component.link"
+									color="primary"
+									class="h-100 card-hover"
+									variant="outlined"
+									:ripple="true"
+								>
+									<img
+										:src="component.img"
+										:alt="component.title"
+										class="w-100"
+									/>
+									<VCardTitle class="d-flex align-center text-h6 font-weight-bold">
+										{{ component.title }}
+									</VCardTitle>
+									<VCardText class="text-black">
+										{{ component.description }}
+									</VCardText>
+								</VCard>
+							</VCol>
+						</VRow>
+					</div>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Demarrer/Accueil.mdx

@@ -1,10 +1,15 @@
 import {Story, Meta} from '@storybook/blocks';
 import * as AccueilStories from './Accueil.stories';
+import { css } from '@emotion/css';
 
 <Meta of={AccueilStories} />
 
-<Story of={AccueilStories.Header}  />
+<div class={css`position: relative; padding: 4rem; margin: -4rem -4rem 1rem !important;`}>
+    <Story of={AccueilStories.Header} />
+</div>
 
-<p>Au service des équipes-produits de la Caisse Nationale de l’Assurance Maladie, cette boîte à outil met à disposition un ensemble de principes et de composants d’interfaces pour harmoniser et accélérer la fabrication des produits.</p>
+<Story of={AccueilStories.Welcome} />
 
-<Story of={AccueilStories.List}  />
+<Story of={AccueilStories.DesignSystem} />
+
+<Story of={AccueilStories.Guidelines} />

package/src/stories/Demarrer/Accueil.stories.ts

@@ -1,7 +1,7 @@
-import { VBtn, VIcon, VRow, VCol } from 'vuetify/components'
+import { VBtn, VIcon, VRow, VCol, VCard, VCardText, VCardTitle } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 
-import { mdiGithub } from '@mdi/js'
+import { mdiGithub, mdiArrowRight } from '@mdi/js'
 
 import { version } from '../../../package.json'
 
@@ -12,34 +12,144 @@ export default {
 export const Header: StoryObj = {
 	render: () => {
 		return {
-			components: { VBtn, VIcon },
+			components: { VBtn, VIcon, VCol, VRow },
 			setup() {
 				return {
+					arrowRight: mdiArrowRight,
 					githubIcon: mdiGithub,
 					version,
 				}
 			},
 			template: `
-              <div class="d-flex justify-space-between align-center">
-                  <h1 class="title font-weight-medium">Un Design System<br/>pour l’Assurance Maladie</h1>
-                  <VBtn
-                      :icon="githubIcon"
-                      aria-label="GitHub"
-                      href="https://github.com/assurance-maladie-digital/design-system-v3"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="d-xs-none d-sm-flex"
-                  />
+              <div>
+				  <span style="position: absolute; top:0; left:-1000px; background-color: rgba(12, 65, 154, 0.2); width: 1000%; height: 100%; z-index: 0" />
+				  <VRow cols="12" style="z-index: 1; position: relative">
+					  <VCol md="6" sm="12">
+						  <h1 class="font-weight-bold text-h4 mb-2">Synapse</h1>
+						  <img alt="line" src="/home-line.svg" width="120" height="5" class="mb-5" />
+						  <h2 class="text-h4 mb-5">Documentation d'aide<br/> à la fabrication des IHM<br/>de la CNAM</h2>
+						  <VBtn color="primary" href="/?path=/docs/d%C3%A9marrer-introduction--docs">
+							  Démarrer
+							  <VIcon size="small" class="ml-2" right>{{arrowRight}}</VIcon>
+						  </VBtn>
+					  </VCol>
+					  <VCol md="6" sm="12" class="d-flex justify-center">
+						  <img alt="line" src="/home-illustration.svg" width="auto" height="300" class="img-animate" />
+					  </VCol>
+				  </VRow>
+				  <div class="position-absolute" style="right: 60px; bottom: -10px">
+					  <VBtn
+						  aria-label="GitHub"
+						  href="https://github.com/assurance-maladie-digital/design-system-v3"
+						  target="_blank"
+						  rel="noopener noreferrer"
+						  class="d-flex align-center justify-center text-lowercase"
+					  >
+						  <b>v{{ version }}</b>
+						  <VIcon size="large" class="ml-2">{{ githubIcon }}</VIcon>
+					  </VBtn>
+				  </div>
               </div>
-              <p class="mt-4 mb-8">
-                <b>v{{ version }}</b>
-              </p>
             `,
 		}
 	},
 	tags: ['!dev'],
 }
 
+export const Welcome: StoryObj = {
+	render: () => {
+		return {
+			template: `
+              <div class="mt-12 mb-12">
+                  <p>Bienvenue dans notre guide d'aide à la conception, pensé par et pour les équipes de la CNAM.</p>
+                  <p class="mt-4">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.</p>
+                  <p class="mt-4">Vous y trouverez toutes les ressources essentielles pour vous guider tout au long du processus de conception :</p>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const DesignSystem: StoryObj = {
+	render: () => {
+		return {
+			components: { VRow, VCol, VCard, VCardTitle, VCardText },
+			template: `
+              <div class="mb-12">
+                  <h3 class="text-h5 font-weight-bold mb-6 text-primary">Design System</h3>
+                  <VRow>
+                      <VCol cols="12" md="4">
+                          <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/design-tokens-introduction--docs">
+							  <img src="/home-card-tokens.svg" alt="Design Tokens" class="w-100" />
+							  <VCardTitle><b>Design Tokens</b></VCardTitle>
+                              <VCardText>Les Design Tokens fournissent des recommandations claires et des bonnes pratiques pour assurer l'uniformité et la qualité des interfaces numériques.</VCardText>
+                          </VCard>
+                      </VCol>
+                      <VCol cols="12" md="4">
+						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/composants-vue-d-ensemble--docs">
+							  <img src="/home-card-components.svg" alt="Components" class="w-100" />
+                              <VCardTitle><b>Composants</b></VCardTitle>
+                              <VCardText>Les Composants assurent une expérience utilisateur homogène en offrant des éléments réutilisables et standardisés.</VCardText>
+                          </VCard>
+                      </VCol>
+                      <VCol cols="12" md="4">
+						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/templates-vue-d-ensemble--docs">
+							  <img src="/home-card-templates.svg" alt="Templates" class="w-100" />
+                              <VCardTitle><b>Templates</b></VCardTitle>
+                              <VCardText>Les Templates facilitent la mise en page en proposant des structures prédéfinies garantissant cohérence et efficacité dans la conception des interfaces.</VCardText>
+                          </VCard>
+                      </VCol>
+                      <VCol cols="12" md="4">
+						  <VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/guide-du-dev-migration-depuis-bridge--docs">
+							  <img src="/home-card-dev.svg" alt="Guide du dev" class="w-100" />
+                              <VCardTitle><b>Guides du dev</b></VCardTitle>
+                              <VCardText>Les Guides du Dev accompagnent les équipes techniques dans l'implémentation du Design System en garantissant une intégration fluide et efficace.</VCardText>
+                          </VCard>
+                      </VCol>
+                  </VRow>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Guidelines: StoryObj = {
+	render: () => {
+		return {
+			components: { VRow, VCol, VCard, VCardTitle, VCardText },
+			template: `
+				<div>
+					<h3 class="text-h5 font-weight-bold mb-6 text-primary">Guidelines</h3>
+					<VRow>
+						<VCol cols="12" md="4">
+							<VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/accessibilit%C3%A9-introduction--docs">
+								<img src="/home-card-access.svg" alt="Accessibilité" class="w-100"/>
+								<VCardTitle><b>Accessibilité</b></VCardTitle>
+								<VCardText>L'Accessibilité permet de concevoir des interfaces inclusives respectant les
+									normes d'accessibilité pour une expérience optimale pour tous les utilisateurs.
+								</VCardText>
+							</VCard>
+						</VCol>
+						<VCol cols="12" md="4">
+							<VCard class="pa-0 h-100 card-hover" elevation="0" href="/?path=/docs/%C3%A9co-conception-introduction--introduction">
+								<img src="/home-card-eco.svg" alt="Eco-conception" class="w-100"/>
+								<VCardTitle><b>Éco-conception</b></VCardTitle>
+								<VCardText>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é.
+								</VCardText>
+							</VCard>
+						</VCol>
+					</VRow>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
 export const List: StoryObj = {
 	render: () => {
 		return {

package/src/stories/Demarrer/Introduction.mdx

@@ -0,0 +1,12 @@
+import {Story, Meta} from '@storybook/blocks';
+import * as IntroductionStories from './Introduction.stories';
+
+<Meta of={IntroductionStories} />
+
+<Story of={IntroductionStories.Header}  />
+
+<Story of={IntroductionStories.Intro}  />
+
+<br/>
+
+<Story of={IntroductionStories.Panels}  />