A control for an expandable section within a page.
💰 User value
Allows information to be progressively disclosed upon request.
📚 User Stories
If relevant, describe the high-level functionality as user stories.
As an ICDS user:
I need expandable and collapsible accordion
So that i can progressively disclose information.
As a user
I need to select whether to allow only the opneing of one accordion, or the opening of multiple,
So that I can cater for different scenarios.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Single Accordion
Size: Options = Small, Medium, Large. Default = Medium.
Icon: Options = On, Off. Default = On.
Background: Options = Dark, Light. Default = Light.
Property: Options = Collapsed, Expanded. Default = Collapsed.
State: Options = Default, Hover, Pressed, Disabled, Focussed. Default = Default.
Content: Options = Body Text, Slotted. Default = Body Text.
Animation: 100ms for change in state e.g. hover, pressed etc, 300ms for expanding and collapsing each accordion.
Property:
Given that a collapsed accordion exists on a page
When the accordion header is clicked
Then the expanded view should appear.
Given that an expanded accordion exists on a page
When the accordion header is clicked
Then the collapsed view should appear.
Size:
Given that an accordion exists on a page
When size is changed to small
Then the small accordion should appear.
Given that an accordion exists on a page
When size is changed to medium
Then the medium accordion should appear.
Given that an accordion exists on a page
When size is changed to large
Then the large accordion should appear.
States:
Given that a collapsed accordion exists on a page
When it is hovered
Then the hovered view should appear.
Given that a collapsed accordion exists on a page
When it is pressed
Then the pressed view should appear.
Given that an expanded accordion exists on a page
When the accordion header is hovered
Then the hovered view should appear.
Given that an expanded accordion exists on a page
When the accordion header is pressed
Then the pressed view should appear.
Given that an accordion exists on a page
When it is disabled
Then the disabled view should appear.
Given that a collapsed accordion exists on a page
When it is focussed on
Then the focussed view should appear.
Given that an expanded accordion exists on a page
When accordion header is focussed on
Then the focussed view should appear.
Background Colour:
Given that an accordion exists on a page
When the background boolean is changed to dark
Then the dark background accordion should appear
Given that an accordion exists on a page
When the background boolean is changed to light
Then the light background accordion should appear
Icon:
Given that an accordion exists on a page
When the icon boolean is changed to on
Then the icon should appear
Given that an accordion exists on a page
When the icon boolean is changed to off
Then the icon should not appear
Content:
Given that an accordion exists on a page
When accordion content is changed to slotted option
Then the slotted body section should appear.
Given that an accordion exists on a page
When accordion content is changed to body text option
Then the body text section should appear.
Accordion Group
Background: Options = Dark, Light. Default = Light.
Property: Options = Collapsed, Expanded. Default = Collapsed.
Content: Options = Accordion Group, Parent Group. Default = Accordion Group
Number of Accordions: Options = 1-8. Default = 3.
Title Section: Options = On, Off. Default = On.
Title Text: Options = On, Off. Default = On. (Only available with Title Section On)
See all / Hide all: Options = On, Off. Default = On. (Only available with Title Section On)
Animation: 100ms for change in state e.g. hover, pressed etc, 300ms for expanding and collapsing each accordion.
Accordion groups have the option to be open all at the same time or when one is opened all of the others close, this is functionality that should be left to the users discretion on how they would like to implement it.
Property:
Given that a collapsed accordion group exists on a page
When the a single accordion is clicked
Then the expanded view should appear for that single accordion.
Given that a single expanded accordion within a group exists on a page
When the single accordion header is clicked
Then the collapsed view should appear for that single accordion.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page
When see all is clicked
Then the expanded view should appear for all accordions and the see all button should change to hide all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page
When hide all is clicked
Then the collapsed view should appear for all accordions and the hide all button should change back to see all.
State:
Given that a collapsed accordion group exists on a page
When a single accordion within the group is hovered on
Then the hovered view should appear for that accordion.
Given that a collapsed accordion group exists on a page
When a single accordion within the group is pressed
Then the pressed view should appear for that accordion.
Given that an expanded accordion exists within an accordion group on a page
When the expanded accordion header is hovered
Then the hovered view should appear.
Given that an expanded accordion exists within an accordion group on a page
When the expanded accordion header is pressed
Then the pressed view should appear.
Given that an accordion group exists on a page
When one of the single accordions within the group is disabled
Then the disabled view should appear for that accordion.
Given that a collapsed accordion group exists on a page
When one of the single accordions is focussed on
Then the focussed view should appear for that accordion.
Given that an expanded accordion exists within an accordion group on a page
When the expanded accordion header is focussed on
Then the focussed view should appear.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page
When see all is hovered
Then the hovered view should appear for see all.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page
When see all is pressed
Then the pressed view should appear for see all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page
When hide all is hovered
Then the hovered view should appear for hide all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page
When hide all is pressed
Then the pressed view should appear for hide all.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page
When see all is focussed on
Then the focussed view should appear for see all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page
When hide all is focussed on
Then the focussed view should appear for hide all.
Title Section:
Given that an accordion group exists on a page with the title section
When title section is turned to off
Then the accordion group remains and the title section collapses
Given that an accordion group exists on a page without the title section
When title section is turned to on
Then the accordion group remains and the title section is added
Title Text:
Given that an accordion group exists on a page with title text
When title text is turned to off
Then the title section remains but without title text
Given that an accordion group exists on a page without the title text
When title text is turned to on
Then the title section remains and the title text is restored
See all / Hide all:
Given that an accordion group exists on a page with the see all / hide all button
When the button is turned to off
Then the title section remains but without see all hide all button
Given that an accordion group exists on a page without the see all / hide all button
When the button is turned to on
Then the title section remains with the see all hide all button restored
Background Colour:
Given that an accordion group exists on a page
When the background boolean is changed to dark
Then the dark background accordion group should appear
Given that an accordion group exists on a page
When the background boolean is changed to light
Then the light background accordion group should appear
Number of accordions:
Given that an accordion group exists on a page
When the accordion boolean is switched on for an accordion (option to have max of 8 and min of 0)
Then an accordion is added to the group
Given that an accordion group exists on a page
When the accordion boolean is switched off for an accordion (option to have max of 8 and min of 0)
Then an accordion is removed from the group
Content:
Given that an accordion group exists on a page
When accordion content is changed to parent group option
Then the parent group section should appear.
Given that an accordion group exists on a page
When accordion content is changed to accordion group option
Then the accordion group section should appear.
jd239
commented
1 year ago
Summary
A control for an expandable section within a page.
💰 User value
Allows information to be progressively disclosed upon request.
📚 User Stories
If relevant, describe the high-level functionality as user stories.
As an ICDS user: I need expandable and collapsible accordion So that i can progressively disclose information.
As a user I need to select whether to allow only the opneing of one accordion, or the opening of multiple, So that I can cater for different scenarios.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Single Accordion Size: Options = Small, Medium, Large. Default = Medium. Icon: Options = On, Off. Default = On. Background: Options = Dark, Light. Default = Light. Property: Options = Collapsed, Expanded. Default = Collapsed. State: Options = Default, Hover, Pressed, Disabled, Focussed. Default = Default. Content: Options = Body Text, Slotted. Default = Body Text. Animation: 100ms for change in state e.g. hover, pressed etc, 300ms for expanding and collapsing each accordion.
Property: Given that a collapsed accordion exists on a page When the accordion header is clicked Then the expanded view should appear.
Given that an expanded accordion exists on a page When the accordion header is clicked Then the collapsed view should appear.
Size: Given that an accordion exists on a page When size is changed to small Then the small accordion should appear.
Given that an accordion exists on a page When size is changed to medium Then the medium accordion should appear.
Given that an accordion exists on a page When size is changed to large Then the large accordion should appear.
States: Given that a collapsed accordion exists on a page When it is hovered Then the hovered view should appear.
Given that a collapsed accordion exists on a page When it is pressed Then the pressed view should appear.
Given that an expanded accordion exists on a page When the accordion header is hovered Then the hovered view should appear.
Given that an expanded accordion exists on a page When the accordion header is pressed Then the pressed view should appear.
Given that an accordion exists on a page When it is disabled Then the disabled view should appear.
Given that a collapsed accordion exists on a page When it is focussed on Then the focussed view should appear.
Given that an expanded accordion exists on a page When accordion header is focussed on Then the focussed view should appear.
Background Colour: Given that an accordion exists on a page When the background boolean is changed to dark Then the dark background accordion should appear
Given that an accordion exists on a page When the background boolean is changed to light Then the light background accordion should appear
Icon: Given that an accordion exists on a page When the icon boolean is changed to on Then the icon should appear
Given that an accordion exists on a page When the icon boolean is changed to off Then the icon should not appear
Content: Given that an accordion exists on a page When accordion content is changed to slotted option Then the slotted body section should appear.
Given that an accordion exists on a page When accordion content is changed to body text option Then the body text section should appear.
Accordion Group Background: Options = Dark, Light. Default = Light. Property: Options = Collapsed, Expanded. Default = Collapsed. Content: Options = Accordion Group, Parent Group. Default = Accordion Group Number of Accordions: Options = 1-8. Default = 3. Title Section: Options = On, Off. Default = On. Title Text: Options = On, Off. Default = On. (Only available with Title Section On) See all / Hide all: Options = On, Off. Default = On. (Only available with Title Section On) Animation: 100ms for change in state e.g. hover, pressed etc, 300ms for expanding and collapsing each accordion.
Accordion groups have the option to be open all at the same time or when one is opened all of the others close, this is functionality that should be left to the users discretion on how they would like to implement it.
Property: Given that a collapsed accordion group exists on a page When the a single accordion is clicked Then the expanded view should appear for that single accordion.
Given that a single expanded accordion within a group exists on a page When the single accordion header is clicked Then the collapsed view should appear for that single accordion.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page When see all is clicked Then the expanded view should appear for all accordions and the see all button should change to hide all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page When hide all is clicked Then the collapsed view should appear for all accordions and the hide all button should change back to see all.
State: Given that a collapsed accordion group exists on a page When a single accordion within the group is hovered on Then the hovered view should appear for that accordion.
Given that a collapsed accordion group exists on a page When a single accordion within the group is pressed Then the pressed view should appear for that accordion.
Given that an expanded accordion exists within an accordion group on a page When the expanded accordion header is hovered Then the hovered view should appear.
Given that an expanded accordion exists within an accordion group on a page When the expanded accordion header is pressed Then the pressed view should appear.
Given that an accordion group exists on a page When one of the single accordions within the group is disabled Then the disabled view should appear for that accordion.
Given that a collapsed accordion group exists on a page When one of the single accordions is focussed on Then the focussed view should appear for that accordion.
Given that an expanded accordion exists within an accordion group on a page When the expanded accordion header is focussed on Then the focussed view should appear.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page When see all is hovered Then the hovered view should appear for see all.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page When see all is pressed Then the pressed view should appear for see all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page When hide all is hovered Then the hovered view should appear for hide all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page When hide all is pressed Then the pressed view should appear for hide all.
Given that a collapsed accordion group with see all/ hide all functionality exists on a page When see all is focussed on Then the focussed view should appear for see all.
Given that an expanded accordion group with see all/ hide all functionality exists on a page When hide all is focussed on Then the focussed view should appear for hide all.
Title Section: Given that an accordion group exists on a page with the title section When title section is turned to off Then the accordion group remains and the title section collapses
Given that an accordion group exists on a page without the title section When title section is turned to on Then the accordion group remains and the title section is added
Title Text: Given that an accordion group exists on a page with title text When title text is turned to off Then the title section remains but without title text
Given that an accordion group exists on a page without the title text When title text is turned to on Then the title section remains and the title text is restored
See all / Hide all: Given that an accordion group exists on a page with the see all / hide all button When the button is turned to off Then the title section remains but without see all hide all button
Given that an accordion group exists on a page without the see all / hide all button When the button is turned to on Then the title section remains with the see all hide all button restored
Background Colour: Given that an accordion group exists on a page When the background boolean is changed to dark Then the dark background accordion group should appear
Given that an accordion group exists on a page When the background boolean is changed to light Then the light background accordion group should appear
Number of accordions: Given that an accordion group exists on a page When the accordion boolean is switched on for an accordion (option to have max of 8 and min of 0) Then an accordion is added to the group
Given that an accordion group exists on a page When the accordion boolean is switched off for an accordion (option to have max of 8 and min of 0) Then an accordion is removed from the group
Content: Given that an accordion group exists on a page When accordion content is changed to parent group option Then the parent group section should appear.
Given that an accordion group exists on a page When accordion content is changed to accordion group option Then the accordion group section should appear.
✏ Designs
If there's a Figma design file (or other mock-up), include it here. https://www.figma.com/file/AAUDnF90gNxUfjwDOEHZDp/branch/mwZT2ZlMSEwpUMiIL2849d/ICDS-V2.1?type=design&node-id=17916-106477&t=j5iPBsFMJ6BBUvHe-0
🧾 Guidance
If there's written guidance or documentation, include it here.