Styleguide

Social icon: Facebook 

<a href="#" class="a-social-icon" aria-label="post on facebook">
    <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>
 
<{{#if linkButton}}button data-link="{{link}}"{{else}}a href="{{link}}"{{/if}} class="a-social-icon"
													aria-label="{{ariaLabel}}">
	<figure class="a-social-icon__figure">
		<svg role="img" class="a-social-icon__svg{{#if label }} a-social-icon__svg--with-caption{{/if}}">
			<title>{{type}}</title>
			<use xlink:href="#{{type}}"></use>
		</svg>
		{{#if label }}
			<figcaption class="a-social-icon__caption">{{label}}</figcaption>{{/if}}
	</figure>
	{{#if linkButton}}
		<div class="a-social-icon__copied">Copied!</div>
	{{/if}}
	</{{#if linkButton}}button{{else}}a{{/if}}>
  • Content: 
    .a-social-icon {
	@include clean-link;
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	line-height: 1em;
	padding: 0;

	&__figure {
		height: 100%;
		width: 100%;
	}

	&__caption {
		display: none;
		text-transform: uppercase;
		color: $color-primary;
		text-align: center;
		transition: all $transition-fast $transition-ease;
		position: relative; // fixes safari cutting of multiline labels

		@include high-contrast {
			color: $color-primary-dark;
		}

		@media all and (min-width: 480px) {
			display: block;
			font-size: 0.625rem;
		}

		@media all and (min-width: $size-small) {
			font-size: 0.75rem;
		}
	}

	&__svg {
		fill: $color-primary;
		stroke: $color-primary;
		transition: all $transition-fast $transition-ease;
		width: 100%;
		height: 100%;

		@include high-contrast {
			fill: $color-primary-dark;
			stroke: $color-primary-dark;
		}

		@media all and (min-width: 480px) {
			&--with-caption {
				height: calc(100% - 1.2rem);
				margin-bottom: -0.3rem;
			}
		}
	}

	@include hover {
		.a-social-icon__svg {
			fill: $color-primary-dark;
			stroke: $color-primary-dark;
		}

		.a-social-icon__caption {
			color: $color-primary-dark;
		}
	}

	&__copied {
		position: absolute;
		top: 0;
		right: 100%;
		background: $color-grey-1;
		padding: 0.125em 0.25em;
		border-radius: 3px;
		opacity: 0;
		transition: top ease-out 1s, opacity linear 0.5s 0.5s;
		text-transform: uppercase;
		font-size: 0.6125rem;
		color: $color-primary-dark;
		font-family: $font-secondary;
		font-weight: $font-weight-bold;
		letter-spacing: 0.08928em;
		z-index: 1;

		@include media($_DESKTOP) {
			font-size: 0.75rem;
			right: auto;
			left: 50%;
			transform: translateX(-50%);
		}

		&--visible {
			top: 50%;
			opacity: 1;
			transition: none;
		}
	}
}
  • URL: /components/raw/a-social-icon/_a-social-icon.scss
  • Filesystem Path: styleguide/src/components/atoms/a-social-icon/_a-social-icon.scss
  • Size: 1.8 KB
  • Content: 
    import BaseView from 'base-view';

const MESSAGE_SELECTOR = '.a-social-icon__copied';
const MESSAGE_VISIBLE_CLASS = 'a-social-icon__copied--visible';

export default class MShareBlock extends BaseView {
	bind() {
		super.bind();

		if (this.isLinkButton()) {
			this.on( 'click', () => this.copyLink() );
		}
	}

	isLinkButton() {
		return 'link' in this.element.dataset;
	}

	copyLink() {
		navigator.clipboard.writeText( this.element.dataset.link ).
			then( this.showMessage.bind( this ) );
	}

	showMessage() {
		const message = this.getScopedElement( MESSAGE_SELECTOR );
		this.addClass( message, MESSAGE_VISIBLE_CLASS );
		window.setTimeout( () => {
			this.removeClass( message, MESSAGE_VISIBLE_CLASS );
		}, 100 );
	}
}
  • URL: /components/raw/a-social-icon/a-social-icon.js
  • Filesystem Path: styleguide/src/components/atoms/a-social-icon/a-social-icon.js
  • Size: 728 Bytes 
{
  "type": "facebook",
  "link": "#",
  "ariaLabel": "post on facebook"
}

No notes defined.