feat(hero): add shadow prop

[pixelflips]

Summary

Fixes DSS-169

• Adds a shadow prop to the Sage Hero component (React and Rails) that applies a box-shadow to the Hero container
• Prop values (none, 050, 100, 150, 200, 300, 400, 500) are aligned with Pine's pds-box shadow scale for cross-system consistency
• CSS class pattern: sage-hero--shadow-{value}
• Default is nil/null — no shadow class is added when the prop is omitted, preserving current behavior

Changes

Implementation

• _hero.scss — shadow modifier classes via @each loop over $-sage-hero-shadows map
• configs.js — HERO_SHADOWS constant
• Hero.jsx — shadow prop with classnames integration, static ref, default, and propType
• sage_tokens.rb — HERO_SHADOWS token array
• sage_schemas.rb — HERO_SHADOW schema set
• sage_hero.rb — shadow attribute in schema
• _sage_hero.html.erb — conditional shadow class output

Documentation

• _props.html.erb — shadow prop added to Properties tab
• _preview.html.erb — shadow example added to Preview tab
• Hero.story.mdx — shadow story added to Storybook

Test plan

• SCSS compiles and .sage-hero--shadow-* classes are generated with correct box-shadow values
• React Storybook — shadow prop appears in controls and the Shadow story renders correctly
• DOM inspection — sage-hero--shadow-100 class appears on the <article> element
• Rails preview — shadow example renders with visible box-shadow
• No shadow class is added when prop is omitted (null default)
• CTA play button overlay retains its own independent shadow

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds a new shadow option to the Hero component in both Rails and React. Introduces HERO_SHADOWS tokens and a HERO_SHADOW schema, exposes shadow on SageHero and React Hero (prop, default, propTypes, and Hero.SHADOWS), updates Rails template to emit a sage-hero--shadow-<value> class, adds Sass map and utility classes for hero shadows, and updates documentation and example previews to demonstrate the new shadow levels: "none", "050", "100", "150", "200", "300", "400", "500".

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(hero): add shadow prop' clearly and concisely describes the main change—adding a shadow property to the Hero component.
Description check	✅ Passed	The PR description is comprehensive and well-structured, covering the feature summary, implementation details, documentation updates, and a test plan, though the description template was not fully followed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/hero-shadow-prop

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.3.0)

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

ConfigurationError: Could not find "stylelint-config-sass-guidelines". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:241:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:208:25)
at augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:73:26)
at augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:30)
at getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:32)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:202:19)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/sage-assets/lib/stylesheets/components/_hero.scss`:
- Around line 69-86: The map key 050 is treated as a numeric 50 and loses its
leading zero during interpolation, so update the $-sage-hero-shadows map to use
a quoted string key ("050") and pass the shadow token as a quoted argument to
sage-shadow (e.g., sage-shadow("050")) so that .sage-hero--shadow-#{$-key}
generates .sage-hero--shadow-050 and matches the value used in configs.js;
adjust only the key and the corresponding sage-shadow call in the
$-sage-hero-shadows map.

In `@packages/sage-react/lib/Hero/Hero.story.mdx`:
- Around line 141-157: The alt text for the Hero story uses "Multi layered" but
should be hyphenated as a compound adjective; update the image prop in the
"Shadow" Story for the Hero component (the image.alt value passed to <Hero ...
image={{ src: heroFull, alt: 'Multi layered illustration...' }}>) to
"Multi-layered illustration of UI elements and woman clasping her hands together
in excitement".

[pixelflips]

@coderabbitai i have addressed the reported issues, please review

[coderabbitai]

@pixelflips Thank you for addressing the issues! I'll review the changes now.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.