Styleguide

Person: Expandable 

<article class="m-person m-person--expandable">
    <div class="m-person__main">
        <div class="m-person__image">
            <div class="m-person__image-aspect-ratio-box">
                <figure class="a-image a-image--cover">

                    <img src="/img/wheat.jpg" alt="Balthasar Glättli" title="Balthasar Glättli" class="a-image__image a-image__image--fp a-image__image--fp-">

                </figure>
            </div>
        </div>
        <div class="m-person__basic-info">
            <header>
                <h3 id="m-person__full-name--" class="m-person__full-name">Balthasar Glättli</h3><span class="m-person__supplementary">Zürich</span>
            </header>
            <p class="m-person__role">Nationalrat, Sicherheitskommission, Fraktionspräsident, Präsident Mieterverband Deutschschweiz</p>
        </div>
        <button class="m-person__toggle is-collapsed" aria-controls="m-person__expandable-" data-expand="Mehr Infos" data-collaps="Weniger Infos">Mehr Infos</button>
    </div>
    <div id="m-person__expandable-" class="m-person__expandable is-collapsed" aria-hidden="true" aria-labelledby="m-person__full-name--">
        <div class="m-person__wysiwyg">
            <strong>some</strong> html output
        </div>
        <!-- Add an if contact here in twig -->
        <h4 class="m-person__contact-title">Kontakt</h4>
        <address class="m-person__address">
            <a href="mailto:balthasar.glaettli@gruene.ch" class="m-person__contact m-person__contact--email">balthasar.glaettli@gruene.ch</a>
            <a href="tel:+41079 123 45 67" class="m-person__contact m-person__contact--phone">079 123 45 67</a>
            <a href="http://www.balthasar-glaettli.ch" class="m-person__contact m-person__contact--website">www.balthasar-glaettli.ch</a>
        </address>
        <div class="m-person__social-media">
            <div class="m-person__social-icon"><a href="https://bsky.app/profile/wikipedia.bsky.social" class="a-social-icon" aria-label="">
                    <figure class="a-social-icon__figure">
                        <svg role="img" class="a-social-icon__svg">
                            <title>bluesky</title>
                            <use xlink:href="#bluesky"></use>
                        </svg>

                    </figure>
                </a>
            </div>
            <div class="m-person__social-icon"><a href="https://www.tiktok.com/@wikipedia" class="a-social-icon" aria-label="">
                    <figure class="a-social-icon__figure">
                        <svg role="img" class="a-social-icon__svg">
                            <title>tiktok</title>
                            <use xlink:href="#tiktok"></use>
                        </svg>

                    </figure>
                </a>
            </div>
            <div class="m-person__social-icon"><a href="https://www.instagram.com/nasa/" class="a-social-icon" aria-label="">
                    <figure class="a-social-icon__figure">
                        <svg role="img" class="a-social-icon__svg">
                            <title>instagram</title>
                            <use xlink:href="#instagram"></use>
                        </svg>

                    </figure>
                </a>
            </div>
            <div class="m-person__social-icon"><a href="https://www.threads.net/@wikipedia" class="a-social-icon" aria-label="">
                    <figure class="a-social-icon__figure">
                        <svg role="img" class="a-social-icon__svg">
                            <title>threads</title>
                            <use xlink:href="#threads"></use>
                        </svg>

                    </figure>
                </a>
            </div>
            <div class="m-person__social-icon"><a href="https://www.facebook.com/wikipedia/" class="a-social-icon" aria-label="">
                    <figure class="a-social-icon__figure">
                        <svg role="img" class="a-social-icon__svg">
                            <title>facebook</title>
                            <use xlink:href="#facebook"></use>
                        </svg>

                    </figure>
                </a>
            </div>

        </div>
    </div>
</article>
 
