@salesforce/design-system-react/module/components/global-header/__docs__/storybook-stories.js

Salesforce Lightning Design System for React

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import IconSettings from '../../icon-settings';
import Avatar from '../../avatar';
import GlobalHeader from '../../global-header';
import GlobalHeaderButton from '../../global-header/button';
import GlobalHeaderDropdown from '../../global-header/dropdown';
import GlobalHeaderProfile from '../../global-header/profile';
import GlobalHeaderSearch from '../../global-header/search';
import { GLOBAL_HEADER } from '../../../utilities/constants'; // import globalNavigationBar from '../../global-navigation-bar/__docs__/storybook-stories';

/* eslint-disable react/prop-types */

/* eslint-disable no-script-url */

/* eslint-disable react/display-name */

var HeaderProfileCustomContent = function HeaderProfileCustomContent(props) {
  return React.createElement("div", {
    id: "custom-dropdown-menu-content"
  }, React.createElement("div", {
    className: "slds-m-around_medium"
  }, React.createElement("div", {
    className: "slds-tile slds-tile_board slds-m-horizontal_small"
  }, React.createElement("p", {
    className: "tile__title slds-text-heading_small"
  }, "Art Vandelay"), React.createElement("div", {
    className: "slds-tile__detail"
  }, React.createElement("p", {
    className: "slds-truncate"
  }, React.createElement("a", {
    className: "slds-m-right_medium",
    href: "javascript:void(0)",
    onClick: props.onClick
  }, "Settings"), React.createElement("a", {
    href: "javascript:void(0)",
    onClick: props.onClick
  }, "Log Out"))))));
};
/* eslint-disable react/display-name */


var GlobalHeaderDemo = function GlobalHeaderDemo(props) {
  return React.createElement(GlobalHeader, {
    onSkipToContent: action('Skip to Main Content'),
    onSkipToNav: action('Skip to Navigation') // Add back for visual review with navigation present.
    // The presence of React Modal in App Launcher in Global Navigation prevents Jest (node) testing.
    // navigation={globalNavigationBar(props)}
    ,
    assistiveText: {
      skipToContent: 'Skip to Main Content',
      skipToNavAssistiveText: 'Skip to Navigation'
    }
  }, React.createElement(GlobalHeaderSearch, {
    onSelect: action('Search Selected'),
    placeholder: "Search Salesforce",
    options: [{
      label: 'Email'
    }, {
      label: 'Mobile'
    }]
  }), React.createElement(GlobalHeaderButton, {
    className: "slds-m-right_small",
    iconVariant: null,
    label: "Feedback",
    onClick: action('Feedback Clicked'),
    variant: "neutral"
  }), React.createElement(GlobalHeaderDropdown, {
    openOn: props.openOn,
    assistiveText: {
      icon: 'Global Actions'
    },
    globalAction: true,
    iconCategory: "utility",
    iconName: "add",
    id: "global-header-dropdown-example",
    onSelect: action('Action Selected'),
    options: [{
      label: 'New Note',
      rightIcon: {
        category: 'standard',
        name: 'note',
        size: 'small'
      }
    }, {
      label: 'Log a Call',
      rightIcon: {
        category: 'standard',
        name: 'log_a_call',
        size: 'small'
      }
    }]
  }), React.createElement(GlobalHeaderButton, {
    assistiveText: {
      icon: 'Help and Training'
    },
    iconCategory: "utility",
    iconName: "question",
    onClick: action('Help Clicked')
  }), React.createElement(GlobalHeaderDropdown, {
    openOn: props.openOn,
    assistiveText: {
      icon: 'Setup'
    },
    iconCategory: "utility",
    iconName: "setup",
    id: "global-header-dropdown-example",
    onSelect: action('Action Selected'),
    options: [{
      label: 'Global Setup'
    }, {
      label: 'Permissions'
    }]
  }), React.createElement(GlobalHeaderButton, {
    assistiveText: {
      icon: 'Notifications'
    },
    iconCategory: "utility",
    iconName: "notification",
    onClick: action('Notifications Clicked')
  }), React.createElement(GlobalHeaderProfile, {
    id: "global-header-dropdown-profile-example",
    openOn: props.openOn,
    onClick: action('Profile Clicked'),
    onSelect: action('Profile Selected'),
    avatar: props.avatar
  }, React.createElement(HeaderProfileCustomContent, null)));
};

storiesOf(GLOBAL_HEADER, module).addDecorator(function (getStory) {
  return React.createElement("div", {
    className: "slds-p-around_medium"
  }, React.createElement(IconSettings, {
    iconPath: "/assets/icons"
  }, getStory()));
}).add('Search + Navigation', function () {
  return React.createElement(GlobalHeaderDemo, null);
}).add('Open on Hybrid', function () {
  return React.createElement(GlobalHeaderDemo, {
    openOn: "hybrid"
  });
}).add('Fewer Elements', function () {
  return React.createElement(GlobalHeader, {
    logoSrc: "/assets/images/global-header/logo.svg"
  }, React.createElement(GlobalHeaderDropdown, {
    assistiveText: {
      icon: 'Setup'
    },
    iconCategory: "utility",
    iconName: "setup",
    id: "global-header-dropdown-example",
    onSelect: action('Action Selected'),
    options: [{
      label: 'Global Setup'
    }, {
      label: 'Permissions'
    }]
  }), React.createElement(GlobalHeaderProfile, {
    id: "global-header-dropdown-profile-example",
    onClick: action('Profile Clicked'),
    onSelect: action('Profile Selected'),
    options: [{
      label: 'Profile Menu'
    }]
  }));
}).add('With custom <Avatar/>', function () {
  return React.createElement(GlobalHeaderDemo, {
    avatar: React.createElement(Avatar, {
      variant: "user",
      label: "Art Vandelay"
    })
  });
});
//# sourceMappingURL=storybook-stories.js.map