@salesforce-ux/design-system/__internal/chunked/docs/ui/components/page-headers/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/page-headers/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],o=t[2],d=0,u=[];d<i.length;d++)r=i[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,o||[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,i=1;i<s.length;i++){var c=s[i];0!==l[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={51:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var m=c;return n.push([722,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},722:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return le})),s.d(t,"getContents",(function(){return ne}));var a=s(0),l=s.n(a),n=s(4),r=s(2),i=(s(27),s(14)),c=s(1),o=s(3),m=s.n(o),d=s(5),u=s.n(d),p=s(7),h=s(10),b=s(81),E=s(35),f=s(50),y=function(e){return l.a.createElement(E.a,{symbol:e.type,className:"slds-page-header__icon",assistiveText:e.assistiveText,title:e.title})};y.propTypes={assistiveText:m.a.oneOfType([m.a.string,m.a.bool]),title:m.a.oneOfType([m.a.string,m.a.bool]),type:m.a.string.isRequired};var g=function(e){return l.a.createElement("div",{className:u()("slds-page-header",{"slds-page-header_vertical":e.isVertical,"slds-page-header_related-list":e.isRelatedList,"slds-page-header_record-home":e.isRecordHome})},e.children)};g.propTypes={children:m.a.node,isRelatedList:m.a.bool,isVertical:m.a.bool,isRecordHome:m.a.bool,showTooltip:m.a.bool};var v=function(e){return l.a.createElement("div",{className:u()("slds-page-header__row",{"slds-page-header__row_gutters":e.hasGutters})},e.children)};v.propTypes={children:m.a.node,hasGutters:m.a.bool};var _=function(e){return l.a.createElement("div",{className:u()({"slds-page-header__col-actions":"actions"===e.type,"slds-page-header__col-controls":"controls"===e.type,"slds-page-header__col-details":"details"===e.type,"slds-page-header__col-meta":"meta"===e.type,"slds-page-header__col-title":"title"===e.type})},e.children)};_.propTypes={children:m.a.node,type:m.a.string};var T=function(e){return l.a.createElement(b.a,{figureLeft:e.symbol&&l.a.createElement(y,{assistiveText:!e.objectName&&e.symbol,title:!e.objectName&&e.symbol,type:e.symbol})},l.a.createElement("div",{className:"slds-page-header__name"},l.a.createElement("div",{className:"slds-page-header__name-title"},l.a.createElement("h1",null,e.objectName&&!e.metaText?l.a.createElement("span",null,e.objectName):null,l.a.createElement("span",{className:u()("slds-page-header__title",!e.isVertical&&"slds-truncate",e.isVertical&&"slds-hyphenate"),title:e.titleText},e.titleText))),e.hasSwitcher&&l.a.createElement("div",{className:"slds-page-header__name-switcher slds-is-relative"},l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{"aria-haspopup":"true",assistiveText:"Switch list view",className:"slds-button_icon-small",iconClassName:"slds-icon_x-small",symbol:"down",title:"Switch list view"})}),l.a.createElement(f.a,{className:u()("slds-nubbin_bottom-left",!e.showTooltip&&"slds-fall-into-ground"),id:"dropdown-label",style:{position:"absolute",left:"-12px",top:"-48px",width:"190px"}},e.fieldLevelMessage||"Some helpful information."))),e.metaText&&l.a.createElement("p",{className:"slds-page-header__name-meta"},e.metaText))};T.propTypes={symbol:m.a.string,objectName:m.a.string,hasSwitcher:m.a.bool,metaText:m.a.string,titleText:m.a.string.isRequired,isVertical:m.a.bool};var x=function(e){return l.a.createElement("p",{className:"slds-page-header__meta-text"},e.children)};x.propTypes={children:m.a.node};var w=function(e){return l.a.createElement("div",{className:"slds-page-header__controls"},e.children)};w.propTypes={children:m.a.node};var N=function(e){return l.a.createElement("div",{className:"slds-page-header__control"},e.children)};N.propTypes={children:m.a.node};var O=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-row"},e.children)};O.propTypes={children:m.a.node};var j=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-list"},e.children)};j.propTypes={children:m.a.node};var C=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-block"},e.children)};C.propTypes={children:m.a.node};var S=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-item"},e.children)};S.propTypes={children:m.a.node};var L=function(e){return l.a.createElement("div",{className:u()("slds-text-title",!e.isVertical&&"slds-truncate"),title:e.title},e.children)};L.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var D=function(e){return l.a.createElement("div",{className:e.isVertical?null:"slds-truncate",title:e.title},e.children)};D.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var V=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{titleText:"Rohde Corp - 80,000 Widgets",metaText:"Mark Jaeckal • Unlimited Customer • 11/13/15",symbol:"opportunity"}))))},M=l.a.createElement(V,null),R=s(12),A=s(41),k=s(13),F=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed",hasSwitcher:!0,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},I=l.a.createElement(F,null),P=[{id:"base-extra-long",label:"Base with extra long name",element:l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",hasSwitcher:!0})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},{id:"base-with-tooltip-open",label:"Base with tooltip open",element:l.a.createElement(F,{showTooltip:!0,fieldLevelMessage:"Change View for the account"})},{id:"card",label:"Inside a card",element:l.a.createElement(k.d,null,l.a.createElement(F,null))},{id:"tab-card",label:"Inside a tabs card",element:l.a.createElement("div",{className:"slds-tabs_card"},l.a.createElement(F,null))}],H=s(127),W=function(e){return l.a.createElement(g,{isRecordHome:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunity",titleText:"Acme - 1,200 Widgets"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(H.a,{isNotSelected:!0,isNeutral:!0})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Clone")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,{hasGutters:!0},l.a.createElement(_,{type:"details"},l.a.createElement(O,null,l.a.createElement(C,null,l.a.createElement(L,{title:"Field 1"},"Field 1"),l.a.createElement(D,{title:"Description that demonstrates truncation with a long text field."},"Description that demonstrates truncation with a long text field.")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 2 (3)"},"Field 2 (3)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values"},"Multiple Values")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 3"},"Field 3"),l.a.createElement(D,{title:"Hyperlink"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Hyperlink"))),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 4"},"Field 4"),l.a.createElement(D,{title:"Description (2-line truncation—must use JS to truncate)."},"Description (2-line truncati..."))))))},B=l.a.createElement(W,null),G=s(49),J=function(e){return l.a.createElement("div",{className:"demo-only",style:{width:"300px"}},l.a.createElement(g,{isVertical:!0},l.a.createElement(T,{symbol:"opportunity",titleText:"Burlington Textile Weaving Plant Generator",isVertical:!0}),l.a.createElement(w,null,l.a.createElement(H.a,{isNeutral:!0,isNotSelected:!0}),l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})))),l.a.createElement(j,null,l.a.createElement(S,null,l.a.createElement(L,{title:"Field 1"},"Account Name"),l.a.createElement(D,{title:"Burlington Textile Weaving Plant Generator",isVertical:!0},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Burlington Textile Weaving Plant Generator"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Address (2)"},"Address (2)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values",isVertical:!0},l.a.createElement("div",null,"1 Market St"),l.a.createElement("div",null,"San Francisco, CA 94105"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Close Date"},"Close Date"),l.a.createElement(D,{title:"11/1/2018",isVertical:!0},"11/1/2018")),l.a.createElement(S,null,l.a.createElement(L,{title:"Opportunity Owner"},"Opportunity Owner"),l.a.createElement(D,{title:"Hyperlink",isVertical:!0},l.a.createElement("div",{className:"slds-media slds-media_small"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement(G.a,{className:"slds-avatar_circle slds-avatar_x-small"},l.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeanette Gomez"))))),l.a.createElement(S,null,l.a.createElement(L,{title:"Amount"},"Amount"),l.a.createElement(D,{title:"$375,000.00",isVertical:!0},"$375,000.00")))))},U=l.a.createElement(J,null),q=s(134),$=q.a.Crumb,z=function(e){return l.a.createElement(g,{isRelatedList:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(q.a,{className:"slds-m-bottom_xx-small"},l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Accounts"),l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),l.a.createElement(T,{titleText:"Contacts (will truncate)"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Add Contact")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • sorted by name")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"chart",assistiveText:"Chart",title:"Chart"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"})),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"sort",hasDropdown:!0,assistiveText:"Sort List",title:"Sort List"})}))))))))},K=l.a.createElement(z,null),Q=n.c.code,X=n.c.h2,Y=n.c.h3,Z=n.c.h4,ee=n.c.li,te=n.c.p,se=n.c.strong,ae=n.c.ul,le=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"lead doc"},"Page headers are used at the top of several page types and contains the Title of the page."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(c.f)(I)),X({id:"About-Page-header"},"About Page header"),te({},"The Page Header uses the ",Q({},".slds-page-header")," class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions."),X({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(c.f)(M)),X({id:"Object-Home"},"Object Home"),Object(a.createElement)(r.a,null,Object(c.f)(I)),te({},"The title for the Object Home page header is a filtering component. The ",Q({},".slds-text-focus")," class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link."),te({},"This component is created entirely of existing components like buttons, button groups, and icons."),Y({id:"Examples"},"Examples"),Z({id:"With-extra-long-name"},"With extra long name"),Object(a.createElement)(r.a,null,Object(c.f)(P,"base-extra-long")),Z({id:"With-tooltip-open"},"With tooltip open"),Object(a.createElement)(r.a,{demoStyles:"margin-top:4px;"},Object(c.f)(P,"base-with-tooltip-open")),Object(a.createElement)(i.a,{type:"note"},Object(a.createElement)("p",null,"For more information about how to handle the Tooltip behavior, please visit the ",Object(a.createElement)("a",{href:"/components/tooltips/#Examples"},"Tooltip Examples"),".")),Z({id:"Inside-a-card"},"Inside a card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"card")),Z({id:"Inside-a-tabs-card"},"Inside a tabs card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"tab-card")),X({id:"Record-Home"},"Record Home"),Object(a.createElement)(r.a,null,Object(c.f)(B)),te({},"Page header record home contains up to four compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div. That div contains the top and bottom spacing needed for this version of the page header."),te({},"When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the ",Q({},".slds-truncate")," class. Two line truncation must be achieved using JavaScript."),te({},"The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field."),te({},se({},"Record Title")),ae({},ee({},"Display Record Type icon to the left of the title"),ee({},"Record Type is displayed above the title"),ee({},"When required, follow action is displayed to the right of the record title"),ee({},"Display one line of text, truncate when the length conflicts with the page level actions")),te({},"As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate ",Q({},"mailto:")," or web url. Do not modify the user's input, display as intended."),te({},"When text is truncated, display full field text in browser tooltip on hover."),te({},"Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the ",Q({},".slds-truncate")," class. Display the full address via browser tooltip."),X({id:"Record-Home-Vertical"},"Record Home Vertical"),Object(a.createElement)(r.a,null,Object(c.f)(U)),te({},"Vertical page header record home contains up to seven compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired."),X({id:"Related-List"},"Related List"),Object(a.createElement)(r.a,null,Object(c.f)(K)),te({},"The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated."))},ne=function(){return Object(n.a)(le())}}});