From 247c066bf2a4d19893d026cae50da2f3b1f84ef9 Mon Sep 17 00:00:00 2001
From: Erik Goens <egoens@thumbtack.com>
Date: Mon, 26 Aug 2024 05:27:40 -0700
Subject: [PATCH] adds classname conditional on H2 to add class definition
 flexibility

---
 next/components/mdx/components.tsx      | 15 ++++++++++-----
 next/pages/guidelines/color/palette.tsx |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

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 ">