feat: add heading icon (#278)

iterative · Sep 9, 2024 · 85fddb1 · 85fddb1
1 parent e7fe0a2
commit 85fddb1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/packages/example/content/docs/index.md b/packages/example/content/docs/index.md
@@ -7,7 +7,7 @@ advantage of the existing engineering toolset that you're already familiar with
 
 <cards>
 
-  <card href="/doc/start" heading="Get Started">
+  <card href="/doc/start" heading="Get Started" headingicon="/favicon-512x512.png">
     A step-by-step introduction into basic DVC features
   </card>
 

diff --git a/packages/gatsby-theme-iterative/package.json b/packages/gatsby-theme-iterative/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dvcorg/gatsby-theme-iterative",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "",
   "main": "index.js",
   "types": "src/typings.d.ts",

diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/components/default.tsx b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/components/default.tsx
@@ -115,6 +115,7 @@ export const Card: React.FC<
   PropsWithChildren<{
     icon?: string
     heading?: string
+    headingicon?: string
     href?: string
     headingtag:
       | string
@@ -124,7 +125,14 @@ export const Card: React.FC<
           }>
         >
   }>
-> = ({ children, icon, heading, headingtag: Heading = 'h3', href }) => {
+> = ({
+  children,
+  icon,
+  heading,
+  headingicon,
+  headingtag: Heading = 'h3',
+  href
+}) => {
   let iconElement
 
   if (Array.isArray(children) && icon) {
@@ -139,7 +147,16 @@ export const Card: React.FC<
         {iconElement && <div className={styles.cardIcon}>{iconElement}</div>}
         <div className={styles.cardContent}>
           {heading && (
-            <Heading className={styles.cardHeading}>{heading}</Heading>
+            <Heading className={styles.cardHeading}>
+              {headingicon && (
+                <img
+                  src={headingicon}
+                  alt="Heading Icon"
+                  className={styles.cardHeadingIcon}
+                />
+              )}
+              {heading}
+            </Heading>
           )}
           {children}
         </div>

diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css
@@ -93,6 +93,12 @@
     }
   }
 
+  .cardHeadingIcon {
+    display: inline-block;
+    height: 1em;
+    padding-right: 0.75rem;
+  }
+
   .cardHeading {
     margin: 0;
     margin-bottom: 0.25em;