@salesforce-ux/design-system/__internal/chunked/docs/ui/components/drop-zone/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},4635:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return j},getElement:function(){return S}});var r=n(1594),o=n.n(r),a=n(5671),l=n(6547),s=(n(3212),n(5619),n(1374)),c=n(942),i=n.n(c),d=n(538),m=n(7852),u=n(6955),p=n(9623),h=n(3011),f=n(7412),E=n.n(f),b=function(e){return o().createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};b.propTypes={children:E().node};var v=function(e){return o().createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};v.propTypes={children:E().node};var g=function(e){return o().createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};g.propTypes={isDragging:E().bool,children:E().node};var y=function(e){return o().createElement("div",{className:"slds-drop-zone_drag__slot"})},w=function(e){return o().createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},o().createElement(A,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&o().createElement("div",{className:"slds-drop-zone__actions"},o().createElement(p.e2,null,o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};w.propTypes={hasActions:E().bool,isHovered:E().bool,children:E().node};var _=function(e){return o().createElement(d.eX,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};_.propTypes={isContainer:E().bool};var A=function(e){return o().createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},o().createElement(m.A,{figureLeft:o().createElement(_,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?o().createElement("h2",null,o().createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},o().createElement("span",{className:"slds-assistive-text"},"Edit: "),o().createElement("span",null,e.headerText))):o().createElement("h2",null,e.headerText)))};A.propTypes={isContainer:E().bool,headerText:E().string},h.Ay,h.aR,h.bw,h.wL,h.Ay,h.aR,h.bw,h.wL,h.Ay,h.aR,h.bw,h.wL,h.Ay,h.aR,h.bw,h.wL,n(8522),n(806);var x=a.XB.h2,C=a.XB.h3,T=a.XB.li,D=a.XB.p,O=a.XB.strong,N=a.XB.ul,S=function(){return(0,r.createElement)(a.Ay,{},(0,r.createElement)("div",{className:"lead doc"},"Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page."),(0,r.createElement)(l.A,{exampleOnly:!0},(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(w,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null)))),x({id:"Base-Drop-Zone"},"Base Drop Zone"),D({},"A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience."),(0,r.createElement)(s.A,{title:"Drop Zone - Base"},(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(g,null,(0,r.createElement)(v,null)))),x({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),D({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),(0,r.createElement)(s.A,{title:"Drop Zone - Drag Over"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(v,null),(0,r.createElement)(y,null),(0,r.createElement)(v,null))))),C({id:"Insertion-Point"},"Insertion Point"),D({},"An insertion point is used to further communicate to the user the exact slot the component is being placed."),(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(y,null)),D({},"The position of this element should be controlled by your implementation."),N({},T({},D({},O({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),T({},D({},O({},"When there are components in the drop zone"),": The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone."))),x({id:"Drop-Zone-Container"},"Drop Zone Container"),D({},"Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen."),(0,r.createElement)(s.A,{title:"Drop Zone - Container"},(0,r.createElement)(l.A,null,(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(w,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null))))),x({id:"Example-Cards"},"Example - Cards"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,null,(0,r.createElement)(w,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(w,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),x({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Insert Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(w,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(y,null),(0,r.createElement)(w,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},j=function(){return(0,a.Qr)(S())}},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,a),n.exports}a.m=r,a.amdO={},e=[],a.O=function(t,n,r,o){if(!n){var l=1/0;for(d=0;d<e.length;d++){n=e[d][0],r=e[d][1],o=e[d][2];for(var s=!0,c=0;c<n.length;c++)(!1&o||l>=o)&&Object.keys(a.O).every(function(e){return a.O[e](n[c])})?n.splice(c--,1):(s=!1,o<l&&(l=o));if(s){e.splice(d--,1);var i=r();void 0!==i&&(t=i)}}return t}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[n,r,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var l={};t=t||[null,n({}),n([]),n(n)];for(var s=2&r&&e;("object"==typeof s||"function"==typeof s)&&!~t.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(o,l),o},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4935,function(){var e={4935:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,l=n[0],s=n[1],c=n[2],i=0;if(l.some(function(t){return 0!==e[t]})){for(r in s)a.o(s,r)&&(a.m[r]=s[r]);if(c)var d=c(a)}for(t&&t(n);i<l.length;i++)o=l[i],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},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))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(4635)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=l}();