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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},8550:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return O},getElement:function(){return x}});var a=l(1594),n=l.n(a),s=l(5671),i=l(6547),r=l(806),c=l(5619),o=l(8347),d=l(6955),m=l(3589),u=l(942),f=l.n(u),p=function(e){return n().createElement("article",{className:f()("slds-tile",e.className,e.actions?"slds-hint-parent":null)},e.actions?n().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),n().createElement("div",{className:"slds-shrink-none"},n().createElement(d.A,{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"}))):n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),n().createElement("div",{className:"slds-tile__detail"},e.children?e.children:n().createElement(E,null)))},h=function(e){return n().createElement("article",{className:f()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?n().createElement("div",{className:"slds-media__figure"},e.media):null,n().createElement("div",{className:"slds-media__body"},e.actions?n().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),n().createElement("div",{className:"slds-shrink-none"},n().createElement(d.A,{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"}))):n().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),n().createElement("div",{className:"slds-tile__detail"},e.children?e.children:n().createElement(E,null))))},E=function(e){return n().createElement("dl",{className:"slds-list_horizontal slds-wrap"},n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),n().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),n().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))},b=n().createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n().createElement(o.A,{className:"slds-icon slds-icon-standard-groups",sprite:"standard",symbol:"groups"})),_=n().createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},n().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lexee L. Jackson avatar"})),N=[{id:"default",label:"Default",element:n().createElement("div",{className:"demo-only",style:{width:"30rem"}},n().createElement(p,{title:"Salesforce UX"}))}],v=[{id:"with-action",label:"Default with actions",element:n().createElement("div",{className:"demo-only",style:{width:"30rem"}},n().createElement(p,{title:"Salesforce UX",actions:!0}))},{id:"with-icon",label:"With icon",element:n().createElement("div",{className:"demo-only",style:{width:"30rem"}},n().createElement(h,{title:"Salesforce UX",media:b}))},{id:"with-avatar",label:"With avatar",element:n().createElement("div",{className:"demo-only",style:{width:"30rem"}},n().createElement(h,{title:"Lexee L. Jackson",media:_}))},{id:"task",label:"Task",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(h,{title:"Contact Trammel Crow Company",media:n().createElement(m.Sc,{label:"Did you complete the task: Contact Trammel Crow Company?",hideLabel:!0})},n().createElement("p",{className:"slds-truncate",title:"Assignee"},"Assignee")))},{id:"article",label:"Article",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(p,{title:"Company One beats Company Two to the 200-mile affordable electric car"},n().createElement("p",null,"by Steve Author"),n().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right"},n().createElement("li",{className:"slds-item"},"Breaking News"),n().createElement("li",{className:"slds-item"},"1 day ago"))))},{id:"article-liker-bar",label:"Article With like bar",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(p,{title:"Company One beats Company Two to the 200-mile affordable electric car"},n().createElement("p",null,"...an introduction for beginners about climbing ropes and how they can use..."),n().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-m-top_xx-small"},n().createElement("li",{className:"slds-item"},"000001296"),n().createElement("li",{className:"slds-item"},"Published"),n().createElement("li",{className:"slds-item"},"How to Guide")),n().createElement("p",null,"Last Modified: 1/14/16"),n().createElement("ul",{className:"slds-list_horizontal slds-m-top_xx-small"},n().createElement("li",{className:"slds-m-right_small"},n().createElement("button",{className:"slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small","aria-pressed":"false"},n().createElement(o.A,{className:"slds-button__icon",sprite:"utility",symbol:"like"}),n().createElement("span",{className:"slds-assistive-text"},"Upvote")),n().createElement("span",{className:"slds-align-middle"},"1320")),n().createElement("li",null,n().createElement("button",{className:"slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small","aria-pressed":"false"},n().createElement(o.A,{className:"slds-button__icon",sprite:"utility",symbol:"dislike"}),n().createElement("span",{className:"slds-assistive-text"},"Downvote")),n().createElement("span",{className:"slds-align-middle"},"362")))))},{id:"board",label:"Board",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement("ul",{className:"slds-has-dividers_around-space"},n().createElement("li",{className:"slds-item"},n().createElement(p,{title:"Anypoint Connectors",className:"slds-tile_board"},n().createElement("p",{className:"slds-text-heading_medium"},"$500,000"),n().createElement("p",{className:"slds-truncate",title:"Company One"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),n().createElement("p",{className:"slds-truncate",title:"Closing 9/30/2015"},"Closing 9/30/2015"))),n().createElement("li",{className:"slds-item"},n().createElement(p,{title:"Cloudhub",className:"slds-tile_board"},n().createElement("p",{className:"slds-text-heading_medium"},"$185,000"),n().createElement("p",{className:"slds-truncate",title:"Company Two"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Company Two")),n().createElement("p",{className:"slds-truncate slds-has-alert",title:"Closing 12/15/2015"},"Closing 12/15/2015"),n().createElement("span",{className:"slds-icon_container slds-tile_board__icon",title:"description of icon when needed"},n().createElement(o.A,{className:"slds-icon slds-icon-text-warning slds-icon_x-small",sprite:"utility",symbol:"warning"}),n().createElement("span",{className:"slds-assistive-text"},"Warning Icon")))),n().createElement("li",{className:"slds-item"},n().createElement(p,{title:"600 Widgets",className:"slds-tile_board"},n().createElement("p",{className:"slds-text-heading_medium"},"$35,000"),n().createElement("p",{className:"slds-truncate",title:"Company Three"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Company Three")),n().createElement("p",{className:"slds-truncate",title:"Closing 10/12/2015"},"Closing 10/12/2015")))))}],y=s.XB.h2,g=s.XB.h3,w=s.XB.p,x=function(){return(0,a.createElement)(s.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"A tile is a grouping of related information associated with a record."),(0,a.createElement)(i.A,{exampleOnly:!0},(0,r.NO)(v,"with-icon")),y({id:"About-Tile"},"About Tile"),w({},"Tiles are set up to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list."),(0,a.createElement)(c.A,{type:"warning",header:"Warning"},(0,a.createElement)("p",null,"Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.")),y({id:"Base"},"Base"),(0,a.createElement)(i.A,null,(0,r.NO)(N)),y({id:"Examples"},"Examples"),g({id:"Default-with-actions"},"Default with actions"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"with-action")),g({id:"With-icon"},"With icon"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"with-icon")),g({id:"With-avatar"},"With avatar"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"with-avatar")),g({id:"Task"},"Task"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"task")),g({id:"Article"},"Article"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"article")),g({id:"Article-with-like-bar"},"Article with like bar"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"article-liker-bar")),g({id:"Board"},"Board"),(0,a.createElement)(i.A,null,(0,r.NO)(v,"board")))},O=function(){return(0,s.Qr)(x())}}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,s),l.exports}s.m=a,s.amdO={},e=[],s.O=function(t,l,a,n){if(!l){var i=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var r=!0,c=0;c<l.length;c++)(!1&n||i>=n)&&Object.keys(s.O).every(function(e){return s.O[e](l[c])})?l.splice(c--,1):(r=!1,n<i&&(i=n));if(r){e.splice(d--,1);var o=a();void 0!==o&&(t=o)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var i={};t=t||[null,l({}),l([]),l(l)];for(var r=2&a&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(n,i),n},s.d=function(e,t){for(var l in t)s.o(t,l)&&!s.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},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=2214,function(){var e={2214:0};s.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,i=l[0],r=l[1],c=l[2],o=0;if(i.some(function(t){return 0!==e[t]})){for(a in r)s.o(r,a)&&(s.m[a]=r[a]);if(c)var d=c(s)}for(t&&t(l);o<i.length;o++)n=i[o],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(8550)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tiles/docs.mdx.js"]=i}();