App Header

Sticker Sheet Storybook

Example

<vega-flex justify-content="space-between" align-item="center">
    <div>
        <img
            src="/images/Heartland-logo.svg"
            alt=""
        />
    </div>
    <div id="menu-toggle">
        <vega-flex gap="size-8">
            <vega-app-header-button label="Marketing" selected="true"></vega-app-header-button>
            <vega-app-header-button label="Support"></vega-app-header-button>
        </vega-flex>
    </div>
    <div>
        <vega-app-header-button id="profile" show-label="false" show-border="true"></vega-app-header-button>
    </div>
</vega-flex>


    const profileBtn = document.querySelector('#profile');
    profileBtn.dropdown = {
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' },
        ],
    };
    profileBtn.avatar = {
        fallbackText: 'AA',
        src: '/images/h-logo.svg',
    };
    const headerBtns = document.querySelectorAll('#menu-toggle vega-app-header-button');
    headerBtns.forEach(item => {
        item.addEventListener('vegaClick', e => {
            headerBtns.forEach(item => {
                if (e.target.label === item.label) {
                    e.target.selected = true;
                } else {
                    item.selected = false;
                }
            });
        });
    });

Mobile Example


<vega-flex justify-content="space-between" align-item="center">
    <vega-flex gap="size-12" align-item="start">
        <vega-app-header-button id="mobile-menu"></vega-app-header-button>
        <vega-flex direction="col">
            <div class="v-font-h4 v-text-primary">Title</div>
            <div class="v-font-h6 v-text-secondary">Subtitle</div>
        </vega-flex>
    </vega-flex>
    <vega-app-header-button
        id="profile"
        show-label="false"
        show-menu-arrow-icon="false"
    ></vega-app-header-button>
</vega-flex>


    const mobileMenu = document.querySelector('#mobile-menu');
    mobileMenu.avatar = {
        icon: 'hb-menu',
    };
    const profileBtn = document.querySelector('#profile');
    profileBtn.dropdown = {
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' },
        ],
    };
    profileBtn.avatar = {
        fallbackText: 'AA',
        src: '/images/h-logo.svg',
    };

Usage

The App Header is a complex component which contains multiple other components. It is to be used on the top of pages and includes information such as a title, subtitle, and various different button types, which can each perform different functions. These include labels, button circles, and dropdowns.

App Header Buttons

The App Header component is makes use of various App Header buttons. These are discrete components, however should only be used within the App Header.

Examples


<vega-app-header-button id="profile-btn" label="User Name"></vega-app-header-button>

<vega-app-header-button id="icon-header-btn" label="Label"></vega-app-header-button>


    const profileBtn = document.querySelector('#profile-btn');
    profileBtn.avatar = {
        fallbackText: 'UN', // This will be rendered when avatar image src load failure or image src is empty
        // src: 'image url here'
    };
    profileBtn.dropdown = {
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' },
        ],
    };
    profileBtn.addEventListener('vegaDropdownClick', e => {
        alert(`Clicked ${e.detail}`);
    });


    const iconHeaderBtn = document.querySelector('#icon-header-btn');
    iconHeaderBtn.avatar = {
        icon: 'app-tray',
    };
    iconHeaderBtn.dropdown = {
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' },
        ],
    };

Selected State Example


<div id="selectedStateTemplate">
    <vega-flex gap="size-8">
        <vega-app-header-button label="Marketing" selected="true"></vega-app-header-button>
        <vega-app-header-button label="Support"></vega-app-header-button>
    </vega-flex>
</div>
    const headerBtns = document.querySelectorAll('#selectedStateTemplate vega-app-header-button');
    headerBtns.forEach(item => {
        item.addEventListener('vegaClick', e => {
            headerBtns.forEach(item => {
                if (e.target.label === item.label) {
                    e.target.selected = true;
                } else {
                    item.selected = false;
                }
            });
        });
    });

Properties

Name Description Default
dropdown Dropdown config. More info see VegaAppHeaderButtonDropdownConfig
{ size?: ResponsiveType<SizeType>; trigger?: 'hover' \| 'click'; source?: DropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo: string; minWidth: ResponsiveType<SizeType>; maxWidth: ResponsiveType<SizeType>; translocation: ResponsiveType<TranslocationType> }
size The size of header button. Uses ResponsiveType default
label The label of header button
string		 -
show-label Indicates whether to show the label
boolean		 true
avatar See type VegaAppHeaderAvatarConfig
{ src?: string; icon?: string; fallbackText?: string; fallbackBgColor?: BackgroundColorsTokenType; fallbackTextColor?: TextColorsTokenType; }		 {}
avatar-position Avatar position of header button
right left		 left
show-border Indicates whether to show the border
boolean		 false
show-menu-arrow-icon Indicates whether to show the menu arrow icon
boolean		 true
selected Triggers the selected state for the header button
boolean		 true

Types

VegaHeaderAvatarConfig

type VegaAppHeaderAvatarConfig = {
    src?: string;
    icon?: string;
    fallbackText?: string;
    fallbackBgColor?: BackgroundColorsTokenType;
    fallbackTextColor?: TextColorsTokenType;
};

VegaAppHeaderButtonDropdownConfig

type VegaAppHeaderButtonDropdownConfig = {
    size?: ResponsiveType<SizeType>;
    trigger?: 'hover' | 'click';
    source?: DropdownSourceItem[];
    matchTargetWidth?: boolean;
    maxHeight?: number;
    positionRelativeTo: string;
    minWidth?: ResponsiveType<SizeType>;
    maxWidth?: ResponsiveType<SizeType>;
    translocation?: ResponsiveType<TranslocationType>;
};

Events

vegaDropdownClick

  • Dispatched when an item from the dropdown is clicked.

JavaScript

document.getElementById("xxx").addEventListener("vegaDropdownClick", (e) => { ... })

React

<VegaAppHeaderButton onVegaDropdownClick="{...}"></VegaAppHeaderButton>

Vue.js

<vega-app-header-button @vegadropdownclick="..."></vega-app-header-button>

Angular

<vega-app-header-button (vegaDropdownClick)="..."></vega-app-header-button>

For more information, view Dropdown

vegaClick

  • Dispatched when the header button is clicked.

Example Usage

HTML

<vega-app-header-button id="test" label="User Name"></vega-app-header-button>

<script>
    const headerBtn = document.querySelector('#test');
    headerBtn.dropdown = {
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' },
        ],
    };
    headerBtn.avatar = {
        src: '...',
    };
</script>

React

<VegaAppHeaderButton
    id="test"
    label="User Name"
    dropdown={{
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' }
        ]
    }}></VegaAppHeaderButton>

Angular


<!-- Angular -->
<vega-app-header-button
    id="test"
    label="User Name"
    [dropdown]="{
        source: [
            { label: 'Sign out', key: 'sign-out' },
            { label: 'Preferences', key: 'preferences' }
        ]
    }"
></vega-app-header-button>

Accessibility

Standards

  • Elements must only use allowed ARIA attributes
  • ARIA attributes must conform to valid values
  • ARIA attributes must conform to valid names
  • Inline text spacing must be adjustable with custom stylesheets
  • Buttons must have discernible text
  • Elements must have sufficient color contrast
  • id attribute value must be unique
  • Images must have alternate text
  • Interactive controls must not be nested