docs(hero): react and rails - update descriptions and output react pr…

…op table

docs/app/helpers/components_helper.rb

@@ -408,10 +408,10 @@ def sage_components
         scss: "done",
         docs: "done",
         rails: "done",
-        react: "todo",
+        react: "done",
         responsive: "done",
         a11y: "done",
-        react_component_slug: "sage-hero--default",
+        react_component_slug: "sage-hero--small-full-bleed",
         figma_embed: "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FsMbtLUHSt2vfKgKjyQ3052%2F%25F0%259F%25A7%25A9-Sage-components%3Fnode-id%3D3686%253A21923",
       },
       {

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

@@ -2,7 +2,7 @@
 <p>Full-bleed images within Heroes take up the entire vertical and horizontal space allocated at the start or end of the Hero component.</p>
 
 <h3>Default - Small</h3>
-<p>The default small Hero component takes up a portion of the viewport width.</p>
+<p>The small Hero component takes up a portion of the viewport width and image fills the space within the container.</p>
 
 <%= sage_component SageHero, {
   title: "Learn with Kajabi in our live workshops",
@@ -22,7 +22,7 @@
 <%= sage_component SageDivider, {} %>
 
 <h3>Default - Large</h3>
-<p>The default large Hero component takes up the entire viewport width.</p>
+<p>The default large Hero component takes up the entire viewport width and image fills the space within the container.</p>
 
 <%= sage_component SageHero, {
   title: "Learn with Kajabi in our live workshops",
@@ -40,7 +40,7 @@
 <% end %>
 
 <h3>Image has a trigger</h3>
-<p>When the image has a trigger, the image is clickable and will trigger an action.</p>
+<p>When the image has a trigger, the image is clickable, will trigger an action, and image fills the space within the container.</p>
 
 <%= sage_component SageHero, {
   title: "Learn with Kajabi in our live workshops",
@@ -64,7 +64,7 @@
 <%= sage_component SageDivider, {} %>
 
 <h3>Borderless and custom background color</h3>
-<p>When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero.</p>
+<p>When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero. The image will fill the space within the container.</p>
 
 <%= sage_component SageHero, {
   title: "Learn with Kajabi in our live workshops",

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

@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import heroContained from '../../public/HeroContainedPlaceholder.png';
 import heroFull from '../../public/HeroWorkshopPlaceholder.jpg';
 
-<Meta title="Sage/Hero" />
+<Meta title="Sage/Hero" component={Hero} />
 
 # Hero
 A Hero is used to call attention to new features or content. The hero is flexible in size and can contain text, illustrations, full-bleed images, and a full-bleed video thumbnail.
@@ -28,15 +28,15 @@ Ensure images that are used in the Hero component have alt text that describes t
 
 ## Properties
 
-<ArgsTable story="Default" />
+<ArgsTable story="Small - full-bleed" />
 
 ## Full-Bleed Images
 
-### Default
-The small Hero component takes up a portion of the viewport width.
+### Small - full-bleed
+The small Hero component takes up a portion of the viewport width and image fills the space within the container.
 
 <Canvas>
-  <Story name="Default">
+  <Story name="Small - full-bleed">
     <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."
@@ -51,7 +51,7 @@ The small Hero component takes up a portion of the viewport width.
 </Canvas>
 
 ### Large - full-bleed
-The default large Hero component takes up the entire viewport width.
+The default large Hero component takes up the entire viewport width and image fills the space within the container.
 
 <Canvas>
   <Story name="Large - full-bleed">
@@ -69,7 +69,7 @@ The default large Hero component takes up the entire viewport width.
 </Canvas>
 
 ### Image with trigger - full-bleed
-When the image has a trigger, the image is clickable and will trigger an action.
+When the image has a trigger, the image is clickable, will trigger an action, and image fills the space within the container.
 
 <Canvas>
   <Story name="Image with trigger - full-bleed">
@@ -90,7 +90,7 @@ When the image has a trigger, the image is clickable and will trigger an action.
 </Canvas>
 
 ### Borderless and custom background color - full-bleed
-When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero.
+When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero. The image will fill the space within the container.
 
 <Canvas>
   <Story name="Borderless and custom background color - full-bleed">
@@ -109,6 +109,7 @@ When the Hero is set to borderless and has a custom background color, the Hero w
 </Canvas>
 
 ## Contained Images
+Contained images within a Hero component will have margins that push the image away from the sides of the Hero container.
 
 ### Small - contained
 
@@ -129,7 +130,6 @@ When the Hero is set to borderless and has a custom background color, the Hero w
 </Canvas>
 
 ### Large - contained
-The default large Hero component takes up the entire viewport width.
 
 <Canvas>
   <Story name="Large - contained">
@@ -148,7 +148,6 @@ The default large Hero component takes up the entire viewport width.
 </Canvas>
 
 ### Small - contained - trigger
-When the image has a trigger, the image is clickable and will trigger an action.
 
 <Canvas>
   <Story name="Small - contained - trigger">
@@ -169,11 +168,10 @@ When the image has a trigger, the image is clickable and will trigger an action.
   </Story>
 </Canvas>
 
-### Small - contained - borderless - background color
-When the Hero is set to borderless and has a custom background color, the Hero will have no border and the background color will be applied to the entire Hero.
+### Borderless and custom background color - contained
 
 <Canvas>
-  <Story name="Small - contained - borderless - background color">
+  <Story name="Borderless and custom background color - contained">
     <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."