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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/carousel/docs.mdx.js"]=function(e){function t(t){for(var n,r,i=t[0],o=t[1],c=t[2],d=0,p=[];d<i.length;d++)r=i[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&p.push(l[r][0]),l[r]=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,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=r(r.s=a[0]))}return e}var n={},l={15:0},s=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=n,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var u=o;return s.push([793,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},793: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),r=a(2),i=a(27),o=a(14),c=a(15),u=a(7),d=a(5),p=a.n(d),b=a(25),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){if(t&&("object"===f(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}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",hidden:!e.isActive,"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}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&y(e,t)}(r,e);var t,a,n,s=_(r);function r(){return m(this,r),s.apply(this,arguments)}return t=r,(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-"),r=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-3),"%)")}},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:r,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:r,contentId:a,title:"Download SalesforceA tab"}))))}}])&&v(t.prototype,a),n&&v(t,n),Object.defineProperty(t,"prototype",{writable:!1}),r}(n.Component),A=s.c.code,S=s.c.h2,N=s.c.h3,P=s.c.h4,k=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)(r.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({},k({},"The tab list, which should have ",A({},'role="tablist"')),k({},"The tabs in that list, which should each be an ",A({},'<a role="tab">')," anchor wrapped in a ",A({},'<li role="presentation">')," list item"),k({},"The tab panels, which display each tab’s content and should each have ",A({},'role="tabpanel"'))),P({id:"Markup"},"Markup"),I({},k({},"Selected tab’s anchor has ",A({},'aria-selected="true"'),", all other tabs’ anchors have ",A({},'aria-selected="false"')),k({},"Selected tab’s anchor has ",A({},'tabindex="0"'),", all other tabs have ",A({},'tabindex="-1"')),k({},"Each tab’s anchor has an ",A({},"aria-controls")," attribute whose value is the id of the associated ",A({},'<div role="tabpanel">')),k({},"Each tab panel has an ",A({},"aria-labelledby")," attribute whose value is the id of its associated ",A({},'<a role="tab">')),k({},"Each tab panel has an ",A({},"hidden")," attribute whose value is toggled based on which panel is visible"),k({},"When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set")),P({id:"Keyboard-Interactions"},"Keyboard Interactions"),I({},k({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),k({},"Tab key, when focus is before the tab list, moves focus to the selected tab panel"),k({},"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"),k({},"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)(r.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)(r.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)(r.a,{demoStyles:"width: 480px; max-width: 100%;"},Object(n.createElement)(x,{panelActive:"2",autoPlay:!0}))),Object(n.createElement)(i.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)(i.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())}}});