From cc8fc961995ed86693d37965d4738635a5bb7783 Mon Sep 17 00:00:00 2001
From: jmfrancois <jmfrancois@talend.com>
Date: Wed, 26 Jul 2023 18:18:11 +0200
Subject: [PATCH] feat: add bootstrap theme toggle

---
 .../storybook/.storybook/preview-head.html    |  1 -
 .../src/design-system/Accordion/Accordion.mdx |  2 ++
 .../.storybook-templates/preview.js           | 33 ++++++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
index 7362d169d94..d6c9be7f242 100644
--- a/packages/storybook/.storybook/preview-head.html
+++ b/packages/storybook/.storybook/preview-head.html
@@ -3,7 +3,6 @@
 	href="https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
 	rel="stylesheet"
 />
-
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic" />
 <script type="text/javascript">
 	// add this because of badly built https://unpkg.com/hoist-non-react-statics@3.3.2/dist/hoist-non-react-statics.min.js
diff --git a/packages/storybook/src/design-system/Accordion/Accordion.mdx b/packages/storybook/src/design-system/Accordion/Accordion.mdx
index 6bc621d5b8c..46a83007010 100644
--- a/packages/storybook/src/design-system/Accordion/Accordion.mdx
+++ b/packages/storybook/src/design-system/Accordion/Accordion.mdx
@@ -30,6 +30,8 @@ Accordion is used to display expandable/collapsable cards with a title.
 
 ## Collapsible panel
 
+<button className="btn btn-default">foo</button>
+
 <Canvas of={Stories.SimpleCollapsiblePanel} />
 
 ## Collapsible panel with status
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
index 1d3623a034c..040782a1c04 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -1,4 +1,3 @@
-import '@talend/bootstrap-theme/dist/bootstrap.css';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { IconsProvider, ThemeProvider } from '@talend/design-system';
@@ -28,8 +27,28 @@ if (cmf) {
 	}
 }
 
+function ToggleBootstrap({ disabled }) {
+	React.useEffect(() => {
+		document.querySelectorAll('link[href*="bootstrap"]').forEach(link => link.disabled = disabled);
+	}, [disabled]);
+	return null;
+}
+
 const defaultPreview = {
 	globalTypes: {
+		bootstrapTheme: {
+			name: 'Bootstrap theme',
+			description: 'Activate bootstrap theme',
+			defaultValue: 'true',
+			toolbar: {
+				icon: 'paintbrush',
+				items: [
+					{ value: 'true', left: '✅', title: 'With Bootstrap' },
+					{ value: 'false', left: '❌', title: 'Without Bootstrap' },
+				],
+				dynamicTitle: true,
+			},
+		},
 		theme: {
 			name: 'Theme',
 			description: 'Choose a theme to apply to the design system',
@@ -75,6 +94,18 @@ const defaultPreview = {
 				React.createElement(IconsProvider, {
 					key: 'icons-provider-decorator'
 				}),
+				React.createElement(ToggleBootstrap, {
+					disabled: context.globals.bootstrapTheme === 'false',
+				}),
+				React.createElement('link', {
+					key: 'bootstrap-theme-decorator',
+					rel: 'stylesheet',
+					id: 'bootstrap-theme',
+					// TODO: find a way to use it from bootstrap-theme build
+					href: 'https://unpkg.com/@talend/bootstrap-theme/dist/bootstrap.css',
+					media: 'screen',
+					disabled: context.globals.bootstrapTheme === 'false',
+				}),
 				React.createElement(ThemeProvider, {
 					key: 'theme-provider-decorator',
 					theme: context.globals.theme,