Skip to content

Commit 0475354

Browse files
snekosneko
committed
Merge branch 'dev'
2 parents d3b2267 + e4d1cd8 commit 0475354

3 files changed

Lines changed: 11 additions & 5 deletions

File tree

‎apps/docs/stories/usage/storybook-v7.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ export default <StorybookConfig>{
3939

4040
### Utiliser le dark mode
4141

42-
Il n'y a pas de gestion native pour gérer 2 thèmes (bien que la UI Storybook de base sache le faire, ce n'est pas paramétable). Il faut vous pour cela utiliser le plugin [https://github.com/hipstersmoothie/storybook-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode).
42+
Il n'y a pas de gestion native pour gérer 2 thèmes (bien que la UI Storybook de base sache le faire, ce n'est pas paramétable). Il vous faut pour cela utiliser le plugin [https://github.com/hipstersmoothie/storybook-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode).
4343

44-
Vous devrez faire en sorte de ne pas spécifier de thème dans `manager.ts` puis mettre dans votre configuration Storybook :
44+
Assurez-vous de ne pas spécifier de thème "fixe"" dans `manager.ts`, puis mettez dans votre configuration Storybook :
4545

4646
```ts
4747
// .storybook/preview.ts
@@ -83,11 +83,11 @@ import '@gouvfr/dsfr/dist/utility/utility.css';
8383
import 'dsfr-connect/dist/fonts/index.css';
8484
```
8585

86-
Cet exemple est pour le DSFR "brut", c'est à dire qu'on ne décrit pas les initialisations propres à l'implémentation DSFR que vous pourriez utiliser (`react-dsfr`, `vue-dsfr`...). Aussi, il ne prend pas en compte la gestion du dark mode car celui-ci doit être géré par des plugins Storybook tiers (libre à vous de vous inspirer du code de ce Storybook).
86+
Cet exemple est pour utiliser le DSFR "brut", c'est à dire que l'on ne décrit pas les initialisations propres aux implémentations DSFR que vous pourriez utiliser (`react-dsfr`, `vue-dsfr`...). Aussi, dans cet exemple le DSFR ne prendra pas en compte les changements du dark mode via les menus Storybook, vous devez pour cela relier le "switch" (= action) au fait manipuler la balise `<html>` en `<html data-fr-theme="dark" data-fr-scheme="dark">` (libre à vous de vous inspirer du code de ce Storybook pour le mettre en place).
8787

8888
## Utiliser le DSFR dans les fichiers de documentation
8989

90-
Si écrivez `.mdx` dans Storybook v7 vous avez probablement remarqué que le style par défaut de Storybook est en conflit avec celui du DSFR. La solution que nous avons trouvé est de les mettre dans un composant `<Unstyled>`. Bien que cela ne règle pas des conflits sur certains liens en markdown, cela vous aidera grandement.
90+
Si écrivez des fichiers `.mdx` dans Storybook v7 vous avez probablement remarqué que le style par défaut de Storybook est en conflit avec celui du DSFR. La solution que nous avons trouvé est de mettre les contenus `.mdx` dans un composant `<Unstyled>`. Bien que cela ne règle pas la totalité des conflits cela aidera grandement.
9191

9292
```ts
9393
// .storybook/preview.ts

‎apps/docs/stories/usage/vuetify-v3.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default createVuetify({
2929

3030
Si besoin, se référer à la documentation officielle : [https://v3.vuetifyjs.com/en/getting-started/installation/](https://v3.vuetifyjs.com/en/getting-started/installation/)
3131

32-
Ensuite la partie plus compliqué est que le style des composants est géré différemment de celui de l'application. Il faut modifier le préprocesseur que vous utilisez (Vite/Webpack) afin de lui dire d'utiliser une feuille de style spécifique pour compiler les composants Vuetify. Au final cela donnerait :
32+
Ensuite la partie plus compliqué est que le style des composants est géré différemment de celui de l'application. Il faut modifier le préprocesseur que vous utilisez (Vite/Webpack) afin de lui dire d'utiliser une feuille de style spécifique pour compiler les composants Vuetify. Cela devrait ressembler à :
3333

3434
```ts
3535
// Vite/Nuxt

‎packages/dsfr-connect/.npmignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# By default `.gitignore` is used but once `.npmignore` exists the first one is totally ignored so we duplicate its entries
2+
/*/
3+
!/dist/
4+
!/src/
5+
/*.*
6+
!/package.json

0 commit comments

Comments
 (0)