@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 50.4 kB
JavaScript
var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/cards/docs.mdx.js"]=function(e){function t(t){for(var l,n,i=t[0],r=t[1],o=t[2],u=0,m=[];u<i.length;u++)n=i[u],s[n]&&m.push(s[n][0]),s[n]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(c&&c(t);m.length;)m.shift()();return d.push.apply(d,o||[]),a()}function a(){for(var e,t=0;t<d.length;t++){for(var a=d[t],l=!0,i=1;i<a.length;i++){var r=a[i];0!==s[r]&&(l=!1)}l&&(d.splice(t--,1),e=n(n.s=a[0]))}return e}var l={},s={29:0},d=[];function n(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=l,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var c=r;return d.push([312,0]),a()}({0:function(e,t){e.exports=React},275:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ActionOverflow=t.Context=void 0;var l=r(a(0)),s=r(a(2)),d=r(a(3)),n=a(19),i=r(a(1));function r(e){return e&&e.__esModule?e:{default:e}}t.Context=function(e){return l.default.createElement("div",{className:"demo-only",style:{height:"165px"}},e.children)};var o=l.default.createElement(d.default,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"down",assistiveText:"Show More","aria-haspopup":"true",title:"Show More"}),c=t.ActionOverflow=function(e){var t=e.position,a=e.dropdownIsOpen;return l.default.createElement(n.Trigger,{isOpen:a,triggerIcon:o},l.default.createElement(n.Menu,{className:(0,i.default)("slds-dropdown_actions","slds-dropdown_"+t)},l.default.createElement(n.MenuList,null,l.default.createElement(n.MenuItem,{tabIndex:"0"},"Action One"),l.default.createElement(n.MenuItem,null,"Action Two"),l.default.createElement(n.MenuItem,null,"Action Three"))))};c.defaultProps={dropdownIsOpen:!0,position:"left"},c.propTypes={position:s.default.oneOf(["left","right"]),dropdownIsOpen:s.default.bool},t.default=l.default.createElement(c,null)},276:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.EinsteinHeader=void 0;var l=r(a(0)),s=r(a(4)),d=r(a(3)),n=a(48),i=r(a(1));function r(e){return e&&e.__esModule?e:{default:e}}var o=function(e){return l.default.createElement("div",{className:"slds-einstein-header__actions"},l.default.createElement(n.ButtonGroup,null,l.default.createElement(d.default,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),l.default.createElement(d.default,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))};t.EinsteinHeader=function(e){return l.default.createElement("div",{className:(0,i.default)("slds-grid slds-einstein-header",e.className)},e.closeButton?l.default.createElement(d.default,{className:(0,i.default)("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,l.default.createElement("header",{className:(0,i.default)("slds-media slds-media_center slds-has-flexi-truncate")},l.default.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?l.default.createElement("div",{className:"slds-media__figure"},l.default.createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},l.default.createElement(s.default,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,l.default.createElement("div",{className:"slds-media__body"},l.default.createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle||"Einstein"},e.hasLink?l.default.createElement("a",{href:"javascript:void(0);",className:"slds-card__header-link",title:e.headerTitle||"Einstein"},l.default.createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")):l.default.createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")))),l.default.createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&l.default.createElement(o,null))}},277:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.states=t.EinsteinCard=void 0;var l=i(a(0)),s=a(25),d=i(s),n=a(276);function i(e){return e&&e.__esModule?e:{default:e}}var r=t.EinsteinCard=function(e){return l.default.createElement(d.default,null,l.default.createElement(n.EinsteinHeader,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),l.default.createElement(s.CardBody,{hasPadding:!0},"Card Body"),l.default.createElement(s.CardFooter,null,"View All"," ",l.default.createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))};t.default=l.default.createElement(r,null);t.states=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:l.default.createElement(r,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:l.default.createElement(r,{hasIcon:!0,hasActions:!0})}]},278:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.EditPopover=t.EditableCell=t.ReadOnlyCell=t.ErrorCell=t.RowActionsCell=t.SelectRowCell=t.RowTh=t.Td=t.TBodyTr=t.TBody=t.AdvancedDataTableHead=t.SelectAllColumnHeader=t.InteractiveColumnHeader=t.ResizeControl=t.ColumnHeader=t.ColumnTh=t.THeadTr=t.THead=t.Table=t.InlineEditTableContainer=void 0;var l=f(a(0)),s=f(a(1)),d=f(a(2)),n=a(5),i=f(n),r=f(a(3)),o=a(28),c=a(17),u=a(37),m=a(8);function f(e){return e&&e.__esModule?e:{default:e}}(t.InlineEditTableContainer=function(e){return l.default.createElement("div",{className:"slds-table_edit_container slds-is-relative"},e.children)}).propTypes={children:d.default.node};var h=t.Table=function(e){var t=(0,s.default)("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type});return l.default.createElement("table",{"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.children)};h.displayName="Table",h.propTypes={children:d.default.node,hasCellBuffer:d.default.bool,hasHiddenHeader:d.default.bool,hasNoCellFocus:d.default.bool,hasNoRowHover:d.default.bool,isBordered:d.default.bool,isColBordered:d.default.bool,isEditable:d.default.bool,isFixedLayout:d.default.bool,isResizable:d.default.bool,isResponsive:d.default.bool,isResponsiveStacked:d.default.bool,isStriped:d.default.bool,selectionType:d.default.oneOf(["multiple","single"]),style:d.default.object,type:d.default.oneOf(["advanced","base","treegrid"]).isRequired};var b=t.THead=function(e){return l.default.createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};b.displayName="THead",b.propTypes={children:d.default.node,isHidden:d.default.bool};var E=t.THeadTr=function(e){return l.default.createElement("tr",{className:"slds-line-height_reset"},e.children)};E.displayName="THeadTr",E.propTypes={children:d.default.node};var p=t.ColumnTh=function(e){var t=(0,s.default)({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection});return l.default.createElement("th",{"aria-label":e["aria-label"],"aria-sort":function(){var t=null;return e.isSortable&&(t=e.sortDirection||"none"),t}(),className:t,scope:"col",style:e.style},e.children)};p.displayName="ColumnTh",p.propTypes={"aria-label":d.default.string,children:d.default.node,hasFocus:d.default.bool,hasMenu:d.default.bool,isResizable:d.default.bool,isRightAligned:d.default.bool,isSortable:d.default.bool,sortDirection:d.default.oneOf(["ascending","descending","none"]),style:d.default.object};var y=t.ColumnHeader=function(e){return l.default.createElement("div",{className:(0,s.default)("slds-truncate",{"slds-assistive-text":e.isAssistiveText}),id:e.id,title:e.columnName},e.columnName)};y.displayName="ColumnHeader",y.propTypes={columnName:d.default.string.isRequired,id:d.default.string,isAssistiveText:d.default.bool},y.defaultProps={columnName:"Column Name"};var v=t.ResizeControl=function(e){var t=i.default.uniqueId("cell-resize-handle-");return l.default.createElement("div",{className:"slds-resizable"},l.default.createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),l.default.createElement("span",{className:"slds-resizable__handle"},l.default.createElement("span",{className:"slds-resizable__divider"})))};v.displayName="ResizeControl",v.propTypes={label:d.default.string.isRequired,tabIndex:d.default.oneOf(["0","-1"])};var _=t.InteractiveColumnHeader=function(e){var t=e.actionableMode?"0":"-1",a=function(){return l.default.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,l.default.createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&l.default.createElement(m.UtilityIcon,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return l.default.createElement(l.default.Fragment,null,e.isSortable?l.default.createElement("a",{className:"slds-th__action slds-text-link_reset",href:"javascript:void(0);",role:"button",tabIndex:t},l.default.createElement("span",{className:"slds-assistive-text"},"Sort by: "),a()):l.default.createElement("div",{className:"slds-th__action"},a()),e.sortDirection&&l.default.createElement("span",{className:"slds-assistive-text","aria-live":"assertive","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&l.default.createElement(r.default,{"aria-haspopup":"true",assistiveText:"Show "+e.columnName+" column actions",className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:e.actionableMode?"0":"-1",title:"Show "+e.columnName+" column actions"}),e.isResizable&&l.default.createElement(v,{label:e.columnName+" column width"||"Column Name column width",tabIndex:t}))};_.displayName="InteractiveColumnHeader",_.propTypes={actionableMode:d.default.bool,columnName:d.default.string.isRequired,columnHeaderIcons:d.default.array,hasMenu:d.default.bool,isResizable:d.default.bool,isSortable:d.default.bool,sortDirection:d.default.oneOf(["ascending","descending"])},_.defaultProps={isResizable:!0,isSortable:!0};var C=t.SelectAllColumnHeader=function(e){return l.default.createElement(l.default.Fragment,null,l.default.createElement("span",{id:"column-group-header",className:"slds-assistive-text"},"Choose a row"),l.default.createElement("div",{className:"slds-th__action slds-th__action_form"},l.default.createElement(c.Checkbox,{tabIndex:e.actionableMode?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header"})))};C.displayName="SelectAllColumnHeader",C.propTypes={actionableMode:d.default.bool,checked:d.default.bool};var g=t.AdvancedDataTableHead=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",a=e.mainColumnWidth||null;return l.default.createElement(b,{isHidden:e.isHidden},l.default.createElement(E,null,e.hasErrorColumn?l.default.createElement(p,{style:{width:"3.75rem"}},l.default.createElement(y,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&l.default.createElement(p,{isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?l.default.createElement(y,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):l.default.createElement(C,{actionableMode:e.actionableMode,checked:e.selectAll})),e.columns.map(function(t,s){return l.default.createElement(p,{key:s,"aria-label":t,hasFocus:0===s?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null,style:{width:0===s&&e.singleColumnWidth?e.singleColumnWidth:a}},l.default.createElement(_,{actionableMode:e.actionableMode,columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null}))}),e.hasRowLevelActions&&l.default.createElement(p,{style:{width:"3.25rem"}},l.default.createElement(y,{columnName:"Actions",isAssistiveText:!0}))))};g.displayName="AdvancedDataTableHead",g.propTypes={actionableMode:d.default.bool,columnHeaderIcons:d.default.array,columns:d.default.array.isRequired,hasErrorColumn:d.default.bool,hasFocus:d.default.bool,hasMenus:d.default.bool,hasNoRowSelection:d.default.bool,hasRowLevelActions:d.default.bool,hasSingleRowSelect:d.default.bool,isHidden:d.default.bool,isResizable:d.default.bool,isSortable:d.default.bool,mainColumnWidth:d.default.string,selectAll:d.default.bool,singleColumnWidth:d.default.string,sortDirection:d.default.oneOf(["ascending","descending","none"])},g.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var N=t.TBody=function(e){return l.default.createElement("tbody",null,e.children)};N.displayName="TBody",N.propTypes={children:d.default.node};var T=t.TBodyTr=function(e){return l.default.createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:(0,s.default)("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};T.displayName="TBodyTr",T.propTypes={children:d.default.node,isExpanded:d.default.bool,isSelected:d.default.bool,isTopAligned:d.default.bool,level:d.default.string,positionWithinLevel:d.default.string,numberOfItemsAtLevel:d.default.string,tabIndex:d.default.oneOf(["0","-1"])};var w=t.Td=function(e){var t=(0,s.default)({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError});return l.default.createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,className:t||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};w.displayName="Td",w.propTypes={children:d.default.node,"data-label":d.default.string,hasError:d.default.bool,hasFocus:d.default.bool,isEditable:d.default.bool,isEdited:d.default.bool,isEditing:d.default.bool,isErrorCell:d.default.bool,isLocked:d.default.bool,isRightAligned:d.default.bool,isShrunken:d.default.bool,style:d.default.object,tabIndex:d.default.oneOf(["0","-1"]),type:d.default.oneOf(["advanced","base","treegrid"]).isRequired};var x=t.RowTh=function(e){var t=(0,s.default)({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type});return l.default.createElement("th",{className:t||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};x.displayName="RowTh",x.propTypes={children:d.default.node,"data-label":d.default.string,hasFocus:d.default.bool,isEditable:d.default.bool,tabIndex:d.default.oneOf(["0","-1"]),type:d.default.oneOf(["base","advanced","treegrid"])};var R=t.SelectRowCell=function(e){return l.default.createElement(l.default.Fragment,null,e.hasSingleRowSelect?l.default.createElement(u.Radio,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0"+e.index,label:"Select item "+e.index,labelId:"radio-button-label-0"+e.index,tabIndex:e.inputTabIndex}):l.default.createElement(c.Checkbox,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0"+e.index,label:"Select item "+e.index,labelId:"check-button-label-0"+e.index,tabIndex:e.inputTabIndex}))};R.displayName="SelectRowCell",R.propTypes={checked:d.default.bool,hasSingleRowSelect:d.default.bool,index:d.default.number.isRequired,inputTabIndex:d.default.oneOf(["0","-1"])};var A=t.RowActionsCell=function(e){return l.default.createElement(r.default,{assistiveText:"More actions for "+e.rowName,"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:e.actionableMode?"0":"-1",title:"More actions for "+e.rowName})};A.displayName="RowActionsCell",A.propTypes={actionableMode:d.default.bool,rowName:d.default.string.isRequired};var H=t.ErrorCell=function(e){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.default,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item "+e.index+" has errors",className:(0,s.default)("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:e.actionableMode?"0":"-1",title:"Item "+e.index+" has errors"}),l.default.createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};H.displayName="ErrorCell",H.propTypes={actionableMode:d.default.bool,hasError:d.default.bool,index:d.default.number.isRequired};var k=t.ReadOnlyCell=function(e){return l.default.createElement("div",{className:"slds-truncate",title:e.cellText},e.cellLink?l.default.createElement("a",{href:e.cellLink,tabIndex:e.actionableMode?"0":"-1"},e.cellText):e.cellText)};k.displayName="ReadOnlyCell",k.propTypes={actionableMode:(0,n.IsDependentOn)("cellLink",d.default.bool),cellLink:d.default.string,cellText:d.default.string.isRequired};var I=t.EditableCell=function(e){return l.default.createElement(l.default.Fragment,null,l.default.createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?l.default.createElement("a",{className:"slds-truncate",href:e.cellLink,id:"link-0"+e.index,tabIndex:e.actionableMode?"0":"-1",title:e.cellText},e.cellText):l.default.createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),l.default.createElement(r.default,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:(0,s.default)("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:e.actionableMode?"0":"-1",title:e.buttonText})),e.showEdit&&l.default.createElement(B,{isRequired:e.isRequired,hasError:e.hasError}))};I.displayName="EditableCell",I.propTypes={actionableMode:d.default.bool,buttonText:d.default.string.isRequired,cellLink:d.default.string,cellText:d.default.string.isRequired,hasError:(0,n.IsDependentOn)("showEdit",d.default.bool),index:d.default.number,isLocked:d.default.bool,isRequired:(0,n.IsDependentOn)("showEdit",d.default.bool),showEdit:d.default.bool};var B=t.EditPopover=function(e){return l.default.createElement(o.Popover,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},l.default.createElement("div",{className:(0,s.default)("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},l.default.createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?l.default.createElement("abbr",{className:"slds-required",title:"required"},"*"):null,l.default.createElement("span",{className:"slds-assistive-text"},"Company")),l.default.createElement("div",{className:"slds-form-element__control slds-grow"},l.default.createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?l.default.createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};B.displayName="EditPopover",B.propTypes={hasError:d.default.bool,isRequired:d.default.bool}},279:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=t.WrappedCards=t.NestedCards=t.CardWithTiles=t.CardWithDataTable=void 0;var l=o(a(0)),s=a(75),d=a(15),n=a(25),i=o(n),r=a(278);function o(e){return e&&e.__esModule?e:{default:e}}var c=l.default.createElement("button",{className:"slds-button slds-button_neutral"},"New"),u=l.default.createElement(r.Table,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced"},l.default.createElement(r.THead,null,l.default.createElement(r.THeadTr,null,l.default.createElement(r.ColumnTh,null,l.default.createElement(r.ColumnHeader,{columnName:"Name"})),l.default.createElement(r.ColumnTh,null,l.default.createElement(r.ColumnHeader,{columnName:"Company"})),l.default.createElement(r.ColumnTh,null,l.default.createElement(r.ColumnHeader,{columnName:"Title"})),l.default.createElement(r.ColumnTh,null,l.default.createElement(r.ColumnHeader,{columnName:"Email"})))),l.default.createElement(r.TBody,null,l.default.createElement(r.TBodyTr,null,l.default.createElement(r.RowTh,null,l.default.createElement(r.ReadOnlyCell,{cellLink:"javascript:void(0);",cellText:"Amy Choi"})),l.default.createElement(r.Td,{type:"advanced"},l.default.createElement(r.ReadOnlyCell,{cellText:"Company One"})),l.default.createElement(r.Td,{type:"advanced"},l.default.createElement(r.ReadOnlyCell,{cellText:"Director of Operations"})),l.default.createElement(r.Td,{type:"advanced"},l.default.createElement(r.ReadOnlyCell,{cellText:"adam@company.com"}))))),m=l.default.createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},l.default.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.default.createElement(s.TileMedia,{actions:!0,className:"slds-card__tile",media:l.default.createElement(d.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.default.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.default.createElement(s.TileMedia,{actions:!0,className:"slds-card__tile",media:l.default.createElement(d.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.default.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.default.createElement(s.TileMedia,{actions:!0,className:"slds-card__tile",media:l.default.createElement(d.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),f=t.CardWithDataTable=function(e){return l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Contacts (1)",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,null,u),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts")))},h=t.CardWithTiles=function(e){return l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Contacts (3)",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},m),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts")))},b=t.NestedCards=function(e){return l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.default.createElement(i.default,{hasCardBoundary:!0},l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.default.createElement(i.default,{hasCardBoundary:!0},l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts")))))};t.WrappedCards=function(e){return l.default.createElement("div",{className:"slds-card-wrapper"},l.default.createElement("header",null,l.default.createElement("h2",{className:"slds-text-heading_medium"},"Outer card wrapper header")),l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.default.createElement(i.default,{hasCardBoundary:!0},l.default.createElement(n.CardHeader,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:c}),l.default.createElement(n.CardBody,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Contacts"))))};t.default=l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Card Header",href:"javascript:void(0);",symbol:"account",action:l.default.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.default.createElement(n.CardBody,{hasPadding:!0},"Anything can go into the card body"),l.default.createElement(n.CardFooter,null,"View All ",l.default.createElement("span",{className:"slds-assistive-text"},"Accounts")));t.states=[{id:"empty",label:"Empty",element:l.default.createElement(i.default,null,l.default.createElement(n.CardHeader,{title:"Card Header",href:"javascript:void(0);",symbol:"contact",action:l.default.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.default.createElement(n.CardBody,null),l.default.createElement(n.CardFooter,null))}],t.examples=[{id:"related-list-table",label:"With data-table",element:l.default.createElement(f,null)},{id:"related-list-tiles",label:"With tiles",element:l.default.createElement(h,null)},{id:"nested-cards",label:"Nested cards",element:l.default.createElement(b,null)}]},312:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var l=a(0),s=(p(l),a(7)),d=p(s),n=p(a(9)),i=(p(a(11)),p(a(10))),r=p(a(12)),o=a(25),c=p(o),u=a(279),m=a(277),f=a(275),h=a(24),b=(a(75),a(15),a(47)),E=a(74);function p(e){return e&&e.__esModule?e:{default:e}}var y=s.factories.a,v=s.factories.code,_=s.factories.em,C=s.factories.h2,g=s.factories.h3,N=s.factories.h4,T=s.factories.h5,w=s.factories.p,x=s.factories.strong,R=t.getElement=function(){return(0,l.createElement)(d.default,{},(0,l.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),C({id:"Structuring-a-Card"},"Structuring a Card"),w({},"To initialize a card, apply the ",v({},"slds-card")," class to an ",v({},"<article>")," element."),w({},(0,l.createElement)(r.default,{type:"a11y",header:"Accessibility Note"},"Cards should use an underlying ",(0,l.createElement)("code",{className:"doc"},"<article>")," element to maintain usability for some screen reader users.")),w({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),(0,l.createElement)(i.default,{title:"Cards Base"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:(0,l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"Anything can go in the Card Body"),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts"))))),g({id:"Header"},"Header"),w({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),(0,l.createElement)(i.default,{title:"Cards Header"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account"})))),N({id:"Actions-row"},"Actions row"),w({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),T({id:"Single-action"},"Single action"),(0,l.createElement)(i.default,{title:"Cards Single Action"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:(0,l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),T({id:"Multiple-actions"},"Multiple actions"),(0,l.createElement)(i.default,{title:"Cards Multiple Actions"},(0,l.createElement)(n.default,{style:{height:"10rem"},hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:(0,l.createElement)(f.ActionOverflow,{position:"right"})})))),g({id:"Body"},"Body"),w({},"The card body accommodates any layout or design, as long as its a grouping of related information."),(0,l.createElement)(r.default,{type:"note",header:"Styling Note"},"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",(0,l.createElement)("code",{className:"doc"},"slds-card__body_inner")," class on the ",(0,l.createElement)("code",{className:"doc"},"slds-card__body")," element."),N({id:"Default-without-padding"},"Default without padding"),w({},"For an example of when to use the default behavior, see the ",y({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),(0,l.createElement)(i.default,{title:"Cards Body No Padding"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,null,"Card Body")))),N({id:"With-padding"},"With padding"),w({},"For an example of when to use the ",v({},"slds-card__body_inner")," class, see the ",y({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),(0,l.createElement)(i.default,{title:"Cards Body With Padding"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"Card Body with Padding")))),g({id:"Footer"},"Footer"),w({},"The card footer is optional and should ",_({},x({},"only")),' have a "View All" link that takes a user to the object list view.'),(0,l.createElement)(r.default,{type:"a11y",header:"Accessibility Note"},"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing."),w({},(0,l.createElement)(r.default,{type:"note",header:"Implementation Note"},"The examples in this documentation use the ",v({},"slds-card__footer-action")," class on the footer link ",v({},"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),N({id:"With-no-footer"},"With no footer"),(0,l.createElement)(i.default,{title:"Cards No Footer"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",showIcon:!0,symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"Card Body"),(0,l.createElement)(o.CardFooter,null)))),N({id:"With-a-footer"},"With a footer"),(0,l.createElement)(i.default,{title:"Cards with Footer"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Accounts",href:"javascript:void(0);",showIcon:!0,symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"Card Body"),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts"))))),C({id:"Examples"},"Examples"),g({id:"Empty"},"Empty"),w({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),N({id:"Collapsed"},"Collapsed"),(0,l.createElement)(i.default,{title:"Cards Collapsed"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Card Header",href:"javascript:void(0);",symbol:"account",action:(0,l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")}),(0,l.createElement)(o.CardBody,null),(0,l.createElement)(o.CardFooter,null)))),N({id:"With-Illustration"},"With Illustration"),w({},"Alternatively, a card can be represented with no data by using an ",y({href:"/components/illustration"},"illustration")," in the card body."),(0,l.createElement)(i.default,{title:"Cards With illustration"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Tasks",href:"javascript:void(0);",symbol:"task"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},(0,l.createElement)(E.Illustration,null,(0,l.createElement)(b.NoTask,null),(0,l.createElement)(E.IllustrationText,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."})))))),g({id:"Loading"},"Loading"),w({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),(0,l.createElement)(i.default,{title:"Cards Loading"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Tasks",href:"javascript:void(0);",symbol:"task"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},(0,l.createElement)(h.Spinner,{className:"slds-spinner_small"}))))),g({id:"With-a-Data-Table"},"With a Data Table"),w({},"Placing a data table inside of an ",v({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),(0,l.createElement)(i.default,{title:"Cards With Data Table"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(u.CardWithDataTable,null))),g({id:"With-Tiles"},"With Tiles"),w({},"Placing contact tiles inside of an ",v({},"slds-card__body")," is an example of using ",v({},"slds-card__body_inner")," to apply additional padding to the card body content."),(0,l.createElement)(i.default,{title:"Cards with Title"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(u.CardWithTiles,null))),C({id:"Layout"},"Layout"),g({id:"Nested-Cards"},"Nested Cards"),w({},"When a card is located inside of another card body, we remove the dropshadow and border of the nested cards. You can opt into adding the border back by applying ",v({},"slds-card_boundary")," to the ",v({},"slds-card")," element."),N({id:"No-styling"},"No styling"),(0,l.createElement)(i.default,{title:"Cards Nested with No Styling"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Card Header",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"This is a nested card with no styling (default)"),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts"))))),N({id:"With-card-styling"},"With card styling"),w({},"Adding ",v({},"slds-card_boundary")," to the ",v({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(i.default,{title:"Cards Nested With Styling"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(c.default,null,(0,l.createElement)(o.CardHeader,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},(0,l.createElement)(c.default,{hasCardBoundary:!0},(0,l.createElement)(o.CardHeader,{title:"Card Header",href:"javascript:void(0);",symbol:"account"}),(0,l.createElement)(o.CardBody,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,l.createElement)(o.CardFooter,null,"View All ",(0,l.createElement)("span",{className:"slds-assistive-text"},"Accounts"))))),g({id:"Wrapped-Cards"},"Wrapped Cards"),w({},"To combine several cards into a single card look, wrap the cards using ",v({},"slds-card-wrapper"),". Similar to the nested cards, adding ",v({},"slds-card_boundary")," to the ",v({},"slds-card")," element will give you back the card styling."),(0,l.createElement)(i.default,{title:"Cards Wrapped"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(u.WrappedCards,null))),C({id:"Einstein-Theming"},"Einstein Theming"),w({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),(0,l.createElement)(i.default,{title:"Cards Einstein Theme"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(m.EinsteinCard,null))),g({id:"With-an-Icon"},"With an Icon"),(0,l.createElement)(i.default,{title:"Cards Einstein Theme with Icon"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(m.EinsteinCard,{hasIcon:!0}))),g({id:"With-Actions"},"With Actions"),(0,l.createElement)(i.default,{title:"Cards Einstein Theme with Icon and Actions"},(0,l.createElement)(n.default,{hasDensityRadioButtons:!0},(0,l.createElement)(m.EinsteinCard,{hasIcon:!0,hasActions:!0}))))};t.getContents=function(){return(0,s.createTableOfContents)(R())}},6:function(e,t){e.exports=JSBeautify},75:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.TileMedia=t.Tile=void 0;var l=r(a(0)),s=r(a(4)),d=r(a(3)),n=a(17),i=r(a(1));function r(e){return e&&e.__esModule?e:{default:e}}var o=t.Tile=function(e){return l.default.createElement("article",{className:(0,i.default)("slds-tile",e.className,e.actions?"slds-hint-parent":null)},e.actions?l.default.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},l.default.createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},l.default.createElement("a",{href:"javascript:void(0);"},e.title||"Title")),l.default.createElement("div",{className:"slds-shrink-none"},l.default.createElement(d.default,{className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint",symbol:"down","aria-haspopup":"true",assistiveText:"More options",title:"More options"}))):l.default.createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},l.default.createElement("a",{href:"javascript:void(0);"},e.title||"Title")),l.default.createElement("div",{className:"slds-tile__detail"},e.children?e.children:l.default.createElement(u,null)))},c=t.TileMedia=function(e){return l.default.createElement("article",{className:(0,i.default)("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?l.default.createElement("div",{className:"slds-media__figure"},e.media):null,l.default.createElement("div",{className:"slds-media__body"},e.actions?l.default.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},l.default.createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},l.default.createElement("a",{href:"javascript:void(0);"},e.title||"Title")),l.default.createElement("div",{className:"slds-shrink-none"},l.default.createElement(d.default,{className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint",symbol:"down","aria-haspopup":"true",assistiveText:"More options",title:"More options"}))):l.default.createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},l.default.createElement("a",{href:"javascript:void(0);"},e.title||"Title")),l.default.createElement("div",{className:"slds-tile__detail"},e.children?e.children:l.default.createElement(u,null))))},u=function(e){return l.default.createElement("dl",{className:"slds-list_horizontal slds-wrap"},l.default.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),l.default.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),l.default.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),l.default.createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},m=l.default.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},l.default.createElement(s.default,{className:"slds-icon slds-icon-standard-groups",sprite:"standard",symbol:"groups"})),f=l.default.createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},l.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lexee L. Jackson avatar"}));t.default=l.default.createElement("div",{className:"demo-only",style:{width:"30rem"}},l.default.createElement(o,{title:"Salesforce UX"}));t.examples=[{id:"with-action",label:"Default with actions",element:l.default.createElement("div",{className:"demo-only",style:{width:"30rem"}},l.default.createElement(o,{title:"Salesforce UX",actions:!0}))},{id:"with-icon",label:"With icon",element:l.default.createElement("div",{className:"demo-only",style:{width:"30rem"}},l.default.createElement(c,{title:"Salesforce UX",media:m}))},{id:"with-avatar",label:"With avatar",element:l.default.createElement("div",{className:"demo-only",style:{width:"30rem"}},l.default.createElement(c,{title:"Lexee L. Jackson",media:f}))},{id:"task",label:"Task",element:l.default.createElement("div",{className:"demo-only",style:{width:"320px"}},l.default.createElement(c,{title:"Contact Trammel Crow Company",media:l.default.createElement(n.Checkbox,{label:"Did you complete the task: Contact Trammel Crow Company?",hideLabel:!0})},l.default.createElement("p",{className:"slds-truncate",title:"Assignee"},"Assignee")))},{id:"article",label:"Article",element:l.default.createElement("div",{className:"demo-only",style:{width:"320px"}},l.default.createElement(o,{title:"Company One beats Company Two to the 200-mile affordable electric car"},l.default.createElement("p",null,"by Steve Author"),l.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right"},l.default.createElement("li",{className:"slds-item"},"Breaking News"),l.default.createElement("li",{className:"slds-item"},"1 day ago"))))},{id:"article-liker-bar",label:"Article With like bar",element:l.default.createElement("div",{className:"demo-only",style:{width:"320px"}},l.default.createElement(o,{title:"Company One beats Company Two to the 200-mile affordable electric car"},l.default.createElement("p",null,"...an introduction for beginners about climbing ropes and how they can use..."),l.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-m-top_xx-small"},l.default.createElement("li",{className:"slds-item"},"000001296"),l.default.createElement("li",{className:"slds-item"},"Published"),l.default.createElement("li",{className:"slds-item"},"How to Guide")),l.default.createElement("p",null,"Last Modified: 1/14/16"),l.default.createElement("ul",{className:"slds-list_horizontal slds-m-top_xx-small"},l.default.createElement("li",{className:"slds-m-right_small"},l.default.createElement("button",{className:"slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small","aria-pressed":"false"},l.default.createElement(s.default,{className:"slds-button__icon",sprite:"utility",symbol:"like"}),l.default.createElement("span",{className:"slds-assistive-text"},"Upvote")),l.default.createElement("span",{className:"slds-align-middle"},"1320")),l.default.createElement("li",null,l.default.createElement("button",{className:"slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small","aria-pressed":"false"},l.default.createElement(s.default,{className:"slds-button__icon",sprite:"utility",symbol:"dislike"}),l.default.createElement("span",{className:"slds-assistive-text"},"Downvote")),l.default.createElement("span",{className:"slds-align-middle"},"362")))))},{id:"board",label:"Board",element:l.default.createElement("div",{className:"demo-only",style:{width:"320px"}},l.default.createElement("ul",{className:"slds-has-dividers_around-space"},l.default.createElement("li",{className:"slds-item"},l.default.createElement(o,{title:"Anypoint Connectors",className:"slds-tile_board"},l.default.createElement("p",{className:"slds-text-heading_medium"},"$500,000"),l.default.createElement("p",{className:"slds-truncate",title:"Company One"},l.default.createElement("a",{href:"javascript:void(0);"},"Company One")),l.default.createElement("p",{className:"slds-truncate",title:"Closing 9/30/2015"},"Closing 9/30/2015"))),l.default.createElement("li",{className:"slds-item"},l.default.createElement(o,{title:"Cloudhub",className:"slds-tile_board"},l.default.createElement("p",{className:"slds-text-heading_medium"},"$185,000"),l.default.createElement("p",{className:"slds-truncate",title:"Company Two"},l.default.createElement("a",{href:"javascript:void(0);"},"Company Two")),l.default.createElement("p",{className:"slds-truncate slds-has-alert",title:"Closing 12/15/2015"},"Closing 12/15/2015"),l.default.createElement("span",{className:"slds-icon_container slds-tile_board__icon",title:"description of icon when needed"},l.default.createElement(s.default,{className:"slds-icon slds-icon-text-warning slds-icon_x-small",sprite:"utility",symbol:"warning"}),l.default.createElement("span",{className:"slds-assistive-text"},"Warning Icon")))),l.default.createElement("l