DEFINITION-LIST (Standard Module )

src/app/shared/components/definition-list/templates

Demo Section

Each variation will be presented in the following section.

Default

Definition List - Headline

Studiengang
Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)
Abschlussgrad
Bachelor of Arts (B.A.)
Fachtyp
Hauptfach
Regelstudienzeit
6 Fachsemester
Zusatz 1
Zusatztext
Zusatz 2
Zusatztext 2

Default

Definition List - Headline

Studiengang
Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)
Abschlussgrad
Bachelor of Arts (B.A.)
Fachtyp
Hauptfach
Regelstudienzeit
6 Fachsemester

Readme

definitionList (component)

Description

This component consists of two HTML-definition-lists. Each definition-list contains n-items. The second definition-list is collapsed on default. A simple click on the provided button will expand the list.

JIRA

Requirements

Fields

definition-list.hbs

Settings

Parameter Type Default Description
settings.definitionListClasses String '' Modifier classes for component
settings.definitionListContextClass String 'default' Context class of component
settings.definitionListJsOptions Object null JavaScript options object which gets stringified in the markup

Content

Parameter Type Description
content.headline String Definition list headline
content.firstList.items Array Array of objects containing label and text of each item in first list
content.expandList.toggleText String Text of toggle button
content.expandList.items Array Array of objects containing label and text of each item in expand list

definition-list__item.hbs

Content

Parameter Type Description
content.label String Definition list item label
content.text String Definition list item text

JavaScript Options

The module gives you the possibility to override default options:

Option Type Default Description
selectors.expandableList String '[data-js-item="expandable-list"]' Element selector for expandable list
selectors.listToggler String '[data-js-item="toggler-list"]' Element selector for toggler list
toggleListEvt String 'cta:toggleDefinitionList' Event triggered to toggling the list

SASS

Variables

There are multiple variables which you can change:

Variable Default Description
$definition-list-icon-width 12px Icon width
$definition-list-icon-width 2px Icon height
$definition-list-toggle-duration 250ms Toggle duration

Templates

definition-list.hbs

