From 05305a7db7f24f18e60747e8e36666be60f4612a Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Tue, 25 Jul 2023 15:39:08 -0700 Subject: [PATCH 01/15] fix(expandablecard): add new props and conditionals --- .../lib/ExpandableCard/ExpandableCard.jsx | 51 ++++++++++++++----- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx index f59657143a..d0ace9a203 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx @@ -11,6 +11,8 @@ export const ExpandableCard = ({ expanded, children, className, + customTrigger, + customTriggerContent, name, onClick, sageType, @@ -49,18 +51,39 @@ export const ExpandableCard = ({ return (
- + {customTrigger ? ( +
+ + {customTriggerContent} +
+ ) : ( + + )} +
{children}
@@ -74,6 +97,8 @@ ExpandableCard.defaultProps = { expanded: false, children: null, className: null, + customTrigger: false, + customTriggerContent: null, name: null, onClick: null, sageType: false, @@ -83,6 +108,8 @@ ExpandableCard.defaultProps = { ExpandableCard.propTypes = { alignArrowRight: PropTypes.bool, bodyBordered: PropTypes.bool, + customTrigger: PropTypes.bool, + customTriggerContent: PropTypes.node, expanded: PropTypes.bool, className: PropTypes.string, children: PropTypes.node, From d0c87e0ef3e1fdc8d48efe078848b36c530f5e49 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Tue, 25 Jul 2023 15:39:54 -0700 Subject: [PATCH 02/15] fix(expandablecard): add new styles --- .../lib/stylesheets/components/_expandable_card.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 5d245b26fa..4fcea2eefc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -95,3 +95,15 @@ $-expandable-card-padding-xs: sage-spacing(xs); } } // NOTE: Styles for align_arrow_right prop added in `_button` + +.sage-expandable-card__trigger-custom { + display: grid; + grid-auto-columns: auto; + grid-auto-flow: column; + grid-template-columns: auto 1fr; + align-items: center; + gap: 16px; + .sage-expandable-card__trigger::before { + margin-right: 0; + } +} From 0397bae4c960e8acce32829701a6fc2cbff176c9 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Tue, 25 Jul 2023 15:40:21 -0700 Subject: [PATCH 03/15] docs(expandablecard): add new story --- .../ExpandableCard/ExpandableCard.story.jsx | 123 +++++++++++++++++- 1 file changed, 116 insertions(+), 7 deletions(-) diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx index f01ad34f68..41c810e2c2 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx @@ -1,15 +1,22 @@ -import React from 'react'; -import { Checkbox } from '../Toggle'; -import { ExpandableCard } from './ExpandableCard'; +import React from "react"; +import { Checkbox } from "../Toggle"; +import { ExpandableCard } from "./ExpandableCard"; +import { Badge } from "../Badge"; +import { Card } from "../Card"; +import { OptionsDropdown } from "../Dropdown"; +import { Divider } from "../Divider"; +import { SageClassnames, SageTokens } from "../configs"; +import { Grid } from "../Grid"; export default { - title: 'Sage/ExpandableCard', + title: "Sage/ExpandableCard", component: ExpandableCard, // displays description on Docs tab parameters: { docs: { description: { - component: 'Card that can be expanded and collapsed in order to display additional content.' + component: + "Card that can be expanded and collapsed in order to display additional content.", }, }, }, @@ -44,9 +51,111 @@ export default { /> ), - triggerLabel: 'Expand' - } + triggerLabel: "Expand", + }, }; const Template = (args) => ; export const Default = Template.bind({}); + +export const CustomTrigger = () => ( + <> + + + + + ¥1,107,243.69 JPY ($8,000.50 USD) + + + + + {}} + isPinned={false} + onEscapeHook={function noRefCheck() {}} + triggerButtonSubtle={true} + options={[ + { + id: 1, + label: "Send reciept", + }, + { + id: 2, + label: "View receipt", + }, + { + id: 3, + label: "Refund payment", + }, + ]} + /> + + + + + } + > +
This is the content
+ + + + + + + + + ¥1,107,243.69 JPY ($8,000.50 USD) + + + + + {}} + isPinned={false} + onEscapeHook={function noRefCheck() {}} + triggerButtonSubtle={true} + options={[ + { + id: 1, + label: "Send reciept", + }, + { + id: 2, + label: "View receipt", + }, + { + id: 3, + label: "Refund payment", + }, + ]} + /> + + + + + } + > +
This is the content
+ + +); From 976aac9789e6d4d6e391e41544ac868ccc07c844 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Tue, 25 Jul 2023 16:19:10 -0700 Subject: [PATCH 04/15] chore(expandablecard): hello linter my old friend --- .../ExpandableCard/ExpandableCard.story.jsx | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx index 41c810e2c2..d8864cc452 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx @@ -1,22 +1,21 @@ -import React from "react"; -import { Checkbox } from "../Toggle"; -import { ExpandableCard } from "./ExpandableCard"; -import { Badge } from "../Badge"; -import { Card } from "../Card"; -import { OptionsDropdown } from "../Dropdown"; -import { Divider } from "../Divider"; -import { SageClassnames, SageTokens } from "../configs"; -import { Grid } from "../Grid"; +import React from 'react'; +import { Checkbox } from '../Toggle'; +import { ExpandableCard } from './ExpandableCard'; +import { Badge } from '../Badge'; +import { OptionsDropdown } from '../Dropdown'; +import { Divider } from '../Divider'; +import { SageClassnames } from '../configs'; +import { Grid } from '../Grid'; export default { - title: "Sage/ExpandableCard", + title: 'Sage/ExpandableCard', component: ExpandableCard, // displays description on Docs tab parameters: { docs: { description: { component: - "Card that can be expanded and collapsed in order to display additional content.", + 'Card that can be expanded and collapsed in order to display additional content.', }, }, }, @@ -51,7 +50,7 @@ export default { /> ), - triggerLabel: "Expand", + triggerLabel: 'Expand', }, }; const Template = (args) => ; @@ -63,7 +62,7 @@ export const CustomTrigger = () => ( @@ -76,25 +75,25 @@ export const CustomTrigger = () => ( /> - + {}} isPinned={false} - onEscapeHook={function noRefCheck() {}} + onEscapeHook={() => {}} triggerButtonSubtle={true} options={[ { id: 1, - label: "Send reciept", + label: 'Send reciept', }, { id: 2, - label: "View receipt", + label: 'View receipt', }, { id: 3, - label: "Refund payment", + label: 'Refund payment', }, ]} /> @@ -102,7 +101,7 @@ export const CustomTrigger = () => ( - } + )} >
This is the content
 @@ -114,7 +113,7 @@ export const CustomTrigger = () => ( @@ -127,25 +126,25 @@ export const CustomTrigger = () => ( /> - + {}} isPinned={false} - onEscapeHook={function noRefCheck() {}} + onEscapeHook={() => {}} triggerButtonSubtle={true} options={[ { id: 1, - label: "Send reciept", + label: 'Send reciept', }, { id: 2, - label: "View receipt", + label: 'View receipt', }, { id: 3, - label: "Refund payment", + label: 'Refund payment', }, ]} /> @@ -153,7 +152,7 @@ export const CustomTrigger = () => ( - } + )} >
This is the content
 From e649ee2a475fc857ed5aa01e3d5c234dc117aa89 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Wed, 26 Jul 2023 18:16:50 -0700 Subject: [PATCH 05/15] fix(expandablecard): update to use customHeader and alignTrigger --- .../components/_expandable_card.scss | 15 ++++- .../lib/ExpandableCard/ExpandableCard.jsx | 62 ++++++++++--------- .../ExpandableCard/ExpandableCard.story.jsx | 57 ++--------------- 3 files changed, 51 insertions(+), 83 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 4fcea2eefc..d6ed5bbb07 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -96,14 +96,23 @@ $-expandable-card-padding-xs: sage-spacing(xs); } // NOTE: Styles for align_arrow_right prop added in `_button` -.sage-expandable-card__trigger-custom { + +.sage-expandable-card__header { display: grid; grid-auto-columns: auto; grid-auto-flow: column; - grid-template-columns: auto 1fr; align-items: center; gap: 16px; .sage-expandable-card__trigger::before { - margin-right: 0; + margin: 0; + } +} +.sage-expandable-card__trigger-left { + grid-template-columns: auto 1fr; +} +.sage-expandable-card__trigger-right { + grid-template-columns: 1fr auto; + .sage-expandable-card__trigger { + order: 1; } } diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx index d0ace9a203..270c6d04c0 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx @@ -7,12 +7,12 @@ import { SageClassnames, SageTokens } from '../configs'; export const ExpandableCard = ({ alignArrowRight, + alignTrigger, bodyBordered, expanded, children, className, - customTrigger, - customTriggerContent, + headerContent, name, onClick, sageType, @@ -49,28 +49,10 @@ export const ExpandableCard = ({ [`${SageClassnames.TYPE_BLOCK}`]: sageType, }); - return ( -
- {customTrigger ? ( -
- - {customTriggerContent} -
- ) : ( - - )} + ); + + if (alignTrigger === "middle") { + return ( + <> + + + ) + ; + } else { + return ( +
+ {} +
{headerContent}
+
+ ); + } + }; + + return ( +
+ {determineAlignment()}
{children} @@ -97,8 +101,8 @@ ExpandableCard.defaultProps = { expanded: false, children: null, className: null, - customTrigger: false, - customTriggerContent: null, + headerContent: null, + alignTrigger: 'middle', name: null, onClick: null, sageType: false, @@ -108,11 +112,11 @@ ExpandableCard.defaultProps = { ExpandableCard.propTypes = { alignArrowRight: PropTypes.bool, bodyBordered: PropTypes.bool, - customTrigger: PropTypes.bool, - customTriggerContent: PropTypes.node, + headerContent: PropTypes.node, expanded: PropTypes.bool, className: PropTypes.string, children: PropTypes.node, + alignTrigger: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, name: PropTypes.string, onClick: PropTypes.func, sageType: PropTypes.bool, diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx index d8864cc452..1a89eda869 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx @@ -57,12 +57,12 @@ const Template = (args) => ; export const Default = Template.bind({}); -export const CustomTrigger = () => ( +export const CustomHeader = () => ( <> @@ -106,55 +106,10 @@ export const CustomTrigger = () => (
This is the content
 - + /> */} + - - - - - ¥1,107,243.69 JPY ($8,000.50 USD) - - - - - {}} - isPinned={false} - onEscapeHook={() => {}} - triggerButtonSubtle={true} - options={[ - { - id: 1, - label: 'Send reciept', - }, - { - id: 2, - label: 'View receipt', - }, - { - id: 3, - label: 'Refund payment', - }, - ]} - /> - - - - - )} - > -
This is the content
- ); From 84ad7408a9c3e1dcfb3ff17be0622f93b624a138 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Wed, 26 Jul 2023 18:30:31 -0700 Subject: [PATCH 06/15] chore(expandablecard): hello linter my old friend --- .../lib/ExpandableCard/ExpandableCard.jsx | 48 +++++++++---------- .../ExpandableCard/ExpandableCard.story.jsx | 7 --- 2 files changed, 23 insertions(+), 32 deletions(-) diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx index 270c6d04c0..0f3ca086b2 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx @@ -50,38 +50,36 @@ export const ExpandableCard = ({ }); const determineAlignment = () => { - let className = "sage-expandable-card__header"; - const ButtonWrapper = ({...rest}) => ( + const className = 'sage-expandable-card__header'; + const ButtonWrapper = ({ ...rest }) => ( + aria-controls={id} + aria-expanded={isExpanded} + className="sage-expandable-card__trigger" + color="secondary" + fullWidth={true} + icon={SageTokens.ICONS.CARET_RIGHT} + onClick={handleChange} + subtle={true} + {...rest} + > + {triggerLabel} + ); - if (alignTrigger === "middle") { + if (alignTrigger === 'middle') { return ( <> - + - ) - ; - } else { - return ( -
- {} -
{headerContent}
-
); } + return ( +
+ +
{headerContent}
+
+ ); }; return ( @@ -116,7 +114,7 @@ ExpandableCard.propTypes = { expanded: PropTypes.bool, className: PropTypes.string, children: PropTypes.node, - alignTrigger: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, + alignTrigger: PropTypes.oneOf(['left', 'middle', 'right']), name: PropTypes.string, onClick: PropTypes.func, sageType: PropTypes.bool, diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx index 1a89eda869..b74c5cf423 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.story.jsx @@ -3,7 +3,6 @@ import { Checkbox } from '../Toggle'; import { ExpandableCard } from './ExpandableCard'; import { Badge } from '../Badge'; import { OptionsDropdown } from '../Dropdown'; -import { Divider } from '../Divider'; import { SageClassnames } from '../configs'; import { Grid } from '../Grid'; @@ -105,11 +104,5 @@ export const CustomHeader = () => ( >
This is the content
 - - {/* */} - - ); From 493c23423c3b5e919a5544e59c10e9c603cad096 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Thu, 27 Jul 2023 12:15:03 -0400 Subject: [PATCH 07/15] feat: add custom component attributes hash this allows developers to have access to the element and pass additional attributes to it --- .../app/sage_components/sage_component.rb | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/lib/sage_rails/app/sage_components/sage_component.rb b/docs/lib/sage_rails/app/sage_components/sage_component.rb index 884cdfd24b..dacc0489a6 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_component.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_component.rb @@ -7,6 +7,7 @@ class SageComponent ATTRIBUTE_SCHEMA = { test_id: [:optional, NilClass, String], + component_attributes: [:optional, NilClass, Hash], html_attributes: [:optional, NilClass, Hash], spacer: [:optional, NilClass, SageSchemas::SPACER], css_classes: [:optional, NilClass, String], @@ -17,6 +18,10 @@ def generated_css_classes @generated_css_classes ||= "" end + def generated_component_attributes + @generated_component_attributes ||= "" + end + def generated_html_attributes @generated_html_attributes ||= "" end @@ -55,6 +60,24 @@ def spacer=(spacer_hash) end end + # SageComponent Custom Event Attributes + # Accepts a :component_attributes has that generates the additional + # attributes on the element and not the parent container. + # + # USAGE: + # sage_component , { component_attributes: { "onChange": "handleChange(this)" } } + # sage_component , { component_attributes: { "onChange": "alert('hello world')" } } + def component_attributes + @component_attributes ||= {} + end + + def component_attributes=(component_attributes_hash) + @component_attributes = component_attributes_hash + component_attributes_hash.each do |key, value| + generated_component_attributes << " #{key}=\"#{value.to_s}\"" + end + end + # SageComponent Custom Html Attributes # Accepts a :html_attributes hash that generates additional html attributes for a component. # From a9d24855a3a7a61d7994a209dc3ad5c74566c8df Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 10:18:13 -0700 Subject: [PATCH 08/15] docs(expandablecard): add notes related to custom header usage --- .../ExpandableCardNotes.story.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/sage-react/lib/ExpandableCard/ExpandableCardNotes.story.mdx diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCardNotes.story.mdx b/packages/sage-react/lib/ExpandableCard/ExpandableCardNotes.story.mdx new file mode 100644 index 0000000000..9ed0c383af --- /dev/null +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCardNotes.story.mdx @@ -0,0 +1,17 @@ +import { Meta } from "@storybook/addon-docs"; + + + +### Custom Header: + +The `ExpandableCard` component has two props that can be used together to create a custom header solution: `alignTrigger` and `headerContent`. + +** `alignTrigger` prop: ** + +The `alignTrigger` prop allows you to control the alignment of the trigger button inside the header. When set to "left", the trigger button will be aligned to the left side of the header. Conversely, when set to "right", the trigger button will be aligned to the right side of the header. + +** `headerContent` prop: ** + +The `headerContent` prop lets you provide custom content to be displayed alongside the trigger button in the header. This content can be any valid React node, such as HTML elements, text, or other React components. + +By using these two props together, you can create a custom header layout for the `ExpandableCard` component. From e7c115dcbcadd63478cf959a91b5c2fbc173b10a Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 11:51:02 -0700 Subject: [PATCH 09/15] fix(expandablecard): add new prop and conditionals rails --- .../sage_components/sage_expandable_card.rb | 7 ++- .../_sage_expandable_card.html.erb | 46 +++++++++++++------ 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/docs/lib/sage_rails/app/sage_components/sage_expandable_card.rb b/docs/lib/sage_rails/app/sage_components/sage_expandable_card.rb index e4df7e000a..9ab0473dec 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_expandable_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_expandable_card.rb @@ -1,10 +1,15 @@ class SageExpandableCard < SageComponent set_attribute_schema({ align_arrow_right: [:optional, NilClass, TrueClass], + align_trigger: [:optional, NilClass, String], body_bordered: [:optional, NilClass, TrueClass], - sage_type: [:optional, NilClass, TrueClass], expanded: [:optional, NilClass, TrueClass], + sage_type: [:optional, NilClass, TrueClass], trigger_label: [:optional, NilClass, String], }) + + def sections + %w(expandable_card_custom_header ) + end end diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_expandable_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_expandable_card.html.erb index 9c85bf7df8..8c581c99f8 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_expandable_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_expandable_card.html.erb @@ -1,21 +1,41 @@ -
<% if component.expanded.present? %>sage-expandable-card--expanded<% end %> <% if component.align_arrow_right %>sage-expandable-card--align-arrow-right<% end %>" <%= component.generated_html_attributes.html_safe %> > - <%= sage_component SageButton, { - style: "secondary", - subtle: true, - value: component.trigger_label, - icon: { name: "caret-right", style: "left" }, - css_classes: "sage-expandable-card__trigger", - attributes: { - "data-js-accordion": "header", - "aria-expanded": (component.expanded.present? ? true : false) - }, - } %> + <% if component.align_trigger == "right" || component.align_trigger == "left" %> +
+ <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: component.trigger_label, + icon: { name: "caret-right", style: "only" }, + css_classes: "sage-expandable-card__trigger", + attributes: { + "data-js-accordion": "header", + "aria-expanded": (component.expanded.present? ? true : false) + }, + } %> +
+ <% if content_for? :sage_expandable_card_custom_header %> + <%= content_for :sage_expandable_card_custom_header %> + <% end %> +
+
+ <% else %> + <%= sage_component SageButton, { + style: "secondary", + subtle: true, + value: component.trigger_label, + icon: { name: "caret-right", style: "left" }, + css_classes: "sage-expandable-card__trigger", + attributes: { + "data-js-accordion": "header", + "aria-expanded": (component.expanded.present? ? true : false) + }, + } %> + <% end %>
From 410889673b1fcb5550b71987ba3bbc0f7a20d239 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 11:51:49 -0700 Subject: [PATCH 10/15] docs(expandablecard): add notes related to custom header usage rails --- .../expandable_card/_preview.html.erb | 72 ++++++++++++++++++- .../expandable_card/_props.html.erb | 11 +++ 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/docs/app/views/examples/components/expandable_card/_preview.html.erb b/docs/app/views/examples/components/expandable_card/_preview.html.erb index 9263c4911b..1b78064d5e 100644 --- a/docs/app/views/examples/components/expandable_card/_preview.html.erb +++ b/docs/app/views/examples/components/expandable_card/_preview.html.erb @@ -104,4 +104,74 @@ disabled: false, has_error: false } %> -<% end %> \ No newline at end of file +<% end %> + +<%= md(" +#### Custom Header + +A custom header can be applied using the `sage_expandable_card_custom_header` section. This will replace the default header with the content provided. +This should be used in conjunction with the `align_trigger` option. + +", use_sage_type: true) %> + +<%= sage_component SageExpandableCard, { + trigger_label: "Expand", + align_arrow_right: true, + align_trigger: "left", +} do %> + <% content_for :sage_expandable_card_custom_header do %> +

This is custom header content with trigger to left

+ <% end %> + <%= sage_component SageCheckbox, { + id:"c4", + label_text: "Grant offers", + checked: false, + disabled: false, + has_error: false + } %> + <%= sage_component SageCheckbox, { + id:"c5", + label_text: "Add tags", + checked: false, + disabled: false, + has_error: false + } %> + <%= sage_component SageCheckbox, { + id:"c6", + label_text: "Subscribe to emails", + checked: false, + disabled: false, + has_error: false + } %> +<% end %> + +<%= sage_component SageExpandableCard, { + trigger_label: "Expand", + align_arrow_right: true, + align_trigger: "right", +} do %> + <% content_for :sage_expandable_card_custom_header do %> +

This is custom header content with trigger to right

+ <% end %> + <%= sage_component SageCheckbox, { + id:"c4", + label_text: "Grant offers", + checked: false, + disabled: false, + has_error: false + } %> + <%= sage_component SageCheckbox, { + id:"c5", + label_text: "Add tags", + checked: false, + disabled: false, + has_error: false + } %> + <%= sage_component SageCheckbox, { + id:"c6", + label_text: "Subscribe to emails", + checked: false, + disabled: false, + has_error: false + } %> +<% end %> diff --git a/docs/app/views/examples/components/expandable_card/_props.html.erb b/docs/app/views/examples/components/expandable_card/_props.html.erb index dbd9f5f387..8310bc35ec 100644 --- a/docs/app/views/examples/components/expandable_card/_props.html.erb +++ b/docs/app/views/examples/components/expandable_card/_props.html.erb @@ -4,6 +4,12 @@ <%= md('Boolean') %> <%= md('`nil`') %> + + <%= md('`align_trigger`') %> + <%= md("Aligns trigger to left or right. Can be used in conjunction with the `sage_expandable_card_custom_header` section. ") %> + <%= md('String') %> + <%= md('`nil`') %> + <%= md('`expanded`') %> <%= md("Adds the `sage-expandable-card--expanded` class to the block level `sage-expandable-card` and allows you to load the expandable card body expanded") %> @@ -28,3 +34,8 @@ <%= md('String') %> <%= md('`nil`') %> + + <%= md('`sage_expandable_card_custom_header`') %> + <%= md('This area can be used in order to provide custom header content. This should be used in conjunction with the `align_trigger` option.') %> + + From 9bf245ea22b98890bb0e00d65cc674f04c0623ef Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 11:52:23 -0700 Subject: [PATCH 11/15] fix(expandablecard): styling adjustments --- .../components/_expandable_card.scss | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index d6ed5bbb07..468ddc897b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -19,6 +19,12 @@ $-expandable-card-padding-xs: sage-spacing(xs); &:not(:last-child) { margin-bottom: sage-spacing(); } + + .sage-expandable-card__header { + padding: sage-spacing(); + padding-bottom: 0; + margin-bottom: -#{sage-spacing(xs)}; + } } } @@ -86,6 +92,8 @@ $-expandable-card-padding-xs: sage-spacing(xs); height: 100%; border-radius: rem(14px); } + + } } @@ -96,13 +104,13 @@ $-expandable-card-padding-xs: sage-spacing(xs); } // NOTE: Styles for align_arrow_right prop added in `_button` - +// styles related to custom header .sage-expandable-card__header { display: grid; grid-auto-columns: auto; grid-auto-flow: column; align-items: center; - gap: 16px; + gap: $-expandable-card-padding; .sage-expandable-card__trigger::before { margin: 0; } @@ -116,3 +124,22 @@ $-expandable-card-padding-xs: sage-spacing(xs); order: 1; } } + + +// styles related to custom header when used in accordian +.sage-accordion { + .sage-expandable-card__header { + .sage-btn--subtle::after { + width: rem(32px); + height: rem(32px); + padding: inherit; + border-radius: sage-border(radius-round); + } + .sage-expandable-card__trigger { + align-items: center; + justify-content: center; + padding: 0; + border-radius: sage-border(radius-round); + } + } +} From 35020ad7b02bb81f46c3da33ed7caf4046cefc02 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 11:53:08 -0700 Subject: [PATCH 12/15] fix(expandablecard): remove duplicate class name --- packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx index 0f3ca086b2..2109efdaae 100644 --- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx +++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx @@ -38,7 +38,6 @@ export const ExpandableCard = ({ 'sage-expandable-card', { 'sage-expandable-card--align-arrow-right': alignArrowRight, - 'sage-expandable-card': !isExpanded, 'sage-expandable-card--expanded': isExpanded } ); From cc4f20b00a773c821f0c22bc366a233aacdbabbf Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 27 Jul 2023 11:53:46 -0700 Subject: [PATCH 13/15] fix(expandablecard): update targeting to account for new markup --- packages/sage-system/lib/accordion-panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sage-system/lib/accordion-panel.js b/packages/sage-system/lib/accordion-panel.js index 9527e5513b..c57e6ff186 100644 --- a/packages/sage-system/lib/accordion-panel.js +++ b/packages/sage-system/lib/accordion-panel.js @@ -48,7 +48,7 @@ Sage.accordion = (function () { // Toggle target const toggle = el.getAttribute('aria-expanded') === 'true'; el.setAttribute('aria-expanded', !toggle); - el.parentNode.classList.toggle('sage-expandable-card--expanded'); + el.closest('.sage-expandable-card').classList.toggle('sage-expandable-card--expanded') } // In a single panel accordion, this closes all panels that are not the current target @@ -66,7 +66,7 @@ Sage.accordion = (function () { function init(el) { const header = el; - const body = el.parentNode.querySelector(`[${JS_ACCORDION_ROOT}="${JS_ACCORDION_BODY}"]`); + const body = el.closest('.sage-expandable-card').querySelector(`[${JS_ACCORDION_ROOT}="${JS_ACCORDION_BODY}"]`); // Ensure there's a corresponding body if (!body) { From 6924856e0491d7b259ffc790d2333403d427aaba Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Fri, 28 Jul 2023 08:19:57 -0400 Subject: [PATCH 14/15] feat: allow the form select component to receive additional attributes --- .../components/form_select/_preview.html.erb | 30 +++++++++++++++++++ .../_sage_form_select.html.erb | 1 + 2 files changed, 31 insertions(+) diff --git a/docs/app/views/examples/components/form_select/_preview.html.erb b/docs/app/views/examples/components/form_select/_preview.html.erb index 33a7062412..c363e186e5 100644 --- a/docs/app/views/examples/components/form_select/_preview.html.erb +++ b/docs/app/views/examples/components/form_select/_preview.html.erb @@ -145,4 +145,34 @@ ] } %> + +

Example on how to pass additional attributes to the component

+<%= sage_component SageFormSelect, { + name: "Consoles", + component_attributes: { + onChange: "handleOnChange(this)", + "my-attribute": "hello" + }, + select_options: [ + { + text: "X-Box", + value: "x-box" + }, + { + text: "PlayStation", + value: "playstation" + }, + { + text: "Nintendo Switch", + value: "switch" + }, + ] +} %> +

Note: For a fully styled dropdown selector, see the Dropdown component.

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb index 9acb0404c3..b8c5652a7e 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb @@ -17,6 +17,7 @@ name="<%= select_id %>" id="<%= select_id %>" <%= "disabled" if component.disabled %> + <%= component.generated_component_attributes.html_safe %> > <% if component.select_options.present? %> <% component.select_options.each do |option| %> From 92c84b41eea01cb00802dde02ecc83b1c9bef6f9 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Fri, 28 Jul 2023 08:32:33 -0700 Subject: [PATCH 15/15] docs(expandablecard): prop docs adjustment --- .../views/examples/components/expandable_card/_props.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/app/views/examples/components/expandable_card/_props.html.erb b/docs/app/views/examples/components/expandable_card/_props.html.erb index 8310bc35ec..e5c974c152 100644 --- a/docs/app/views/examples/components/expandable_card/_props.html.erb +++ b/docs/app/views/examples/components/expandable_card/_props.html.erb @@ -6,8 +6,8 @@ <%= md('`align_trigger`') %> - <%= md("Aligns trigger to left or right. Can be used in conjunction with the `sage_expandable_card_custom_header` section. ") %> - <%= md('String') %> + <%= md("Aligns trigger button to left or right. Can be used in conjunction with the `sage_expandable_card_custom_header` section.") %> + <%= md('`"left"`, `"right"`') %> <%= md('`nil`') %>