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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/drop-zone/docs.mdx.js"]=function(e){function t(t){for(var a,o,s=t[0],d=t[1],i=t[2],u=0,m=[];u<s.length;u++)o=s[u],l[o]&&m.push(l[o][0]),l[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(c&&c(t);m.length;)m.shift()();return r.push.apply(r,i||[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],a=!0,s=1;s<n.length;s++){var d=n[s];0!==l[d]&&(a=!1)}a&&(r.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={21:0},r=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],d=s.push.bind(s);s.push=t,s=s.slice();for(var i=0;i<s.length;i++)t(s[i]);var c=d;return r.push([252,0]),n()}({0:function(e,t){e.exports=React},250:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),l=s(n(0)),r=s(n(1)),o=s(n(2));function s(e){return e&&e.__esModule?e:{default:e}}var d=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,l.default.Component),a(t,[{key:"render",value:function(){var e=(0,r.default)("slds-media",this.props.className,function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}({},"slds-media_"+this.props.flavor,this.props.flavor));return l.default.createElement("div",{className:e},this.renderFigure(this.props.figureCenter,(0,r.default)("slds-media__figure_stacked",this.props.figureCenterClassName)),this.renderFigure(this.props.figureLeft,this.props.figureLeftClassName),l.default.createElement("div",{className:"slds-media__body"},this.props.children),this.renderFigure(this.props.figureRight,(0,r.default)("slds-media__figure_reverse",this.props.figureRightClassName)))}},{key:"renderFigure",value:function(e,t){return e?(t=(0,r.default)("slds-media__figure",t),l.default.createElement("div",{className:t},e)):null}}]),t}();d.displayName="MediaObject",d.propTypes={figureLeft:o.default.node,figureLeftClassName:o.default.string,figureRight:o.default.node,figureRightClassName:o.default.string,figureCenter:o.default.node,figureCenterClassName:o.default.string,flavor:o.default.oneOf(["center","small","stacked","responsive"])},t.default=d},251:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.DropZoneLabel=t.DropZoneContainer=t.DropZoneInsertionPoint=t.DropZone=t.DemoComponent=t.Demo=void 0;var a=m(n(0)),l=m(n(1)),r=n(8),o=m(n(250)),s=m(n(3)),d=n(48),i=n(25),c=m(i),u=m(n(2));function m(e){return e&&e.__esModule?e:{default:e}}var f=t.Demo=function(e){return a.default.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};f.propTypes={children:u.default.node};var p=t.DemoComponent=function(e){return a.default.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};p.propTypes={children:u.default.node};var h=t.DropZone=function(e){return a.default.createElement("div",{className:(0,l.default)("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};h.propTypes={isDragging:u.default.bool,children:u.default.node};var E=t.DropZoneInsertionPoint=function(e){return a.default.createElement("div",{className:"slds-drop-zone_drag__slot"})},g=t.DropZoneContainer=function(e){return a.default.createElement("div",{className:(0,l.default)("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},a.default.createElement(C,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&a.default.createElement("div",{className:"slds-drop-zone__actions"},a.default.createElement(d.ButtonGroup,null,a.default.createElement(s.default,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),a.default.createElement(s.default,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};g.propTypes={hasActions:u.default.bool,isHovered:u.default.bool,children:u.default.node};var b=function(e){return a.default.createElement(r.UtilityIcon,{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})};b.propTypes={isContainer:u.default.bool};var C=t.DropZoneLabel=function(e){return a.default.createElement("div",{className:(0,l.default)("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},a.default.createElement(o.default,{figureLeft:a.default.createElement(b,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?a.default.createElement("h2",null,a.default.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},a.default.createElement("span",{className:"slds-assistive-text"},"Edit: "),a.default.createElement("span",null,e.headerText))):a.default.createElement("h2",null,e.headerText)))};C.propTypes={isContainer:u.default.bool,headerText:u.default.string},t.default=a.default.createElement(h,null,a.default.createElement(p,null));t.examples=[{id:"drag-over",label:"Drag Over",element:a.default.createElement(f,null,a.default.createElement(h,{isDragging:!0},a.default.createElement(C,{headerText:"Content"}),a.default.createElement(p,null),a.default.createElement(E,null),a.default.createElement(p,null)))},{id:"with-populated-region",label:"With Populated Region",element:a.default.createElement(f,null,a.default.createElement(h,null,a.default.createElement(p,null),a.default.createElement(g,{isHovered:!0},a.default.createElement(p,null))))},{id:"with-populated-region-and-actions",label:"With Populated Region and Actions",element:a.default.createElement(f,null,a.default.createElement(h,null,a.default.createElement(p,null),a.default.createElement(g,{hasActions:!0,isHovered:!0},a.default.createElement(p,null))))},{id:"with-cards",label:"With Cards",element:a.default.createElement(f,null,a.default.createElement(h,null,a.default.createElement(g,{hasActions:!0},a.default.createElement(c.default,{className:"slds-m-bottom_small"},a.default.createElement(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(i.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(i.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts")))),a.default.createElement(g,{hasActions:!0},a.default.createElement(c.default,{className:"slds-m-top_small"},a.default.createElement(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(i.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(i.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts"))))))},{id:"dragging-with-cards",label:"Dragging With Cards",element:a.default.createElement(f,null,a.default.createElement(h,{isDragging:!0},a.default.createElement(C,{headerText:"Content"}),a.default.createElement(g,{hasActions:!0},a.default.createElement(c.default,{className:"slds-m-bottom_small"},a.default.createElement(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(i.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(i.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts")))),a.default.createElement(E,null),a.default.createElement(g,{hasActions:!0},a.default.createElement(c.default,{className:"slds-m-top_small"},a.default.createElement(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),a.default.createElement(i.CardBody,{hasPadding:!0},"Card Body"),a.default.createElement(i.CardFooter,{linkTabIndex:"-1"},"View All ",a.default.createElement("span",{className:"slds-assistive-text"},"Accounts"))))))}]},252:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var a=n(0),l=(u(a),n(7)),r=u(l),o=u(n(9)),s=(u(n(11)),u(n(12)),u(n(10))),d=n(251),i=n(25),c=u(i);u(n(3)),n(8),n(15),u(n(5));function u(e){return e&&e.__esModule?e:{default:e}}var m=l.factories.h2,f=l.factories.h3,p=l.factories.li,h=l.factories.p,E=l.factories.strong,g=l.factories.ul,b=t.getElement=function(){return(0,a.createElement)(r.default,{},(0,a.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."),m({id:"Base-Drop-Zone"},"Base Drop Zone"),h({},"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,a.createElement)(s.default,{title:"Drop Zone - Base"},(0,a.createElement)(o.default,{toggleCode:!1},(0,a.createElement)(d.DropZone,null,(0,a.createElement)(d.DemoComponent,null)))),m({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),h({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),(0,a.createElement)(s.default,{title:"Drop Zone - Drag Over"},(0,a.createElement)(o.default,null,(0,a.createElement)(d.Demo,null,(0,a.createElement)(d.DropZone,{isDragging:!0},(0,a.createElement)(d.DropZoneLabel,{headerText:"Content"}),(0,a.createElement)(d.DemoComponent,null),(0,a.createElement)(d.DropZoneInsertionPoint,null),(0,a.createElement)(d.DemoComponent,null))))),f({id:"Insertion-Point"},"Insertion Point"),h({},"An insertion point is used to futher communicate to the user the exact slot the component is being placed."),(0,a.createElement)(o.default,{toggleCode:!1},(0,a.createElement)(d.DropZoneInsertionPoint,null)),h({},"The position of this element should be controlled by your implementation."),g({},p({},h({},E({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),p({},h({},E({},"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."))),m({id:"Drop-Zone-Container"},"Drop Zone Container"),h({},"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,a.createElement)(s.default,{title:"Drop Zone - Container"},(0,a.createElement)(o.default,null,(0,a.createElement)(d.DropZone,null,(0,a.createElement)(d.DemoComponent,null),(0,a.createElement)(d.DropZoneContainer,{hasActions:!0,isHovered:!0},(0,a.createElement)(d.DemoComponent,null))))),m({id:"Example-Cards"},"Example - Cards"),(0,a.createElement)(s.default,{title:"Drop Zone - Cards Example"},(0,a.createElement)(o.default,null,(0,a.createElement)(d.Demo,null,(0,a.createElement)(d.DropZone,null,(0,a.createElement)(d.DropZoneContainer,{hasActions:!0},(0,a.createElement)(c.default,{className:"slds-m-bottom_small"},(0,a.createElement)(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,a.createElement)(i.CardBody,{hasPadding:!0},"Card Body"),(0,a.createElement)(i.CardFooter,{linkTabIndex:"-1"},"View All ",(0,a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,a.createElement)(d.DropZoneContainer,{hasActions:!0},(0,a.createElement)(c.default,{className:"slds-m-top_small"},(0,a.createElement)(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,a.createElement)(i.CardBody,{hasPadding:!0},"Card Body"),(0,a.createElement)(i.CardFooter,{linkTabIndex:"-1"},"View All ",(0,a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),m({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),(0,a.createElement)(s.default,{title:"Drop Zone - Cards Insert Example"},(0,a.createElement)(o.default,null,(0,a.createElement)(d.Demo,null,(0,a.createElement)(d.DropZone,{isDragging:!0},(0,a.createElement)(d.DropZoneLabel,{headerText:"Content"}),(0,a.createElement)(d.DropZoneContainer,{hasActions:!0},(0,a.createElement)(c.default,{className:"slds-m-bottom_small"},(0,a.createElement)(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,a.createElement)(i.CardBody,{hasPadding:!0},"Card Body"),(0,a.createElement)(i.CardFooter,{linkTabIndex:"-1"},"View All ",(0,a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,a.createElement)(d.DropZoneInsertionPoint,null),(0,a.createElement)(d.DropZoneContainer,{hasActions:!0},(0,a.createElement)(c.default,{className:"slds-m-top_small"},(0,a.createElement)(i.CardHeader,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,a.createElement)(i.CardBody,{hasPadding:!0},"Card Body"),(0,a.createElement)(i.CardFooter,{linkTabIndex:"-1"},"View All ",(0,a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))};t.getContents=function(){return(0,l.createTableOfContents)(b())}},6:function(e,t){e.exports=JSBeautify}});