From 207ba5e1df3da58618df681d339374f354c1984b Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Tue, 5 Mar 2024 14:54:02 -0600
Subject: [PATCH] fix(hero): adds missing prop to allow custom class names

---
 packages/sage-react/lib/Hero/Hero.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/sage-react/lib/Hero/Hero.jsx b/packages/sage-react/lib/Hero/Hero.jsx
index 7294eaaf87..15af97696e 100644
--- a/packages/sage-react/lib/Hero/Hero.jsx
+++ b/packages/sage-react/lib/Hero/Hero.jsx
@@ -9,6 +9,7 @@ export const Hero = ({
   borderless,
   children,
   ctaAttributes,
+  className,
   customBackgroundColor,
   description,
   contained,
@@ -20,8 +21,9 @@ export const Hero = ({
   titleTag,
   ...rest
 }) => {
-  const className = classnames(
+  const classNames = classnames(
     'sage-hero',
+    className,
     {
       [`sage-hero--${heroSize}`]: heroSize,
       'sage-hero--borderless': borderless,
@@ -41,7 +43,7 @@ export const Hero = ({
 
   return (
     <article
-      className={className}
+      className={classNames}
       style={{ '--custom-background-color': customBackgroundColor || '' }}
       {...rest}
     >
@@ -85,6 +87,7 @@ Hero.defaultProps = {
   ctaAttributes: null,
   children: null,
   contained: false,
+  className: null,
   customBackgroundColor: null,
   description: null,
   footerActions: null,
@@ -117,6 +120,10 @@ Hero.propTypes = {
    * If true, the image will not fill the space.
    */
   contained: PropTypes.bool,
+  /**
+   * Allows a custom class name to apply to the component.
+   */
+  className: PropTypes.string,
   /**
    * The background color to be applied to the Hero.
    */