@salesforce-ux/design-system/__internal/chunked/docs/ui/components/builder-header/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=function(e){function t(t){for(var r,s,l=t[0],i=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,c||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],r=!0,l=1;l<a.length;l++){var i=a[l];0!==n[i]&&(r=!1)}r&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var r={},n={10:0},o=[];function s(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=r,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)s.d(a,r,function(t){return e[t]}.bind(null,r));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return o.push([728,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},728:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return fe})),a.d(t,"getContents",(function(){return ye}));var r=a(0),n=a.n(r),o=a(4),s=a(2),l=a(14),i=a(1),c=a(3),u=a.n(c),d=a(25),m=a.n(d),p=a(10),b=a(7),h=a(20),f=a.n(h),y=a(61),v=a(72),E=a(102);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function w(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return O(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var S=function(){return n.a.createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",n.a.createElement(E.a,{title:"Learn More"},"Learn more."))},j=function(e){var t=e.activeError,a=e.assistiveText,o=e.children,s=e.isWarning,l=e.isError,i=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,b=Object(r.useRef)(),h=Object(r.useRef)(),E=_(Object(r.useState)(),2),O=E[0],j=E[1],T=_(Object(r.useState)(!1),2),x=T[0],N=T[1],D=_(Object(r.useState)(!1),2),k=D[0],C=D[1],P=function(){b.current.focus(),N(!0)},W=function(){b.current.focus(),N(!1),C(!1),i(c)};Object(r.useEffect)((function(){function e(e){var t=A.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}));var A=new Map([[27,function(){x&&W()}],[9,function(e){if(x){C(!0);var t=h.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),a=t[0],r=t[t.length-1];if(!e.shiftKey&&document.activeElement!==a)return a.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==r&&(r.focus(),e.preventDefault())}}]]);Object(r.useEffect)((function(){var e=b.current,t=function(){j({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}}),[]),Object(r.useEffect)((function(){t&&P()}),[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){w(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({position:"absolute"},O),I=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,r.Children.only(o)&&n.a.cloneElement(o,{size:u,feedback:p,symbol:p,assistiveText:a,title:d,onClick:function(){x?W():P()},onBlur:function(){k||(N(!1),i(c))},innerRef:b}),x&&f.a.createPortal(n.a.createElement(y.a,{isWarning:s,isError:l,headingId:I,style:B,onClose:W,header:n.a.createElement(v.b,{headingId:I,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:h,nubbinPosition:"top right"},n.a.createElement(S,null)),document.body))},T=Object(i.c)(!1,(function(e,t,a){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")})),x=Object(i.c)(!0,(function(e,t,a){var r=["Button","ButtonIcon"];n.a.Children.forEach(e[t],(function(e){if(!r.includes(e.type.name))throw new Error("".concat(a," child should be one of the type: ").concat(r.join(", ")))}))}));j.propTypes={activeError:T,assistiveText:u.a.string,children:x,isWarning:u.a.bool,isError:u.a.bool,parentCallback:u.a.func,parentCallbackData:u.a.node,size:u.a.string,type:u.a.string};var N=j,D=a(11),k=a(50),C=a(9);function P(e){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function B(e,t,a){return t&&A(e.prototype,t),a&&A(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t)}function M(e,t){return(M=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function R(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,r=V(e);if(t){var n=V(this).constructor;a=Reflect.construct(r,arguments,n)}else a=r.apply(this,arguments);return L(this,a)}}function L(e,t){if(t&&("object"===P(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function V(e){return(V=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function H(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return z(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return z(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function z(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var U=function(){return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return n.a.createElement(C.f,{className:"slds-dropdown_right slds-dropdown_actions"},n.a.createElement(C.h,{ariaLabel:"Show More"},n.a.createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),n.a.createElement(C.g,null,"Menu Item One"),n.a.createElement(C.g,null,"Menu Item Two"),n.a.createElement(C.g,null,"Menu Item Three")))},q=function(e){return n.a.createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},n.a.createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&n.a.createElement(F,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},F=function(e){var t=e.openDropDown,a=e.symbol;return n.a.createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},n.a.createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:a,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),n.a.createElement(D.a,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&n.a.createElement(J,null))};F.propTypes={openDropDown:u.a.bool,symbol:u.a.string},F.defaultProps={openDropDown:!1};var K=function(e){var t=e.label;return n.a.createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},n.a.createElement("h1",{className:"slds-builder-header__item-label"},n.a.createElement("span",{className:"slds-truncate",title:t},t)))};K.propTypes={label:u.a.string},K.defaultProps={label:"Page Type"};var $=function(e){var t=e.hasBackTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)},"aria-describedby":o&&b,title:"Back"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};$.propTypes={hasBackTooltip:u.a.bool};var Y=function(e){return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u.a.string};var Q=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},X=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},Z=function(e){var t=e.hasStatusTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),n.a.createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":o&&b,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)}},"Inactive - Modified 1 day ago"))};Z.propTypes={hasStatusTooltip:u.a.bool};var ee=function(e){var t=e.hasStatus,a=e.hasStatusTooltip,o=e.hasWarning,s=e.hasError,l=[];o&&l.push("warning"),s&&l.push("error");var i=H(Object(r.useState)(!1),2),c=i[0],u=i[1],d=function(){s&&u(!0)},m=function(e){u(e)};return n.a.createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&n.a.createElement(Z,{hasStatusTooltip:a}),Array.isArray(l)&&l.length>0&&l.map((function(e,t){var a="warning"===e,r="error"===e;return n.a.createElement(N,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:a,isError:r,activeError:c&&r,parentCallback:m,parentCallbackData:!1},n.a.createElement(b.b,null))})),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},n.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),n.a.createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};ee.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var te=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,a=e.hasStatusTooltip,r=e.hasWarning,o=e.hasError;return n.a.createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},n.a.createElement(Q,null),n.a.createElement(X,null),n.a.createElement(ee,{hasStatus:t,hasStatusTooltip:a,hasWarning:r,hasError:o}))}}]),a}(r.Component);te.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var ae=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,a=e.docName,r=e.showDropDown,o=e.openDropDown,s=e.hasBackTooltip,l=e.hasStatus,i=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return n.a.createElement("div",{className:"slds-builder-header_container"},n.a.createElement("header",{className:"slds-builder-header"},n.a.createElement($,{hasBackTooltip:s}),n.a.createElement(U,null),n.a.createElement(q,{showDropDown:r,openDropDown:o}),n.a.createElement(K,{label:a}),n.a.createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},n.a.createElement(G,{symbol:"settings"}),n.a.createElement(Y,null))),t&&n.a.createElement(te,{hasStatus:l,hasStatusTooltip:i,hasWarning:c,hasError:u}))}}]),a}(r.Component);ae.propTypes={showToolbar:u.a.bool,docName:u.a.string,showDropDown:u.a.bool,openDropDown:u.a.bool,hasBackTooltip:u.a.bool,hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool},ae.defaultProps={showDropDown:!0};var re=ae,ne="height: 220px; position: relative;",oe=n.a.createElement(re,{showDropDown:!0}),se=[{id:"menu-open",label:"Menu open",isOpen:!0,element:n.a.createElement(re,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:n.a.createElement(re,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:n.a.createElement(re,{hasBackTooltip:!0})}],le=n.a.createElement(re,{showToolbar:!0}),ie=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:n.a.createElement(re,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:n.a.createElement(re,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:n.a.createElement(re,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:n.a.createElement(re,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],ce=o.c.a,ue=o.c.h2,de=o.c.h3,me=o.c.h4,pe=o.c.li,be=o.c.p,he=o.c.ul,fe=function(){return Object(r.createElement)(o.b,{},Object(r.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),Object(r.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:ne},Object(i.f)(le)),ue({id:"About-Builder-Header"},"About Builder Header"),be({},"To learn more about the Builder pattern in general, check out our ",ce({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",ce({href:"/guidelines/builder/header/"},"Builder Header"),"."),ue({id:"Base"},"Base"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(oe)),ue({id:"With-open-dropdown-menu"},"With open dropdown menu"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"menu-open")),ue({id:"With-tooltip"},"With tooltip"),be({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The back action's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"has-tooltip")),ue({id:"Variations"},"Variations"),de({id:"With-a-Truncated-Name"},"With a Truncated Name"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"with-truncation")),de({id:"With-a-Toolbar"},"With a Toolbar"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(le)),de({id:"With-Status-text"},"With Status text"),be({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),be({},"A status text can include:"),he({},pe({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),pe({},"Action, plus Last Modified Time, represented with ",ce({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),be({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The status text's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text")),de({id:"With-Alert"},"With Alert"),be({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",Object(r.createElement)("strong",null,"close button")," or"," ",Object(r.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),me({id:"Warning"},"Warning"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning")),me({id:"Error"},"Error"),be({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-error")),me({id:"Warning-and-Error"},"Warning and Error"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning-and-error")))},ye=function(){return Object(o.a)(fe())}}});