GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

make headers in MDX unstyled components

Browse Source
This commit is contained in:
Jeppe Reinhold 2023-01-26 23:46:17 +01:00
parent 18dad97975
commit 653052fc8b
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
code/ui/blocks/src/blocks/Unstyled.mdx
View File

@ -8,11 +8,19 @@ However sometimes you might want some of your content to not have these styles a
```md
import { Unstyled } from '@storybook/blocks';
# This heading will be styled
<h2>So will this subheading</h2>
> This block quote will be styled
... and so will this paragraph.
<Unstyled>
# This heading will not be styled
<h2>Neither will this subheading</h2>
> This block quote will not be styled
... neither will this paragraph, nor the following component:
@ -22,11 +30,19 @@ import { Unstyled } from '@storybook/blocks';
Yields:
# This heading will be styled
<h2>So will this subheading</h2>
> This block quote will be styled
... and so will this paragraph.
<Unstyled>
# This heading will not be styled
<h2>Neither will this subheading</h2>
> This block quote will not be styled
... neither will this paragraph, nor the following component:

15
code/ui/blocks/src/blocks/mdx.tsx
View File

@ -1,7 +1,7 @@
import type { FC, SyntheticEvent } from 'react';
import React, { useContext } from 'react';
import { NAVIGATE_URL } from '@storybook/core-events';
import { Code, components } from '@storybook/components';
import { Code, components, nameSpaceClassNames } from '@storybook/components';
import { global } from '@storybook/global';
import { styled } from '@storybook/theming';
import { Source } from '../components';
@ -120,13 +120,12 @@ export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
return <A {...props} />;
};
const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
(acc, headerType) => ({
...acc,
// @ts-expect-error (Converted from ts-ignore)
[headerType]: styled(components[headerType])({
[headerType]: styled(headerType)({
'& svg': {
visibility: 'hidden',
},
@ -213,12 +212,10 @@ export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
</HeaderWithOcticonAnchor>
);
}
// @ts-expect-error (Converted from ts-ignore)
const Header = components[as];
// Make sure it still work if "remark-slug" plugin is not present.
return <Header {...props} />;
const Component = as as React.ElementType;
const { as: omittedAs, ...withoutAs } = props;
return <Component {...nameSpaceClassNames(withoutAs, as)} />;
};
export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(

2
code/ui/blocks/src/components/DocsPage.tsx
View File

@ -121,8 +121,6 @@ export const DocsContent = styled.div(({ theme }) => {
return {
maxWidth: 1000,
width: '100%',
...reset,
[toGlobalSelector('a')]: {
...reset,
fontSize: 'inherit',