Skip to content

Commit

Permalink
fix(docsite-v9): move theme picker under component title so it can be…
Browse files Browse the repository at this point in the history
… visible on embedded pages
  • Loading branch information
tudorpopams committed Oct 26, 2022
1 parent f6f3e4b commit c2356ab
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
import { FluentStoryContext, THEME_ID, themes } from '@fluentui/react-storybook-addon';
import { FluentDocsHeader } from './FluentDocsHeader.stories';
import { FluentStoryContext } from '@fluentui/react-storybook-addon';
import { webLightTheme, FluentProvider } from '@fluentui/react-components';

interface IFluentDocsContainerProps {
Expand All @@ -12,17 +11,8 @@ interface IFluentDocsContainerProps {
* A container that wraps storybook's native docs container to add extra components to the docs experience
*/
export const FluentDocsContainer: React.FC<IFluentDocsContainerProps> = ({ children, context }) => {
// eslint-disable-next-line deprecation/deprecation
const selectedTheme = themes.find(theme => theme.id === context.globals[THEME_ID]);
return (
<>
<FluentProvider style={{ backgroundColor: 'transparent' }} theme={selectedTheme?.theme ?? webLightTheme}>
<FluentDocsHeader
// eslint-disable-next-line deprecation/deprecation
storybookGlobals={context.globals}
/>
</FluentProvider>

{/** TODO add table of contents */}
<FluentProvider style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>
<DocsContainer context={context}>{children}</DocsContainer>
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
} from '@storybook/addon-docs';
import { makeStyles, shorthands } from '@griffel/react';
import { Toc, nameToHash } from './Toc.stories';
import { THEME_ID, themes } from '@fluentui/react-storybook-addon';
import { ThemePicker } from './ThemePicker.stories';

const useStyles = makeStyles({
divider: {
Expand Down Expand Up @@ -40,6 +42,8 @@ const useStyles = makeStyles({

export const FluentDocsPage = () => {
const context = React.useContext(DocsContext);
// eslint-disable-next-line deprecation/deprecation
const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]);
const stories = context.componentStories();
const primaryStory = stories[0];
const styles = useStyles();
Expand All @@ -61,6 +65,7 @@ export const FluentDocsPage = () => {

<div className={styles.wrapper}>
<div className={styles.container}>
<ThemePicker selectedThemeId={selectedTheme?.id} />
<Subtitle />
<Description />
<hr className={styles.divider} />
Expand Down

0 comments on commit c2356ab

Please sign in to comment.