gni progress

packages/storybook-docs/src/globalStyles.scss

@@ -228,12 +228,12 @@ html {
 		margin: 0 0 tokens.$coral-spacing-m 0;
 	}
 
-	.sbdocs-h1,
-	.sbdocs-h2,
-	.sbdocs-h3,
-	.sbdocs-h4,
-	.sbdocs-h5,
-	.sbdocs-h6 {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		border: none;
 		margin: tokens.$coral-spacing-l 0 tokens.$coral-spacing-m 0;
 		color: tokens.$coral-color-neutral-text;
@@ -363,13 +363,13 @@ html {
 
 	// stylelint-disable-next-line selector-no-qualifying-type
 	&.sbdocs-preview pre.prismjs {
-		background: #022E4D;
+		background: #022e4d;
 	}
 
 	kbd {
 		padding: 0.25rem 0.5rem;
 		color: #202020;
-		background-color: #EEE;
+		background-color: #eee;
 		border-radius: 0.4rem;
 		border: 1px solid #606060;
 		font-size: 1.2rem;
@@ -400,7 +400,7 @@ html {
 
 	& > dt::before {
 		content: '#';
-		color: #FF6D70;
+		color: #ff6d70;
 		padding-right: 1ch;
 	}
 

packages/storybook/.storybook/blocks/CustomBlock.tsx

@@ -0,0 +1,103 @@
+import { Fragment, useContext, useEffect, useState } from 'react';
+import { DocsContext } from '@storybook/blocks';
+import type { Globals } from '@storybook/csf';
+import type { DocsContextProps } from '@storybook/types';
+import { Helmet } from 'react-helmet';
+import { BackToTop, TableOfContents } from 'storybook-docs-toc';
+import { Divider, Form, StackVertical } from '@talend/design-system';
+import { BadgeFigma, BadgeI18n, BadgeReact, BadgeStorybook, Badges } from '~docs';
+import { GLOBALS_UPDATED } from '@storybook/core-events';
+
+const useGlobalsCustom = (context: DocsContextProps): [Globals] => {
+	const storyContext = context.getStoryContext(context.storyById());
+	const [globals, setGlobals] = useState(storyContext.globals);
+
+	useEffect(() => {
+		const cb = (changed: { globals: Globals }) => {
+			setGlobals(changed.globals);
+		};
+		context.channel.on(GLOBALS_UPDATED, cb);
+		return () => context.channel.off(GLOBALS_UPDATED, cb);
+	}, []);
+
+	return [globals];
+};
+
+export function CustomBlock() {
+	const context = useContext(DocsContext);
+	const { story } = context.resolveOf('story', ['story']);
+	const { id, parameters, title } = story;
+
+	const [globals] = useGlobalsCustom(context);
+
+	const titleArray = title.split('/');
+
+	const docsTitle = title.replace(/\//gi, ' / ');
+	const docsCategory = titleArray[0];
+
+	const { status = {}, figmaLink, dark = false } = parameters;
+
+	const githubLink =
+		'https://github.com/Talend/ui/tree/master/packages/design-system/' +
+		parameters.fileName
+			.split('/')
+			.slice(1, parameters.fileName.split('/').length - 1)
+			.join('/')
+			.replace('/docs', '');
+
+	const isDesignSystemElementPage = ['design system'].find(term => {
+		return title?.toLocaleLowerCase().startsWith(term);
+	});
+
+	return (
+		<>
+			<Helmet>
+				<title>{docsTitle}</title>
+				<meta property="og:title" content={titleArray[titleArray.length - 1]} />
+				<meta property="og:type" content="article" />
+				<meta property="og:url" content={`https://design.talend.com/?path=/docs/${id}`} />
+				<meta
+					property="og:image"
+					content={`https://via.placeholder.com/1000x500/F3F3F3/FF6D70?text=${docsTitle}`}
+				/>
+				{titleArray.length > 1 && <meta property="article:section" content={docsCategory} />}
+			</Helmet>
+
+			<TableOfContents>
+				<StackVertical gap="XXS" padding={{ top: 'XS', left: '0', right: '0', bottom: '0' }}>
+					<Divider />
+					<Form.ToggleSwitch
+						name="dark-mode"
+						label="Dark mode"
+						onChange={() => {
+							console.log('setDarkMode(!hasDarkMode);');
+						}}
+						checked={true}
+					/>
+					<Form.ToggleSwitch
+						name="bootstrap"
+						label={'Bootstrap stylesheet'}
+						onChange={() => console.log('setBootstrapStylesheet(!hasBootstrapStylesheet)')}
+						checked={true}
+					/>
+
+					<Form.ToggleSwitch
+						name="iframes"
+						label={'Figma iframes'}
+						onChange={() => console.log('setFigmaIframe(!hasFigmaIframe)')}
+						checked={true}
+					/>
+				</StackVertical>
+			</TableOfContents>
+
+			<Badges>
+				<BadgeFigma status={status.figma} href={figmaLink} />
+				<BadgeStorybook status={status.storybook} />
+				<BadgeReact status={status.react} href={githubLink} />
+				<BadgeI18n status={status.i18n} />
+			</Badges>
+
+			<BackToTop />
+		</>
+	);
+}

packages/storybook/.storybook/blocks/index.ts

@@ -0,0 +1 @@
+export { CustomBlock } from './CustomBlock';

packages/storybook/.storybook/main.js

@@ -15,6 +15,7 @@ const STORIES = [
 	`${rootPath}src/content/docs/Conventions.stories.@(js|tsx|mdx)`,
 	`${rootPath}src/content/docs/Capitalization.stories.@(js|tsx|mdx)`,
 	`${rootPath}src/content/docs/Wording.stories.@(js|tsx|mdx)`,
+	`${rootPath}src/design-system/**/*.stories.@(js|tsx)`,
 	`${rootPath}src/design-system/**/*.mdx`,
 	// `${rootPath}../components/**/*.stories.@(js|tsx|mdx)`,
 	// `${rootPath}../forms/**/*.stories.@(js|tsx|mdx)`,

packages/storybook/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming';
 import light from '@talend/storybook-docs/lib/themes/light';
 import '@talend/storybook-docs/dist/managerStyles.min.css';