diff --git a/code/ui/blocks/src/blocks/Heading.tsx b/code/ui/blocks/src/blocks/Heading.tsx index 8f2535fc3d44..dd3e9c70b7ea 100644 --- a/code/ui/blocks/src/blocks/Heading.tsx +++ b/code/ui/blocks/src/blocks/Heading.tsx @@ -8,13 +8,13 @@ export interface HeadingProps { disableAnchor?: boolean; } -export const Heading: FC = ({ children, disableAnchor }) => { +export const Heading: FC = ({ children, disableAnchor, ...props }) => { if (disableAnchor || typeof children !== 'string') { return

{children}

; } const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-'); return ( - + {children} ); diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index 4accadb42eed..71a24eaac41a 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -1,5 +1,6 @@ import type { FC } from 'react'; import React, { useContext } from 'react'; +import { styled } from '@storybook/theming'; import { DocsContext } from './DocsContext'; import { DocsStory } from './DocsStory'; import { Heading } from './Heading'; @@ -9,6 +10,22 @@ interface StoriesProps { includePrimary?: boolean; } +const StyledHeading: typeof Heading = styled(Heading)(({ theme }) => ({ + fontSize: `${theme.typography.size.s2 - 1}px`, + fontWeight: theme.typography.weight.bold, + lineHeight: '16px', + letterSpacing: '0.35em', + textTransform: 'uppercase', + color: theme.textMutedColor, + border: 0, + marginBottom: '12px', + + '&:first-of-type': { + // specificity issue + marginTop: '56px', + }, +})); + export const Stories: FC = ({ title, includePrimary = true }) => { const { componentStories } = useContext(DocsContext); @@ -21,7 +38,7 @@ export const Stories: FC = ({ title, includePrimary = true }) => { } return ( <> - {title} + {title} {stories.map( (story) => story && diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 2870b543b7c8..6eb60b7ac6e4 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -128,6 +128,7 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce( [headerType]: styled(headerType)({ '& svg': { visibility: 'hidden', + marginTop: 'calc(1em - 14px)', }, '&:hover svg': { visibility: 'visible', @@ -139,8 +140,9 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce( const OcticonAnchor = styled.a(() => ({ float: 'left', - paddingRight: '4px', - marginLeft: '-20px', + lineHeight: 'inherit', + paddingRight: '10px', + marginLeft: '-24px', // Allow the theme's text color to override the default link color. color: 'inherit', })); @@ -177,17 +179,14 @@ const HeaderWithOcticonAnchor: FC = ({ } }} > -