Back to Panel-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Expandable panels contain creation flows and allow lightweight editing of an element.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/panel@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Remember to use the correct aria-tags/roles, I.E. aria-expanded, aria-controls, tabindex and role="region". Read more about it here.

Default

<div class="if panel is-expandable [is-open]">
  <div class="if title" aria-expanded="[true|false]" aria-controls="exp1" tabindex="0">Tips och råd</div>
  <div class="if content" role="region" id="exp1" tabindex="0">
    <button class="if button primary" type="button">A button</button>
  </div>
</div>

Selectable expandable

<div class="if panel is-expandable is-selectable">
  <input checked type="radio" id="selectable-expandables-radio-1" class="if radio-button" name="radios" />
  <label for="selectable-expandables-radio-1" class="if title" aria-controls="exp1" aria-expanded="false" tabindex="0"
    >Select me</label
  >
  <div class="if content" role="region" id="exp1">
    <button class="if button primary" type="button">A duc</button>
  </div>
</div>

Grouped panels/expandable

<div class="if panels">
  <div class="if panel is-expandable light">
    <div class="if title" aria-expanded="false" aria-controls="exp-main-1" tabindex="0">
      Expelliarmus
    </div>
    <div class="if content" role="region" id="exp-main-1" tabindex="-1">
      <p class="if text lead center">
        Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
        Försäkringen är en trygghet för dig som äger hus.
      </p>
      <p class="if text body center">
        En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att
        värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och
        familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
      </p>
      <div class="if input-wrapper center">
        <button type="button" class="if button primary large">Jämför våra villaförsäkringar</button>
      </div>
    </div>
  </div>
  <div class="if panel is-expandable light">
    <div class="if title" aria-expanded="false" aria-controls="exp-main-2" tabindex="0">
      Expelliarmus
    </div>
    <div class="if content" role="region" id="exp-main-2" tabindex="-1">
      <p class="if text lead center">
        Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
        Försäkringen är en trygghet för dig som äger hus.
      </p>
      <p class="if text body center">
        En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att
        värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och
        familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
      </p>
      <div class="if input-wrapper center">
        <button type="button" class="if button primary large">Jämför våra villaförsäkringar</button>
      </div>
    </div>
  </div>
  <div class="if panel is-expandable light">
    <div class="if title" aria-expanded="false" aria-controls="exp-main-3" tabindex="0">
      Expelliarmus
    </div>
    <div class="if content" role="region" id="exp-main-3" tabindex="-1">
      <p class="if text lead center">
        Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
        Försäkringen är en trygghet för dig som äger hus.
      </p>
      <p class="if text body center">
        En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller vattenskada eller att
        värmepannan går sönder. I villaförsäkringen ingår reseskydd och försäkring för de personliga saker du och
        familjen äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
      </p>
      <div class="if input-wrapper center">
        <button type="button" class="if button primary large">Jämför våra villaförsäkringar</button>
      </div>
    </div>
  </div>
</div>

If you want to group the panels/expandables (bring them closer together), wrap them with .if.panels:

With columns

Column 1
Column 2
Column 3
<div class="if panel">
  <div class="if title">
    <div class="if grid across">
      <div class="if row">
        <div class="if col-12--xs col-4--md">Column 1</div>
        <div class="if col-12--xs col-4--md">Column 2</div>
        <div class="if col-12--xs col-4--md">Column 3</div>
      </div>
    </div>
  </div>
</div>

Grouped

Column 1
Column 2
Column 3
Column 1
Column 3
Column 1
Column 3
<div class="if panels">
  <div class="if panel">
    <div class="if title">
      <div class="if grid across">
        <div class="if row">
          <div class="if col-12--xs col-4--md">Column 1</div>
          <div class="if col-12--xs col-4--md">Column 2</div>
          <div class="if col-12--xs col-4--md">Column 3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="if panel">
    <div class="if title">
      <div class="if grid across">
        <div class="if row">
          <div class="if col-12--xs col-8--md">Column 1</div>
          <div class="if col-12--xs col-4--md">Column 3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="if panel">
    <div class="if title">
      <div class="if grid across">
        <div class="if row">
          <div class="if col-12--xs col-8--md">Column 1</div>
          <div class="if col-12--xs col-4--md">Column 3</div>
        </div>
      </div>
    </div>
  </div>
</div>

Expandable

<div class="if panel is-expandable is-open">
  <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
    Tips och råd
  </div>
  <div class="if content" id="exp-usage-1" role="region">
    <button class="if button primary" type="button">Submit</button>
  </div>
