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/ui-library

Usage

You wrap your accordion-items in the accordion and it will handle only keeping one item at a time open.

  <script type="module">
    import { defineCustomElement as defineAccordionElement } from '@tryg/ui-library/dist/components/anchor-accordion';
    import { defineCustomElement as defineAccordionItemElement } from '@tryg/ui-library/dist/components/anchor-accordion-item';
    defineAccordionElement();
    defineAccordionItemElement();
  </script>
  <anchor-accordion>
    <anchor-accordion-item label="First accordion-item">
      <p>Hello world</p>
    </anchor-accordion-item>
    <anchor-accordion-item label="Second accordion-item">
      <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>

  <script type="module">
    import { defineCustomElements } from '@tryg/ui-library/dist/loader';
    defineCustomElements();
  </script>
  <anchor-accordion>
    <anchor-accordion-item label="First accordion-item">
      <p>Hello world</p>
    </anchor-accordion-item>
    <anchor-accordion-item label="Second accordion-item">
      <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>

Expand multiple items

If you set the keep-open prop, then the Accordion will allow multiple items to be expanded at the same time.

<anchor-accordion style="width:100%;" keep-open>
  <anchor-accordion-item label="First accordion-item">
    <p>Hello world</p>
  </anchor-accordion-item>
  <anchor-accordion-item label="Second accordion-item">
    <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>

Variants

Accordion has 2 variants: default, and box.

<anchor-accordion keep-open>
  <anchor-accordion-item label="First accordion-item">
    <p>Hello world</p>
  </anchor-accordion-item>
  <anchor-accordion-item label="Second accordion-item">
    <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>

Box variant

<anchor-accordion keep-open>
  <anchor-accordion-item label="First accordion-item">
    <p>Hello world</p>
  </anchor-accordion-item>
  <anchor-accordion-item label="Second accordion-item">
    <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>

Start content

If you want to display some content before the accordion items, you can set 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>

Custom Indicator / Icon

Accordion items have a property called icon. You can use it to customize the open/close indicator.

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

Accordion Item Slots

• label: The content before the accordion item.
• action: The element that indicates the open/close state of the accordion item.
• content: The accordion item content.

Accessibility

• Keyboard event support for Space, Enter, Arrow Up, Arrow Down and Home / End keys.
• Keyboard focus management and cross browser normalization.
• aria-expanded attribute for the accordion item.
• aria-controls attribute for the accordion item.

API

anchor-accordion

Properties

Built with StencilJS

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

Built with StencilJS