@salesforce-ux/design-system/__internal/chunked/docs/ui/components/docked-utility-bar/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6026:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return x},getElement:function(){return O}});var l=n(1594),a=n.n(l),s=n(5671),i=n(6547),o=(n(2436),n(9582),n(5619),n(806)),r=n(8347),c=n(6955),m=n(942),d=n.n(m),u="\n  height: 540px;\n  overflow: hidden;\n  padding-top: 50px;\n\n  .slds-utility-bar_container {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .slds-utility-bar,\n  .slds-utility-panel {\n    position: absolute;\n  }\n",p=function(e){return a().createElement("div",{className:d()("slds-utility-panel slds-grid slds-grid_vertical",e.className),role:"dialog","aria-labelledby":"panel-heading-01"},a().createElement("div",{className:"slds-utility-panel__header slds-grid slds-shrink-none"},a().createElement("div",{className:"slds-media slds-media_center"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(r.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:"call"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("h2",{id:"panel-heading-01"},e.header||"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(c.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Close Panel",title:"Close Panel"}))),a().createElement("div",{className:"slds-utility-panel__body"},e.children))},f=function(e){return a().createElement("li",{className:d()("slds-utility-bar__item",{"slds-has-notification":e.notification,"slds-utility-bar__item_pop-out":e.hasPopOut},e.className)},a().createElement("button",{className:d()("slds-button slds-utility-bar__action",{"slds-is-active":e.active}),"aria-pressed":!!e.active},e.notification?a().createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},a().createElement("span",{className:"slds-assistive-text"},"●")):null,a().createElement(r.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:e.symbol}),a().createElement("span",{className:"slds-utility-bar__text"},e.children),e.hasPopOut&&a().createElement("span",{className:"slds-assistive-text"},": is popped out in new window")))},b=function(e){return a().createElement("footer",{className:"slds-utility-bar_container","aria-label":"Utility Bar"},a().createElement("h2",{className:"slds-assistive-text"},"Utility Bar"),a().createElement("ul",{className:d()("slds-utility-bar",e.className)},e.children),e.panel)},y=a().createElement(p,{className:"slds-is-open",header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body")),_=[{id:"default",label:"Default",demoStyles:u,element:a().createElement(b,{panel:a().createElement(p,{header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body"))},a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"open",label:"Panel Open",demoStyles:u,element:a().createElement(b,{panel:y},a().createElement(f,{symbol:"call",active:!0},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"notification",label:"Item has notification",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel",notification:!0},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"pop-out",label:"Item has popout",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{hasPopOut:!0,active:!0,symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))}],h=s.XB.code,E=s.XB.h2,v=s.XB.h3,N=s.XB.p,O=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels."),(0,l.createElement)(i.A,{isViewport:!0,exampleOnly:!0,demoStyles:(0,o.GP)(_,"open")},(0,o.NO)(_,"open")),E({id:"About-Docked-Utility-Bar"},"About Docked Utility Bar"),N({},"Fixed bar at the bottom of viewport, that contains items."),E({id:"Base"},"Base"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(_,"default")},(0,o.NO)(_,"default")),E({id:"States"},"States"),v({id:"Panel-open"},"Panel open"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(_,"open")},(0,o.NO)(_,"open")),v({id:"Item-has-notification"},"Item has notification"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(_,"notification")},(0,o.NO)(_,"notification")),v({id:"Item-has-popout"},"Item has popout"),N({},"If the utility bar item is active and its panel is popped open in a new window, use ",h({},".slds-utility-bar__item_pop-out")," on the ",h({},".slds-utility-bar__item"),". This will add a visual indicator to communicate that the panel is opened in a new window."),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(_,"pop-out")},(0,o.NO)(_,"pop-out")))},x=function(){return(0,s.Qr)(O())}}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={id:e,exports:{}};return l[e](n,n.exports,s),n.exports}s.m=l,s.amdO={},e=[],s.O=function(t,n,l,a){if(!n){var i=1/0;for(m=0;m<e.length;m++){n=e[m][0],l=e[m][1],a=e[m][2];for(var o=!0,r=0;r<n.length;r++)(!1&a||i>=a)&&Object.keys(s.O).every(function(e){return s.O[e](n[r])})?n.splice(r--,1):(o=!1,a<i&&(i=a));if(o){e.splice(m--,1);var c=l();void 0!==c&&(t=c)}}return t}a=a||0;for(var m=e.length;m>0&&e[m-1][2]>a;m--)e[m]=e[m-1];e[m]=[n,l,a]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var a=Object.create(null);s.r(a);var i={};t=t||[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(a,i),a},s.d=function(e,t){for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=2518,function(){var e={2518:0};s.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,a,i=n[0],o=n[1],r=n[2],c=0;if(i.some(function(t){return 0!==e[t]})){for(l in o)s.o(o,l)&&(s.m[l]=o[l]);if(r)var m=r(s)}for(t&&t(n);c<i.length;c++)a=i[c],s.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return s.O(m)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(6026)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-utility-bar/docs.mdx.js"]=i}();