Tab Group 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/tab-group.css?cb=">

<div class="tab-group" data-module="tabGroup">
    <ul class="tab-group__nav">
        <li class="tab-group__nav-list-item active">
            <a href='#' data-tab-id="tab-1" class="tab-group__nav-link js-tab-link">Richtext</a>
        </li>
        <li class="tab-group__nav-list-item ">
            <a href='#' data-tab-id="tab-2" class="tab-group__nav-link js-tab-link">Richtext &amp; Image</a>
        </li>
        <li class="tab-group__nav-list-item ">
            <a href='#' data-tab-id="tab-3" class="tab-group__nav-link js-tab-link">Richtext &amp; YouTube</a>
        </li>
        <li class="tab-group__nav-list-item ">
            <a href='#' data-tab-id="tab-4" class="tab-group__nav-link js-tab-link">Image</a>
        </li>
        <li class="tab-group__nav-list-item ">
            <a href='#' data-tab-id="tab-5" class="tab-group__nav-link js-tab-link">MP4 Video</a>
        </li>
    </ul>
    <div class="tab-group__content-panels">
        <div class="tab-group__content js-tab-content  active" id="tab-1">
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/richtext.css?cb=">

            <div class="richtext">
                <h2 class='heading03'>Richtext</h2>
                <p>Objectively impact market-driven core competencies through covalent synergy. Globally generate multidisciplinary ideas whereas installed base methodologies.</p>
            </div>
        </div>
        <div class="tab-group__content js-tab-content  " id="tab-2">
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">

            <div class="image  ">
                <figure>
                    <picture>
                        <source media="(max-width: 840px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;95&amp;width&#x3D;640" />
                        <source media="(min-width: 841px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;100" />
                        <img src="" loading="lazy" alt="Image Alt Text">
                    </picture>
                    <figcaption class="image__caption">Image caption appears inside figcaption tag</figcaption>
                </figure>
            </div>
            <div class="richtext">
                <h2 class='heading03'>Rich text with image</h2>
                <p>Completely architect sticky initiatives before out-of-the-box alignments. Quickly engage standards compliant processes whereas 2.0 meta-services. Progressively.</p>
            </div>
        </div>
        <div class="tab-group__content js-tab-content tab-group__content--rtl " id="tab-3">
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/youtube-video.css?cb=">

            <div class="youtube-video">
                <h2 class="youtube-video__title">Video title</h2>

                <div class="youtube-video__iframe-wrapper youtube-video__iframe-wrapper--with-description">
                    <iframe class="youtube-video__iframe" loading="lazy" width="1600" height="900" src="https://www.youtube.com/embed/qApVnpPei9I" title="Video title"></iframe>
                </div>

                <p class="youtube-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
            </div>
            <div class="richtext">
                <h2 class='heading03'>Tab 3</h2>
                <p>Continually grow bricks-and-clicks infrastructures and parallel best practices. Uniquely scale distributed e-business before enterprise-wide intellectual capital.</p>
            </div>
        </div>
        <div class="tab-group__content js-tab-content  " id="tab-4">

            <div class="image  ">
                <figure>
                    <picture>
                        <source media="(max-width: 840px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;95&amp;width&#x3D;640" />
                        <source media="(min-width: 841px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;100" />
                        <img src="" loading="lazy" alt="Image Alt Text">
                    </picture>
                    <figcaption class="image__caption">Image caption appears inside figcaption tag</figcaption>
                </figure>
            </div>
        </div>
        <div class="tab-group__content js-tab-content  " id="tab-5">
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/mp4-video.css?cb=">

            <div class="mp4-video mp4-video--with-description" data-module="video" data-fullscreen="false">
                <h2 class="mp4-video__title">Video title</h2>

                <div class="mp4-video__video-container js-video-container">
                    <video data-module="video" class="video-player__video" playsinline preload="metadata">
                    </video>
                </div>

                <p class="mp4-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
            </div>
        </div>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/tab-group.css?cb={{cacheBuster}}">
{{/if}}

