Permalink
Browse files

feat(expandable): updated active class and added separated version

  • Loading branch information...
lara-aigmueller committed Jun 13, 2017
1 parent 8ab540e commit 77732399f7a3a052d1069423929035903c5e606b
View
@@ -1,6 +1,51 @@
---
layout: components_icons.hbs
meta:
title: "Expandable"
description: "An expandable component for Dynatrace styled web entities with css and markup examples."
keywords: "expandable, Dynatrace, groundhog, css component"
---
## Introduction
The expandable component is used for sections of a page that are hidden by default and can be expanded by the user.
## Including an expandable section
1. First add a link with the `expandable__trigger` class and include the expandable headline.
```html
<a href="#" class="expandable__trigger">Click me</a>
```
2. Than create an element that contains the expandable content and add the `expandable__content` class.
```html
<div class="expandable__content">...</div>
```
3. Finally put header and content into a section and and add the `expandable` class.
```html
<div class="expandable">
<a href="#" class="expandable__trigger">Click me</a>
<div class="expandable__content">
<p>Expandable content</p>
</div>
</div>
```
## Expandable versions
If you want to separate the expandable section from the rest of the content when it's active, add the `expandable--separated` class to the expandable container.
```html
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Click me</a>
<div class="expandable__content">
<p>Expandable content</p>
</div>
</div>
```
## States
| state name | effect |
|------------|--------|
| `.is-expanded` | Expands the `expandable__content` area |
| `.is-active` | Sets the blue borders on top of the active `expandable` area|
| `.is-active` | Expands the `expandable__content` area and (optionally) sets the borders on top of the active `expandable` area (only if `expandable--separated` is set). |
@@ -1,7 +1,7 @@
import $ from '../js-common-components/dollar';
require('../js-common-components/accordion');
const toggleClass = 'is-expanded';
const toggleClass = 'is-active';
const init = () => {
$('.expandable__trigger').forEach(el => {
@@ -8,6 +8,13 @@ $includedExpandable: false !default;
}
.expandable--separated {
border-top: 2px solid;
border-bottom: 2px solid;
border-color: transparent;
transition: border-color 100ms ease-out;
}
.expandable__content {
display: none;
}
@@ -18,6 +25,7 @@ $includedExpandable: false !default;
padding-left: 32px;
text-decoration: none;
color: $turquoise-600;
line-height: 2em;
}
.expandable__trigger--right {
@@ -50,20 +58,24 @@ $includedExpandable: false !default;
color: $turquoise-700;
}
.expandable.is-active {
border-top: 2px solid;
border-bottom: 2px solid;
border-color: $turquoise-800;
}
.expandable.is-expanded .expandable__trigger:before {
.expandable.is-active .expandable__trigger:before {
transform: translate(0, -50%) rotate(180deg);
}
.expandable.is-expanded .expandable__content {
.expandable.is-active .expandable__content {
display: block;
}
.expandable--separated.is-active {
border-top: 2px solid;
border-bottom: 2px solid;
border-color: $turquoise-600;
}
.expandable--separated.is-active + .expandable--separated.is-active {
border-top-color: transparent;
}
$includedExpandable: true;
}
@@ -0,0 +1,6 @@
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Click me</a>
<div class="expandable__content">
<p>Peekaboo</p>
</div>
</div>
@@ -0,0 +1,24 @@
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Lorem ipsum</a>
<div class="expandable__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
</div>
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Nulla consequat massa quis enim</a>
<div class="expandable__content">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
</div>
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Aliquam lorem ante</a>
<div class="expandable__content">
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<div class="expandable expandable--separated">
<a href="#" class="expandable__trigger">Nam quam nunc</a>
<div class="expandable__content">
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
</div>
</div>

0 comments on commit 7773239

Please sign in to comment.