<article class="m-person {{modifiers_classes}}">
	<div class="m-person__main">
		<div class="m-person__image">
			<div class="m-person__image-aspect-ratio-box">
				{{> @a-image image}}
			</div>
		</div>
		<div class="m-person__basic-info">
			<header><h3 id="m-person__full-name--{{id}}" class="m-person__full-name">{{full_name}}</h3>{{#if supplementary}}<span class="m-person__supplementary">{{supplementary}}</span>{{/if}}</header>
			{{#if role}}<p class="m-person__role">{{role}}</p>{{/if}}
			{{#unless expandable}}
				<address class="m-person__address">
					{{#if email}}<a href="mailto:{{email}}" class="m-person__contact m-person__contact--email">{{email}}</a>{{/if}}
					{{#if phone}}<a href="tel:+41{{phone}}" class="m-person__contact m-person__contact--phone">{{phone}}</a>{{/if}}
					{{#if website}}<a href="http://{{website}}" class="m-person__contact m-person__contact--website">{{website}}</a>{{/if}}
				</address>
				<div class="m-person__social-media">
					{{#if bluesky}}<div class="m-person__social-icon">{{> @a-social-icon type='bluesky' link=bluesky}}</div>{{/if}}
					{{#if tiktok}}<div class="m-person__social-icon">{{> @a-social-icon type='tiktok' link=tiktok}}</div>{{/if}}
					{{#if instagram}}<div class="m-person__social-icon">{{> @a-social-icon type='instagram' link=instagram}}</div>{{/if}}
					{{#if threads}}<div class="m-person__social-icon">{{> @a-social-icon type='threads' link=threads}}</div>{{/if}}
					{{#if facebook}}<div class="m-person__social-icon">{{> @a-social-icon type='facebook' link=facebook}}</div>{{/if}}
					{{#if twitter}}<div class="m-person__social-icon">{{> @a-social-icon type='twitter' link=twitter}}</div>{{/if}}
				</div>
			{{/unless}}
		</div>
		{{#if expandable}}<button class="m-person__toggle is-collapsed" aria-controls="m-person__expandable-{{id}}" data-expand="{{button-expand}}" data-collaps="{{button-collaps}}">{{button-expand}}</button>{{/if}}
	</div>
	{{#if expandable}}
		<div id="m-person__expandable-{{id}}" class="m-person__expandable is-collapsed" aria-hidden="true" aria-labelledby="m-person__full-name--{{id}}">
			<div class="m-person__wysiwyg">
				{{{wysiwyg}}}
			</div>
			<!-- Add an if contact here in twig -->
			<h4 class="m-person__contact-title">{{contact}}</h4>
			<address class="m-person__address">
				{{#if email}}<a href="mailto:{{email}}" class="m-person__contact m-person__contact--email">{{email}}</a>{{/if}}
				{{#if phone}}<a href="tel:+41{{phone}}" class="m-person__contact m-person__contact--phone">{{phone}}</a>{{/if}}
				{{#if website}}<a href="http://{{website}}" class="m-person__contact m-person__contact--website">{{website}}</a>{{/if}}
			</address>
			<div class="m-person__social-media">
        {{#if bluesky}}<div class="m-person__social-icon">{{> @a-social-icon type='bluesky' link=bluesky}}</div>{{/if}}
				{{#if tiktok}}<div class="m-person__social-icon">{{> @a-social-icon type='tiktok' link=tiktok}}</div>{{/if}}
				{{#if instagram}}<div class="m-person__social-icon">{{> @a-social-icon type='instagram' link=instagram}}</div>{{/if}}
				{{#if threads}}<div class="m-person__social-icon">{{> @a-social-icon type='threads' link=threads}}</div>{{/if}}
				{{#if facebook}}<div class="m-person__social-icon">{{> @a-social-icon type='facebook' link=facebook}}</div>{{/if}}
				{{#if twitter}}<div class="m-person__social-icon">{{> @a-social-icon type='twitter' link=twitter}}</div>{{/if}}
			</div>
		</div>
	{{/if}}
</article>
  • Content: 
    .m-person {
	$intermediate-breakpoint: 480px;

	background-color: $color-grey-1;
	@include fluid-props(margin-top, $fluid-min, $fluid-max, 20px, 40px);
	font-size: 0.875rem;
	@include media($size-small) {
		font-size: 1rem;
	}

	&__text {
		font-size: 0.875rem !important;
		@include media($size-small) {
			font-size: 1rem !important;
		}
	}

	&__main {
		display: flex;
		flex-direction: column;
		position: relative;

		@include media($intermediate-breakpoint) {
			flex-direction: row;
		}
	}

	&__image {
		width: 100%;

		@include media($intermediate-breakpoint) {
			max-width: 170px;
		}

		@include media($size-small) {
			max-width: 215px;
		}
	}

	&__image-aspect-ratio-box {
		width: 100%;

		@include aspect-ratio-box(100%);
	}

	&__basic-info {
		margin: 8px 20px 20px;
		width: 100%;

		@include media($size-small) {
			margin: 12px 24px 24px;
		}
	}

	&--expandable &__basic-info {
		padding-bottom: 20px;
	}

	&__full-name {
		@include heading-font;
		display: inline-block;
		font-size: 1rem;
	}

	&__supplementary {
		display: inline-block;
		&::before {
			content: '\00a0\2013\00a0';
		}
	}

	&__role {
		margin: 0.75em 0;
		hyphens: auto;

		@extend .m-person__text;

		@include media($intermediate-breakpoint) {
			hyphens: none;
		}
	}

	&__address {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	&__contact {
		margin: 0.2em 0;
	}

	&__social-media {
		display: flex;
		margin-top: 0.75em;
	}

	&__social-icon {
		width: 32px;
		height: 32px;
		margin-right: 12px;
	}

	&__toggle {
		position: absolute;
		bottom: 0;
		right: 0;
		background: $color-primary-super-light;
		padding: 16px 12px 16px 18px;

		font-size: 0.875rem;
		color: $color-primary-dark;
		font-family: $font-secondary;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
		cursor: pointer;
		transition: all $transition-fast $transition-ease;
		letter-spacing: 0.08928em;

		@include hover {
			background: $color-primary-light;

			@include high-contrast {
				color: $color-text;
			}
		}

		&::after {
			font-size: 1.15em;
			line-height: 0;
		}

		&.is-collapsed::after {
			content: '\00a0\00FF0B';
			position: relative;
		}

		&.is-expanded::after {
			content: '\00a0\002013';
			position: relative;
			top: -2px;
			right: 2px;
			padding-left: 7px;
		}
	}

	&__toggle.is-collapsed &__collaps {
		display: none;
	}

	&__toggle.is-expanded &__expand {
		display: none;
	}

	&__expandable {
		background: $color-grey-2;
		transition: all ease-in-out $transition-mid;
		overflow: hidden;
		max-height: 5000px;

		@include fluid-props(padding, $intermediate-breakpoint, $size-small, 20px, 48px);

		&.is-collapsed {
			max-height: 0;
			height: 0;
			padding-top: 0;
			padding-bottom: 0;
		}

		h1, h2, h3, h4, h5 {
			font-size: 1rem;
			color: $color-text;
		}
	}

	&__contact-title {
		margin-top: 35px;
	}
}
  • URL: /components/raw/m-person/_m-person.scss
  • Filesystem Path: styleguide/src/components/molecules/m-person/_m-person.scss
  • Size: 2.9 KB
  • Content: 
    import BaseView from 'base-view';

const BUTTON_SELECTOR = '.m-person__toggle';
const CONTENT_SELECTOR = '.m-person__expandable';

const COLLABSED_STATE = 'is-collapsed';
const EXPANDED_STATE = 'is-expanded';

export default class MPerson extends BaseView {
	initialize() {
		this.button = this.getScopedElement(BUTTON_SELECTOR);
		this.content = this.getScopedElement(CONTENT_SELECTOR);

		this.hiddenAnchorTags = this.getScopedElement(CONTENT_SELECTOR).getElementsByTagName('a');
		this.setTabIndexes(-1);

		this.expanded = false;
	}

	bind() {
		super.bind();

		this.on( 'click', BUTTON_SELECTOR, () => this.toggle() );
	}

	toggle() {
		if (this.expanded) {
			// collaps it
			this.removeClass(this.button, EXPANDED_STATE);
			this.removeClass(this.content, EXPANDED_STATE);
			this.addClass(this.button, COLLABSED_STATE);
			this.addClass(this.content, COLLABSED_STATE);
			this.button.innerText = this.button.getAttribute('data-expand');
			this.setTabIndexes(-1);
		} else {
			// expand it
			this.removeClass(this.button, COLLABSED_STATE);
			this.removeClass(this.content, COLLABSED_STATE);
			this.addClass(this.button, EXPANDED_STATE);
			this.addClass(this.content, EXPANDED_STATE);
			this.button.innerText = this.button.getAttribute('data-collaps');
			this.setTabIndexes(0);
		}

		this.content.setAttribute('aria-hidden', this.expanded);
		this.expanded = !this.expanded;
	}

	setTabIndexes(int) {
		for (let i = 0; i < this.hiddenAnchorTags.length; i ++) {
			this.hiddenAnchorTags.item(i).tabIndex = int;
		}
	}
}
  • URL: /components/raw/m-person/m-person.js
  • Filesystem Path: styleguide/src/components/molecules/m-person/m-person.js
  • Size: 1.5 KB 
{
  "full_name": "Balthasar Glättli",
  "image": {
    "image-src": "/img/wheat.jpg",
    "alt": "Balthasar Glättli",
    "title": "Balthasar Glättli",
    "no_caption": 1
  },
  "supplementary": "Zürich",
  "role": "Nationalrat, Sicherheitskommission, Fraktionspräsident, Präsident Mieterverband Deutschschweiz",
  "email": "balthasar.glaettli@gruene.ch",
  "phone": "079 123 45 67",
  "website": "www.balthasar-glaettli.ch",
  "facebook": "https://www.facebook.com/wikipedia/",
  "instagram": "https://www.instagram.com/nasa/",
  "threads": "https://www.threads.net/@wikipedia",
  "tiktok": "https://www.tiktok.com/@wikipedia",
  "bluesky": "https://bsky.app/profile/wikipedia.bsky.social",
  "contact": "Kontakt",
  "expandable": true,
  "button-expand": "Mehr Infos",
  "button-collaps": "Weniger Infos",
  "wysiwyg": "<strong>some</strong> html output",
  "modifiers": [
    "expandable"
  ]
}

No notes defined.