feat(hero): add shadow prop

docs/app/views/examples/components/hero/_preview.html.erb

@@ -142,6 +142,28 @@
   <% end %>
 <% end %>
 
+<%= sage_component SageDivider, {} %>
+
+<h2>Shadow</h2>
+<p>When the Hero has a shadow, a box-shadow will be applied to the Hero container.</p>
+
+<%= sage_component SageHero, {
+  title: "Learn with Kajabi in our live workshops",
+  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
+  image: "hero-workshop-placeholder.jpg",
+  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
+  size: "small",
+  borderless: true,
+  shadow: "100",
+} do %>
+  <% content_for :sage_hero_footer_actions do %>
+    <%= sage_component SageButton, {
+      value: "Learn more",
+      style: "primary",
+    } %>
+  <% end %>
+<% end %>
+
 <%# This is the modal triggered from various examples in this documentation %>
 <%= sage_component SageModal, { id: "cool-modal"} do %>
   <%= sage_component SageModalContent, {

docs/app/views/examples/components/hero/_props.html.erb

@@ -58,6 +58,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`shadow`') %></td>
+  <td><%= md('Sets the box-shadow on the Hero.') %></td>
+  <td><%= md('String: ["none", "050", "100", "150", "200", "300", "400", "500"]') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`title`') %></td>
   <td><%= md('Sets the title for the component.') %></td>

docs/lib/sage_rails/app/sage_components/sage_hero.rb

@@ -9,6 +9,7 @@ class SageHero < SageComponent
     description: [:optional, NilClass, String],
     image: [:optional, NilClass, String],
     image_start: [:optional, NilClass, TrueClass],
+    shadow: [:optional, NilClass, SageSchemas::HERO_SHADOW],
     size: [:optional, NilClass, SageSchemas::HERO_SIZE],
     title: [:optional, NilClass, String],
     title_tag: [:optional, NilClass, String],

docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb

@@ -20,6 +20,8 @@ module SageSchemas
 
   HERO_SIZE = Set.new(SageTokens::HERO_SIZES)
 
+  HERO_SHADOW = Set.new(SageTokens::HERO_SHADOWS)
+
   STATUSES = Set.new(SageTokens::STATUSES)
 
   SPACER = {

docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb

@@ -97,6 +97,8 @@ def SageTokens.grid_templates
 
   HERO_SIZES = ["small", "large"]
 
+  HERO_SHADOWS = ["none", "050", "100", "150", "200", "300", "400", "500"]
+
   ICONS = [
     "access-key",
     "add",

docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb

@@ -22,6 +22,7 @@
     <%= "sage-hero--contained" if component.contained %>
     <%= "sage-hero--custom-background-color" if component.custom_background_color %>
     <%= "sage-hero--image-start" if component.image_start %>
+    <%= "sage-hero--shadow-#{component.shadow}" if component.shadow.present? %>
     <%= component.generated_css_classes %>
   "
   data-js-hero

packages/sage-assets/lib/stylesheets/components/_hero.scss

@@ -66,6 +66,25 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);
   }
 }
 
+// Shadow options — aligned with Pine pds-box shadow values
+// Keep in sync with `packages/sage-react/lib/Hero/configs.js`
+$-sage-hero-shadows: (
+  none: 0,
+  "050": sage-shadow("050"),
+  100: sage-shadow(100),
+  150: sage-shadow(150),
+  200: sage-shadow(200),
+  300: sage-shadow(300),
+  400: sage-shadow(400),
+  500: sage-shadow(500),
+);
+
+@each $-key, $-val in $-sage-hero-shadows {
+  .sage-hero--shadow-#{$-key} {
+    box-shadow: #{$-val};
+  }
+}
+
 .sage-hero__title {
   @extend %t-sage-heading-3;
   grid-area: title;

packages/sage-react/lib/Hero/Hero.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Button } from '../Button';
-import { HERO_SIZES } from './configs';
+import { HERO_SHADOWS, HERO_SIZES } from './configs';
 import { SageClassnames } from '../configs';
 
 export const Hero = ({
@@ -17,6 +17,7 @@ export const Hero = ({
   image,
   imageStart,
   heroSize,
+  shadow,
   title,
   titleTag,
   ...rest
@@ -30,6 +31,7 @@ export const Hero = ({
       'sage-hero--contained': contained,
       'sage-hero--image-start': imageStart,
       'sage-hero--custom-background-color': customBackgroundColor,
+      [`sage-hero--shadow-${shadow}`]: shadow,
     },
   );
 
@@ -80,6 +82,7 @@ export const Hero = ({
   );
 };
 
+Hero.SHADOWS = HERO_SHADOWS;
 Hero.Sizes = HERO_SIZES;
 
 Hero.defaultProps = {
@@ -97,6 +100,7 @@ Hero.defaultProps = {
   },
   imageStart: false,
   heroSize: Hero.Sizes.LARGE,
+  shadow: null,
   title: null,
   titleTag: 'h2',
 };
@@ -151,6 +155,10 @@ Hero.propTypes = {
    * Sets the size of the Hero's width.
    */
   heroSize: PropTypes.oneOf(Hero.Sizes),
+  /**
+   * Sets the box-shadow on the Hero. Aligned with Pine pds-box shadow values.
+   */
+  shadow: PropTypes.oneOf(Object.values(Hero.SHADOWS)),
   /**
    * The title to be rendered within the Hero.
    */

packages/sage-react/lib/Hero/Hero.story.mdx

@@ -138,6 +138,24 @@ When the image is set to start, the image will be placed at the start of the Her
   </Story>
 </Canvas>
 
+## Shadow
+When the Hero has a shadow, a box-shadow will be applied to the Hero container.
+<Canvas>
+  <Story name="Shadow">
+    <Hero
+      title="Learn with Kajabi in our live workshops"
+      description="Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account."
+      heroSize="small"
+      shadow="100"
+      image={{
+        src: `${heroFull}`,
+        alt: 'Multi-layered illustration of UI elements and woman clasping her hands together in excitement'
+      }}
+      footerActions={<><Button color="primary">Learn more</Button></>}
+    />
+  </Story>
+</Canvas>
+
 ## CTA Attribute
 When the Hero has a CTA attribute, the CTA will be applied to the Hero image.
 

packages/sage-react/lib/Hero/configs.js

@@ -2,3 +2,16 @@ export const HERO_SIZES = {
   SMALL: 'small',
   LARGE: 'large',
 };
+
+// Keep in sync with `packages/sage-assets/lib/stylesheets/components/_hero.scss`
+// Aligned with Pine pds-box shadow values
+export const HERO_SHADOWS = {
+  NONE: 'none',
+  '050': '050',
+  100: '100',
+  150: '150',
+  200: '200',
+  300: '300',
+  400: '400',
+  500: '500',
+};