</div>

Grouped expandable

<div class="if panels">
  <div class="if panel is-expandable is-open">
    <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
      Tips och råd
    </div>
    <div class="if content" id="exp-usage-1" role="region">
      <button class="if button primary" type="button">Submit</button>
    </div>
  </div>
  <div class="if panel is-expandable">
    <div aria-controls="exp-usage-2" aria-expanded="false" class="if title" tabindex="0">
      Tips och råd
    </div>
    <div class="if content" id="exp-usage-2" role="region">
      <button class="if button primary" type="button">Submit</button>
    </div>
  </div>
  <div class="if panel is-expandable">
    <div aria-controls="exp-usage-3" aria-expanded="false" class="if title" tabindex="0">
      Tips och råd
    </div>
    <div class="if content" id="exp-usage-3" role="region">
      <button class="if button primary" type="button">Submit</button>
    </div>
  </div>
</div>

Selectable

<div class="if panel is-expandable is-selectable is-open">
  <input checked type="radio" id="exp-states-8" class="if radio-button" name="radios" />
  <label for="exp-states-8" class="if title" aria-controls="exp8" aria-expanded="false">Select me</label>
  <div class="if content" role="region" id="exp8">
    <button class="if button primary" type="button">Submit</button>
  </div>
</div>
Edit this section, Opens in new window

Accessibility

To make the component accessible, you want to use the correct aria-*-attributes:

  • Use aria-controls to dictate which content the panel controls
  • Update aria-expanded when the panel is expanded
  • Use tabindex=0 if the whole row is clickable
<div class="if panel is-expandable is-open">
  <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
    Tips och råd
  </div>
  <div class="if content" id="exp-usage-1" role="region">
    <button class="if button primary" type="button">Submit</button>
  </div>
</div>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Split out CSS documentation and JS script (e42d0c4), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The JavaScript for the Panel Component is now a separate package:

@ids-js/panel

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.10.6 (2021-10-18)

Bug Fixes

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.9.1 (2021-09-28)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Expandable component is now renamed to Panel

10.0.0 (2021-02-15)

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

9.2.1 (2021-01-28)

Bug Fixes

  • 🐛 Fix grouping spacing of panels (b2a30f8)

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.36.0 (2020-10-12)

Features

  • 🎸 Add updated focus styling to expandable (e4f7853)

6.22.0 (2020-07-01)

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.21.12 (2020-06-17)

Bug Fixes

  • 🐛 Add support for two lines in expandable panel title (8384f90)

6.17.5 (2020-05-25)

Bug Fixes

  • 🐛 Fix expandable panel spacing inside expandable panel. (96023d9), closes #250660

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

6.11.0 (2020-04-22)

Bug Fixes

  • 🐛 Add sr only text for footer logo link (2971dd9)

6.4.0 (2020-04-01)

Bug Fixes

  • 🐛 Expandable panel title should have underline on hover (50887b3)

6.0.0 (2020-03-23)

Features

  • 🎸 Add panels. Refactor class nomenclature for expandables (c7085ef)

BREAKING CHANGES

  • 🧨 The class names for the expandable component has changed! Please replace

if expandable with if panel is-expandable!

5.1.0 (2020-03-15)

Bug Fixes

  • 🐛 Use correct arrow for open or closed expandable (5bb58fa)

5.0.1-alpha.161 (2020-03-13)

Features

  • 🎸 Add support for selectable expandable (22d09ed)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.150 (2020-03-05)

Bug Fixes

  • 🐛 Adjusting components to baseline grid (5a53cd9)

Features

  • 🎸 Adjust spacing according to baseline layout grid (8e949a2)

5.0.1-alpha.121 (2020-02-17)

Bug Fixes

  • 🐛 Use correct background colors on hover (0309103)

5.0.1-alpha.104 (2020-01-08)

Bug Fixes

  • 🐛 Add missing cursor pointer to expandable title (58fc10f)

5.0.1-alpha.93 (2019-12-10)

Bug Fixes

  • 🐛 Use correct padding for mobile (745bec5)

5.0.1-alpha.91 (2019-12-06)

Features

  • 🎸 Add scss mixin for expandables (8a36899)

5.0.1-alpha.90 (2019-12-06)

Bug Fixes

  • 🐛 Use the is-open flag on correct spot. Be more specific (7cc29e6)

Features

Edit this section, Opens in new window
Contact us, Opens in new window