Skip to content

Commit

Permalink
docs(hero): update outline of documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@monicawheeler
monicawheeler committed Oct 30, 2023
1 parent f624c3b commit 506647d
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 154 deletions.
2 changes: 1 addition & 1 deletion docs/app/helpers/components_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ def sage_components
react: "done",
responsive: "done",
a11y: "done",
react_component_slug: "sage-hero--small-full-bleed",
react_component_slug: "sage-hero--small",
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",
},
{
Expand Down
20 changes: 0 additions & 20 deletions docs/app/views/examples/components/hero/_preview.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
<h2>Borderless</h2>
<p>When the Hero is set to borderless, the Hero will have no border.</p>

<h3>Full-bleed image</h3>
<%= 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.",
Expand All @@ -56,25 +55,6 @@
<% end %>
<% end %>

<h3>Contained image</h3>
<%= sage_component SageHero, {
title: "Introducing the Kajabi template store",
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-contained-placeholder.png",
alt_text: "Multi layered illustration of UI elements and woman smiling to the camera",
size: "large",
contained: true,
image_start: true,
borderless: true,
} do %>
<% content_for :sage_hero_footer_actions do %>
<%= sage_component SageButton, {
style: "primary",
value: "Learn more",
} %>
<% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h2>Contained</h2>
Expand Down
159 changes: 26 additions & 133 deletions packages/sage-react/lib/Hero/Hero.story.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,14 @@ Ensure images that are used in the Hero component have alt text that describes t

## Properties

<ArgsTable story="Small - full-bleed" />
<ArgsTable story="Small" />

## Full-Bleed Images

### Small - full-bleed
The small Hero component takes up a portion of the viewport width and image fills the space within the container.
## Sizes
There are two sizes for the Hero component: small and large. The small Hero component takes up a portion of the viewport width and the large Hero component takes up the entire viewport width.

### Small
<Canvas>
<Story name="Small - full-bleed">
<Story name="Small">
<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."
Expand All @@ -50,11 +49,9 @@ The small Hero component takes up a portion of the viewport width and image fill
</Story>
</Canvas>

### Large - full-bleed
The default large Hero component takes up the entire viewport width and image fills the space within the container.

### Large
<Canvas>
<Story name="Large - full-bleed">
<Story name="Large">
<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."
Expand All @@ -68,37 +65,14 @@ The default large Hero component takes up the entire viewport width and image fi
</Story>
</Canvas>

### Image with trigger - full-bleed
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">
<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"
image={{
src: `${heroFull}`,
alt: 'Multi layered illustration of UI elements and woman clasping her hands together in excitement'
}}
ctaAttributes={{
href: '#'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</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. The image will fill the space within the container.

## Borderless
When the Hero is set to borderless, the Hero will have no border.
<Canvas>
<Story name="Borderless and custom background color - full-bleed">
<Story name="Borderless">
<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"
customBackgroundColor="#e6f4fe"
borderless={true}
image={{
src: `${heroFull}`,
Expand All @@ -109,49 +83,10 @@ When the Hero is set to borderless and has a custom background color, the Hero w
</Story>
</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

<Canvas>
<Story name="Small - 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."
heroSize="small"
contained={true}
image={{
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>

### Large - contained

<Canvas>
<Story name="Large - 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."
heroSize="large"
contained={true}
image={{
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>

### Small - contained - trigger

## Contained
When the Hero is set to contained, the Hero will have margins that push the image away from the sides of the Hero container.
<Canvas>
<Story name="Small - contained - trigger">
<Story name="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."
Expand All @@ -161,46 +96,21 @@ Contained images within a Hero component will have margins that push the image a
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
}}
ctaAttributes={{
href: '#'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>

### Borderless and custom background color - contained

## Custom Background
When the Hero has a custom background color, the background color will be applied to the entire Hero.
<Canvas>
<Story name="Borderless and custom background color - contained">
<Story name="Custom Background">
<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"
customBackgroundColor="#e6f4fe"
contained={true}
borderless={true}
image={{
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>

## Image start
When the image is set to start, the image will be placed at the start of the Hero component.

### Image start - Small

<Canvas>
<Story name="Image start - small">
<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"
imageStart={true}
image={{
src: `${heroFull}`,
alt: 'Multi layered illustration of UI elements and woman clasping her hands together in excitement'
Expand All @@ -210,14 +120,14 @@ When the image is set to start, the image will be placed at the start of the Her
</Story>
</Canvas>

### Image start - Large

## Image Start
When the image is set to start, the image will be placed at the start of the Hero component.
<Canvas>
<Story name="Image start - Large">
<Story name="Image Start">
<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="large"
heroSize="small"
imageStart={true}
image={{
src: `${heroFull}`,
Expand All @@ -228,41 +138,24 @@ When the image is set to start, the image will be placed at the start of the Her
</Story>
</Canvas>

### Image start - contained - small
## CTA Attribute
When the Hero has a CTA attribute, the CTA will be applied to the Hero image.

<Canvas>
<Story name="Image start - contained - small">
<Story name="CTA Attribute">
<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"
imageStart={true}
contained={true}
image={{
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>


### Image start - contained - large

<Canvas>
<Story name="Image start - contained - large">
<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="large"
imageStart={true}
contained={true}
image={{
src: `${heroContained}`,
alt: 'Multi layered illustration of UI elements and woman smiling to the camera'
ctaAttributes={{
href: '#'
}}
footerActions={<><Button color="primary">Learn more</Button></>}
/>
</Story>
</Canvas>
</Canvas>

0 comments on commit 506647d

Please sign in to comment.