Copy environment

Share 

<div class="share  ">
    <h2 class="share__text">Share</h2>
    <ul class="share__list">
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="linkedin">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-linkedin"></use>
                    </svg>
                    <span class="button__text">LinkedIn</span>
                </span>
            </button>
        </li>
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="twitter">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-twitter"></use>
                    </svg>
                    <span class="button__text">Twitter</span>
                </span>
            </button>
        </li>
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="facebook">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-facebook"></use>
                    </svg>
                    <span class="button__text">Facebook</span>
                </span>
            </button>
        </li>
    </ul>
</div>
 
{% if data.items %}
<div class="share {{ class }} {{ modifier }}">
    {% if data.label %}<h2 class="share__text">{{ data.label }}</h2>{% endif %}
    <ul class="share__list">
        {% for item in data.items %}
            <li class="share__item">
                {% include '@button' with {
                    class: 'social__button js-share',
                    modifier: 'button--social',
                    data: {
                        attributes: 'data-social="' ~ item.icon ~ '"',
                        icon: 'social-' ~ item.icon,
                        text: item.text,
                    },
                } %}
            </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Share",
    "items": [
      {
        "text": "LinkedIn",
        "icon": "linkedin"
      },
      {
        "text": "Twitter",
        "icon": "twitter"
      },
      {
        "text": "Facebook",
        "icon": "facebook"
      }
    ]
  }
}
  • Content: 
    .share__list,
