npm - @salesforce-ux/design-system - Versions diffs - 2.17.0 → 2.17.4 - Mend

@salesforce-ux/design-system 2.17.0 → 2.17.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (967) hide show

package/__internal/chunked/docs/ui/components/carousel/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/carousel/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],d=0,p=[];d<r.length;d++)i=r[d],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&p.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(u&&u(t);p.length;)p.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={15:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var u=o;return s.push([729,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},729:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return D}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(25),o=a(14),c=a(15),u=a(7),d=a(5),p=a.n(d),b=a(26),h=a.n(b);function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function _(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=O(e);if(t){var l=O(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return E(this,a)}}function E(e,t){return!t\|\|"object"!==f(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function O(e){return(O=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var j=function(e){return l.a.createElement("li",{className:"slds-carousel__indicator",role:"presentation"},l.a.createElement("a",{id:e.id,className:p()("slds-carousel__indicator-action",e.isActive&&"slds-is-active",e.className),href:"#",role:"tab",tabIndex:e.isActive?"0":"-1","aria-selected":e.isActive?"true":"false","aria-controls":e.contentId,title:e.title,onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-assistive-text"},e.title)))},g=function(e){return l.a.createElement("div",{id:e.id,className:p()("slds-carousel__panel",e.className),role:"tabpanel","aria-hidden":e.isActive?"false":"true","aria-labelledby":e.indicatorId},l.a.createElement("a",{href:"#",className:"slds-carousel__panel-action slds-text-link_reset",tabIndex:e.isActive?"0":"-1",onClick:function(e){return e.preventDefault()}},l.a.createElement("div",{className:"slds-carousel__image"},l.a.createElement("img",{src:e.src,alt:e.title})),l.a.createElement("div",{className:"slds-carousel__content"},l.a.createElement("h2",{className:"slds-carousel__content-title"},e.title),l.a.createElement("p",null,e.description))))},w=function(e){return l.a.createElement("span",{className:"slds-carousel__autoplay"},l.a.createElement(u.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:e.stop?"right":"pause","aria-controls":e["aria-controls"],"aria-pressed":e.stop,disabled:e.disabled,title:"Stop auto-play",assistiveText:"Stop auto-play"}))},x=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(i,e);var t,a,n,s=_(i);function i(){return m(this,i),s.apply(this,arguments)}return t=i,(a=[{key:"render",value:function(){var e=h()("content-id-"),t=h()("content-id-"),a=h()("content-id-"),n=h()("indicator-id-"),s=h()("indicator-id-"),i=h()("indicator-id-");return l.a.createElement("div",{className:p()("slds-carousel",this.props.className)},l.a.createElement("div",{className:"slds-carousel__stage"},this.props.autoPlay&&l.a.createElement(w,{stop:"stop"===this.props.autoPlay}),l.a.createElement("div",{className:"slds-carousel__panels",style:{transform:"translateX(-".concat(100*(this.props.panelActive-1),"%)")}},l.a.createElement(g,{isActive:"1"===this.props.panelActive,id:e,indicatorId:n,title:"Visit App Exchange",description:"Extend Salesforce with the #1 business marketplace.",src:"/assets/images/carousel/carousel-01.jpg"}),l.a.createElement(g,{isActive:"2"===this.props.panelActive,id:t,indicatorId:s,title:"Click to Customize",description:"Use the Object Manager to add fields, build layouts, and more.",src:"/assets/images/carousel/carousel-02.jpg"}),l.a.createElement(g,{isActive:"3"===this.props.panelActive,id:a,indicatorId:i,title:"Download SalesforceA",description:"Get the mobile app that's just for Salesforce admins.",src:"/assets/images/carousel/carousel-03.jpg"})),l.a.createElement("ul",{className:"slds-carousel__indicators",role:"tablist"},l.a.createElement(j,{isActive:"1"===this.props.panelActive,id:n,contentId:e,title:"Visit App Exchange tab"}),l.a.createElement(j,{isActive:"2"===this.props.panelActive,id:s,contentId:t,title:"Click to Customize tab"}),l.a.createElement(j,{isActive:"3"===this.props.panelActive,id:i,contentId:a,title:"Download SalesforceA tab"}))))}}])&&v(t.prototype,a),n&&v(t,n),i}(n.Component),A=s.c.code,S=s.c.h2,N=s.c.h3,k=s.c.h4,P=s.c.li,C=s.c.p,I=s.c.ul,T=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"A carousel allows multiple pieces of featured content to occupy an allocated amount of space."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"2",autoPlay:!0})),S({id:"About-Carousel"},"About Carousel"),C({},"A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time."),N({id:"Accessibility"},"Accessibility"),C({},"A Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:"),I({},P({},"The tab list, which should have ",A({},'role="tablist"')),P({},"The tabs in that list, which should each be an ",A({},'<a role="tab">')," anchor wrapped in a ",A({},'<li role="presentation">')," list item"),P({},"The tab panels, which display each tab’s content and should each have ",A({},'role="tabpanel"'))),k({id:"Markup"},"Markup"),I({},P({},"Selected tab’s anchor has ",A({},'aria-selected="true"'),", all other tabs’ anchors have ",A({},'aria-selected="false"')),P({},"Selected tab’s anchor has ",A({},'tabindex="0"'),", all other tabs have ",A({},'tabindex="-1"')),P({},"Each tab’s anchor has an ",A({},"aria-controls")," attribute whose value is the id of the associated ",A({},'<div role="tabpanel">')),P({},"Each tab panel has an ",A({},"aria-labelledby")," attribute whose value is the id of its associated ",A({},'<a role="tab">')),P({},"Each tab panel has an ",A({},"aria-hidden")," attribute whose value is toggled based on which panel is visible"),P({},"When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set")),k({id:"Keyboard-Interactions"},"Keyboard Interactions"),I({},P({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),P({},"Tab key, when focus is before the tab list, moves focus to the selected tab panel"),P({},"Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements"),P({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset")),S({id:"Base"},"Base"),Object(n.createElement)(c.a,{title:"carousel"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"1",autoPlay:!0}))),S({id:"Navigating-between-panels"},"Navigating between panels"),C({},"You are able to navigate between panels but interacting with the ",A({},"slds-carousel__indicator")," elements that sit below the panel."),N({id:"Panel-1-active"},"Panel 1 active"),Object(n.createElement)(c.a,{title:"carousel-panel-transition-panel-1"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"1",autoPlay:!0}))),N({id:"Panel-2-active"},"Panel 2 active"),Object(n.createElement)(c.a,{title:"carousel-panel-transition-panel-2"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"2",autoPlay:!0}))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-carousel"},Object(n.createElement)("div",{className:"slds-carousel__stage"},Object(n.createElement)("div",{className:"slds-carousel__panels",style:{transform:"translateX(-100%)"}},Object(n.createElement)("div",{id:"content-id-01",className:"slds-carousel__panel","aria-hidden":"false",role:"tabpanel","aria-labelledby":"indicator-id-01",tabIndex:"-1"},"..."),Object(n.createElement)("div",{id:"content-id-02",className:"slds-carousel__panel","aria-hidden":"true",role:"tabpanel","aria-labelledby":"indicator-id-02",tabIndex:"0"},"...")),Object(n.createElement)("ul",{className:"slds-carousel__indicators",role:"tablist"},Object(n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},Object(n.createElement)("a",{id:"indicator-id-01",className:"slds-carousel__indicator-action",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"-1","aria-selected":"false","aria-controls":"content-id-01",title:"Visit App Exchange tab"},"...")),Object(n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},Object(n.createElement)("a",{id:"indicator-id-02",className:"slds-carousel__indicator-action slds-is-active",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"0","aria-selected":"true","aria-controls":"content-id-02",title:"Click to Customize tab"},"...")))))),Object(n.createElement)(o.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"A panel becomes visible by toggling the ",Object(n.createElement)("code",null,"aria-hidden")," attribute from ",Object(n.createElement)("code",null,"false")," to ",Object(n.createElement)("code",null,"true")," on the ",Object(n.createElement)("code",null,"slds-carousel__panel")," element. When a panel becomes active, the `tabindex` of the other non-visible panels should be set to -1 while the active panel remains at 0.")),C({},"When a panel becomes active, apply an inline style to ",A({},"slds-carousel__panel")," to move the panels left to right. We do this by updating the location of the panel on its Y axis using transforms. The first panel should be ",A({},"transform: translateX(0%)")," but when any preceding panel becomes active it can be subtracted by 100%, moving 100% of each panel to the left. For example, panel 1 would be visible at ",A({},"transform: translateX(0%)"),", while panel 3 would be visible at ",A({},"transform: translateX(-200%)"),"."),C({},"When making the ",A({},"slds-carousel__panel")," active, the indicator should be updated with the ",A({},"slds-is-active")," class. This provides visual feedback showing which carousel panel is active."),S({id:"Auto-play"},"Auto-play"),C({},"If the Carousel is set to auto-play, a pause button is required to be first in the HTML before the tab set."),Object(n.createElement)(o.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"When that pause button is interacted with, the ",Object(n.createElement)("code",null,"aria-pressed")," role needs to be toggled to ",Object(n.createElement)("code",null,"true"),".")),Object(n.createElement)(c.a,{title:"carousel-autoplay"},Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-carousel"},Object(n.createElement)("div",{className:"slds-carousel__stage"},Object(n.createElement)(w,{stop:!0}),Object(n.createElement)("div",{className:"slds-carousel__panels"},"..."))))))},D=function(){return Object(s.a)(T())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/carousel/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],d=0,p=[];d<r.length;d++)i=r[d],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&p.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(u&&u(t);p.length;)p.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={15:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var u=o;return s.push([730,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},730:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return D}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(26),o=a(14),c=a(15),u=a(7),d=a(5),p=a.n(d),b=a(27),h=a.n(b);function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function _(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=O(e);if(t){var l=O(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return E(this,a)}}function E(e,t){return!t\|\|"object"!==f(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function O(e){return(O=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var j=function(e){return l.a.createElement("li",{className:"slds-carousel__indicator",role:"presentation"},l.a.createElement("a",{id:e.id,className:p()("slds-carousel__indicator-action",e.isActive&&"slds-is-active",e.className),href:"#",role:"tab",tabIndex:e.isActive?"0":"-1","aria-selected":e.isActive?"true":"false","aria-controls":e.contentId,title:e.title,onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-assistive-text"},e.title)))},g=function(e){return l.a.createElement("div",{id:e.id,className:p()("slds-carousel__panel",e.className),role:"tabpanel","aria-hidden":e.isActive?"false":"true","aria-labelledby":e.indicatorId},l.a.createElement("a",{href:"#",className:"slds-carousel__panel-action slds-text-link_reset",tabIndex:e.isActive?"0":"-1",onClick:function(e){return e.preventDefault()}},l.a.createElement("div",{className:"slds-carousel__image"},l.a.createElement("img",{src:e.src,alt:e.title})),l.a.createElement("div",{className:"slds-carousel__content"},l.a.createElement("h2",{className:"slds-carousel__content-title"},e.title),l.a.createElement("p",null,e.description))))},w=function(e){return l.a.createElement("span",{className:"slds-carousel__autoplay"},l.a.createElement(u.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:e.stop?"right":"pause","aria-controls":e["aria-controls"],"aria-pressed":e.stop,disabled:e.disabled,title:"Stop auto-play",assistiveText:"Stop auto-play"}))},x=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(i,e);var t,a,n,s=_(i);function i(){return m(this,i),s.apply(this,arguments)}return t=i,(a=[{key:"render",value:function(){var e=h()("content-id-"),t=h()("content-id-"),a=h()("content-id-"),n=h()("indicator-id-"),s=h()("indicator-id-"),i=h()("indicator-id-");return l.a.createElement("div",{className:p()("slds-carousel",this.props.className)},l.a.createElement("div",{className:"slds-carousel__stage"},this.props.autoPlay&&l.a.createElement(w,{stop:"stop"===this.props.autoPlay}),l.a.createElement("div",{className:"slds-carousel__panels",style:{transform:"translateX(-".concat(100*(this.props.panelActive-1),"%)")}},l.a.createElement(g,{isActive:"1"===this.props.panelActive,id:e,indicatorId:n,title:"Visit App Exchange",description:"Extend Salesforce with the #1 business marketplace.",src:"/assets/images/carousel/carousel-01.jpg"}),l.a.createElement(g,{isActive:"2"===this.props.panelActive,id:t,indicatorId:s,title:"Click to Customize",description:"Use the Object Manager to add fields, build layouts, and more.",src:"/assets/images/carousel/carousel-02.jpg"}),l.a.createElement(g,{isActive:"3"===this.props.panelActive,id:a,indicatorId:i,title:"Download SalesforceA",description:"Get the mobile app that's just for Salesforce admins.",src:"/assets/images/carousel/carousel-03.jpg"})),l.a.createElement("ul",{className:"slds-carousel__indicators",role:"tablist"},l.a.createElement(j,{isActive:"1"===this.props.panelActive,id:n,contentId:e,title:"Visit App Exchange tab"}),l.a.createElement(j,{isActive:"2"===this.props.panelActive,id:s,contentId:t,title:"Click to Customize tab"}),l.a.createElement(j,{isActive:"3"===this.props.panelActive,id:i,contentId:a,title:"Download SalesforceA tab"}))))}}])&&v(t.prototype,a),n&&v(t,n),i}(n.Component),A=s.c.code,S=s.c.h2,N=s.c.h3,k=s.c.h4,P=s.c.li,C=s.c.p,I=s.c.ul,T=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"A carousel allows multiple pieces of featured content to occupy an allocated amount of space."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"2",autoPlay:!0})),S({id:"About-Carousel"},"About Carousel"),C({},"A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time."),N({id:"Accessibility"},"Accessibility"),C({},"A Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:"),I({},P({},"The tab list, which should have ",A({},'role="tablist"')),P({},"The tabs in that list, which should each be an ",A({},'<a role="tab">')," anchor wrapped in a ",A({},'<li role="presentation">')," list item"),P({},"The tab panels, which display each tab’s content and should each have ",A({},'role="tabpanel"'))),k({id:"Markup"},"Markup"),I({},P({},"Selected tab’s anchor has ",A({},'aria-selected="true"'),", all other tabs’ anchors have ",A({},'aria-selected="false"')),P({},"Selected tab’s anchor has ",A({},'tabindex="0"'),", all other tabs have ",A({},'tabindex="-1"')),P({},"Each tab’s anchor has an ",A({},"aria-controls")," attribute whose value is the id of the associated ",A({},'<div role="tabpanel">')),P({},"Each tab panel has an ",A({},"aria-labelledby")," attribute whose value is the id of its associated ",A({},'<a role="tab">')),P({},"Each tab panel has an ",A({},"aria-hidden")," attribute whose value is toggled based on which panel is visible"),P({},"When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set")),k({id:"Keyboard-Interactions"},"Keyboard Interactions"),I({},P({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),P({},"Tab key, when focus is before the tab list, moves focus to the selected tab panel"),P({},"Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements"),P({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset")),S({id:"Base"},"Base"),Object(n.createElement)(c.a,{title:"carousel"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"1",autoPlay:!0}))),S({id:"Navigating-between-panels"},"Navigating between panels"),C({},"You are able to navigate between panels but interacting with the ",A({},"slds-carousel__indicator")," elements that sit below the panel."),N({id:"Panel-1-active"},"Panel 1 active"),Object(n.createElement)(c.a,{title:"carousel-panel-transition-panel-1"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"1",autoPlay:!0}))),N({id:"Panel-2-active"},"Panel 2 active"),Object(n.createElement)(c.a,{title:"carousel-panel-transition-panel-2"},Object(n.createElement)(i.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"2",autoPlay:!0}))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-carousel"},Object(n.createElement)("div",{className:"slds-carousel__stage"},Object(n.createElement)("div",{className:"slds-carousel__panels",style:{transform:"translateX(-100%)"}},Object(n.createElement)("div",{id:"content-id-01",className:"slds-carousel__panel","aria-hidden":"false",role:"tabpanel","aria-labelledby":"indicator-id-01",tabIndex:"-1"},"..."),Object(n.createElement)("div",{id:"content-id-02",className:"slds-carousel__panel","aria-hidden":"true",role:"tabpanel","aria-labelledby":"indicator-id-02",tabIndex:"0"},"...")),Object(n.createElement)("ul",{className:"slds-carousel__indicators",role:"tablist"},Object(n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},Object(n.createElement)("a",{id:"indicator-id-01",className:"slds-carousel__indicator-action",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"-1","aria-selected":"false","aria-controls":"content-id-01",title:"Visit App Exchange tab"},"...")),Object(n.createElement)("li",{className:"slds-carousel__indicator",role:"presentation"},Object(n.createElement)("a",{id:"indicator-id-02",className:"slds-carousel__indicator-action slds-is-active",href:"#",onClick:function(e){return e.preventDefault()},role:"tab",tabIndex:"0","aria-selected":"true","aria-controls":"content-id-02",title:"Click to Customize tab"},"...")))))),Object(n.createElement)(o.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"A panel becomes visible by toggling the ",Object(n.createElement)("code",null,"aria-hidden")," attribute from ",Object(n.createElement)("code",null,"false")," to ",Object(n.createElement)("code",null,"true")," on the ",Object(n.createElement)("code",null,"slds-carousel__panel")," element. When a panel becomes active, the `tabindex` of the other non-visible panels should be set to -1 while the active panel remains at 0.")),C({},"When a panel becomes active, apply an inline style to ",A({},"slds-carousel__panel")," to move the panels left to right. We do this by updating the location of the panel on its Y axis using transforms. The first panel should be ",A({},"transform: translateX(0%)")," but when any preceding panel becomes active it can be subtracted by 100%, moving 100% of each panel to the left. For example, panel 1 would be visible at ",A({},"transform: translateX(0%)"),", while panel 3 would be visible at ",A({},"transform: translateX(-200%)"),"."),C({},"When making the ",A({},"slds-carousel__panel")," active, the indicator should be updated with the ",A({},"slds-is-active")," class. This provides visual feedback showing which carousel panel is active."),S({id:"Auto-play"},"Auto-play"),C({},"If the Carousel is set to auto-play, a pause button is required to be first in the HTML before the tab set."),Object(n.createElement)(o.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"When that pause button is interacted with, the ",Object(n.createElement)("code",null,"aria-pressed")," role needs to be toggled to ",Object(n.createElement)("code",null,"true"),".")),Object(n.createElement)(c.a,{title:"carousel-autoplay"},Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-carousel"},Object(n.createElement)("div",{className:"slds-carousel__stage"},Object(n.createElement)(w,{stop:!0}),Object(n.createElement)("div",{className:"slds-carousel__panels"},"..."))))))},D=function(){return Object(s.a)(T())}}});

package/__internal/chunked/docs/ui/components/chat/docs.mdx.js CHANGED Viewed

package/__internal/chunked/docs/ui/components/checkbox/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],b=0,u=[];b<n.length;b++)c=n[b],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&u.push(l[c][0]),l[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);u.length;)u.shift()();return i.push.apply(i,s\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],a=!0,n=1;n<r.length;n++){var o=r[n];0!==l[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=r[0]))}return e}var a={},l={20:0},i=[];function c(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=a,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(r,a,function(t){return e[t]}.bind(null,a));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([733,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},733:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return w})),r.d(t,"getContents",(function(){return q}));var a=r(0),l=r.n(a),i=r(4),c=r(2),n=(r(25),r(14),r(37)),o=r(29),s=r(75),d=r(8),b=r(11),u=l.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:l.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:l.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:l.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:l.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:l.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],p=[{id:"help-text-icon",label:"Help text icon",element:l.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:l.a.createElement("div",{style:{paddingTop:"3rem"}},l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],m=r(1),f=r(35),O=i.c.a,x=i.c.code,j=i.c.h2,k=i.c.h3,E=i.c.h4,g=i.c.h5,y=i.c.p,w=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(m.f)(o.b)),j({id:"About-Checkbox"},"About Checkbox"),y({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),k({id:"Accessibility"},"Accessibility"),y({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),y({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),y({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),y({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),y({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),k({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(m.f)(o.b)),j({id:"Base"},"Base"),y({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),y({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(m.f)(o.b)),k({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(m.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(m.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"disabled")),g({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"checked-and-disabled")),k({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(m.f)(o.c,"group")),g({id:"Group-with-Wrapping-Labels"},"Group with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text")),g({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(m.f)(o.c,"group-required")),g({id:"Required-with-Wrapping-Labels"},"Required with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text-required-group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text-required-group")),g({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(m.f)(o.c,"group-error")),g({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"rtl")),j({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(m.f)(u)),k({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(h,"required")),k({id:"View-mode"},"View mode"),y({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-checked")),k({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon-tooltip")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},q=function(){return Object(i.a)(w())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],b=0,u=[];b<n.length;b++)c=n[b],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&u.push(l[c][0]),l[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);u.length;)u.shift()();return i.push.apply(i,s\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],a=!0,n=1;n<r.length;n++){var o=r[n];0!==l[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=r[0]))}return e}var a={},l={20:0},i=[];function c(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=a,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(r,a,function(t){return e[t]}.bind(null,a));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([734,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},734:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return w})),r.d(t,"getContents",(function(){return q}));var a=r(0),l=r.n(a),i=r(4),c=r(2),n=(r(26),r(14),r(38)),o=r(30),s=r(76),d=r(8),b=r(11),u=l.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:l.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:l.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:l.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:l.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:l.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:l.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},l.a.createElement(b.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],p=[{id:"help-text-icon",label:"Help text icon",element:l.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:l.a.createElement("div",{style:{paddingTop:"3rem"}},l.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],m=r(1),f=r(36),O=i.c.a,x=i.c.code,j=i.c.h2,k=i.c.h3,E=i.c.h4,g=i.c.h5,y=i.c.p,w=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(m.f)(o.b)),j({id:"About-Checkbox"},"About Checkbox"),y({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),k({id:"Accessibility"},"Accessibility"),y({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),y({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),y({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),y({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),y({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),k({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(m.f)(o.b)),j({id:"Base"},"Base"),y({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),y({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(m.f)(o.b)),k({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(m.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(m.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"disabled")),g({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.d,"checked-and-disabled")),k({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(m.f)(o.c,"group")),g({id:"Group-with-Wrapping-Labels"},"Group with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text")),g({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(m.f)(o.c,"group-required")),g({id:"Required-with-Wrapping-Labels"},"Required with Wrapping Labels"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"wrapping-text-required-group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox with wrapping text example"},Object(m.f)(o.c,"wrapping-text-required-group")),g({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(m.f)(o.c,"group-error")),g({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(m.f)(o.c,"rtl")),j({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(m.f)(u)),k({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(m.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(m.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(m.f)(h,"required")),k({id:"View-mode"},"View mode"),y({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(m.f)(h,"view-mode-checked")),k({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(m.f)(p,"required-help-text-icon-tooltip")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},q=function(){return Object(i.a)(w())}}});

package/__internal/chunked/docs/ui/components/checkbox-button/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=function(e){function t(t){for(var n,a,l=t[0],s=t[1],r=t[2],d=0,h=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&h.push(i[a][0]),i[a]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(b&&b(t);h.length;)h.shift()();return o.push.apply(o,r\|\|[]),c()}function c(){for(var e,t=0;t<o.length;t++){for(var c=o[t],n=!0,l=1;l<c.length;l++){var s=c[l];0!==i[s]&&(n=!1)}n&&(o.splice(t--,1),e=a(a.s=c[0]))}return e}var n={},i={18:0},o=[];function a(t){if(n[t])return n[t].exports;var c=n[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,a),c.l=!0,c.exports}a.m=e,a.c=n,a.d=function(e,t,c){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:c})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(a.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(c,n,function(t){return e[t]}.bind(null,n));return c},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var b=s;return o.push([~~731~~,0]),c()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~731~~:function(e,t,c){"use strict";c.r(t),c.d(t,"getElement",(function(){return E})),c.d(t,"getContents",(function(){return S}));var n=c(0),i=c.n(n),o=c(4),a=c(74),l=i.a.createElement(a.b,null),s=[{id:"checkbox-button-checked",label:"Checked",element:i.a.createElement(a.b,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:i.a.createElement(a.b,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:i.a.createElement(a.b,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:i.a.createElement(a.a,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:i.a.createElement(a.a,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:i.a.createElement(a.a,{checked:!0,disabled:!0})}],r=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:i.a.createElement(a.b,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],b=c(2),d=c(1),h=c(35),u=o.c.a,f=o.c.code,m=o.c.h2,p=o.c.h3,k=o.c.li,y=o.c.p,x=o.c.table,_=o.c.tbody,O=o.c.td,D=o.c.th,g=o.c.thead,j=o.c.tr,v=o.c.ul,E=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),Object(n.createElement)(b.a,{exampleOnly:!0},Object(d.f)(l)),m({id:"About-Checkbox-Button"},"About Checkbox Button"),y({},"The checkbox button is similar to a checkbox in that it presents a user with a\nbinary choice for an item. However, the only action a user can take is to\nadd (or remove) an entity. When a user clicks the checkbox button, the entity is\nstored, similar to an ‘add to cart’ experience, until the user saves changes."),y({},"The checkbox button is useful for increasing clarity. Since the button only adds\nor removes entities, the user knows the action they will prompt upon click.\nThe checkbox button also provides a clear visual affordance and a large target to take this action."),y({},"Use the add button if the component you’re building:"),v({},k({},"Exists without other multi-select elements (i.e. checkboxes)"),k({},"Allows users to select multiple entities"),k({},"Semantically fits the add/remove model")),m({id:"Structure-and-Implementation"},"Structure and Implementation"),y({},"The checkbox ",f({},"<input>")," is visually hidden with ",f({},".slds-assistive-text")," and a faux checkbox is created using the ",u({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),y({},"Click and tap events are captured by a ",f({},"<label>")," that encases the entire blueprint. The ",f({},"for")," attribute of your ",f({},"<label>")," must match the ",f({},"id")," attribute of your ",f({},"<input>"),"."),y({},"The states of the checkbox button are styled with the following classes:"),x({},g({},j({},D({},"Class"),D({},"State"),D({},"Description"))),_({},j({},O({},f({},".slds-checkbox-button_is-checked")),O({},"checked"),O({},"The checked state when the checkbox button has been selected")),j({},O({},f({},".slds-checkbox-button_is-disabled")),O({},"disabled"),O({},"The disabled state when the checkbox button has been disabled")),j({},O({},f({},".slds-checkbox-button_is-focused")),O({},"focused"),O({},"The focused state when the checkbox button has focus; important for accessibility")))),y({},"When implementing this blueprint, monitor the state of the checkbox ",f({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",f({},"<input>"),"."),y({},"It is possible to change the icon used within the checkbox button, see ",u({href:"#different-icon"},"Different Icons")," for more details."),p({id:"Mobile"},"Mobile"),Object(n.createElement)(h.a,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(n.createElement)(b.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},Object(d.f)(l)),m({id:"Base"},"Base"),Object(n.createElement)(b.a,null,Object(d.f)(l)),m({id:"States"},"States"),p({id:"Checked"},"Checked"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked")),p({id:"Disabled"},"Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-disabled")),p({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked-disabled")),m({id:"Examples"},"Examples"),p({id:"Different-Icon"},"Different Icon"),y({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",u({href:"/icons/#utility"},"utility icon listing")," for all available options."),y({},"This example is using the ",f({},"recycle_bin_empty")," utility icon as its base state and the ",f({},"recycle_bin_full")," utility icon as its checked state."),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-icon-symbol")),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-checked-icon-symbol")))},S=function(){return Object(o.a)(E())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-button/docs.mdx.js"]=function(e){function t(t){for(var n,a,l=t[0],s=t[1],r=t[2],d=0,h=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&h.push(i[a][0]),i[a]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(b&&b(t);h.length;)h.shift()();return o.push.apply(o,r\|\|[]),c()}function c(){for(var e,t=0;t<o.length;t++){for(var c=o[t],n=!0,l=1;l<c.length;l++){var s=c[l];0!==i[s]&&(n=!1)}n&&(o.splice(t--,1),e=a(a.s=c[0]))}return e}var n={},i={18:0},o=[];function a(t){if(n[t])return n[t].exports;var c=n[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,a),c.l=!0,c.exports}a.m=e,a.c=n,a.d=function(e,t,c){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:c})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(a.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(c,n,function(t){return e[t]}.bind(null,n));return c},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var b=s;return o.push([732,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},732:function(e,t,c){"use strict";c.r(t),c.d(t,"getElement",(function(){return E})),c.d(t,"getContents",(function(){return S}));var n=c(0),i=c.n(n),o=c(4),a=c(75),l=i.a.createElement(a.b,null),s=[{id:"checkbox-button-checked",label:"Checked",element:i.a.createElement(a.b,{isChecked:!0})},{id:"checkbox-button-disabled",label:"Disabled",element:i.a.createElement(a.b,{isDisabled:!0})},{id:"checkbox-button-checked-disabled",label:"Checked and Disabled",element:i.a.createElement(a.b,{isChecked:!0,isDisabled:!0})},{id:"checkbox-add-button-checked",label:"Deprecated - Checked",element:i.a.createElement(a.a,{checked:!0})},{id:"checkbox-add-button-disabled",label:"Deprecated - Disabled",element:i.a.createElement(a.a,{disabled:!0})},{id:"checkbox-add-button-checked-and-disabled",label:"Deprecated - Checked and Disabled",element:i.a.createElement(a.a,{checked:!0,disabled:!0})}],r=[{id:"checkbox-button-icon-symbol",label:"Different Icon",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full"})},{id:"checkbox-button-checked-icon-symbol",label:"Different Icon - Checked",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",iconChecked:"recycle_bin_full",isChecked:!0})},{id:"checkbox-button-disabled-icon-symbol",label:"Different Icon - Disabled",element:i.a.createElement(a.b,{iconUnchecked:"recycle_bin_empty",isDisabled:!0})},{id:"checkbox-button-checked-disabled-icon-symbol",label:"Different Icon - Checked and Disabled",element:i.a.createElement(a.b,{iconChecked:"recycle_bin_full",isChecked:!0,isDisabled:!0})}],b=c(2),d=c(1),h=c(36),u=o.c.a,f=o.c.code,m=o.c.h2,p=o.c.h3,k=o.c.li,y=o.c.p,x=o.c.table,_=o.c.tbody,O=o.c.td,D=o.c.th,g=o.c.thead,j=o.c.tr,v=o.c.ul,E=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A styled checkable input that communicates if an option is being added to a group"),Object(n.createElement)(b.a,{exampleOnly:!0},Object(d.f)(l)),m({id:"About-Checkbox-Button"},"About Checkbox Button"),y({},"The checkbox button is similar to a checkbox in that it presents a user with a\nbinary choice for an item. However, the only action a user can take is to\nadd (or remove) an entity. When a user clicks the checkbox button, the entity is\nstored, similar to an ‘add to cart’ experience, until the user saves changes."),y({},"The checkbox button is useful for increasing clarity. Since the button only adds\nor removes entities, the user knows the action they will prompt upon click.\nThe checkbox button also provides a clear visual affordance and a large target to take this action."),y({},"Use the add button if the component you’re building:"),v({},k({},"Exists without other multi-select elements (i.e. checkboxes)"),k({},"Allows users to select multiple entities"),k({},"Semantically fits the add/remove model")),m({id:"Structure-and-Implementation"},"Structure and Implementation"),y({},"The checkbox ",f({},"<input>")," is visually hidden with ",f({},".slds-assistive-text")," and a faux checkbox is created using the ",u({href:"/components/icons"},"icon blueprint")," which allows the display of an icon instead of the standard checkbox."),y({},"Click and tap events are captured by a ",f({},"<label>")," that encases the entire blueprint. The ",f({},"for")," attribute of your ",f({},"<label>")," must match the ",f({},"id")," attribute of your ",f({},"<input>"),"."),y({},"The states of the checkbox button are styled with the following classes:"),x({},g({},j({},D({},"Class"),D({},"State"),D({},"Description"))),_({},j({},O({},f({},".slds-checkbox-button_is-checked")),O({},"checked"),O({},"The checked state when the checkbox button has been selected")),j({},O({},f({},".slds-checkbox-button_is-disabled")),O({},"disabled"),O({},"The disabled state when the checkbox button has been disabled")),j({},O({},f({},".slds-checkbox-button_is-focused")),O({},"focused"),O({},"The focused state when the checkbox button has focus; important for accessibility")))),y({},"When implementing this blueprint, monitor the state of the checkbox ",f({},"<input>")," and apply the appropriate state class listed in the above chart based on the current state of the checkbox ",f({},"<input>"),"."),y({},"It is possible to change the icon used within the checkbox button, see ",u({href:"#different-icon"},"Different Icons")," for more details."),p({id:"Mobile"},"Mobile"),Object(n.createElement)(h.a,{patternSpecificText:"checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(n.createElement)(b.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox buttons"},Object(d.f)(l)),m({id:"Base"},"Base"),Object(n.createElement)(b.a,null,Object(d.f)(l)),m({id:"States"},"States"),p({id:"Checked"},"Checked"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked")),p({id:"Disabled"},"Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-disabled")),p({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(n.createElement)(b.a,null,Object(d.f)(s,"checkbox-button-checked-disabled")),m({id:"Examples"},"Examples"),p({id:"Different-Icon"},"Different Icon"),y({},"You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the ",u({href:"/icons/#utility"},"utility icon listing")," for all available options."),y({},"This example is using the ",f({},"recycle_bin_empty")," utility icon as its base state and the ",f({},"recycle_bin_full")," utility icon as its checked state."),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-icon-symbol")),Object(n.createElement)(b.a,null,Object(d.f)(r,"checkbox-button-checked-icon-symbol")))},S=function(){return Object(o.a)(E())}}});

package/__internal/chunked/docs/ui/components/checkbox-button-group/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-button-group/docs.mdx.js"]=function(e){function t(t){for(var a,c,o=t[0],s=t[1],d=t[2],u=0,m=[];u<o.length;u++)c=o[u],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&m.push(n[c][0]),n[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(i&&i(t);m.length;)m.shift()();return l.push.apply(l,d\|\|[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],a=!0,o=1;o<r.length;o++){var s=r[o];0!==n[s]&&(a=!1)}a&&(l.splice(t--,1),e=c(c.s=r[0]))}return e}var a={},n={17:0},l=[];function c(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=a,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(r,a,function(t){return e[t]}.bind(null,a));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var i=s;return l.push([~~707~~,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~707~~:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return x})),r.d(t,"getContents",(function(){return g}));var a=r(0),n=r.n(a),l=r(4),c=r(2),o=(r(14),r(1)),s=r(35),d=r(5),i=r.n(d),u=function(e){return n.a.createElement("fieldset",{className:i()("slds-form-element",e.className)},n.a.createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Scheduled Day(s)"),n.a.createElement("div",{className:"slds-form-element__control"},e.children))},m=function(e){return n.a.createElement("div",{className:i()("slds-checkbox_button-group",e.className)},e.children)},b=function(e){var t=o.d.uniqueId("unique-id-".concat(e.id,"-"));return n.a.createElement("span",{className:i()("slds-button slds-checkbox_button",e.className)},n.a.createElement("input",{"aria-describedby":e.errorId,disabled:e.disabled,defaultChecked:e.checked,id:t,value:t,name:"checkbox",type:"checkbox"}),n.a.createElement("label",{className:"slds-checkbox_button__label",htmlFor:t},n.a.createElement("span",{className:"slds-checkbox_faux"},e.children)))},f=n.a.createElement(u,null,n.a.createElement(m,null,n.a.createElement(b,{id:"monday"},"Mon"),n.a.createElement(b,{id:"tuesday"},"Tue"),n.a.createElement(b,{id:"wednesday"},"Wed"),n.a.createElement(b,{id:"thursday"},"Thu"),n.a.createElement(b,{id:"friday"},"Fri"))),p=[{id:"has-error",label:"Error",element:n.a.createElement(u,{className:"slds-has-error"},n.a.createElement(m,null,n.a.createElement(b,{errorId:"error_01",id:"monday"},"Mon"),n.a.createElement(b,{errorId:"error_01",id:"tuesday"},"Tue"),n.a.createElement(b,{errorId:"error_01",id:"wednesday"},"Wed"),n.a.createElement(b,{errorId:"error_01",id:"thursday"},"Thu"),n.a.createElement(b,{errorId:"error_01",id:"friday"},"Fri")),n.a.createElement("div",{id:"error_01",className:"slds-form-element__help"},"This field is required"))},{id:"disabled",label:"Disabled",element:n.a.createElement(u,null,n.a.createElement(m,null,n.a.createElement(b,{id:"monday",disabled:!0},"Mon"),n.a.createElement(b,{id:"tuesday",disabled:!0},"Tue"),n.a.createElement(b,{id:"wednesday",disabled:!0},"Wed"),n.a.createElement(b,{id:"thursday",disabled:!0},"Thu"),n.a.createElement(b,{id:"friday",disabled:!0},"Fri")))}],h=l.c.a,E=l.c.code,y=l.c.h2,_=l.c.h3,O=l.c.p,x=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"A styled checkable input group that communicates if an option(s) are true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(o.f)(f)),y({id:"About-Checkbox-Button-Group"},"About Checkbox Button Group"),O({},"The checkbox-button-group is a set of ",h({href:"/components/checkbox-button"},"checkbox buttons")," wrapped in a fieldset that is also a ",h({href:"/components/form-element"},"form element"),". It is described by a legend with the classes ",E({},"slds-form-element__legend")," and ",E({},"slds-form-element__label")," applied to it."),_({id:"Mobile"},"Mobile"),Object(a.createElement)(s.a,{patternSpecificText:"buttons in the checkbox button group will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as become stacked"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox button groups"},Object(o.f)(f)),y({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(o.f)(f)),y({id:"States"},"States"),_({id:"Has-Error"},"Has Error"),Object(a.createElement)(c.a,null,Object(o.f)(p,"has-error")),_({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(o.f)(p,"disabled")))},g=function(){return Object(l.a)(x())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-button-group/docs.mdx.js"]=function(e){function t(t){for(var a,c,o=t[0],s=t[1],d=t[2],u=0,m=[];u<o.length;u++)c=o[u],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&m.push(n[c][0]),n[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(i&&i(t);m.length;)m.shift()();return l.push.apply(l,d\|\|[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],a=!0,o=1;o<r.length;o++){var s=r[o];0!==n[s]&&(a=!1)}a&&(l.splice(t--,1),e=c(c.s=r[0]))}return e}var a={},n={17:0},l=[];function c(t){if(a[t])return a[t].exports;var r=a[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=a,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},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,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(r,a,function(t){return e[t]}.bind(null,a));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var i=s;return l.push([708,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},708:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return x})),r.d(t,"getContents",(function(){return g}));var a=r(0),n=r.n(a),l=r(4),c=r(2),o=(r(14),r(1)),s=r(36),d=r(5),i=r.n(d),u=function(e){return n.a.createElement("fieldset",{className:i()("slds-form-element",e.className)},n.a.createElement("legend",{className:"slds-form-element__legend slds-form-element__label"},"Scheduled Day(s)"),n.a.createElement("div",{className:"slds-form-element__control"},e.children))},m=function(e){return n.a.createElement("div",{className:i()("slds-checkbox_button-group",e.className)},e.children)},b=function(e){var t=o.d.uniqueId("unique-id-".concat(e.id,"-"));return n.a.createElement("span",{className:i()("slds-button slds-checkbox_button",e.className)},n.a.createElement("input",{"aria-describedby":e.errorId,disabled:e.disabled,defaultChecked:e.checked,id:t,value:t,name:"checkbox",type:"checkbox"}),n.a.createElement("label",{className:"slds-checkbox_button__label",htmlFor:t},n.a.createElement("span",{className:"slds-checkbox_faux"},e.children)))},f=n.a.createElement(u,null,n.a.createElement(m,null,n.a.createElement(b,{id:"monday"},"Mon"),n.a.createElement(b,{id:"tuesday"},"Tue"),n.a.createElement(b,{id:"wednesday"},"Wed"),n.a.createElement(b,{id:"thursday"},"Thu"),n.a.createElement(b,{id:"friday"},"Fri"))),p=[{id:"has-error",label:"Error",element:n.a.createElement(u,{className:"slds-has-error"},n.a.createElement(m,null,n.a.createElement(b,{errorId:"error_01",id:"monday"},"Mon"),n.a.createElement(b,{errorId:"error_01",id:"tuesday"},"Tue"),n.a.createElement(b,{errorId:"error_01",id:"wednesday"},"Wed"),n.a.createElement(b,{errorId:"error_01",id:"thursday"},"Thu"),n.a.createElement(b,{errorId:"error_01",id:"friday"},"Fri")),n.a.createElement("div",{id:"error_01",className:"slds-form-element__help"},"This field is required"))},{id:"disabled",label:"Disabled",element:n.a.createElement(u,null,n.a.createElement(m,null,n.a.createElement(b,{id:"monday",disabled:!0},"Mon"),n.a.createElement(b,{id:"tuesday",disabled:!0},"Tue"),n.a.createElement(b,{id:"wednesday",disabled:!0},"Wed"),n.a.createElement(b,{id:"thursday",disabled:!0},"Thu"),n.a.createElement(b,{id:"friday",disabled:!0},"Fri")))}],h=l.c.a,E=l.c.code,y=l.c.h2,_=l.c.h3,O=l.c.p,x=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"A styled checkable input group that communicates if an option(s) are true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(o.f)(f)),y({id:"About-Checkbox-Button-Group"},"About Checkbox Button Group"),O({},"The checkbox-button-group is a set of ",h({href:"/components/checkbox-button"},"checkbox buttons")," wrapped in a fieldset that is also a ",h({href:"/components/form-element"},"form element"),". It is described by a legend with the classes ",E({},"slds-form-element__legend")," and ",E({},"slds-form-element__label")," applied to it."),_({id:"Mobile"},"Mobile"),Object(a.createElement)(s.a,{patternSpecificText:"buttons in the checkbox button group will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as become stacked"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkbox button groups"},Object(o.f)(f)),y({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(o.f)(f)),y({id:"States"},"States"),_({id:"Has-Error"},"Has Error"),Object(a.createElement)(c.a,null,Object(o.f)(p,"has-error")),_({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(o.f)(p,"disabled")))},g=function(){return Object(l.a)(x())}}});

package/__internal/chunked/docs/ui/components/checkbox-toggle/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-toggle/docs.mdx.js"]=function(e){function t(t){for(var c,s,i=t[0],a=t[1],l=t[2],u=0,d=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&d.push(o[s][0]),o[s]=0;for(c in a)Object.prototype.hasOwnProperty.call(a,c)&&(e[c]=a[c]);for(h&&h(t);d.length;)d.shift()();return r.push.apply(r,l\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],c=!0,i=1;i<n.length;i++){var a=n[i];0!==o[a]&&(c=!1)}c&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var c={},o={19:0},r=[];function s(t){if(c[t])return c[t].exports;var n=c[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=c,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)s.d(n,c,function(t){return e[t]}.bind(null,c));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],a=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var h=a;return r.push([~~647~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~647~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return g}));var c=n(0),o=n(4),r=n(2),s=(n(25),n(14),n(37)),i=n(1),a=n(35),l=n(87),h=o.c.code,u=o.c.h2,d=o.c.h3,b=o.c.h4,p=o.c.p,f=function(){return Object(c.createElement)(o.b,{},Object(c.createElement)("div",{className:"lead doc"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(c.createElement)(r.a,{exampleOnly:!0},Object(i.f)(l.c,"checkbox-toggle-checked")),u({id:"About-Checkbox-Toggle"},"About Checkbox Toggle"),p({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),d({id:"Accessibility"},"Accessibility"),p({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),p({},"Custom checkboxes are created by applying the ",h({},".slds-checkbox")," class to a ",h({},"<label>")," element. To remain accessible to all user agents, place ",h({},"<input>")," with ",h({},'type="checkbox"')," inside the ",h({},"<label>")," element. The ",h({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",h({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",h({},".slds-form-element__label")," contains the label text."),p({},"When a single checkbox is required, ",h({},'<div class="slds-checkbox">')," should get ",h({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",h({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),p({},"When a checkbox group is required, the ",h({},"<fieldset>")," should receive the class ",h({},".slds-is-required"),". The ",h({},"<legend>")," should then get ",h({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),p({},"As SLDS checkboxes rely on the ",h({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),p({},"The following JavaScript demonstrates how to set a checkbox to be indeterminate:"),h({},"var checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n"),d({id:"Mobile"},"Mobile"),Object(c.createElement)(a.a,{patternSpecificText:"checkbox toggles will have an increased label text size"}),Object(c.createElement)(r.a,{frameOnly:!0},Object(i.f)(l.b)),u({id:"Base"},"Base"),Object(c.createElement)(r.a,null,Object(i.f)(l.b)),d({id:"States"},"States"),b({id:"Checked"},"Checked"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-checked")),b({id:"Disabled"},"Disabled"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-disabled")),b({id:"Right-to-Left"},"Right to Left"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-rtl")),u({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(c.createElement)(s.a,{name:"checkbox-toggle",type:"component"}))},g=function(){return Object(o.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox-toggle/docs.mdx.js"]=function(e){function t(t){for(var c,s,i=t[0],a=t[1],l=t[2],u=0,d=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&d.push(o[s][0]),o[s]=0;for(c in a)Object.prototype.hasOwnProperty.call(a,c)&&(e[c]=a[c]);for(h&&h(t);d.length;)d.shift()();return r.push.apply(r,l\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],c=!0,i=1;i<n.length;i++){var a=n[i];0!==o[a]&&(c=!1)}c&&(r.splice(t--,1),e=s(s.s=n[0]))}return e}var c={},o={19:0},r=[];function s(t){if(c[t])return c[t].exports;var n=c[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=c,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)s.d(n,c,function(t){return e[t]}.bind(null,c));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],a=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var h=a;return r.push([648,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},648:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return g}));var c=n(0),o=n(4),r=n(2),s=(n(26),n(14),n(38)),i=n(1),a=n(36),l=n(88),h=o.c.code,u=o.c.h2,d=o.c.h3,b=o.c.h4,p=o.c.p,f=function(){return Object(c.createElement)(o.b,{},Object(c.createElement)("div",{className:"lead doc"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(c.createElement)(r.a,{exampleOnly:!0},Object(i.f)(l.c,"checkbox-toggle-checked")),u({id:"About-Checkbox-Toggle"},"About Checkbox Toggle"),p({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),d({id:"Accessibility"},"Accessibility"),p({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),p({},"Custom checkboxes are created by applying the ",h({},".slds-checkbox")," class to a ",h({},"<label>")," element. To remain accessible to all user agents, place ",h({},"<input>")," with ",h({},'type="checkbox"')," inside the ",h({},"<label>")," element. The ",h({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",h({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",h({},".slds-form-element__label")," contains the label text."),p({},"When a single checkbox is required, ",h({},'<div class="slds-checkbox">')," should get ",h({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",h({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),p({},"When a checkbox group is required, the ",h({},"<fieldset>")," should receive the class ",h({},".slds-is-required"),". The ",h({},"<legend>")," should then get ",h({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),p({},"As SLDS checkboxes rely on the ",h({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),p({},"The following JavaScript demonstrates how to set a checkbox to be indeterminate:"),h({},"var checkbox = document.getElementById('checkbox-indeterminate-01');\ncheckbox.indeterminate = true;\n"),d({id:"Mobile"},"Mobile"),Object(c.createElement)(a.a,{patternSpecificText:"checkbox toggles will have an increased label text size"}),Object(c.createElement)(r.a,{frameOnly:!0},Object(i.f)(l.b)),u({id:"Base"},"Base"),Object(c.createElement)(r.a,null,Object(i.f)(l.b)),d({id:"States"},"States"),b({id:"Checked"},"Checked"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-checked")),b({id:"Disabled"},"Disabled"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-disabled")),b({id:"Right-to-Left"},"Right to Left"),Object(c.createElement)(r.a,null,Object(i.f)(l.c,"checkbox-toggle-rtl")),u({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(c.createElement)(s.a,{name:"checkbox-toggle",type:"component"}))},g=function(){return Object(o.a)(f())}}});