feat: add bootstrap theme toggle

Talend · Jul 26, 2023 · cc8fc96 · cc8fc96
1 parent 380fc1b
commit cc8fc96
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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/[email protected]/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
@@ -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
@@ -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,