@salesforce/design-system-react/module/components/builder-header/__examples__/base-with-utilities.js

Salesforce Lightning Design System for React

import React from 'react';
import IconSettings from '../../icon-settings';
import BuilderHeader from '../../builder-header';
import BuilderHeaderNav from '../nav';
import BuilderHeaderNavDropdown from '../nav-dropdown';
import BuilderHeaderNavLink from '../nav-link';
import BuilderHeaderUtilities from '../utilities';

var Example = function Example(props) {
  return /*#__PURE__*/React.createElement(IconSettings, {
    iconPath: "/assets/icons"
  }, /*#__PURE__*/React.createElement(BuilderHeader, {
    assistiveText: {
      icon: 'Builder',
      backIcon: 'Back',
      helpIcon: 'Help'
    },
    events: {
      onClickBack: function onClickBack() {
        return console.log('onClickBack');
      },
      onClickHelp: function onClickHelp() {
        return console.log('onClickHelp');
      }
    },
    labels: {
      back: 'Back',
      help: 'Help',
      pageType: 'Page Type',
      title: 'App Name'
    },
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(BuilderHeaderNav, null, /*#__PURE__*/React.createElement(BuilderHeaderNavLink, {
    assistiveText: {
      label: 'Link'
    },
    iconCategory: "utility",
    iconName: "settings",
    label: "Link",
    onClick: function onClick() {
      return console.log('link/onClick');
    }
  }), /*#__PURE__*/React.createElement(BuilderHeaderNavDropdown, {
    assistiveText: {
      icon: 'Dropdown'
    },
    iconCategory: "utility",
    iconName: "page",
    id: "dropdown",
    label: "Dropdown",
    options: [{
      label: 'Menu Item One',
      value: 'A0'
    }, {
      label: 'Menu Item Two',
      value: 'B0'
    }],
    onSelect: function onSelect() {
      return console.log('dropdown/onSelect');
    }
  })), /*#__PURE__*/React.createElement(BuilderHeaderUtilities, null, /*#__PURE__*/React.createElement(BuilderHeaderNavLink, {
    assistiveText: {
      label: 'Back'
    },
    iconCategory: "utility",
    iconName: "back",
    label: "Back",
    onClick: function onClick() {
      return console.log('link/onClick');
    }
  }), /*#__PURE__*/React.createElement(BuilderHeaderNavDropdown, {
    assistiveText: {
      icon: 'Dropdown'
    },
    iconCategory: "utility",
    iconName: "help",
    id: "dropdown",
    label: "Help",
    menuPosition: "overflowBoundaryElement",
    options: [{
      label: 'Builder Help',
      value: 'A0',
      leftIcon: {
        name: 'help',
        category: 'utility'
      }
    }, {
      label: 'Keyboard Shortcuts',
      value: 'B0',
      leftIcon: {
        name: 'keyboard_dismiss',
        category: 'utility'
      }
    }],
    onSelect: function onSelect() {
      return console.log('dropdown/onSelect');
    },
    width: "x-small"
  }))));
};

Example.displayName = 'BuilderHeaderBaseWithUtilities';
export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
//# sourceMappingURL=base-with-utilities.js.map