Accordion

Usage

An Accordion is a container-based component that organizes content within collapsible sections. It allows users to quickly browse through information without scrolling through lengthy content. Each section of the Accordion can be expanded or collapsed, showing or hiding its content. They are particularly useful in situations where space is limited, or when users need quick access to sections of related information.

Types

Accordions can be configured in different ways to suit specific use cases:

Single Expand: Only one accordion section can be open at a time. Opening a new section automatically collapses the currently open section. Ideal for scenarios where users typically need to focus on only one piece of content at a time.
Multi Expand: Multiple sections can be open simultaneously. Users can expand or collapse any number of sections based on their needs. Useful when comparing or cross-referencing multiple pieces of content.
With subtitle - An Accordion Item can also optionally have the subtitle that is visible when collapsed to give more hint about the content.

Anatomy and Behavior

Accordion Item – Represents each collapsible content block and is in whole a clickable area of the component.
Title – The visible title or summary of the Content.
Icon - optional
Subtitle - optional element that allows the Accordion Item to present a hint of the content without forcing user to open items each time. It is usually used as a dynamic element that is generated based on the user input within the Accordion Item Content. It can go maximum to 2 lines.
Expand/Collapse arrow - changes direction when expanding and collapsing an Accordion Item, and helps communicate its state.
Content – The detailed information that appears when the Accordion Item is expanded (e.g., text, images, or interactive elements).
Separator - if multiple Accordion Items appear in sequence it aids to visually separate them.

Accordion List - A parent container wrapping all Accordion Items, managing layout and spacing, that can change depending on the use case and available space.

Behavior

Expand/Collapse: Clicking on an Accordion Item’s header toggles its expanded state.
For Single Expand Accordions, focus management may shift from one open header to another when toggled.
Animation transition: Ease out - 300ms (refer to Figma Dev Mode).

States

Accordion Items can either be in a Collapsed (by default) or in Expanded states and both have the: Default, :hover, :active, :focus and disabled states. :hover and :active states are only communicated through the cursor style change.

Tokens

SCSS Variable

Value

$accordion-color

--bds-brand-primary-color

$accordion-subtitle-color

--color-grey-40

$accordion-separator-color

--color-grey-80

$accordion-outline-color--focus

--color-azure-45

$accordion-primary-color--locked

--bds-brand-primary-color-locked

$accordion-subtitle-color--locked

--color-grey-70

$accordion-separator-color--locked

--color-grey-80

Properties

export interface AccordionProps {
  accordionElements?: AccordionElementsProps[];
  multiExpand?: boolean;
  defaultOpen?: number;
  type?: AccordionType;
};

export type AccordionType = "generic" | "custom"


export interface AccordionElementsProps {
  id: string;
  title?: string; // Existing title prop
  label?: string; // New label prop
  subtitle?: string;
  icon?: IconName;
  isDisabled?: boolean;
};

INFO

If both label and title are provided in an accordion element, the label will take precedence and be displayed. The title will only be used if label is not provided or is null/undefined.

Developer Notes

The component accepts an array of accordionElements via the accordionElements prop, where each item represents an accordion section.
Each item in the accordionElements array should have a title and id property (string) for the header. Then it can have a subtitle property (string)
Content for each accordion item is provided through named slots, using the index, where index corresponds to the item's position in the accordionElements array.
The prop defaultOpen takes the index (number) of the element in the accordionElements array that we want to be open by default when the component is mounted. This is a conditional prop.

vue

<script>
const testAccordionElements = [
  {
      title: "Accordion 0",
      subtitle: "Accordion 0 subtitle",
      icon: "folder",
      id:"0"
  },
  {
      title: "Lorem Ipsum Accordion",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      icon: "eye",
      isDisabled: true,
      id:"1"
  },
  {
      title: "Accordion 2",
      subtitle: "Accordion 2 subtitle",
      icon: "folder",
      id:"2"
  },
]
</script>

<template>

  <Accordion :accordionElements="testAccordionElements" :defaultOpen=0 :multiExpand="true">
    <!-- 0 is the index of the Accordion element -->
    <template #0> 
      <div> Here goes the content of accordionElements 0</div>    
    </template>
        <!-- 1 is the index of the Accordion element -->
    <template #1>
     <div>Here goes the content of accordionElements 1</div>
    </template>
    <!-- 2 is the index of the Accordion element -->
    <template #2>
     <div>Here goes the content of accordionElements 2</div>
    </template>
  </Accordion>

</template>

This code will generate the Accordion:

Accordion 0

Accordion 0 subtitle

Lorem Ipsum Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Accordion 2

Accordion 2 subtitle

INFO

Note: The component emits a selected-group event when an accordion item is clicked, passing the id of the clicked item

This code will generate the Accordion on type="custom" for implementation on JVA

Type="custom" is only for use in JVA applications.
For all other cases, use type="generic" which is the default

vue

<template setup>
  <Accordion :accordionElements="testAccordionElements" :defaultOpen=0 :multiExpand="true" type="custom">
    <template #item="{ item: data }">
      <br/>
        <div> Here goes the content of accordionElements {{data.id}}</div>
      <br/>
    </template>
  </Accordion>
</template>

Accordion 0

Accordion 0 subtitle

Lorem Ipsum Accordion

Accordion 2

Accordion 2 subtitle

Accordion ​

Usage ​

Types ​

Anatomy and Behavior ​

Behavior ​

States ​

Tokens ​

Properties ​

Developer Notes ​