diff --git a/next/components/mdx/components.tsx b/next/components/mdx/components.tsx index ff046af1..95180e8c 100644 --- a/next/components/mdx/components.tsx +++ b/next/components/mdx/components.tsx @@ -20,6 +20,12 @@ const sourceCodePro = Source_Code_Pro({ subsets: ['latin'], }); +// TODO: apply atomicClasses to other headers once +// type definition error is resolved (see H2) +interface HeadingElement extends HTMLHeadingElement { + atomicClasses?: string; +} + const HashAnchor = ({ children, id }: { children: React.ReactNode; id: string }): JSX.Element => ( <div className={styles.hashAnchor}> <a href={`#${id}`} aria-hidden="true" className={styles.hashAnchorLink}> @@ -39,15 +45,14 @@ const HashAnchor = ({ children, id }: { children: React.ReactNode; id: string }) export function H2({ children, + atomicClasses, ...rest -}: React.DetailedHTMLProps< - React.HTMLAttributes<HTMLHeadingElement>, - HTMLHeadingElement ->): JSX.Element { +}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HeadingElement>): JSX.Element { const id = generateSlug({ level: 'section', children }); + const classes = classnames({ [`${atomicClasses}`]: atomicClasses, 'mt6 mb3': !atomicClasses }); const contents = ( - <Title {...rest} id={id} size={3} headingLevel={2} className="mt6 mb3"> + <Title {...rest} id={id} size={3} headingLevel={2} className={classes}> {children} </Title> ); diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx index af700f1f..7ab6b1ad 100644 --- a/next/pages/guidelines/color/palette.tsx +++ b/next/pages/guidelines/color/palette.tsx @@ -166,7 +166,7 @@ function renderColors({ usages }): JSX.Element { .map(key => { return ( <div key={key} className="ba b-gray-300 pa5 br3 mb5"> - <H2>{paletteColortMappings[key].title}</H2> + <H2 atomicClasses="mt1">{paletteColortMappings[key].title}</H2> <P>{paletteColortMappings[key].description}</P> <div className="flex flex-column l_flex-row row-gap4 col-gap4 ">