<div class="tab-group" data-module="tabGroup">
    <ul class="tab-group__nav">
    {{#each tabs}}
    <li class="tab-group__nav-list-item {{#if @first}}active{{/if}}">
        <a href='#' data-tab-id="{{this.id}}" class="tab-group__nav-link js-tab-link">{{this.title}}</a>
    </li>
    {{/each}}
    </ul>
    <div class="tab-group__content-panels">
        {{#each tabs}}
        <div class="tab-group__content js-tab-content {{#if displayTextOnLeft}}tab-group__content--rtl{{/if}} {{#if @first}}active{{/if}}" id="{{this.id}}">
            {{#if mp4Video}}
            {{> @mp4-video title=mp4Video.title description=mp4Video.description videoUrl=mp4Video.videoUrl autoplay=mp4Video.autoplay showControls=mp4Video.showControls loop=mp4Video.loop poster=mp4Video.poster firstInstance=mp4Video.firstInstance theme=../theme}}
            {{/if}}
            {{#if youTubeVideo}}
            {{> @youtube-video title=youTubeVideo.title description=youTubeVideo.description videoUrl=youTubeVideo.videoUrl firstInstance=youTubeVideo.firstInstance theme=../theme}}
            {{/if}}
            {{#if image}}
            {{> @image altText=image.altText caption=image.caption placeholderImageUrl=image.placeholderImageUrl fallbackImageUrl=image.fallbackImageUrl sources=image.sources ratio=image.ratio isOriginalSize=image.isOriginalSize firstInstance=image.firstInstance theme=../theme}}
            {{/if}}
            {{#if richtext}}
            {{> @rich-text html=richtext.html theme=../theme firstInstance=richtext.firstInstance }}
            {{/if}}
            {{#if form}}
            <div class="tab-group__form-content">{{{form}}}</div>
            {{/if}}
        </div>
        {{/each}}             
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "tabs": [
    {
      "title": "Richtext",
      "id": "tab-1",
      "richtext": {
        "firstInstance": true,
        "html": "<h2 class='heading03'>Richtext</h2><p>Objectively impact market-driven core competencies through covalent synergy. Globally generate multidisciplinary ideas whereas installed base methodologies.</p>"
      }
    },
    {
      "title": "Richtext & Image",
      "id": "tab-2",
      "image": {
        "firstInstance": true,
        "altText": "Image Alt Text",
        "caption": "Image caption appears inside figcaption tag",
        "placeholderImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=10",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100",
            "mobileImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=95&width=640"
          }
        ]
      },
      "richtext": {
        "html": "<h2 class='heading03'>Rich text with image</h2><p>Completely architect sticky initiatives before out-of-the-box alignments. Quickly engage standards compliant processes whereas 2.0 meta-services. Progressively.</p>"
      }
    },
    {
      "title": "Richtext & YouTube",
      "id": "tab-3",
      "displayTextOnLeft": true,
      "youTubeVideo": {
        "firstInstance": true,
        "title": "Video title",
        "description": "Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.",
        "videoUrl": "https://www.youtube.com/embed/qApVnpPei9I"
      },
      "richtext": {
        "html": "<h2 class='heading03'>Tab 3</h2><p>Continually grow bricks-and-clicks infrastructures and parallel best practices. Uniquely scale distributed e-business before enterprise-wide intellectual capital.</p>"
      }
    },
    {
      "title": "Image",
      "id": "tab-4",
      "image": {
        "altText": "Image Alt Text",
        "caption": "Image caption appears inside figcaption tag",
        "placeholderImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=10",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100",
            "mobileImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=95&width=640"
          }
        ]
      }
    },
    {
      "title": "MP4 Video",
      "id": "tab-5",
      "mp4Video": {
        "firstInstance": true,
        "showControls": false,
        "loop": true,
        "poster": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
        "videoUrl": "/media/test.mp4",
        "title": "Video title",
        "description": "Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after."
      }
    }
  ]
}
  • Content: 
    import { addClass, removeClass } from '../../../../js/utils/_helpers';
import addToDataLayer from '../../../../js/utils/datalayer';

export class TabGroup {
    constructor(container) {
        this.container = container;

        this.init();
    }

    init() {
        const navLinks = this.container.querySelectorAll('.js-tab-link');
        navLinks.forEach((link) => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const tab = e.currentTarget;
                const destination = tab.dataset.tabId;

                this.showTab(destination);
                addClass(tab.parentElement, 'active');
                TabGroup.trackClick(tab);
            });
        });
    }

    showTab(destination) {
        // Remove existing active classes
        const links = this.container.querySelectorAll('.js-tab-link');
        links.forEach((link) => {
            removeClass(link.parentElement, 'active');
        });

        const contentContainers = this.container.querySelectorAll('.js-tab-content');
        contentContainers.forEach((container) => {
            removeClass(container, 'active');
        });

        addClass(this.container.querySelector(`#${destination}`), 'active');
    }

    static trackClick(tab) {
        addToDataLayer({
            'event': 'link.click',
            'linkName': tab.innerText,
            'linkType': 'tab',
        });
    }
}

export default (module) => new TabGroup(module);
  • URL: /components/raw/tab-group/tab-group.js
  • Filesystem Path: source/patterns/03-components/text/tab-group/tab-group.js
  • Size: 1.5 KB
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.tab-group {
    &__nav {
        background-color: $color-tab-nav-bg;
        border-bottom: 1px solid;
        display: block;
        -ms-overflow-style: none;
        overflow-x: scroll;
        padding: 0;
        scrollbar-color: transparent transparent;   // Hide the scrollbar in FF
        scrollbar-width: 0;
        white-space: nowrap;
        width: 100%;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    &__nav-list-item {
        display: inline-block;
        list-style: none;
        padding: 0;
        position: relative;
        text-align: center;

        @include breakpoint(large) {
            display: inline-block;
            padding: 0;
            text-align: center;

            &--active {
                border-bottom: 1px solid $color-tab-active-nav-border;
            }
        }
    }

    &__nav-link {
        @extend %heading04;
        background-color: $color-tab-nav-bg;
        display: inline-block;
        line-height: rem(41);
        padding: 5px 40px;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;

        &:active {
            position: relative;
        }

        .active & {
            background-color: $color-tab-nav-bg-active;
            color: $color-tab-nav-active;

            &:visited {
                color: $color-tab-nav-active;
            }
        }
    }

    &__content {
        display: none;
        padding: rem(15) 0;

        @include breakpoint(medium) {
            padding: rem(50) 0;
        }

        & > * {
            margin: rem(15) 0;

            @include breakpoint(medium) {
                flex: 1 1 0;
                margin: rem(15);
            }
        }

        &.active {
            display: flex;
            flex-direction: column;

            @include breakpoint(medium) {
                flex-direction: row;
            }
        }

        &--rtl {
            flex-direction: column-reverse;

            @include breakpoint(medium) {
                flex-direction: row-reverse;
            }
        }
    }
}
  • URL: /components/raw/tab-group/tab-group.scss
  • Filesystem Path: source/patterns/03-components/text/tab-group/tab-group.scss
  • Size: 2.2 KB

No notes defined.