Accordion

[Landon Durnan]

Figma link

https://www.figma.com/file/SHY7Z7PbcVssjIJVuJ3IwU/%F0%9F%8D%81-Maker?node-id=5400%3A7158

Description

We'd like to add a standard accordion component to Maker with flexibility to support passing in our existing text component to control the visual output / styling.

• Accordions should be able to work with a single item or multiple items.
• We need the ability to opt-in to different behavior for the accordion items to have one open at a time or multiple at a time
• We need slots for secondary information as part of the selectable item (or header)
• We need hover / active states to help communicate interaction and accessibility
• We should support all recommended ARIA labels and other HTML considerations: https://a11y-style-guide.com/style-guide/section-navigation.html
• We need support for an inline accordion with a different visual style, implementation as a separate component or variant on the accordion needs some additional discovery.

The current design still needs a few interaction state updates. Disabled is likely premature, but we do need hover / active / focus states -- likely similar to what we do with buttons.

API

The Accordion component from Orbit may be a good starting point: https://github.com/square/orbit/blob/master/src/components/Accordion/doc/index.md

However, with the additional flexibility for the accordion text we will likely need a slot approach over passing a string in as a prop.

Internally we should consider leveraging the row component (currently a util with the idea we'd move it to a public component): https://github.com/square/maker/tree/master/src/utils/Row. (see usage in Menu: https://github.com/square/maker/blob/master/src/components/Menu/src/MenuOption.vue)

Consumer template API

<m-accordion>
  <m-accordion-item>
    <template slot="title">Item title</template>
    <template slot="secondary">Secondary information</template>
    <template slot="content">Lorem ipsum</template>
  </m-accordion-item>
  <m-accordion-item>
    <template slot="title">Item title</template>
    <template slot="secondary">Secondary information</template>
    <template slot="content">Lorem ipsum</template>
  </m-accordion-item>
</m-accordion>

props:

• v-model (optional) - control which element is open
• variant - TBD depending on "inline" option

slots:

• title
• secondary
• content

events:

• accordion item change open / close, pass the v-model

Theme support

• The accordion component should be transparent, but inherit the text colors and fonts automatically from the theme. If using the Text component in the available slots, this should happen already. If just using normal text then we'll just use the body text in the theme.
• There may be some generated interaction colors, potentially leveraging existing neutrals or something similar to what we do with button states.
• The inline accordion should inherit the primary color