We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-accordion-item label="This is a standard label">
    Nested content is what will be shown when the accordion-item is expanded.
  </anchor-accordion-item>
</template>

<script setup>
import { AnchorAccordionItem } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-accordion-item label="This is a standard label">
    Nested content is what will be shown when the accordion-item is expanded.
  </anchor-accordion-item>
</template>

Box Variant

Pass the variant prop with value box to display the accordion item with a border and margin below.

<anchor-accordion-item label="This is a standard label" variant="box">
  Nested content is what will be shown when the accordion-item is expanded.
</anchor-accordion-item>

Expanded

Pass the is-expanded prop to start the accordion item in an expanded state.

<anchor-accordion-item label="This is a standard label" is-expanded>
  I will start expanded.
</anchor-accordion-item>

Custom Label Slot

Use the label slot to provide custom content in the accordion header instead of plain text.

<anchor-accordion-item variant="box">
  <div slot="label">
    <strong>This is a custom label</strong>
  </div>
  Nested content is what will be shown when the accordion-item is expanded.
</anchor-accordion-item>

Custom Chevron Icon

Use the icon, icon-size, and icon-stroke props to customize the chevron icon appearance.

<anchor-accordion-item icon="chevron-down" icon-size="large" icon-stroke="1">
  Nested content is what will be shown when the accordion-item is expanded.
</anchor-accordion-item>

Heading Level

Use the heading-level prop to set the HTML heading tag for the accordion header (1-6). Defaults to a div when not set.

<anchor-accordion-item label="Heading Level 2" heading-level="2">
  This accordion header renders as an h2 element for better semantic structure.
</anchor-accordion-item>

Slots

CSS variables

With CSS variables you can easily customize parts of the Accordion Item component. See the table below for a list of available variables.

Accessibility

• The accordion header acts as a button with role button.
• Keyboard support for Space and Enter to toggle expansion.
• Arrow key navigation: Arrow Up and Arrow Down to move focus between accordion items.
• Home and End to jump to the first or last accordion item.
• The header button receives aria-expanded (true/false) to indicate expansion state.
• The header button receives aria-controls pointing to the content panel ID.

API

AccordionItem

This component can expand and contract nested content. If you want to have a regular "Accordion" behaviour where only one item can be expanded at a time you need to insert your AccordionItems inside an Accordion.

See Accordion component for an example of this.

Usage

Basic accordion-item

<anchor-accordion-item label="This is a standard label">
  Nested content is what will be shown when the accordion-item is expanded.
  <p>Markup is supported</p>
  <p>And so is other anchor components</p>
  <anchor-button text="Yay!" variant="primary" color="brand" icon="ChevronRight" icon-placement="right" />
</anchor-accordion-item>

The box variant has a different look which adds a border and some margin below.

<anchor-accordion-item label="This is a standard label" variant="box"> Nested content is what will be shown when the accordion-item is expanded. </anchor-accordion-item>

Starting expanded

You can utilize the isExpanded prop to accomplish this. Either by code or by using the html attribute.

Here is an example where we use the attribute

<anchor-accordion-item label="This is a standard label" is-expanded> I will start expanded </anchor-accordion-item>

Customizing the label

In some cases you might need to customize the label inside the header. This can be accomplished by using the label slot

<anchor-accordion-item variant="box">
  <div slot="label">
    <h1>This content (including the div with the slot attribute) will replace the label</h1>
  </div>
  Nested content is what will be shown when the accordion-item is expanded.
</anchor-accordion-item>

Customizing the chevron

In some cases you might need to change the size and/or stroke of the chevron icon. You can do this by using the iconSize and iconStroke props.

Change the icon size:

<anchor-accordion-item icon-size="xlarge"> Nested content is what will be shown when the accordion-item is expanded. </anchor-accordion-item>

Change the stroke size:

<anchor-accordion-item icon-stroke="1"> Nested content is what will be shown when the accordion-item is expanded. </anchor-accordion-item>

Exposed CSS variables

The accordion-item exposes several CSS variables that allows you to control parts of the design with more nuance.

The exposed variables on shadow-root are:

--padding-size: var(--spacing-x5);
--padding-bottom: var(--padding-vertical);
--padding-horizontal: calc(var(--padding-size) * 2);
--padding-shorthand: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
--padding-vertical: var(--padding-size);
--padding-top: var(--padding-vertical);
--padding-left: var(--padding-horizontal);
--padding-right: var(--padding-horizontal);

The exposed variables on the default slot are (by default set to the same values defined in the shadow-root):

--padding-size
--padding-top
--padding-right
--padding-bottom
--padding-left
--padding-shorthand

Example use of the CSS variables

Inject your desired content in the default slot at the first level using the .content class.4px

<anchor-accordion-item class="my-accordion-item">
  <my-content class="content" />
  <my-content class="content" />
  <my-content class="content" />
</anchor-accordion-item>

Each top level element with the content class applied will the automatically inherit the same padding as is defined in the header of the accordion-item.

Both the accordion-item css variables, and the ones in your desired content is then connected, but can also be overriden seperately:

.my-accordion-item {
  --padding-size: 10px; /* This will effect all the padding, both in .my-accordion-item and .content at lower specificity */
}
.content {
  --padding-shorthand: var(--padding-size) var(--padding-size * 3); /* This will only affect the padding in .content, but at a higher specificity */
}

Example usage of Heading Level

The renders its header using whatever HTML heading tag you choose via the heading-level attribute (e.g.

when you set heading-level="3"). Under the hood it looks like:

<anchor-accordion>
  <anchor-accordion-item label="First accordion-item" heading-level="3">
    <p>Hello world</p>
  </anchor-accordion-item>
  <anchor-accordion-item label="Second accordion-item" heading-level="3">
    <p>Hello world. Wassuuuup!</p>
  </anchor-accordion-item>
  <anchor-accordion-item label="Third accordion-item" heading-level="3">
    <p>
      Chislic doner rump bresaola tail alcatra. Short ribs leberkas picanha, salami meatloaf drumstick cupim kielbasa. T-bone landjaeger pancetta drumstick cow ham biltong, cupim
      kielbasa. Ground round shank pork loin, ribeye salami landjaeger drumstick beef turducken bacon corned beef. Turducken boudin ham prosciutto. Andouille shankle t-bone rump
      landjaeger corned beef boudin pork chop pig tri-tip. Prosciutto biltong hamburger, doner capicola corned beef shankle pork loin pork.
    </p>
  </anchor-accordion-item>
</anchor-accordion>

Note

• HeadingTag will be h1–h6 based on heading-level.
• Classes: header (base styles) and header--vertical-align-[top|center|bottom]
• Shadow-DOM part: accordion-header

/* lands inside the component’s shadow DOM */
anchor-accordion-item::part(accordion-header) {
  font-size: var(--s-size-text-default);
  margin: var(--s-size-outline-aura-offset);
  font-weight: var(--s-font-weight-heading-emphasized);
}

Properties

Events

Shadow Parts

CSS Custom Properties

Dependencies

Used by

• anchor-notification-footer

Depends on

• anchor-icon

Graph

graph TD;
  anchor-accordion-item --> anchor-icon
  anchor-notification-footer --> anchor-accordion-item
  style anchor-accordion-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS