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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},8380:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return H},getElement:function(){return Y}});var l=n(1594),a=n.n(l),s=n(5671),i=n(6547),o=(n(3212),n(5619)),r=n(806),d=n(6955),c=n(3589),m=n(8347),u=n(538),h=n(9825),p=n(942),f=n.n(p),b=n(6333),E=n.n(b),x=[a().createElement(u.eX,{key:"groups",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"groups",title:"Group email",assistiveText:"Group email"}),a().createElement(u.eX,{key:"attach",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"attach",title:"Has attachments",assistiveText:"Has attachments"})],_=[a().createElement(u.eX,{key:"rotate",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"rotate",title:"Recurring Task",assistiveText:"Recurring Task"})],y=[a().createElement(u.eX,{key:"world",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"world",title:"Public sharing",assistiveText:"Public sharing"})],v=function(e){return a().createElement("div",{className:f()("slds-icon_container","log_a_call"===e.symbol?"slds-icon-standard-log-a-call":"slds-icon-standard-"+e.symbol,e.className),title:"log_a_call"===e.symbol?"call":e.symbol},a().createElement(m.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:e.symbol}))},g=function(e){return a().createElement("div",{className:f()("slds-timeline__actions",{"slds-timeline__actions_inline":e.inline})},a().createElement("p",{className:"slds-timeline__date"},e.date||"Feb 24"),a().createElement(d.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"down",assistiveText:e.assistiveText||"More Options","aria-haspopup":"true",title:e.title||"More Options"}))},N=function(e){return a().createElement("div",{className:"slds-media__figure"},a().createElement(d.A,{iconClassName:"slds-timeline__details-action-icon",symbol:"switch",title:"Toggle details for ".concat(e.title),assistiveText:"Toggle details for ".concat(e.title),"aria-controls":e.id,"aria-expanded":e.isExpanded}),a().createElement(v,{symbol:e.type,className:"slds-timeline__icon"}))},w=function(e){return a().createElement("div",{className:"slds-media__body"},e.children)},O=function(e){return a().createElement("div",{className:"slds-grid slds-grid_align-spread slds-timeline__trigger"},a().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space"},"task"===e.type&&a().createElement(c.Sc,{hideLabel:!0,label:"Mark ".concat(e.title," complete")}),a().createElement("h3",{className:"slds-truncate",title:e.title},a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},a().createElement("strong",null,e.title))),e.iconSet&&a().createElement("div",{className:"slds-no-flex"},e.iconSet)),a().createElement(g,{inline:!0,date:e.date,title:"More Options for this item",assistiveText:"More Options for this item"}))},S=function(e){return a().createElement("p",{className:"slds-m-horizontal_xx-small"},a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.you)," ",e.subtext.action," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.to)," ",e.subtext.extra)},T=function(e){return a().createElement("div",{className:"slds-grid slds-text-color_error slds-m-top_x-small slds-m-horizontal_xx-small",id:e.id},a().createElement(u.eX,{key:"attach",className:"slds-icon-text-error slds-icon_x-small slds-m-right_xx-small",symbol:"error",title:"Error Occurred",assistiveText:"Error Occurred"}),a().createElement("p",null,"There was an error loading the details"))},A=function(e){return a().createElement("div",{className:f()("slds-timeline__item_expandable","".concat("log_a_call"===e.type?"slds-timeline__item_call":"slds-timeline__item_"+e.type),{"slds-is-open":e.isExpanded},e.className)},a().createElement("span",{className:"slds-assistive-text"},e.type),a().createElement("div",{className:f()("slds-media")},a().createElement(N,e),a().createElement(w,null,a().createElement(O,e),a().createElement(S,e),e.hasError?a().createElement(T,e):a().createElement(M,{id:e.id,isExpanded:e.isExpanded,fields:e.fields,bodyLabel:e.bodyLabel,footerButtons:e.footerButtons},e.children))))},k=function(e){return a().createElement("li",{className:"slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small"},a().createElement("span",{className:"slds-text-title slds-p-bottom_x-small"},e.label),a().createElement("span",{className:"slds-text-body_medium slds-truncate",title:e.content},a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.content)))},B=function(e){return a().createElement("ul",{className:"slds-list_horizontal slds-wrap"},e.fields.map(function(e,t){return a().createElement(k,{key:t,label:e.label,content:e.content})}))},M=function(e){return a().createElement("article",{className:f()("slds-box","slds-timeline__item_details","slds-theme_shade","slds-m-top_x-small","slds-m-horizontal_xx-small",{"slds-p-around_medium":e.isExpanded},e.className),id:e.id,hidden:!e.isExpanded},e.fields&&a().createElement(B,e),e.children&&a().createElement("div",null,a().createElement("span",{className:"slds-text-title"},e.bodyLabel),a().createElement("p",{className:"slds-p-top_x-small"},e.children)),e.footerButtons&&a().createElement(h.$n,{isNeutral:!0,className:"slds-m-top_small"},a().createElement(m.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"world"}),"Public Sharing"))},L=function(e){return a().createElement("div",{className:"demo-only",style:{width:"400px"}},e.children)},C=function(e){var t=function(t){if(e.itemsExpanded)return e.itemsExpanded.includes(t)};return a().createElement("ul",{className:"slds-timeline"},a().createElement("li",null,a().createElement(A,{id:E()("task-item-".concat(e.id,"-")),type:"task",title:"Review proposals for EBC deck with larger team and have marketing review this",date:"9:00am | 3/20/17",subtext:{you:"You",action:"created a task with",to:"Charlie Gomez"},iconSet:_,fields:[{label:"Name",content:"Charlie Gomez"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(1),isNarrow:e.isNarrow,hasError:e.hasError},"Need to finalize proposals and brand details before the meeting")),a().createElement("li",null,a().createElement(A,{id:E()("call-item-".concat(e.id,"-")),type:"log_a_call",title:"Mobile conversation on Monday",date:"10:00am | 3/23/17",subtext:{you:"You",action:"logged a call with",to:"Adam Chan"},fields:[{label:"Name",content:"Adam Chan"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(2),isNarrow:e.isNarrow},"Adam seemed interested in closing this deal quickly! Let’s move.")),a().createElement("li",null,a().createElement(A,{id:E()("email-item-".concat(e.id,"-")),type:"email",title:"Re: Mobile conversation on Monday with the new global team",date:"10:00am | 3/24/17",subtext:{you:"You",action:"emailed",to:"Lea Chan"},iconSet:x,fields:[{label:"From Address",content:"Jackie Dewar"},{label:"To Address",content:"Lea Chan"}],bodyLabel:"Text Body",isExpanded:t(3),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Hi everyone, Thanks for meeting with the team today and going through the proposals we saw. This goes on and wraps if needed.")),a().createElement("li",null,a().createElement(A,{id:E()("event-item-".concat(e.id,"-")),type:"event",title:"EBC Follow up call",date:"10:30am | 3/24/17",subtext:{you:"You",action:"created an event with",to:"Aida Lee",extra:"and 5 others"},iconSet:y,fields:[{label:"Location",content:"Westen St. Francis, San Francisco, CA, 94622"},{label:"Attendees",content:"Jason Dewar (Organizer) + 5 others"},{label:"When",content:"March 26, 10:00 AM - 11:00 AM"}],bodyLabel:"Description",isExpanded:t(4),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Let's discuss the 2017 product roadmap and address any questions")))},j=a().createElement(C,{id:"base",isExpanded:"false"}),D=[{id:"narrow",label:"Narrow",element:a().createElement(L,null,a().createElement(C,{id:"narrow",itemsExpanded:[1,2,3,4],isNarrow:!0,footerButtons:!0}))}],X=[{id:"expanded",label:"Expanded",element:a().createElement(C,{id:"expanded",itemsExpanded:[1,2,3,4],footerButtons:!0})},{id:"expanded-single",label:"Expanded - Single Item",element:a().createElement(C,{id:"expanded",itemsExpanded:[1],footerButtons:!0})},{id:"error",label:"Error",element:a().createElement(C,{id:"error",itemsExpanded:[1,2,3,4],hasError:!0,footerButtons:!0})},{id:"error-single",label:"Error - Single Item",element:a().createElement(C,{id:"error",itemsExpanded:[1],hasError:!0,footerButtons:!0})}],I=s.XB.code,P=s.XB.h2,R=s.XB.h3,z=s.XB.h4,F=s.XB.li,G=s.XB.p,J=s.XB.strong,W=s.XB.ul,Y=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"The activity timeline displays each of the user’s upcoming, current, and past activities."),(0,l.createElement)(i.A,{exampleOnly:!0},(0,r.NO)(j)),P({id:"About-Activity-Timeline"},"About Activity Timeline"),G({},"Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar."),R({id:"Accessibility"},"Accessibility"),G({},"Text describing the type of timeline item is placed in a ",I({},"span"),". It is the first element in the timeline item and should be hidden with the ",I({},"slds-assistive-text")," class. The ",I({},"SVG")," image does not need the ",I({},"slds-assistive-text")," class."),z({id:"Markup"},"Markup"),G({},J({},"Button:")),W({},F({},I({},"aria-controls")," is used to create an association between the button and the details section. If the details section has an ",I({},'id="email-content"'),", then the button should have ",I({},'aria-controls="email-content"'),"."),F({},"The title of the timeline item can also be used as a button to open the details section. If the details section has an ",I({},'id="email-content"'),", then the div with ",I({},"slds-timeline__trigger")," should have ",I({},'aria-controls="email-content"')," and the click handler."),F({},I({},"aria-expanded")," indicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.")),G({},J({},"Section:")),W({},F({},I({},"hidden")," indicates if the details section is open or closed, and if set to ",I({},"true"),", assistive technology hides the details section.")),z({id:"Keyboard-Interactions"},"Keyboard Interactions"),W({},F({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),P({id:"Base"},"Base"),(0,l.createElement)(i.A,null,(0,r.NO)(j)),P({id:"States"},"States"),R({id:"Expanding-sections"},"Expanding sections"),(0,l.createElement)(o.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"When the user interacts with the button to open the details section, ",(0,l.createElement)("code",null,"aria-expanded")," on the button should be ",(0,l.createElement)("code",null,"true")," and ",(0,l.createElement)("code",null,"hidden")," on the details section should be ",(0,l.createElement)("code",null,"false"),"."),(0,l.createElement)("p",null,"When the user interacts with the button to close the details section, ",(0,l.createElement)("code",null,"aria-expanded")," on the button should be ",(0,l.createElement)("code",null,"false")," and ",(0,l.createElement)("code",null,"hidden")," on the details section should be ",(0,l.createElement)("code",null,"true"),".")),z({id:"Single-Item-Expanded"},"Single Item Expanded"),(0,l.createElement)(i.A,null,(0,r.NO)(X,"expanded-single")),z({id:"Multiple-Items-Expanded"},"Multiple Items Expanded"),(0,l.createElement)(i.A,null,(0,r.NO)(X,"expanded")),R({id:"Error"},"Error"),(0,l.createElement)(i.A,null,(0,r.NO)(X,"error-single")),P({id:"Narrow-Region-Example"},"Narrow Region Example"),(0,l.createElement)(i.A,null,(0,r.NO)(D,"narrow")))},H=function(){return(0,s.Qr)(Y())}}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={id:e,exports:{}};return l[e](n,n.exports,s),n.exports}s.m=l,s.amdO={},e=[],s.O=function(t,n,l,a){if(!n){var i=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],a=e[c][2];for(var o=!0,r=0;r<n.length;r++)(!1&a||i>=a)&&Object.keys(s.O).every(function(e){return s.O[e](n[r])})?n.splice(r--,1):(o=!1,a<i&&(i=a));if(o){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}a=a||0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[n,l,a]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var a=Object.create(null);s.r(a);var i={};t=t||[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(a,i),a},s.d=function(e,t){for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=5204,function(){var e={5204:0};s.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,a,i=n[0],o=n[1],r=n[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(l in o)s.o(o,l)&&(s.m[l]=o[l]);if(r)var c=r(s)}for(t&&t(n);d<i.length;d++)a=i[d],s.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return s.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(8380)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/activity-timeline/docs.mdx.js"]=i}();