<div class="c-definition-list{{#if
		settings.definitionListContextClass}}--{{settings.definitionListContextClass}}{{else}}--default{{/if}}{{#if
		settings.definitionListClasses}} {{settings.definitionListClasses}}{{/if}}"
     data-css="c-definition-list"
     data-js-module="definition-list"{{#if settings.definitionListJsOptions}}
     data-js-options='{{stringify settings.definitionListJsOptions}}'{{/if}}>
	{{#if content.headline }}<h3 class="definition-list__headline">{{ content.headline }}</h3>{{/if}}
	<dl class="definition-list__list">
		{{#each content.firstList.items}}
			{{> definition-list__item }}
		{{/each}}
	</dl>

	{{#if content.expandList}}
		<dl class="definition-list__list" id="definition-list-expandable" aria-hidden="false"
		    data-js-item="expandable-list">
			{{#each content.expandList.items}}
				{{> definition-list__item }}
			{{/each}}
		</dl>
		<button class="definition-list__toggle" data-js-item="toggler-list" aria-hidden="true" aria-expanded="false"
		        aria-controls="definition-list-expandable"><span
				class="definition-list__toggle-text">{{content.expandList.toggleText}}</span></button>
	{{/if}}
</div>

definition-list__item.hbs

<dt class="definition-list__title">{{content.label}}</dt>
<dd class="definition-list__description">{{content.text}}</dd>

Data File

definition-list.hjson

{
	"title": "Definition List",
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"definitionListContextClass": "toggle",
				"definitionListClasses": false,
				"definitionListJsOptions": null
			},
			"content": {
				"headline": "Definition List - Headline",
				"firstList": {
					"items": [
						{
							"settings": {},
							"content": {
								"label": "Studiengang",
								"text": "Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Abschlussgrad",
								"text": "Bachelor of Arts (B.A.)"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Fachtyp",
								"text": "Hauptfach"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Regelstudienzeit",
								"text": "6 Fachsemester"
							}
						}
					]
				},
				"expandList": {
					"toggleText": "Alle Studieninformationen anzeigen",
					"items": [
						{
							"settings": {},
							"content": {
								"label": "Zusatz 1",
								"text": "Zusatztext"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Zusatz 2",
								"text": "Zusatztext 2"
							}
						}
					]
				}
			}
		},
		"default2": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"definitionListContextClass": "default",
				"definitionListClasses": false,
				"definitionListJsOptions": null
			},
			"content": {
				"headline": "Definition List - Headline",
				"firstList": {
					"items": [
						{
							"settings": {},
							"content": {
								"label": "Studiengang",
								"text": "Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Abschlussgrad",
								"text": "Bachelor of Arts (B.A.)"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Fachtyp",
								"text": "Hauptfach"
							}
						},
						{
							"settings": {},
							"content": {
								"label": "Regelstudienzeit",
								"text": "6 Fachsemester"
							}
						}
					]
				}
			}
		}
	}
}

Styles

definition-list.scss

/* ===================================================
component: definition-list
=================================================== */
$definition-list-icon-width: 12px;
$definition-list-icon-height: 2px;
$definition-list-toggle-duration: 250ms;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-definition-list"] {
	display: block;
	margin-bottom: 60px;

	@include print() {
		border-bottom: 1px solid $color-gray-border;
	}

	.definition-list__headline {
		@include headline-h4-styles();

		color: $color-dark;
		margin-left: 0;
		width: 100%;

	}

	.definition-list__list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: none;
		border-right: 1px solid $color-gray-border;
		border-left: 1px solid $color-gray-border;
		overflow: hidden;
		transition: height $animation-duration-std*2 $animation-easing-std;
		margin-bottom: 0;
		margin-left: 0;
		width: 100%;

		@include print() {
			height: auto !important; // OVERWRITE JS-HEIGHT - THEREFORE IMPORTANT IS NEEDED
		}

		/*
		MODIFIERS
		----------------------- */
		&:first-of-type {
			border-top: 1px solid $color-gray-border;
		}

		&.is-collapsed {
			height: 0;
		}

		&.is-closed {
			@include print() {
				height: auto !important; // OVERWRITE JS-HEIGHT - THEREFORE IMPORTANT IS NEEDED
			}
		}
	}

	.definition-list__title {
		flex: 0 0 100%;
		padding: 6px 15px;
		background-color: $color-light;
		font-family: $font-bold;
		font-weight: 700;
		letter-spacing: .3px;
		color: $color-dark;
		border-right: 0;
		font-size: 1.5rem;
		line-height: (22/15);
		text-overflow: ellipsis;
		overflow: hidden;

		@include bp($bp-tablet-p) {
			border-right: 1px solid $color-gray-border;
			flex: 1 1 30%;
			padding: 13px 15px;
			font-size: 1.5rem;
			line-height: (22/15);
		}

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		@include bp($bp-desktop-l) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		@include print() {
			font-size: 1.6rem;
			line-height: (24/16);
			border-right: 1px solid $color-gray-border;
			flex: 1 1 30%;
			padding: 13px 15px;
		}
	}

	.definition-list__description {
		flex: 0 0 100%;
		padding: 13px 15px;
		font-family: $font-regular;
		font-weight: 400;
		letter-spacing: .3px;
		color: $color-dark;
		font-size: 1.5rem;
		line-height: (22/15);
		text-overflow: ellipsis;
		overflow: hidden;

		@include bp($bp-tablet-p) {
			font-size: 1.5rem;
			line-height: (22/15);
			flex: 1 1 70%;
		}

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		@include bp($bp-desktop-l) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		@include print() {
			flex: 1 1 70%;
			font-size: 1.6rem;
			line-height: (24/16);
		}

		&:nth-child(2n) {
			border-bottom: 1px solid lighten($color-dark, 60%);

			@include bp($bp-tablet-p) {
				border-bottom: none;
			}

			@include print() {
				border-bottom: none;
			}
		}
	}

	.definition-list__toggle {
		position: relative;
		border: none;
		border-top: 1px solid $color-gray-border;
		background-color: $color-light;
		padding: 10px 20px;
		display: block;
		font-size: 1.5rem;
		font-family: $font-bold;
		font-weight: 700;
		line-height: (20/15);
		color: $color-green-hc-dark;
		cursor: pointer;
		transition: color $definition-list-toggle-duration linear;
		margin-top: -1px;
		width: 100%;
		text-align: left;

		@include bp(440px) {
			padding: 10px 0;
			line-height: (24/15);
			text-align: center;
		}

		@include print() {
			display: none;
		}

		&:hover,
		&.a11y-focus-key {
			color: $color-dark;

			.definition-list__toggle-text {

				&::before,
				&::after {
					background-color: $color-dark;
				}
			}
		}

		&:focus {
			outline: none;
		}

		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		&.is-active {

			.definition-list__toggle-text {

				&::before {
					transform: rotate(180deg);
				}

				&::after {
					transform: rotate(0deg);
				}
			}
		}
	}

	.definition-list__toggle-text {
		position: relative;
		padding-left: 30px;
		display: inline-block;

		@include bp(440px) {
			padding-left: 20px;
		}

		&::before,
		&::after {
			@extend %pseudo;

			transition: bottom $definition-list-toggle-duration linear $definition-list-toggle-duration, transform $definition-list-toggle-duration ease-out, background-color $definition-list-toggle-duration linear;
			background-color: $color-green;
			height: $definition-list-icon-height;
			left: 0;
			top: 50%;
			margin-top: -2px;
			width: $definition-list-icon-width;
		}

		&::after {
			transform: rotate(-90deg);
		}
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-definition-list--default {
	.definition-list__list {

		&:last-of-type {
			border-bottom: 1px solid $color-gray-border;
		}

	}
}

Scripts

definition-list.js

/**
 * Description of DefinitionList.
 *
 * @module DefinitionList
 * @version v1.0.0
 *
 * @author Christian Rohowski
 * @refactored Andy Gutsche
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component'; // Only use that in combination with browserify
import Toggler from '../../toggler/scripts/toggler';
import CTA from '../../cta/scripts/cta';

class DefinitionList extends Component {
	listToggler = null;
	listCta = null;
	$expandableList = $(this.options.selectors.expandableList, this.el);
	$listToggler = $(this.options.selectors.listToggler, this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				expandableList: '[data-js-item="expandable-list"]',
				listToggler: '[data-js-item="toggler-list"]'
			},
			classes: {},
			toggleListEvt: 'cta:toggleDefinitionList'
		};

		super(obj, options);
	}

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0'
		};
	}

	/**
	 * Event handling
	 */
	get events() {
		return {};
	}

	/**
	 * Subscribe handling
	 */
	get subscribe() {
		return {};
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	didMount() {
		if(this.$expandableList.length > 0) {
			this.listToggler = new Toggler({
				el: this.$expandableList[0],
				namespace: 'Toggler',
				context: this.context,
				options: {
					globalEvent: this.options.toggleListEvt,
					globalEventId: this.instanceId
				}
			});

			this.listToggler.create();
			this.listToggler.didMount();

			this.listCta = new CTA({
				el: this.$listToggler[0],
				namespace: 'CTA',
				context: this.context,
				options: {
					globalEvent: this.options.toggleListEvt,
					globalEventId: this.instanceId
				}
			});

			this.listCta.create();
			this.listCta.didMount();
		}
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default DefinitionList;

HTML Output

Default

<div class="c-definition-list--toggle" data-css="c-definition-list" data-js-module="definition-list">
	<h3 class="definition-list__headline">Definition List - Headline</h3>
	<dl class="definition-list__list">
		<dt class="definition-list__title">Studiengang</dt>
		<dd class="definition-list__description">Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)</dd> <dt class="definition-list__title">Abschlussgrad</dt>
		<dd class="definition-list__description">Bachelor of Arts (B.A.)</dd> <dt class="definition-list__title">Fachtyp</dt>
		<dd class="definition-list__description">Hauptfach</dd> <dt class="definition-list__title">Regelstudienzeit</dt>
		<dd class="definition-list__description">6 Fachsemester</dd>
	</dl>
	<dl class="definition-list__list" id="definition-list-expandable" aria-hidden="false" data-js-item="expandable-list">
		<dt class="definition-list__title">Zusatz 1</dt>
		<dd class="definition-list__description">Zusatztext</dd> <dt class="definition-list__title">Zusatz 2</dt>
		<dd class="definition-list__description">Zusatztext 2</dd>
	</dl>
	<button class="definition-list__toggle" data-js-item="toggler-list" aria-hidden="true" aria-expanded="false" aria-controls="definition-list-expandable"><span class="definition-list__toggle-text">Alle Studieninformationen anzeigen</span></button>
</div>

Default

<div class="c-definition-list--default" data-css="c-definition-list" data-js-module="definition-list">
	<h3 class="definition-list__headline">Definition List - Headline</h3>
	<dl class="definition-list__list">
		<dt class="definition-list__title">Studiengang</dt>
		<dd class="definition-list__description">Allgemeine und Vergleichende Literaturwissenschaft (Bachelor)</dd> <dt class="definition-list__title">Abschlussgrad</dt>
		<dd class="definition-list__description">Bachelor of Arts (B.A.)</dd> <dt class="definition-list__title">Fachtyp</dt>
		<dd class="definition-list__description">Hauptfach</dd> <dt class="definition-list__title">Regelstudienzeit</dt>
		<dd class="definition-list__description">6 Fachsemester</dd>
	</dl>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link