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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3898:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return I},getElement:function(){return B}});var a=l(1594),n=l.n(a),s=l(5671),c=l(6547),r=l(806),m=l(8347),i=l(942),o=l.n(i),d=l(885),u=l(2711),p=l(538),b=function(e){return n().createElement("span",{className:"slds-text-title",key:r.Ay.uniqueId()},e.label)},E=function(e){var t=e.name,l=(e.id,e.hasIcon),a=e.type,s=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,p=e.checked,b=e.disabled,E=e.className,h=r.Ay.uniqueId("visual-picker-");return n().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)},n().createElement("input",{type:a,id:h,value:h,name:t,defaultChecked:p,disabled:b}),n().createElement("label",{htmlFor:h},l?n().createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},n().createElement("span",{className:"slds-is-selected"},n().createElement("span",{className:"slds-icon_container"},n().createElement(m.A,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),n().createElement("span",{className:"slds-is-not-selected"},n().createElement("span",{className:"slds-icon_container"},n().createElement(m.A,{className:o()("slds-icon slds-icon-"+s+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===s}),sprite:s||"action",symbol:c})))):n().createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?n().createElement("span",{className:"slds-visual-picker__body"},i):null,l?null:n().createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},n().createElement(m.A,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var t=e.children,l=e.type,a=e.sprite,s=e.hasIcon,c=r.Ay.uniqueId("example-unique-name-"),m=n().Children.map(t,function(e){return n().isValidElement(e)?n().cloneElement(e,{name:c,type:l,sprite:s&&a,hasIcon:s}):e});return n().createElement(n().Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var f=[{id:"default",label:"Default",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an app"),n().createElement(u.qz,null,n().createElement(h,null,n().createElement(E,{symbol:"connected_apps",label:n().createElement(b,{label:"Connected App"}),size:"medium"}),n().createElement(E,{symbol:"custom_apps",label:n().createElement(b,{label:"Custom App"}),size:"medium"}))))}],_=[{id:"disabled",label:"Disabled option",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an app"),n().createElement(u.qz,null,n().createElement(h,null,n().createElement(E,{symbol:"connected_apps",label:n().createElement(b,{label:"Connected App"}),size:"medium"}),n().createElement(E,{disabled:!0,symbol:"custom_apps",label:n().createElement(b,{label:"Custom App"}),size:"medium"}))))}],x=[{id:"base_small",label:"Small base",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an app"),n().createElement(u.qz,null,n().createElement(h,null,n().createElement(E,{symbol:"connected_apps",label:n().createElement(b,{label:"Connected App"}),size:"small"}),n().createElement(E,{symbol:"custom_apps",label:n().createElement(b,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an app"),n().createElement(u.qz,null,n().createElement(h,null,n().createElement(E,{symbol:"connected_apps",label:n().createElement(b,{label:"Connected App"}),size:"medium"}),n().createElement(E,{symbol:"custom_apps",label:n().createElement(b,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an app"),n().createElement(u.qz,null,n().createElement(h,null,n().createElement(E,{symbol:"connected_apps",label:n().createElement(b,{label:"Connected App"}),size:"large"}),n().createElement(E,{symbol:"custom_apps",label:n().createElement(b,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Add the following object(s)"),n().createElement(u.qz,null,n().createElement(h,{sprite:"standard",type:"checkbox"},n().createElement(E,{symbol:"account",label:n().createElement(b,{label:"Account"}),size:"small"}),n().createElement(E,{symbol:"lead",label:n().createElement(b,{label:"Lead"}),size:"small"}),n().createElement(E,{symbol:"orders",label:n().createElement(b,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Add the following object(s)"),n().createElement(u.qz,null,n().createElement(h,{sprite:"standard",type:"checkbox"},n().createElement(E,{symbol:"account",label:n().createElement(b,{label:"Account"}),size:"medium"}),n().createElement(E,{symbol:"lead",label:n().createElement(b,{label:"Lead"}),size:"medium"}),n().createElement(E,{symbol:"orders",label:n().createElement(b,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Add the following object(s)"),n().createElement(u.qz,null,n().createElement(h,{sprite:"standard",type:"checkbox"},n().createElement(E,{symbol:"account",label:n().createElement(b,{label:"Account"}),size:"large"}),n().createElement(E,{symbol:"lead",label:n().createElement(b,{label:"Lead"}),size:"large"}),n().createElement(E,{symbol:"orders",label:n().createElement(b,{label:"Orders"}),size:"large"}))))}],g=[n().createElement("span",{className:"slds-text-heading_small",key:r.Ay.uniqueId()},"Lightning Professional"),n().createElement("span",{className:"slds-text-title",key:r.Ay.uniqueId()},"Complete service CRM for teams of any size")],y=[n().createElement("span",{className:"slds-text-heading_small",key:r.Ay.uniqueId()},"Lightning Enterprise"),n().createElement("span",{className:"slds-text-title",key:r.Ay.uniqueId()},"Everything you need to take support to the next level")],k=[n().createElement("span",{className:"slds-text-heading_small",key:r.Ay.uniqueId()},"Lightning Unlimited"),n().createElement("span",{className:"slds-text-title",key:r.Ay.uniqueId()},"Complete support with enterprise-grade customization")],v=[{id:"default",label:"Default",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select a plan"),n().createElement(u.qz,null,n().createElement(h,{hasIcon:!1},n().createElement(E,{size:"medium",label:g},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$30"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))),n().createElement(E,{size:"medium",label:y},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$150"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))),n().createElement(E,{size:"medium",label:k},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$300"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],N=[{id:"disabled",label:"Disabled option",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select a plan"),n().createElement(u.qz,null,n().createElement(h,{hasIcon:!1},n().createElement(E,{size:"medium",label:g},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$30"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))),n().createElement(E,{size:"medium",label:y},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$150"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))),n().createElement(E,{size:"medium",disabled:!0,label:k},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_large"},"$300"),n().createElement("span",{className:"slds-text-title"},"USD/user/month *"))))))}],S=function(e){var t=e.symbol||"knowledge_base",l=e.icon||n().createElement(p.eX,{className:"slds-icon-text-default",symbol:t,title:!1,assistiveText:!1});return n().createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},n().createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},l),n().createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},A=[{id:"default",label:"Default",element:n().createElement("div",{className:"demo-only",style:{width:"24rem"}},n().createElement(S,{symbol:"knowledge_base"},n().createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),n().createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base")))}],z=[{id:"default",label:"Default",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an option"),n().createElement(u.qz,null,n().createElement(h,{hasIcon:!1},n().createElement(E,{className:"slds-visual-picker_vertical"},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),n().createElement(E,{className:"slds-visual-picker_vertical"},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),n().createElement(E,{className:"slds-visual-picker_vertical"},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],O=[{id:"disabled",label:"Disabled option",element:n().createElement(d.LB,null,n().createElement(d.s$,null,"Select an option"),n().createElement(u.qz,null,n().createElement(h,{hasIcon:!1},n().createElement(E,{className:"slds-visual-picker_vertical"},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),n().createElement(E,{className:"slds-visual-picker_vertical"},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),n().createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},n().createElement("span",null,n().createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),n().createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],w=s.XB.h2,C=s.XB.h3,L=s.XB.h4,D=s.XB.p,B=function(){return(0,a.createElement)(s.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),(0,a.createElement)(c.A,{exampleOnly:!0},(0,r.NO)(x,"checkbox-group")),w({id:"Coverable-Content"},"Coverable Content"),C({id:"Base"},"Base"),D({},"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."),L({id:"Small"},"Small"),(0,a.createElement)(c.A,null,(0,r.NO)(x,"base_small")),L({id:"Medium"},"Medium"),(0,a.createElement)(c.A,null,(0,r.NO)(f)),L({id:"Large"},"Large"),(0,a.createElement)(c.A,null,(0,r.NO)(x,"base_large")),C({id:"States"},"States"),L({id:"Disabled"},"Disabled"),(0,a.createElement)(c.A,null,(0,r.NO)(_,"disabled")),C({id:"Checkbox-Examples"},"Checkbox Examples"),D({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),L({id:"Small-Checkboxes"},"Small Checkboxes"),(0,a.createElement)(c.A,null,(0,r.NO)(x,"checkbox-group_small")),L({id:"Medium-Checkboxes"},"Medium Checkboxes"),(0,a.createElement)(c.A,null,(0,r.NO)(x,"checkbox-group")),L({id:"Large-Checkboxes"},"Large Checkboxes"),(0,a.createElement)(c.A,null,(0,r.NO)(x,"checkbox-group_large")),w({id:"Non-Coverable-Content"},"Non Coverable Content"),C({id:"Base-2"},"Base"),(0,a.createElement)(c.A,null,(0,r.NO)(v)),C({id:"States-2"},"States"),L({id:"Disabled-2"},"Disabled"),(0,a.createElement)(c.A,null,(0,r.NO)(N,"disabled")),w({id:"Link"},"Link"),(0,a.createElement)(c.A,null,(0,r.NO)(A)),w({id:"Vertical"},"Vertical"),C({id:"Base-3"},"Base"),(0,a.createElement)(c.A,null,(0,r.NO)(z)),C({id:"States-3"},"States"),L({id:"Disabled-3"},"Disabled"),(0,a.createElement)(c.A,null,(0,r.NO)(O,"disabled")))},I=function(){return(0,s.Qr)(B())}},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,s),l.exports}s.m=a,s.amdO={},e=[],s.O=function(t,l,a,n){if(!l){var c=1/0;for(o=0;o<e.length;o++){l=e[o][0],a=e[o][1],n=e[o][2];for(var r=!0,m=0;m<l.length;m++)(!1&n||c>=n)&&Object.keys(s.O).every(function(e){return s.O[e](l[m])})?l.splice(m--,1):(r=!1,n<c&&(c=n));if(r){e.splice(o--,1);var i=a();void 0!==i&&(t=i)}}return t}n=n||0;for(var o=e.length;o>0&&e[o-1][2]>n;o--)e[o]=e[o-1];e[o]=[l,a,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var c={};t=t||[null,l({}),l([]),l(l)];for(var r=2&a&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){c[t]=function(){return e[t]}});return c.default=function(){return e},s.d(n,c),n},s.d=function(e,t){for(var l in t)s.o(t,l)&&!s.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},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=8926,function(){var e={8926:0};s.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,c=l[0],r=l[1],m=l[2],i=0;if(c.some(function(t){return 0!==e[t]})){for(a in r)s.o(r,a)&&(s.m[a]=r[a]);if(m)var o=m(s)}for(t&&t(l);i<c.length;i++)n=c[i],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(o)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),s.nc=void 0;var c=s.O(void 0,[3540],function(){return s(3898)});c=s.O(c),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=c}();