Full-bleed images within Heroes take up the entire vertical and horizontal space allocated at the start or end of the Hero component.
+ +The default small Hero component takes up a portion of the viewport width.
<%= 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 %> -The default large Hero component takes up the entire viewport width.
<%= 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 %> -When the image has a trigger, the image is clickable and will trigger an action.
<%= sage_component SageHero, { - alt_text: "Well done 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", - 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 %> -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.
<%= sage_component SageHero, { - alt_text: "Well done 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", + custom_background_color: "#e6f4fe", + size: "small", + borderless: true, cta_attributes: { "data-js-modaltrigger": "cool-modal", href: "#", }, - description: "Get early access to new unreleased features and work before they go live.", +} do %> + <% content_for :sage_hero_footer_actions do %> + <%= sage_component SageButton, { + style: "primary", + value: "Learn more", + } %> + <% end %> +<% end %> + +<%= sage_component SageDivider, {} %> + +Contained images within a Hero component will have margins that push the image away from the sides of the Hero container.
+ +When the image is set to start, the image will be placed at the start of the Hero component.
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/docs/app/views/examples/components/hero/_props.html.erb b/docs/app/views/examples/components/hero/_props.html.erb index 4ff8a5bc54..22e64e1b2a 100644 --- a/docs/app/views/examples/components/hero/_props.html.erb +++ b/docs/app/views/examples/components/hero/_props.html.erb @@ -52,6 +52,12 @@Add a description of the content you're showing in the modal.
".html_safe +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna leo, condimentum nec pellentesque finibus, ultricies pulvinar ante. Donec eu interdum ligula. Pellentesque aliquam ullamcorper orci, nec tempor libero tristique in. Aliquam vitae felis at leo condimentum placerat eget id libero. In dictum tortor ac accumsan aliquam. Donec sit amet tortor porttitor, tincidunt nisl at, egestas lacus. Integer metus augue, aliquet accumsan vulputate eget, tristique id erat. Donec a venenatis nibh, ac molestie risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus in orci vitae ex tempor ultrices in a leo. Sed purus magna, vulputate aliquet ligula eget, consectetur sagittis nunc.
".html_safe -%> -<%= sage_component SagePanelBlock, {} do %> - <%= sage_component SageButtonGroup, { wrap: true, gap: :sm, spacer: { bottom: :sm }} do %> - <%= sage_component SageButton, { - style: "primary", - icon: { name: "launch", style: "right" }, - value: "Basic", - attributes: { - "data-js-modaltrigger": "cool-modal", - } - } %> - <%= sage_component SageButton, { - style: "primary", - icon: { name: "launch", style: "right" }, - value: "Scrollable Content", - attributes: { - "data-js-modaltrigger": "cool-modal-scrolling", - } - } %> - <%= sage_component SageButton, { - style: "primary", - icon: { name: "launch", style: "right" }, - value: "Fullscreen", - attributes: { - "data-js-modaltrigger": "cool-modal-fullscreen", - } - } %> - <%= sage_component SageButton, { - style: "primary", - icon: { name: "launch", style: "right" }, - value: "Destructive", - attributes: { - "data-js-modaltrigger": "cool-modal-destructive", - } - } %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> <% end %> +<% end %> - <%# Standard Modal %> - <%= sage_component SageModal, { id: "cool-modal", size: "lg" } do %> - <%= sage_component SageModalContent, { - title: "Modal header", - subheader: "This is subheader copy for your viewing pleasure", - } do %> - <% content_for :sage_header_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, - attributes: { "data-js-modal": true } - } %> - <% end %> +<%= sage_component SageDivider, {} %> + +Contain a title, a body of content, and a footer with buttons. The call to action button +in the footer contain error styling to indicate that the action is destructive.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Destructive", + attributes: { + "data-js-modaltrigger": "cool-modal-destructive", + } +} %> + +<%= sage_component SageModal, { id: "cool-modal-destructive" } do %> + <%= sage_component SageModalContent, { + title: "Delete item", + help_content: "Are you sure you want to delete this item? This action cannot be undone.
", + help_link: { + href: "#", + name: "Link" + } + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <%= sample_body_text %> +Are you sure you want to delete this item? This action cannot be undone.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "danger", + icon: { name: "trash", style: "left" }, + value: "Delete", + } %> + <% end %> + <% end %> +<% end %> +<%= sage_component SageDivider, {} %> + +Modals can contain an icon in the header.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Subheader", + attributes: { + "data-js-modaltrigger": "cool-modal-header-icon", + } +} %> + +<%= sage_component SageModal, {id: "cool-modal-header-icon" } do %> + <%= sage_component SageModalContent, { + header_icon: { + name: "check-circle", + color: "sage-400" + }, + title: "Modal header", + subheader: "This is subheader copy for your viewing pleasure", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> - <%= sage_component SageButton, { - style: "secondary", - value: "Cancel", - } %> - <%= sage_component SageButton, { - style: "primary", - value: "Confirm", - } %> - <% end %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> +<% end %> - <%# Standard Modal with Scrolling %> - <%= sage_component SageModal, { allow_scroll: true, id: "cool-modal-scrolling" } do %> - <%= sage_component SageModalContent, { - title: "Modal header", - subheader: "This is subheader copy for your viewing pleasure", - } do %> - <% content_for :sage_header_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, - attributes: { "data-js-modal": true } - } %> - <% end %> +<%= sage_component SageDivider, {} %> + +Modals can contain a thumbnail image in the header.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Subheader", + attributes: { + "data-js-modaltrigger": "cool-modal-header-image", + } +} %> +<%= sage_component SageModal, {id: "cool-modal-header-image" } do %> + <%= sage_component SageModalContent, { + header_image: "avatar/joshua_wilson.png", + title: "Modal header", + subheader: "This is subheader copy for your viewing pleasure", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <%= long_sample_text %> - <%= long_sample_text %> - <%= long_sample_text %> - <%= long_sample_text %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> - <%= sage_component SageButton, { - style: "secondary", - value: "Cancel", - } %> - <%= sage_component SageButton, { - style: "primary", - value: "Confirm", - } %> - <% end %> +<%= sage_component SageDivider, {} %> + +Modals can contain a subheader.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Subheader", + attributes: { + "data-js-modaltrigger": "cool-modal-subheader", + } +} %> + +<%= sage_component SageModal, { allow_scroll: true, id: "cool-modal-subheader" } do %> + <%= sage_component SageModalContent, { + title: "Modal header", + subheader: "This is subheader copy for your viewing pleasure", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> +<% end %> - <%# Fullscreen Modal %> - <%= sage_component SageModal, { - id: "cool-modal-fullscreen", - fullscreen: true +<%= sage_component SageDivider, {} %> + +Modals contain a footer that can contain buttons and links
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Footer", + attributes: { + "data-js-modaltrigger": "cool-modal-footer", + } +} %> + +<%= sage_component SageModal, { id: "cool-modal-footer" } do %> + <%= sage_component SageModalContent, { + title: "Delete item", + help_content: "Are you sure you want to delete this item? This action cannot be undone.
", + help_link: { + href: "#", + name: "Link" + } } do %> - <%= sage_component SageModalContent, { - title: "Modal header" - } do %> - <% content_for :sage_header_aside do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { style: "secondary", subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, + value: "Link", attributes: { "data-js-modal": true } } %> <% end %> - - <%= sample_body_text %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> +<% end %> - <%# Destructive Modal %> - <%= sage_component SageModal, { id: "cool-modal-destructive" } do %> - <%= sage_component SageModalContent, { - title: "Delete item", - help_content: "Are you sure you want to delete this item? This action cannot be undone.
", - help_link: { - href: "#", - name: "Link" - } - } do %> - <% content_for :sage_header_aside do %> +<%= sage_component SageDivider, {} %> + +The footer aside is a section of the footer that can contain additional buttons or links.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Footer Aside", + attributes: { + "data-js-modaltrigger": "cool-modal-footer-aside", + } +} %> + +<%= sage_component SageModal, { id: "cool-modal-footer-aside" } do %> + <%= sage_component SageModalContent, { + title: "Delete item", + help_content: "Are you sure you want to delete this item? This action cannot be undone.
", + help_link: { + href: "#", + name: "Link" + } + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { style: "secondary", subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, + value: "Link", attributes: { "data-js-modal": true } } %> <% end %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> -Are you sure you want to delete this item? This action cannot be undone.
+<%= sage_component SageDivider, {} %> + +Modals can be configured to allow scrolling of content. This option is useful when the header and footer needs to visible contain actions.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Scrollable Content", + attributes: { + "data-js-modaltrigger": "cool-modal-scrolling", + } +} %> + +<%= sage_component SageModal, { allow_scroll: true, id: "cool-modal-scrolling" } do %> + <%= sage_component SageModalContent, { + title: "Modal header", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> - <%= sage_component SageButton, { - style: "secondary", - value: "Cancel", - } %> - <%= sage_component SageButton, { - style: "danger", - icon: { name: "trash", style: "left" }, - value: "Delete", - } %> - <% end %> +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna leo, condimentum nec pellentesque finibus, ultricies pulvinar ante. Donec eu interdum ligula. Pellentesque aliquam ullamcorper orci, nec tempor libero tristique in. Aliquam vitae felis at leo condimentum placerat eget id libero. In dictum tortor ac accumsan aliquam. Donec sit amet tortor porttitor, tincidunt nisl at, egestas lacus. Integer metus augue, aliquet accumsan vulputate eget, tristique id erat. Donec a venenatis nibh, ac molestie risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus in orci vitae ex tempor ultrices in a leo. Sed purus magna, vulputate aliquet ligula eget, consectetur sagittis nunc.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna leo, condimentum nec pellentesque finibus, ultricies pulvinar ante. Donec eu interdum ligula. Pellentesque aliquam ullamcorper orci, nec tempor libero tristique in. Aliquam vitae felis at leo condimentum placerat eget id libero. In dictum tortor ac accumsan aliquam. Donec sit amet tortor porttitor, tincidunt nisl at, egestas lacus. Integer metus augue, aliquet accumsan vulputate eget, tristique id erat. Donec a venenatis nibh, ac molestie risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus in orci vitae ex tempor ultrices in a leo. Sed purus magna, vulputate aliquet ligula eget, consectetur sagittis nunc.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna leo, condimentum nec pellentesque finibus, ultricies pulvinar ante. Donec eu interdum ligula. Pellentesque aliquam ullamcorper orci, nec tempor libero tristique in. Aliquam vitae felis at leo condimentum placerat eget id libero. In dictum tortor ac accumsan aliquam. Donec sit amet tortor porttitor, tincidunt nisl at, egestas lacus. Integer metus augue, aliquet accumsan vulputate eget, tristique id erat. Donec a venenatis nibh, ac molestie risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus in orci vitae ex tempor ultrices in a leo. Sed purus magna, vulputate aliquet ligula eget, consectetur sagittis nunc.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna leo, condimentum nec pellentesque finibus, ultricies pulvinar ante. Donec eu interdum ligula. Pellentesque aliquam ullamcorper orci, nec tempor libero tristique in. Aliquam vitae felis at leo condimentum placerat eget id libero. In dictum tortor ac accumsan aliquam. Donec sit amet tortor porttitor, tincidunt nisl at, egestas lacus. Integer metus augue, aliquet accumsan vulputate eget, tristique id erat. Donec a venenatis nibh, ac molestie risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus in orci vitae ex tempor ultrices in a leo. Sed purus magna, vulputate aliquet ligula eget, consectetur sagittis nunc.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> <% end %> -<%= sage_component SagePanelBlock, {} do %> -Modals can be configured to be extra small, small, medium, or large.
+<%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Size xs", + attributes: { + "data-js-modaltrigger": "cool-modal-size-xs", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Size sm", + attributes: { + "data-js-modaltrigger": "cool-modal-size-sm", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Size md", + attributes: { + "data-js-modaltrigger": "cool-modal-size-md", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Size lg", + attributes: { + "data-js-modaltrigger": "cool-modal-size-lg", + } + } %> +<% end %> + +<%= sage_component SageModal, { id: "cool-modal-size-xs", size: "xs"} do %> + <%= sage_component SageModalContent, { + title: "Modal title", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> <% end %> +<% end %> - <%# Animated Modals %> - <%= sage_component SageModal, { id: "cool-modal-animate-default", animate: true, css_classes: "custom-class-name-here" } do %> - <%= sage_component SageModalContent, { title: "Modal header" } do %> - <% content_for :sage_header_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, - attributes: { "data-js-modal": true } - } %> - <% end %> +<%= sage_component SageModal, { id: "cool-modal-size-sm", size: "sm"} do %> + <%= sage_component SageModalContent, { + title: "Modal title", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> - <%= sample_body_text %> +<%= sage_component SageModal, { id: "cool-modal-size-md", size: "md"} do %> + <%= sage_component SageModalContent, { + title: "Modal title", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Close Modal", - attributes: { "data-js-modal": true } - } %> - <% end %> - <%= sage_component SageButton, { - style: "primary", - value: "Confirm", - } %> - <% end %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> +<% end %> - <%= sage_component SageModal, { id: "cool-modal-animate-top", animate: { direction: "top" } } do %> - <%= sage_component SageModalContent, { title: "Modal header" } do %> - <% content_for :sage_header_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, - attributes: { "data-js-modal": true } - } %> - <% end %> +<%= sage_component SageModal, { id: "cool-modal-size-lg", size: "lg"} do %> + <%= sage_component SageModalContent, { + title: "Modal title", + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <%= sample_body_text %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <%= sage_component SageButton, { + style: "secondary", + value: "Cancel", + } %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> - <%= sage_component SageButton, { - style: "primary", - value: "Confirm", - } %> - <% end %> +<%= sage_component SageDivider, {} %> + +Modals can be configured to take up the full screen.
+<%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Fullscreen", + attributes: { + "data-js-modaltrigger": "cool-modal-fullscreen", + } +} %> + +<%= sage_component SageModal, { + id: "cool-modal-fullscreen", + fullscreen: true +} do %> + <%= sage_component SageModalContent, { + title: "Modal header" + } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> <% end %> + +Add a description of the content you're showing in the modal.
<% end %> +<% end %> - <%= sage_component SageModal, { id: "cool-modal-animate-left", disable_background_blur: true, animate: { direction: "left" } } do %> - <%= sage_component SageModalContent, { title: "Modal header" } do %> - <% content_for :sage_header_aside do %> +<%= sage_component SageDivider, {} %> + +Modals can be configured to animate in from the top, left, or right.
+<%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "Default", + attributes: { + "data-js-modaltrigger": "cool-modal-animate-default", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "To top", + attributes: { + "data-js-modaltrigger": "cool-modal-animate-top", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "To left (blur off)", + attributes: { + "data-js-modaltrigger": "cool-modal-animate-left", + } + } %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "launch", style: "right" }, + value: "To right (blur off)", + attributes: { + "data-js-modaltrigger": "cool-modal-animate-right", + } + } %> +<% end %> + +<%# Animated Modals %> +<%= sage_component SageModal, { id: "cool-modal-animate-default", animate: true, css_classes: "custom-class-name-here" } do %> + <%= sage_component SageModalContent, { title: "Modal header" } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { style: "secondary", subtle: true, value: "Close Modal", - icon: { name: "remove", style: "only" }, attributes: { "data-js-modal": true } } %> <% end %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> - <%= sample_body_text %> +<%= sage_component SageModal, { id: "cool-modal-animate-top", animate: { direction: "top" } } do %> + <%= sage_component SageModalContent, { title: "Modal header" } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { - style: "primary", - value: "Confirm", + style: "secondary", + subtle: true, + value: "Link", + attributes: { "data-js-modal": true } } %> <% end %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> <% end %> <% end %> +<% end %> - <%= sage_component SageModal, { id: "cool-modal-animate-right", disable_background_blur: true, animate: { direction: "right" } } do %> - <%= sage_component SageModalContent, { title: "Modal header" } do %> - <% content_for :sage_header_aside do %> +<%= sage_component SageModal, { id: "cool-modal-animate-left", disable_background_blur: true, animate: { direction: "left" } } do %> + <%= sage_component SageModalContent, { title: "Modal header" } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> + +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { style: "secondary", subtle: true, - value: "Close Modal", - icon: { name: "remove", style: "only" }, + value: "Link", attributes: { "data-js-modal": true } } %> <% end %> + <%= sage_component SageButton, { + style: "primary", + value: "Confirm", + } %> + <% end %> + <% end %> +<% end %> - <%= sample_body_text %> +<%= sage_component SageModal, { id: "cool-modal-animate-right", disable_background_blur: true, animate: { direction: "right" } } do %> + <%= sage_component SageModalContent, { title: "Modal header" } do %> + <% content_for :sage_header_aside do %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: "Close Modal", + icon: { name: "remove", style: "only" }, + attributes: { "data-js-modal": true } + } %> + <% end %> - <% content_for :sage_footer do %> - <% content_for :sage_footer_aside do %> - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: "Link", - attributes: { "data-js-modal": true } - } %> - <% end %> +Add a description of the content you're showing in the modal.
+ + <% content_for :sage_footer do %> + <% content_for :sage_footer_aside do %> <%= sage_component SageButton, { - style: "primary", - icon: { name: "check", style: "left" }, - value: "Confirm" + style: "secondary", + subtle: true, + value: "Link", + attributes: { "data-js-modal": true } } %> <% end %> + <%= sage_component SageButton, { + style: "primary", + icon: { name: "check", style: "left" }, + value: "Confirm" + } %> <% end %> <% end %> <% end %> +<%= sage_component SageDivider, {} %> + <%= md(" -Add a description of the content you're showing in the modal.
<% content_for :sage_footer do %> <% content_for :sage_footer_aside do %> @@ -515,7 +894,7 @@ As shown elsewhere on this page default content (such as `SageLoader`) can also } %> <% end %> - <%= sample_body_text %> +Add a description of the content you're showing in the modal.
<% content_for :sage_footer do %> <% content_for :sage_footer_aside do %> @@ -547,7 +926,7 @@ As shown elsewhere on this page default content (such as `SageLoader`) can also } %> <% end %> - <%= sample_body_text %> +Add a description of the content you're showing in the modal.
<% content_for :sage_footer do %> <% content_for :sage_footer_aside do %> @@ -579,7 +958,7 @@ As shown elsewhere on this page default content (such as `SageLoader`) can also } %> <% end %> - <%= sample_body_text %> +Add a description of the content you're showing in the modal.
<% content_for :sage_footer do %> <% content_for :sage_footer_aside do %> 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..2ec62dbeaa 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: 1200px) { + 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); } }