adds classname conditional on H2 to add class definition flexibility

thumbtack · Aug 26, 2024 · 247c066 · 247c066
1 parent 4e2c647
commit 247c066
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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 ">