@salesforce-ux/design-system/__internal/chunked/docs/ui/components/visual-picker/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=function(e){function a(a){for(var t,c,r=a[0],m=a[1],i=a[2],d=0,u=[];d<r.length;d++)c=r[d],Object.prototype.hasOwnProperty.call(s,c)&&s[c]&&u.push(s[c][0]),s[c]=0;for(t in m)Object.prototype.hasOwnProperty.call(m,t)&&(e[t]=m[t]);for(o&&o(a);u.length;)u.shift()();return n.push.apply(n,i||[]),l()}function l(){for(var e,a=0;a<n.length;a++){for(var l=n[a],t=!0,r=1;r<l.length;r++){var m=l[r];0!==s[m]&&(t=!1)}t&&(n.splice(a--,1),e=c(c.s=l[0]))}return e}var t={},s={84:0},n=[];function c(a){if(t[a])return t[a].exports;var l=t[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=t,c.d=function(e,a,l){c.o(e,a)||Object.defineProperty(e,a,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)c.d(l,t,function(a){return e[a]}.bind(null,t));return l},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],m=r.push.bind(r);r.push=a,r=r.slice();for(var i=0;i<r.length;i++)a(r[i]);var o=m;return n.push([729,0]),l()}({0:function(e,a){e.exports=React},20:function(e,a){e.exports=ReactDOM},22:function(e,a){e.exports=JSBeautify},729:function(e,a,l){"use strict";l.r(a),l.d(a,"getElement",(function(){return L})),l.d(a,"getContents",(function(){return A}));var t=l(0),s=l.n(t),n=l(4),c=l(2),r=l(1),m=l(9),i=l(5),o=l.n(i),d=l(36),u=l(8),b=l(11),p=function(e){return s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},e.label)},E=function(e){var a=e.name,l=(e.id,e.hasIcon),t=e.type,n=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,b=e.checked,p=e.disabled,E=e.className,h=r.d.uniqueId("visual-picker-");return s.a.createElement("div",{className:o()("slds-visual-picker",{"slds-visual-picker_large":"large"===d,"slds-visual-picker_medium":"medium"===d,"slds-visual-picker_small":"small"===d},E)},s.a.createElement("input",{type:t,id:h,value:h,name:a,defaultChecked:b,disabled:p}),s.a.createElement("label",{htmlFor:h},l?s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},s.a.createElement("span",{className:"slds-is-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),s.a.createElement("span",{className:"slds-is-not-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:o()("slds-icon slds-icon-"+n+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===n}),sprite:n||"action",symbol:c})))):s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?s.a.createElement("span",{className:"slds-visual-picker__body"},i):null,l?null:s.a.createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},s.a.createElement(m.a,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var a=e.children,l=e.type,t=e.sprite,n=e.hasIcon,c=r.d.uniqueId("example-unique-name-"),m=s.a.Children.map(a,(function(e){return s.a.isValidElement(e)?s.a.cloneElement(e,{name:c,type:l,sprite:n&&t,hasIcon:n}):e}));return s.a.createElement(s.a.Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var _=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],x=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{disabled:!0,symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],f=[{id:"base_small",label:"Small base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"small"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"large"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"small"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"small"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"medium"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"medium"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"large"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"large"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"large"}))))}],g=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Professional"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete service CRM for teams of any size")],k=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Enterprise"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Everything you need to take support to the next level")],y=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Unlimited"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete support with enterprise-grade customization")],v=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],N=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))),s.a.createElement(E,{size:"medium",disabled:!0,label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],S=function(e){var a=e.symbol||"knowledge_base",l=e.icon||s.a.createElement(b.a,{className:"slds-icon-text-default",symbol:a,title:!1,assistiveText:!1});return s.a.createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},s.a.createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},l),s.a.createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},O=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"demo-only",style:{width:"24rem"}},s.a.createElement(S,{symbol:"knowledge_base"},s.a.createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),s.a.createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base")))}],j=[{id:"default",label:"Default",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],w=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],C=n.c.h2,z=n.c.h3,D=n.c.h4,I=n.c.p,L=function(){return Object(t.createElement)(n.b,{},Object(t.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),Object(t.createElement)(c.a,{exampleOnly:!0},Object(r.f)(f,"checkbox-group")),C({id:"Coverable-Content"},"Coverable Content"),z({id:"Base"},"Base"),I({},"Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below."),D({id:"Small"},"Small"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_small")),D({id:"Medium"},"Medium"),Object(t.createElement)(c.a,null,Object(r.f)(_)),D({id:"Large"},"Large"),Object(t.createElement)(c.a,null,Object(r.f)(f,"base_large")),z({id:"States"},"States"),D({id:"Disabled"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(x,"disabled")),z({id:"Checkbox-Examples"},"Checkbox Examples"),I({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),D({id:"Small-Checkboxes"},"Small Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_small")),D({id:"Medium-Checkboxes"},"Medium Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group")),D({id:"Large-Checkboxes"},"Large Checkboxes"),Object(t.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_large")),C({id:"Non-Coverable-Content"},"Non Coverable Content"),z({id:"Base-2"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(v)),z({id:"States-2"},"States"),D({id:"Disabled-2"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(N,"disabled")),C({id:"Link"},"Link"),Object(t.createElement)(c.a,null,Object(r.f)(O)),C({id:"Vertical"},"Vertical"),z({id:"Base-3"},"Base"),Object(t.createElement)(c.a,null,Object(r.f)(j)),z({id:"States-3"},"States"),D({id:"Disabled-3"},"Disabled"),Object(t.createElement)(c.a,null,Object(r.f)(w,"disabled")))},A=function(){return Object(n.a)(L())}}});