diff --git a/docs/app/assets/images/card-placeholder-hero.jpg b/docs/app/assets/images/card-placeholder-hero.jpg index 16b506f02b..e4d23e5861 100644 Binary files a/docs/app/assets/images/card-placeholder-hero.jpg and b/docs/app/assets/images/card-placeholder-hero.jpg differ diff --git a/docs/app/assets/images/card-placeholder-lg.png b/docs/app/assets/images/card-placeholder-lg.png index dd77c2da47..b651c278c1 100644 Binary files a/docs/app/assets/images/card-placeholder-lg.png and b/docs/app/assets/images/card-placeholder-lg.png differ diff --git a/docs/app/assets/images/card-placeholder-sm.png b/docs/app/assets/images/card-placeholder-sm.png index 00bc903733..580b9b7ccb 100644 Binary files a/docs/app/assets/images/card-placeholder-sm.png and b/docs/app/assets/images/card-placeholder-sm.png differ diff --git a/docs/app/assets/images/coaching-icon.png b/docs/app/assets/images/coaching-icon.png index f4cb0a361e..e5ad633d27 100644 Binary files a/docs/app/assets/images/coaching-icon.png and b/docs/app/assets/images/coaching-icon.png differ diff --git a/docs/app/assets/images/community-icon.png b/docs/app/assets/images/community-icon.png index edc455e14f..b96b927704 100644 Binary files a/docs/app/assets/images/community-icon.png and b/docs/app/assets/images/community-icon.png differ diff --git a/docs/app/assets/images/components.svg b/docs/app/assets/images/components.svg index 542265e2d6..93ff6c6fbd 100644 --- a/docs/app/assets/images/components.svg +++ b/docs/app/assets/images/components.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/docs/app/assets/images/courses-icon.png b/docs/app/assets/images/courses-icon.png index 1f5991fea4..ac49c1adc2 100644 Binary files a/docs/app/assets/images/courses-icon.png and b/docs/app/assets/images/courses-icon.png differ diff --git a/docs/app/assets/images/dev.svg b/docs/app/assets/images/dev.svg index 8af2f6c2da..8e9bc7b6dc 100644 --- a/docs/app/assets/images/dev.svg +++ b/docs/app/assets/images/dev.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/docs/app/assets/images/empty-state-lg.svg b/docs/app/assets/images/empty-state-lg.svg index a1fe6c9fc4..d030e885cd 100644 --- a/docs/app/assets/images/empty-state-lg.svg +++ b/docs/app/assets/images/empty-state-lg.svg @@ -1,172 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/empty-state-sm.svg b/docs/app/assets/images/empty-state-sm.svg index 090d319a69..d324990891 100644 --- a/docs/app/assets/images/empty-state-sm.svg +++ b/docs/app/assets/images/empty-state-sm.svg @@ -1,23 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-center-vertical.png b/docs/app/assets/images/figma-auto-layout-align-bottom-center-vertical.png index 501eaba06c..79c80d00d6 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-center-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-center-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-center.png b/docs/app/assets/images/figma-auto-layout-align-bottom-center.png index 09f9f835bc..8477753e8c 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-center.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-center.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-left-vertical.png b/docs/app/assets/images/figma-auto-layout-align-bottom-left-vertical.png index 1f808c23dd..9ca9148a25 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-left-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-left-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-left.png b/docs/app/assets/images/figma-auto-layout-align-bottom-left.png index 7adac11b3b..3143c221df 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-left.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-left.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-right-vertical.png b/docs/app/assets/images/figma-auto-layout-align-bottom-right-vertical.png index cf95b49794..3c0b5a5b9f 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-right-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-right-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-bottom-right.png b/docs/app/assets/images/figma-auto-layout-align-bottom-right.png index a8d2b66061..d07aa44a92 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-bottom-right.png and b/docs/app/assets/images/figma-auto-layout-align-bottom-right.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-left-vertical.png b/docs/app/assets/images/figma-auto-layout-align-center-left-vertical.png index f6a2c8d9fe..4df4d7d409 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-left-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-center-left-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-left.png b/docs/app/assets/images/figma-auto-layout-align-center-left.png index 8c81b70891..bdba46736d 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-left.png and b/docs/app/assets/images/figma-auto-layout-align-center-left.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-right-vertical.png b/docs/app/assets/images/figma-auto-layout-align-center-right-vertical.png index 370ea35aa4..6bbdb729b6 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-right-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-center-right-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-right.png b/docs/app/assets/images/figma-auto-layout-align-center-right.png index 702b004055..8be4d886a6 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-right.png and b/docs/app/assets/images/figma-auto-layout-align-center-right.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-spread-vertical.png b/docs/app/assets/images/figma-auto-layout-align-center-spread-vertical.png index e7a889d655..4941f09ab1 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-spread-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-center-spread-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-spread.png b/docs/app/assets/images/figma-auto-layout-align-center-spread.png index b2cf814add..7e09383976 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-spread.png and b/docs/app/assets/images/figma-auto-layout-align-center-spread.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center-vertical.png b/docs/app/assets/images/figma-auto-layout-align-center-vertical.png index dc268a8528..43a391b2cd 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-center-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-center.png b/docs/app/assets/images/figma-auto-layout-align-center.png index 31974c9c68..f6cf962426 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-center.png and b/docs/app/assets/images/figma-auto-layout-align-center.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-end-spread-vertical.png b/docs/app/assets/images/figma-auto-layout-align-end-spread-vertical.png index 90df1c6fa0..20661ff609 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-end-spread-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-end-spread-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-end-spread.png b/docs/app/assets/images/figma-auto-layout-align-end-spread.png index 62c3879bbd..c8ea386dea 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-end-spread.png and b/docs/app/assets/images/figma-auto-layout-align-end-spread.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-start-spread-vertical.png b/docs/app/assets/images/figma-auto-layout-align-start-spread-vertical.png index cea824247a..1350b2d1e2 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-start-spread-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-start-spread-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-start-spread.png b/docs/app/assets/images/figma-auto-layout-align-start-spread.png index 637b0f3b04..f70f411556 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-start-spread.png and b/docs/app/assets/images/figma-auto-layout-align-start-spread.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-center-vertical.png b/docs/app/assets/images/figma-auto-layout-align-top-center-vertical.png index 4016e1cd05..9627468877 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-center-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-top-center-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-center.png b/docs/app/assets/images/figma-auto-layout-align-top-center.png index 72c52fc785..55e1f0d415 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-center.png and b/docs/app/assets/images/figma-auto-layout-align-top-center.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-left-vertical.png b/docs/app/assets/images/figma-auto-layout-align-top-left-vertical.png index 85c65f4e5a..4870885965 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-left-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-top-left-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-left.png b/docs/app/assets/images/figma-auto-layout-align-top-left.png index 3295b6ba7d..d79569261d 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-left.png and b/docs/app/assets/images/figma-auto-layout-align-top-left.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-right-vertical.png b/docs/app/assets/images/figma-auto-layout-align-top-right-vertical.png index 0e818a5498..de4794f13a 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-right-vertical.png and b/docs/app/assets/images/figma-auto-layout-align-top-right-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-align-top-right.png b/docs/app/assets/images/figma-auto-layout-align-top-right.png index b08833d5cf..0a3735dc8f 100644 Binary files a/docs/app/assets/images/figma-auto-layout-align-top-right.png and b/docs/app/assets/images/figma-auto-layout-align-top-right.png differ diff --git a/docs/app/assets/images/figma-auto-layout-alignment.png b/docs/app/assets/images/figma-auto-layout-alignment.png index 863d408b11..41486b8663 100644 Binary files a/docs/app/assets/images/figma-auto-layout-alignment.png and b/docs/app/assets/images/figma-auto-layout-alignment.png differ diff --git a/docs/app/assets/images/figma-auto-layout-direction-horizontal.png b/docs/app/assets/images/figma-auto-layout-direction-horizontal.png index 1126fa2a0f..176bd6c7f4 100644 Binary files a/docs/app/assets/images/figma-auto-layout-direction-horizontal.png and b/docs/app/assets/images/figma-auto-layout-direction-horizontal.png differ diff --git a/docs/app/assets/images/figma-auto-layout-direction-vertical.png b/docs/app/assets/images/figma-auto-layout-direction-vertical.png index c3d62fde2e..19274ab6bb 100644 Binary files a/docs/app/assets/images/figma-auto-layout-direction-vertical.png and b/docs/app/assets/images/figma-auto-layout-direction-vertical.png differ diff --git a/docs/app/assets/images/figma-auto-layout-direction.png b/docs/app/assets/images/figma-auto-layout-direction.png index b575478831..3fbe42312c 100644 Binary files a/docs/app/assets/images/figma-auto-layout-direction.png and b/docs/app/assets/images/figma-auto-layout-direction.png differ diff --git a/docs/app/assets/images/figma-auto-layout-gap.png b/docs/app/assets/images/figma-auto-layout-gap.png index 88f1de07d4..2de26a31fb 100644 Binary files a/docs/app/assets/images/figma-auto-layout-gap.png and b/docs/app/assets/images/figma-auto-layout-gap.png differ diff --git a/docs/app/assets/images/figma-auto-layout-labeled.png b/docs/app/assets/images/figma-auto-layout-labeled.png index b7230144c7..745cbbc5b5 100644 Binary files a/docs/app/assets/images/figma-auto-layout-labeled.png and b/docs/app/assets/images/figma-auto-layout-labeled.png differ diff --git a/docs/app/assets/images/figma-auto-layout-padding.png b/docs/app/assets/images/figma-auto-layout-padding.png index 1ed60c983b..3d2120f207 100644 Binary files a/docs/app/assets/images/figma-auto-layout-padding.png and b/docs/app/assets/images/figma-auto-layout-padding.png differ diff --git a/docs/app/assets/images/figma-auto-layout.png b/docs/app/assets/images/figma-auto-layout.png index e5710a5448..075fa0b0f7 100644 Binary files a/docs/app/assets/images/figma-auto-layout.png and b/docs/app/assets/images/figma-auto-layout.png differ diff --git a/docs/app/assets/images/figma-border-radius.png b/docs/app/assets/images/figma-border-radius.png index 43c6ff94ca..3db07aeab0 100644 Binary files a/docs/app/assets/images/figma-border-radius.png and b/docs/app/assets/images/figma-border-radius.png differ diff --git a/docs/app/assets/images/hero-contained-placeholder.png b/docs/app/assets/images/hero-contained-placeholder.png index 2909159fb3..576fec59a2 100644 Binary files a/docs/app/assets/images/hero-contained-placeholder.png and b/docs/app/assets/images/hero-contained-placeholder.png differ diff --git a/docs/app/assets/images/hero-workshop-placeholder.jpg b/docs/app/assets/images/hero-workshop-placeholder.jpg new file mode 100644 index 0000000000..5d15368b61 Binary files /dev/null and b/docs/app/assets/images/hero-workshop-placeholder.jpg differ diff --git a/docs/app/assets/images/kajabi.svg b/docs/app/assets/images/kajabi.svg index a159f7fe5d..659ef623cd 100644 --- a/docs/app/assets/images/kajabi.svg +++ b/docs/app/assets/images/kajabi.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/logo-react.svg b/docs/app/assets/images/logo-react.svg index ff6cc38b17..9b279d4adb 100644 --- a/docs/app/assets/images/logo-react.svg +++ b/docs/app/assets/images/logo-react.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/logo-sass.svg b/docs/app/assets/images/logo-sass.svg index 353c111f78..2d4651e0f5 100644 --- a/docs/app/assets/images/logo-sass.svg +++ b/docs/app/assets/images/logo-sass.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/next_best_action_graphic.png b/docs/app/assets/images/next_best_action_graphic.png index d97b789852..44c0fd7e24 100644 Binary files a/docs/app/assets/images/next_best_action_graphic.png and b/docs/app/assets/images/next_best_action_graphic.png differ diff --git a/docs/app/assets/images/null-view-graphic.png b/docs/app/assets/images/null-view-graphic.png index 01868b45a7..607c4b68e0 100644 Binary files a/docs/app/assets/images/null-view-graphic.png and b/docs/app/assets/images/null-view-graphic.png differ diff --git a/docs/app/assets/images/podcasts-icon.png b/docs/app/assets/images/podcasts-icon.png index 990c02c9cc..a29e832cd2 100644 Binary files a/docs/app/assets/images/podcasts-icon.png and b/docs/app/assets/images/podcasts-icon.png differ diff --git a/docs/app/assets/images/sage.svg b/docs/app/assets/images/sage.svg index ea816e0426..d4e0f79d7a 100644 --- a/docs/app/assets/images/sage.svg +++ b/docs/app/assets/images/sage.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/docs/app/assets/images/sage_icon.png b/docs/app/assets/images/sage_icon.png index 740ee5bb3c..c0f72b8463 100644 Binary files a/docs/app/assets/images/sage_icon.png and b/docs/app/assets/images/sage_icon.png differ diff --git a/docs/app/assets/images/sage_illustration.png b/docs/app/assets/images/sage_illustration.png index 6046cb282a..24c13fca25 100644 Binary files a/docs/app/assets/images/sage_illustration.png and b/docs/app/assets/images/sage_illustration.png differ diff --git a/docs/app/assets/images/sage_structure.png b/docs/app/assets/images/sage_structure.png index ad94426af6..205f84977d 100644 Binary files a/docs/app/assets/images/sage_structure.png and b/docs/app/assets/images/sage_structure.png differ diff --git a/docs/app/assets/images/sage_ui.png b/docs/app/assets/images/sage_ui.png index 00cf5d6423..6233110778 100644 Binary files a/docs/app/assets/images/sage_ui.png and b/docs/app/assets/images/sage_ui.png differ diff --git a/docs/app/helpers/components_helper.rb b/docs/app/helpers/components_helper.rb index 16aa828b32..4b772e389d 100644 --- a/docs/app/helpers/components_helper.rb +++ b/docs/app/helpers/components_helper.rb @@ -404,14 +404,14 @@ def sage_components }, { title: "hero", - description: "A Hero can be used to call 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.", + description: "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.", scss: "done", - docs: "todo", + docs: "done", rails: "done", - react: "todo", + react: "done", responsive: "done", a11y: "done", - react_component_slug: "sage-hero--default", + 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", }, { diff --git a/docs/app/views/examples/components/hero/_preview.html.erb b/docs/app/views/examples/components/hero/_preview.html.erb index 947c5b74bd..c41671c064 100644 --- a/docs/app/views/examples/components/hero/_preview.html.erb +++ b/docs/app/views/examples/components/hero/_preview.html.erb @@ -1,273 +1,173 @@ -

Small

+

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

<%= sage_component SageHero, { - alt_text: "Well done alt text", - description: "Get early access to new unreleased features and work before they go live.", - image: "card-placeholder-hero.jpg", + 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", - title: "Be the first to try what Kajabi is building", } do %> <% content_for :sage_hero_footer_actions do %> <%= sage_component SageButton, { + value: "Learn more", style: "primary", - value: "Primary action", } %> <% end %> <% end %> -

Small Contained

- +

Large

<%= sage_component SageHero, { - alt_text: "Well done alt text", - description: "Get early access to new unreleased features and work before they go live.", - image: "hero-contained-placeholder.png", - size: "small", - title: "Be the first to try what Kajabi is building", - contained: true, + 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: "large", } do %> <% content_for :sage_hero_footer_actions do %> <%= sage_component SageButton, { + value: "Learn more", style: "primary", - value: "Primary action", } %> <% end %> <% end %> -

Small w/ CTA

+<%= sage_component SageDivider, {} %> + +

Borderless

+

When the Hero is set to borderless, the Hero will have no border.

<%= sage_component SageHero, { - alt_text: "Well done alt text", - cta_attributes: { - "data-js-modaltrigger": "cool-modal", - href: "#", - }, - description: "Get early access to new unreleased features and work before they go live.", - image: "card-placeholder-hero.jpg", + 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", - title: "Be the first to try what Kajabi is building", + borderless: true, } do %> <% content_for :sage_hero_footer_actions do %> <%= sage_component SageButton, { + value: "Learn more", style: "primary", - value: "Primary action", } %> <% end %> <% end %> -

Small Contained w/ CTA

+<%= sage_component SageDivider, {} %> + +

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.

<%= sage_component SageHero, { - alt_text: "Well done alt text", - cta_attributes: { - "data-js-modaltrigger": "cool-modal", - href: "#", - }, - description: "Get early access to new unreleased features and work before they go live.", + 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: "small", - title: "Be the first to try what Kajabi is building", contained: true, } do %> <% content_for :sage_hero_footer_actions do %> <%= sage_component SageButton, { style: "primary", - value: "Primary action", + value: "Learn more", } %> <% end %> <% end %> -

Small - Borderless with Custom Background

+<%= sage_component SageDivider, {} %> + +

Custom Background

+

When the Hero has a custom background color, the background color will be applied to the entire Hero.

<%= sage_component SageHero, { - alt_text: "Well done alt text", - borderless: true, - cta_attributes: { - "data-js-modaltrigger": "cool-modal", - href: "#", - }, - custom_background_color: "#E6F4FE", - description: "Get early access to new unreleased features and work before they go live.", - image: "card-placeholder-hero.jpg", + 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", + custom_background_color: "#e6f4fe", size: "small", - title: "Be the first to try what Kajabi is building", } do %> <% content_for :sage_hero_footer_actions do %> <%= sage_component SageButton, { style: "primary", - value: "Primary action", + value: "Learn more", } %> <% end %> <% end %> -

Large

- -<%= sage_component SageHero, { - alt_text: "", - description: "Get early access to new unreleased features and work before they go live.", - image: "card-placeholder-hero.jpg", - title: "Be the first to try what Kajabi is building before anyone else", - title_tag: "h3", - size: "large" -} do %> - <% content_for :sage_hero_footer_actions do %> - <%= sage_component SageButtonGroup, { gap: :md } do %> - <%= sage_component SageButton, { - value: "Primary", - style: "primary", - } %> - <%= sage_component SageButton, { - value: "Dismiss", - style: "primary", - subtle: true, - attributes: { - "data-js-hero--dismiss": "" - } - } %> - <% end %> - <% end %> -<% end %> +<%= sage_component SageDivider, {} %> -

Large Contained

+

Image Start

+

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

<%= sage_component SageHero, { - alt_text: "", - description: "Get early access to new unreleased features and work before they go live.", - image: "hero-contained-placeholder.png", - title: "Be the first to try what Kajabi is building before anyone else", - title_tag: "h3", - contained: true, - size: "large" + 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", + image_start: true, } do %> <% content_for :sage_hero_footer_actions do %> - <%= sage_component SageButtonGroup, { gap: :md } do %> - <%= sage_component SageButton, { - value: "Primary", - style: "primary", - } %> - <%= sage_component SageButton, { - value: "Dismiss", - style: "primary", - subtle: true, - attributes: { - "data-js-hero--dismiss": "" - } - } %> - <% end %> + <%= sage_component SageButton, { + value: "Learn more", + style: "primary", + } %> <% end %> <% end %> -

Large w/ CTA

+<%= sage_component SageDivider, {} %> + +

CTA Attribute

+

When the Hero has a CTA attribute, the CTA will be applied to the Hero image.

<%= sage_component SageHero, { - alt_text: "", + 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", cta_attributes: { "data-js-modaltrigger": "cool-modal", href: "#", }, - description: "Get early access to new unreleased features and work before they go live.", - image: "card-placeholder-hero.jpg", - title: "Be the first to try what Kajabi is building before anyone else", - title_tag: "h3", - size: "large" } do %> <% content_for :sage_hero_footer_actions do %> - <%= sage_component SageButtonGroup, { gap: :md } do %> - <%= sage_component SageButton, { - value: "Primary", - style: "primary", - } %> - <%= sage_component SageButton, { - value: "Dismiss", - style: "primary", - subtle: true, - attributes: { - "data-js-hero--dismiss": "" - } - } %> - <% end %> + <%= sage_component SageButton, { + value: "Learn more", + style: "primary", + } %> <% end %> <% end %> -

Large Contained w/ CTA

- -<%= sage_component SageHero, { - alt_text: "", - cta_attributes: { - "data-js-modaltrigger": "cool-modal", - href: "#", - }, - description: "Get early access to new unreleased features and work before they go live.", - image: "hero-contained-placeholder.png", - title: "Be the first to try what Kajabi is building before anyone else", - title_tag: "h3", - contained: true, - size: "large" -} do %> - <% content_for :sage_hero_footer_actions do %> - <%= sage_component SageButtonGroup, { gap: :md } do %> - <%= sage_component SageButton, { - value: "Primary", - style: "primary", - } %> +<%# This is the modal triggered from various examples in this documentation %> +<%= sage_component SageModal, { id: "cool-modal"} do %> + <%= sage_component SageModalContent, { + title: "Modal title", + } do %> + <% content_for :sage_header_aside do %> <%= sage_component SageButton, { - value: "Dismiss", - style: "primary", + style: "secondary", subtle: true, - attributes: { - "data-js-hero--dismiss": "" - } + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } } %> <% end %> - <% end %> -<% end %> -

Large Contained - Borderless with Custom Background

+

Add a description of the content you're showing in the modal.

-<%= sage_component SageHero, { - alt_text: "Well done alt text", - borderless: true, - custom_background_color: "#E6F4FE", - description: "Get early access to new unreleased features and work before they go live.", - image: "hero-contained-placeholder.png", - size: "large", - title: "Be the first to try what Kajabi is building before anyone else", - contained: true, -} do %> - <% content_for :sage_hero_footer_actions do %> - <%= sage_component SageButtonGroup, { gap: :md } do %> - <%= sage_component SageButton, { - value: "Primary", - style: "primary", - } %> + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> <%= sage_component SageButton, { - value: "Dismiss", style: "primary", - subtle: true, - attributes: { - "data-js-hero--dismiss": "" - } + value: "Confirm", } %> <% end %> <% end %> <% end %> - -<%# Video player modal %> -<%= sage_component SageModal, { id: "cool-modal" } do %> -
-

Example Sage Modal

- -
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
- -<% end %> diff --git a/docs/app/views/examples/components/hero/_props.html.erb b/docs/app/views/examples/components/hero/_props.html.erb index 4ff8a5bc54..7a2310dcb6 100644 --- a/docs/app/views/examples/components/hero/_props.html.erb +++ b/docs/app/views/examples/components/hero/_props.html.erb @@ -1,6 +1,6 @@ <%= md('`alt_text`') %> - <%= md('Sets the (`alt`) text for the Hero\'s artwork image.') %> + <%= md('Sets the (`alt`) text for the Hero\'s image.') %> <%= md('String') %> <%= md('`nil`') %> @@ -18,7 +18,7 @@ <%= md('`cta_attributes`') %> - <%= md('Include this property in order to activate a "play button" action on the image. This property allows for adding attributes to the Hero CTA artwork.') %> + <%= md('Include this property in order to activate a "play button" action on the image. This property allows for adding attributes to the Hero image.') %> <%= md('Hash') %> <%= md('') %> @@ -52,6 +52,12 @@ <%= md('String: ["small", "large"]') %> <%= md('`large`') %> + + <%= md('`image_start`') %> + <%= md('Sets the horizontal placement of the image to start within the Hero.') %> + <%= md('Boolean') %> + <%= md('`false`') %> + <%= md('`title`') %> <%= md('Sets the title for the component.') %> @@ -69,5 +75,5 @@ <%= md('`sage_hero_footer_actions`') %> - <%= md('This area can hold buttons or other CTAs in the content area. ') %> + <%= md('This area can hold buttons or other CTAs in the content area.') %> diff --git a/docs/app/views/examples/components/hero/_rules_do.html.erb b/docs/app/views/examples/components/hero/_rules_do.html.erb index e69de29bb2..af47ff525f 100644 --- a/docs/app/views/examples/components/hero/_rules_do.html.erb +++ b/docs/app/views/examples/components/hero/_rules_do.html.erb @@ -0,0 +1,11 @@ + diff --git a/docs/app/views/examples/components/hero/_rules_dont.html.erb b/docs/app/views/examples/components/hero/_rules_dont.html.erb index e69de29bb2..18d5c4a8f0 100644 --- a/docs/app/views/examples/components/hero/_rules_dont.html.erb +++ b/docs/app/views/examples/components/hero/_rules_dont.html.erb @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/lib/sage_rails/app/sage_components/sage_hero.rb b/docs/lib/sage_rails/app/sage_components/sage_hero.rb index a60cf53000..c84c314b84 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_hero.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_hero.rb @@ -8,6 +8,7 @@ class SageHero < SageComponent custom_background_color: [:optional, String], description: [:optional, NilClass, String], image: [:optional, NilClass, String], + image_start: [:optional, NilClass, TrueClass], size: [:optional, NilClass, SageSchemas::HERO_SIZE], title: [:optional, NilClass, String], title_tag: [:optional, NilClass, String], diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb index be686714c7..0a867238da 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb @@ -21,6 +21,7 @@ <%= "sage-hero--borderless" if component.borderless %> <%= "sage-hero--contained" if component.contained %> <%= "sage-hero--custom-background-color" if component.custom_background_color %> + <%= "sage-hero--image-start" if component.image_start %> <%= component.generated_css_classes %> " data-js-hero @@ -43,6 +44,7 @@ <%= content_for :sage_hero_footer_actions %> <% end %> + <% if component.cta_attributes.present? %> @@ -57,4 +59,5 @@ <%= artwork %> <% end %> + diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss index 8bb66e7f35..c975ea55a6 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hero.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss @@ -20,14 +20,17 @@ $-hero-play-icon-background-color: sage-color(white); grid-row-gap: sage-spacing(sm); background-color: sage-color(white); border: sage-border(); - border-radius: sage-border(radius-large); + border-start-start-radius: sage-border(radius-large); + border-start-end-radius: sage-border(radius-large); + border-end-end-radius: sage-border(radius-large); + border-end-start-radius: sage-border(radius-large); @media (min-width: sage-breakpoint(lg-max)) { grid-template-columns: 1fr 1fr; grid-template-areas: "title artwork" "content artwork"; - padding-left: sage-spacing(md); + padding-inline-start: sage-spacing(md); } } @@ -47,26 +50,54 @@ $-hero-play-icon-background-color: sage-color(white); max-width: map-get($sage-containers, "full"); } +.sage-hero--image-start { + @media (min-width: sage-breakpoint(xl-min)) { + grid-template-areas: + "artwork title" + "artwork content"; + padding-inline: 0 1.5rem; + + .sage-hero__artwork { + border-start-start-radius: sage-border(radius-large); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: sage-border(radius-large); + } + } +} + .sage-hero__title { @extend %t-sage-heading-3; grid-area: title; - padding: 0 sage-spacing(md); + padding-block-start: 0; + padding-block-end: 0; + padding-inline-start: sage-spacing(md); + padding-inline-end: sage-spacing(md); @media (min-width: sage-breakpoint(lg-max)) { align-self: self-end; - padding: sage-spacing(md) 0 0 0; + padding-block-start: sage-spacing(md); + padding-block-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; } } .sage-hero__body { grid-area: content; - padding: 0 sage-spacing(md); - margin-bottom: $-hero-margin-y; + padding-block-start: 0; + padding-block-end: 0; + padding-inline-start: sage-spacing(md); + padding-inline-end: sage-spacing(md); + margin-block-end: $-hero-margin-y; font-weight: sage-font-weight(medium); color: sage-color(charcoal, 300); @media (min-width: sage-breakpoint(lg-max)) { - padding: 0; + padding-block-start: 0; + padding-block-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; } } @@ -75,21 +106,27 @@ $-hero-play-icon-background-color: sage-color(white); position: relative; overflow: hidden; outline: none; - border-top-right-radius: sage-spacing(sm); - border-bottom-right-radius: sage-spacing(sm); + border-start-end-radius: sage-spacing(sm); + border-end-end-radius: sage-spacing(sm); @media (max-width: sage-breakpoint(lg-max)) { height: 0; - padding-top: $-hero-mobile-aspect-ratio; - border-top-left-radius: sage-spacing(sm); - border-bottom-right-radius: 0; + padding-block-start: $-hero-mobile-aspect-ratio; + border-start-start-radius: sage-spacing(sm); + border-end-end-radius: 0; } .sage-hero--contained & { overflow: unset; height: auto; - margin: $-hero-margin-y; - border-radius: sage-spacing(sm); + margin-block-start: $-hero-margin-y; + margin-block-end: $-hero-margin-y; + margin-inline-start: $-hero-margin-y; + margin-inline-end: $-hero-margin-y; + border-start-start-radius: sage-border(radius-large); + border-start-end-radius: sage-border(radius-large); + border-end-end-radius: sage-border(radius-large); + border-end-start-radius: sage-border(radius-large); } } diff --git a/packages/sage-react/lib/Hero/Hero.jsx b/packages/sage-react/lib/Hero/Hero.jsx index 25cfa45328..7294eaaf87 100644 --- a/packages/sage-react/lib/Hero/Hero.jsx +++ b/packages/sage-react/lib/Hero/Hero.jsx @@ -14,6 +14,7 @@ export const Hero = ({ contained, footerActions, image, + imageStart, heroSize, title, titleTag, @@ -25,6 +26,7 @@ export const Hero = ({ [`sage-hero--${heroSize}`]: heroSize, 'sage-hero--borderless': borderless, 'sage-hero--contained': contained, + 'sage-hero--image-start': imageStart, 'sage-hero--custom-background-color': customBackgroundColor, }, ); @@ -79,10 +81,10 @@ export const Hero = ({ Hero.Sizes = HERO_SIZES; Hero.defaultProps = { - borderless: null, + borderless: false, ctaAttributes: null, children: null, - contained: null, + contained: false, customBackgroundColor: null, description: null, footerActions: null, @@ -90,24 +92,64 @@ Hero.defaultProps = { alt: null, src: null }, + imageStart: false, heroSize: Hero.Sizes.LARGE, title: null, titleTag: 'h2', }; Hero.propTypes = { + /** + * If true, will remove the border. + */ borderless: PropTypes.bool, - ctaAttributes: PropTypes.node, + /** + * The attributes for the CTA link. + */ + ctaAttributes: PropTypes.shape({ + href: PropTypes.string + }), + /** + * The content to be rendered within the Hero. + */ children: PropTypes.node, + /** + * If true, the image will not fill the space. + */ contained: PropTypes.bool, + /** + * The background color to be applied to the Hero. + */ customBackgroundColor: PropTypes.string, + /** + * The description to be rendered within the Hero. + */ description: PropTypes.string, + /** + * The actions to be rendered within the Hero's footer. + */ footerActions: PropTypes.node, + /** + * The image to be rendered within the Hero. + */ image: PropTypes.shape({ alt: PropTypes.string, src: PropTypes.string }), + /** + * If true, the image will be rendered before the content. + */ + imageStart: PropTypes.bool, + /** + * Sets the size of the Hero's width. + */ heroSize: PropTypes.oneOf(Hero.Sizes), + /** + * The title to be rendered within the Hero. + */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + /** + * The HTML tag to be applied to the title. + */ titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) }; diff --git a/packages/sage-react/lib/Hero/Hero.story.jsx b/packages/sage-react/lib/Hero/Hero.story.jsx deleted file mode 100644 index e9e330f6e8..0000000000 --- a/packages/sage-react/lib/Hero/Hero.story.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { selectArgs } from '../story-support/helpers'; -import { Hero } from './Hero'; -import { Button } from '../Button'; - -import imageFile from '../../public/HeroContainerPlaceholder.png'; - -export default { - title: 'Sage/Hero', - component: Hero, - // displays description on Docs tab - parameters: { - docs: { - description: { - component: 'A Hero can be used to call 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.' - }, - }, - }, - argTypes: { - ...selectArgs({ - heroSize: Hero.Sizes, - }), - }, - args: { - description: 'Get early access to new unreleased features and work along side our team by beta testing features before they go live.', - image: { - src: '//source.unsplash.com/random' - }, - footerActions: ( - <> - - - - ), - title: 'My Title', - } -}; - -const Template = (args) => ; - -export const Default = Template.bind({}); - -export const Small = Template.bind({}); -Small.args = { - title: 'Be the first to try what Kajabi is building', - description: 'Get early access to new unreleased features and work along side our team by beta testing features before they go live.', - image: { - src: '//source.unsplash.com/random' - }, - heroSize: 'small', -}; - -export const Contained = Template.bind({}); -Contained.args = { - title: 'Be the first to try what Kajabi is building', - description: 'Get early access to new unreleased features and work along side our team by beta testing features before they go live.', - image: { - src: `${imageFile}`, - }, - contained: true, -}; - -export const withCTA = Template.bind({}); -withCTA.args = { - title: 'Be the first to try what Kajabi is building', - description: 'Get early access to new unreleased features and work along side our team by beta testing features before they go live.', - image: { - src: '//source.unsplash.com/random' - }, - ctaAttributes: { - href: '#' - }, -}; - -export const customBackground = Template.bind({}); -customBackground.args = { - title: 'Be the first to try what Kajabi is building', - description: 'Get early access to new unreleased features and work along side our team by beta testing features before they go live.', - image: { - src: '//source.unsplash.com/random' - }, - customBackgroundColor: '#E6F4FE', - borderless: true, -}; diff --git a/packages/sage-react/lib/Hero/Hero.story.mdx b/packages/sage-react/lib/Hero/Hero.story.mdx new file mode 100644 index 0000000000..afd362ff65 --- /dev/null +++ b/packages/sage-react/lib/Hero/Hero.story.mdx @@ -0,0 +1,161 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Hero } from '../Hero'; +import { Button } from '../Button'; + +import heroContained from '../../public/HeroContainedPlaceholder.png'; +import heroFull from '../../public/HeroWorkshopPlaceholder.jpg'; + + + +# 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. + +## Usage Guidelines + +### When to use + +- When you want to deliver a powerful message, statement, or value proposition immediately upon a user a page or view. +- To provide a visually compelling first impression. +- For limited-time events or promotions, where the emphasis is timely and needs immediate attention. + +### When not to use + +- If there’s a risk that the Hero might overshadow or distract from other critical content or actions on the page. + +## Accessibility + +Ensure images that are used in the Hero component have alt text that describes the image and are not used for decorative purposes. + +## Properties + + + +## 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 + + + } + /> + + + +### Large + + + } + /> + + + +## Borderless +When the Hero is set to borderless, the Hero will have no border. + + + } + /> + + + +## 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. + + + } + /> + + + +## Custom Background +When the Hero has a custom background color, the background color will be applied to the entire Hero. + + + } + /> + + + +## Image Start +When the image is set to start, the image will be placed at the start of the Hero component. + + + } + /> + + + +## CTA Attribute +When the Hero has a CTA attribute, the CTA will be applied to the Hero image. + + + + } + /> + + diff --git a/packages/sage-react/public/HeroContainedPlaceholder.png b/packages/sage-react/public/HeroContainedPlaceholder.png new file mode 100644 index 0000000000..2909159fb3 Binary files /dev/null and b/packages/sage-react/public/HeroContainedPlaceholder.png differ diff --git a/packages/sage-react/public/HeroWorkshopPlaceholder.jpg b/packages/sage-react/public/HeroWorkshopPlaceholder.jpg new file mode 100644 index 0000000000..5d15368b61 Binary files /dev/null and b/packages/sage-react/public/HeroWorkshopPlaceholder.jpg differ