.share {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.share--vertical {
    flex-direction: column;
}

.share__list {
    margin-left: 32px;
    flex-direction: row-reverse;

    .share--vertical & {
        flex-direction: column;
        margin-left: 0;
        margin-top: 16px;
    }
}

.share__item {
    & + & {
        margin-right: 16px;
    }

    .share--vertical & + & {
        margin-top: 16px;
        margin-right: 0;
    }
}

.share__text {
    color: $L-text;
    font-weight: $font-weight-bold;
}
  • URL: /components/raw/share/share.scss
  • Filesystem Path: src/patterns/components/share/share.scss
  • Size: 586 Bytes
  • Content: 
    import Component from '../component/component';

import './share.scss';

interface IShareIconType {
    type?: string;
    url?: string;
    twitterPopUp?: IPopUp;
    linkedInPopUp?: IPopUp;
    facebookPopUp: IPopUp;
}

interface IPopUp {
    href?: string;
    width?: string;
    height?: string;
    resize?: string;
}

export default class Share extends Component {

    static initSelector: string = '.js-share';

    element: JQuery;
    settings: IShareIconType;

    constructor(target: HTMLElement) {
        super(target);
        this.settings = {
            facebookPopUp: {
                height: '520',
                href: 'https://www.facebook.com/sharer/sharer.php?u=' + window.location.href,
                resize: 'yes',
                width: '570',
            },
            linkedInPopUp: {
                height: '520',
                href: 'https://www.linkedin.com/shareArticle?url=' + window.location.href + '&mini=true',
                resize: 'yes',
                width: '570',
            },
            twitterPopUp: {
                height: '500',
                href: 'https://twitter.com/share?url=' + window.location.href + '&amp;text=' + $(document).attr('title') + '&amp',
                resize: 'yes',
                width: '400',
            },
            type: this.element.data('social'),
            url: window.location.href,
        };

        this.init();
    }

    static openPopUp(href: string, intWidth: string, intHeight: string, strResize: string): void {
        const strTitle: string = encodeURI($(document).attr('title'));
        const strParam: string = 'width=' + intWidth + ',height=' + intHeight + ',resizable=' + strResize;

        window.open(href, strTitle, strParam).focus();
    }

    init(): void {
        switch (this.settings.type) {
            case 'facebook':
                this.element.on('click', this.share.bind(this, this.settings.facebookPopUp));
                break;
            case 'twitter':
                this.element.on('click', this.share.bind(this, this.settings.twitterPopUp));
                break;
            case 'linkedin':
                this.element.on('click', this.share.bind(this, this.settings.linkedInPopUp));
                break;
            default:
                console.error('Unknown share component');
                break;
        }
    }

    share(settings: IPopUp, event: JQuery.Event): void {
        event.preventDefault();
        Share.openPopUp(
            settings.href,
            settings.width,
            settings.height,
            settings.resize,
        );
    }
}
  • URL: /components/raw/share/share.ts
  • Filesystem Path: src/patterns/components/share/share.ts
  • Size: 2.6 KB
  • Handle: @share--default
  • Filesystem Path: src/patterns/components/share/share.twig
  • References (1): @button

Vertical 

<div class="share  share--vertical">
    <h2 class="share__text">Share</h2>
    <ul class="share__list">
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="linkedin">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-linkedin"></use>
                    </svg>
                    <span class="button__text">LinkedIn</span>
                </span>
            </button>
        </li>
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="twitter">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-twitter"></use>
                    </svg>
                    <span class="button__text">Twitter</span>
                </span>
            </button>
        </li>
        <li class="share__item">

            <button type="button" class="button button--social social__button js-share button--icon" data-social="facebook">
                <span class="button__inner">
                    <svg class="icon  button__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-facebook"></use>
                    </svg>
                    <span class="button__text">Facebook</span>
                </span>
            </button>
        </li>
    </ul>
</div>
 
{% if data.items %}
<div class="share {{ class }} {{ modifier }}">
    {% if data.label %}<h2 class="share__text">{{ data.label }}</h2>{% endif %}
    <ul class="share__list">
        {% for item in data.items %}
            <li class="share__item">
                {% include '@button' with {
                    class: 'social__button js-share',
                    modifier: 'button--social',
                    data: {
                        attributes: 'data-social="' ~ item.icon ~ '"',
                        icon: 'social-' ~ item.icon,
                        text: item.text,
                    },
                } %}
            </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{
  "language": "en-US",
  "data": {
    "label": "Share",
    "items": [
      {
        "text": "LinkedIn",
        "icon": "linkedin"
      },
      {
        "text": "Twitter",
        "icon": "twitter"
      },
      {
        "text": "Facebook",
        "icon": "facebook"
      }
    ]
  },
  "modifier": "share--vertical"
}
  • Content: 
    .share__list,
.share {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.share--vertical {
    flex-direction: column;
}

.share__list {
    margin-left: 32px;
    flex-direction: row-reverse;

    .share--vertical & {
        flex-direction: column;
        margin-left: 0;
        margin-top: 16px;
    }
}

.share__item {
    & + & {
        margin-right: 16px;
    }

    .share--vertical & + & {
        margin-top: 16px;
        margin-right: 0;
    }
}

.share__text {
    color: $L-text;
    font-weight: $font-weight-bold;
}
  • URL: /components/raw/share/share.scss
  • Filesystem Path: src/patterns/components/share/share.scss
  • Size: 586 Bytes
  • Content: 
    import Component from '../component/component';

import './share.scss';

interface IShareIconType {
    type?: string;
    url?: string;
    twitterPopUp?: IPopUp;
    linkedInPopUp?: IPopUp;
    facebookPopUp: IPopUp;
}

interface IPopUp {
    href?: string;
    width?: string;
    height?: string;
    resize?: string;
}

export default class Share extends Component {

    static initSelector: string = '.js-share';

    element: JQuery;
    settings: IShareIconType;

    constructor(target: HTMLElement) {
        super(target);
        this.settings = {
            facebookPopUp: {
                height: '520',
                href: 'https://www.facebook.com/sharer/sharer.php?u=' + window.location.href,
                resize: 'yes',
                width: '570',
            },
            linkedInPopUp: {
                height: '520',
                href: 'https://www.linkedin.com/shareArticle?url=' + window.location.href + '&mini=true',
                resize: 'yes',
                width: '570',
            },
            twitterPopUp: {
                height: '500',
                href: 'https://twitter.com/share?url=' + window.location.href + '&amp;text=' + $(document).attr('title') + '&amp',
                resize: 'yes',
                width: '400',
            },
            type: this.element.data('social'),
            url: window.location.href,
        };

        this.init();
    }

    static openPopUp(href: string, intWidth: string, intHeight: string, strResize: string): void {
        const strTitle: string = encodeURI($(document).attr('title'));
        const strParam: string = 'width=' + intWidth + ',height=' + intHeight + ',resizable=' + strResize;

        window.open(href, strTitle, strParam).focus();
    }

    init(): void {
        switch (this.settings.type) {
            case 'facebook':
                this.element.on('click', this.share.bind(this, this.settings.facebookPopUp));
                break;
            case 'twitter':
                this.element.on('click', this.share.bind(this, this.settings.twitterPopUp));
                break;
            case 'linkedin':
                this.element.on('click', this.share.bind(this, this.settings.linkedInPopUp));
                break;
            default:
                console.error('Unknown share component');
                break;
        }
    }

    share(settings: IPopUp, event: JQuery.Event): void {
        event.preventDefault();
        Share.openPopUp(
            settings.href,
            settings.width,
            settings.height,
            settings.resize,
        );
    }
}
  • URL: /components/raw/share/share.ts
  • Filesystem Path: src/patterns/components/share/share.ts
  • Size: 2.6 KB
  • Handle: @share--vertical
  • Filesystem Path: src/patterns/components/share/share.twig
  • References (1): @button