@salesforce-ux/design-system/__internal/chunked/docs/ui/components/expandable-section/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,o={1177:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return A},getElement:function(){return w}});var o=n(1594),i=n.n(o),a=n(5671),s=n(6547),r=(n(2436),n(9582),n(5619),n(806)),l=n(8347),c=n(942),u=n.n(c),d="expando-unique-id",m=function(e){return i().createElement("div",{className:u()("slds-section",e.className)},e.children)},f=function(e){return i().createElement("div",{hidden:!e.isOpen,className:u()("slds-section__content",e.className),id:e.referenceId},e.children)},h=function(e){return i().createElement("h3",{className:u()("slds-section__title",e.className)},e.children)},p=function(e){return i().createElement("button",{"aria-controls":e.referenceId,"aria-expanded":e.isOpen?"true":"false",className:"slds-button slds-section__title-action"},i().createElement(l.A,{className:"slds-section__title-action-icon slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"switch"}),i().createElement("span",{className:"slds-truncate",title:e.children},e.children))},b=[{id:"default",label:"Default",element:i().createElement(m,{className:"slds-is-open"},i().createElement(h,null,i().createElement(p,{referenceId:d,isOpen:!0},"Section Title")),i().createElement(f,{referenceId:d,isOpen:!0},i().createElement("p",null,"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.")))}],v=[{id:"non-collapsable",label:"Non-collapsable",element:i().createElement(m,{className:"slds-is-open"},i().createElement(h,{className:"slds-theme_shade"},i().createElement("span",{className:"slds-truncate slds-p-horizontal_small",title:"Section Title"},"Section Title")),i().createElement(f,{isOpen:!0},i().createElement("p",null,"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.")))}],y=[{id:"closed",label:"Closed",element:i().createElement(m,null,i().createElement(h,null,i().createElement(p,{referenceId:d},"Section Title")),i().createElement(f,{referenceId:d},i().createElement("p",null,"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.")))}],_=a.XB.code,O=a.XB.h2,g=a.XB.h3,E=a.XB.h4,S=a.XB.li,N=a.XB.p,x=a.XB.strong,j=a.XB.ul,w=function(){return(0,o.createElement)(a.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"Toggle visibility of section content"),(0,o.createElement)(s.A,{exampleOnly:!0},(0,r.NO)(b)),O({id:"About-Expandable-Section"},"About Expandable Section"),N({},"Section Titles are interactive titles that open and close sections, typically on a form."),g({id:"Accessibility"},"Accessibility"),N({},"If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need ARIA attributes to indicate the open and closed state of the section."),E({id:"Markup"},"Markup"),N({},x({},"Button:")),j({},S({},_({},"aria-controls")," is used to create an association between the button and the section. If the section has an ",_({},'id="content"'),", then the button should have ",_({},'aria-controls="content"'),"."),S({},_({},"aria-expanded")," indicates if the section is open or closed and is read aloud by assistive technology when the button is focused.")),N({},x({},"Section:")),j({},S({},_({},"aria-hidden")," indicates if the section is open or closed, and if set to ",_({},"true"),", assistive technology hides the section.")),E({id:"Keyboard-Interactions"},"Keyboard Interactions"),j({},S({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),E({id:"Updating-Operation-and-State"},"Updating Operation and State"),j({},S({},"When the user interacts with the button to open the section, ",_({},"aria-expanded")," on the button should be ",_({},"true")," and ",_({},"aria-hidden")," on the section should be ",_({},"false"),"."),S({},"When the user interacts with the button to close the section, ",_({},"aria-expanded")," on the button should be ",_({},"false")," and ",_({},"aria-hidden")," on the section should be ",_({},"true"),".")),O({id:"Base"},"Base"),(0,o.createElement)(s.A,null,(0,r.NO)(b)),O({id:"Examples"},"Examples"),g({id:"Non-collapsible"},"Non-collapsible"),(0,o.createElement)(s.A,null,(0,r.NO)(v,"non-collapsable")),O({id:"States"},"States"),g({id:"Closed"},"Closed"),(0,o.createElement)(s.A,null,(0,r.NO)(y,"closed")))},A=function(){return(0,a.Qr)(w())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={id:e,exports:{}};return o[e](n,n.exports,a),n.exports}a.m=o,a.amdO={},e=[],a.O=function(t,n,o,i){if(!n){var s=1/0;for(u=0;u<e.length;u++){n=e[u][0],o=e[u][1],i=e[u][2];for(var r=!0,l=0;l<n.length;l++)(!1&i||s>=i)&&Object.keys(a.O).every(function(e){return a.O[e](n[l])})?n.splice(l--,1):(r=!1,i<s&&(s=i));if(r){e.splice(u--,1);var c=o();void 0!==c&&(t=c)}}return t}i=i||0;for(var u=e.length;u>0&&e[u-1][2]>i;u--)e[u]=e[u-1];e[u]=[n,o,i]},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,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var i=Object.create(null);a.r(i);var s={};t=t||[null,n({}),n([]),n(n)];for(var r=2&o&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(i,s),i},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=8125,function(){var e={8125:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,i,s=n[0],r=n[1],l=n[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(o in r)a.o(r,o)&&(a.m[o]=r[o]);if(l)var u=l(a)}for(t&&t(n);c<s.length;c++)i=s[c],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.O(u)},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 s=a.O(void 0,[3540],function(){return a(1177)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/expandable-section/docs.mdx.js"]=s}();