CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
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">
<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">
<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">
<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
<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
<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>
Tokens
Panel tokens
Name | Value | Is aliased in |
---|---|---|
$ids-panel-content-display |
flex |
|
$ids-panel-content-position |
relative |
|
$ids-panel-content-width |
100% |
|
$ids-panel-content-align-items |
flex-start |
|
$ids-panel-content-flex-direction |
column |
|
$ids-panel-content-margin-bottom |
2rem |
|
$ids-panel-content-padding |
2.5rem 0 |
|
$ids-panel-content-border-radius |
0 0 0.75rem 0.75rem |
|
$ids-panel-content-font-size |
1.125rem |
|
$ids-panel-content-line-height |
1.75rem |
|
$ids-panel-content-letter-spacing |
normal |
|
$ids-panel-content-transition |
all 0.2s cubic-bezier(0.4, 0, 0.2, 1) |
|
$ids-panel-expandable-title-hover-text-decoration |
underline |
|
$ids-panel-expandable-content-display |
none |
|
$ids-panel-expandable-content-padding |
2.5rem 0 |
|
$ids-panel-expandable-content-border-radius |
0 0 0.75rem 0.75rem |
|
$ids-panel-expandable-is-open-title-border-radius |
0.75rem 0.75rem 0 0 |
|
$ids-panel-expandable-is-open-icon-transform |
translateY(-50%) rotate(180deg) |
|
$ids-panel-expandable-is-open-content-display |
block |
|
$ids-panel-icon-position |
absolute |
|
$ids-panel-icon-top |
50% |
|
$ids-panel-icon-display |
block |
|
$ids-panel-icon-height |
2rem |
|
$ids-panel-icon-width |
2rem |
|
$ids-panel-icon-background-size |
2rem 2rem |
|
$ids-panel-icon-transform |
translateY(-50%) |
|
$ids-panel-icon-transition |
all 0.2s cubic-bezier(0.4, 0, 0.2, 1) |
|
$ids-panel-position |
relative |
|
$ids-panel-width |
100% |
|
$ids-panel-margin |
2rem 0 |
|
$ids-panel-border-radius |
0 0 0.75rem 0.75rem |
|
$ids-panel-background-color |
transparent |
|
$ids-panel-transition |
all 0.2s cubic-bezier(0.4, 0, 0.2, 1) |
|
$ids-panel-is-selectable-margin-bottom |
0 |
|
$ids-panel-is-selectable-title-margin-bottom |
0 |
|
$ids-panel-is-selectable-icon-transform |
translateY(-50%) |
|
$ids-panel-title-display |
flex |
|
$ids-panel-title-position |
relative |
|
$ids-panel-title-align-items |
center |
|
$ids-panel-title-width |
100% |
|
$ids-panel-title-min-height |
4.5rem |
|
$ids-panel-title-padding |
0.5rem 5.5rem 0.5rem 1.5rem |
|
$ids-panel-title-border-radius |
0.75rem |
|
$ids-panel-title-font-size |
1.125rem |
|
$ids-panel-title-letter-spacing |
normal |
|
$ids-panel-title-line-height |
1.75rem |
|
$ids-panel-title-transition |
all 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0s |
|
$ids-panel-title-icon-transform |
translate(1px, -50%) |
|
$ids-panel-title-hover-icon-transform |
translate(1rem, -50%) |
|
$ids-panel-light-title-background-color-default |
rgb(250, 249, 247) |
|
$ids-panel-light-title-background-color-hover |
rgb(232, 224, 217) |
|
$ids-panel-light-content-background-color |
rgb(250, 249, 247) |
|
$ids-panel-light-child-background-color |
rgb(246, 243, 240) |
|
$ids-panel-light-is-open-title-background-color |
rgb(232, 224, 217) |
|
$ids-panel-dark-title-background-color-default |
rgb(241, 236, 232) |
|
$ids-panel-dark-title-background-color-hover |
rgb(232, 224, 217) |
|
$ids-panel-dark-content-background-color |
rgb(241, 236, 232) |
|
$ids-panel-dark-child-background-color |
rgb(250, 249, 247) |
|
$ids-panel-dark-is-open-title-background-color |
rgb(232, 224, 217) |
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>
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
16.0.0 (2023-01-10)
โ BREAKING CHANGES
- The panel component now has rounded corners - 12px and equal padding on all edges
of the panel content.
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.10.1 (2022-03-15)
Bug Fixes
- ๐ Add min-height & padding to panel title (e0acf01) . โ Closes: 526907
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ 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 fromif-design-system
toids-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
Documentation Updates
-
โ๏ธ Make variations tables more condensed (4344a3a)
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Split out CSS documentation and JS script (e42d0c4) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
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.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
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)
โ 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
Features
- ๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Code Refactoring
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename Footer to Global Footer (7cb7239) , closes #336508
-
๐ก Rename Notification to Alert Banner (8b4e48d) , closes #336508
-
๐ค Reinstall (2c763ea)
-
๐ค Reinstall (69e1a5b)
rebuild (7edb430)