@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 20.3 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,l,s={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3359:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return T},getElement:function(){return P}});var s=l(1594),a=l.n(s),n=l(5671),r=l(6547),i=(l(2436),l(9582),l(5619),l(806)),c=l(6955),m=l(679),d=l(7852),o=l(942),u=l.n(o),f=a().createElement("a",{className:"slds-avatar slds-avatar_circle slds-avatar_medium",href:"#",onClick:function(e){return e.preventDefault()}},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})),E=function(e){return a().createElement(d.A,{figureLeft:f,className:"slds-comment slds-hint-parent"},a().createElement("div",{className:u()("slds-publisher slds-publisher_comment",e.className)},a().createElement("label",{htmlFor:"comment-text-input-01",className:"slds-assistive-text"},"Write a comment"),a().createElement("textarea",{id:"comment-text-input-01",className:"slds-publisher__input slds-input_bare slds-text-longform",placeholder:"Write a comment…"}),a().createElement("div",{className:"slds-publisher__actions slds-grid slds-grid_align-spread"},a().createElement("ul",{className:"slds-grid"},a().createElement("li",null,a().createElement(c.A,{className:"slds-button_icon-container",symbol:"adduser",assistiveText:"Add User",title:"Add User"})),a().createElement("li",null,a().createElement(c.A,{className:"slds-button_icon-container",symbol:"attach",assistiveText:"Attach a file",title:"Attach a file"}))),a().createElement("button",{className:"slds-button slds-button_brand"},"Comment"))))},p=function(e){return a().createElement("article",{className:u()("slds-comment slds-media slds-hint-parent",e.className)},a().createElement("div",{className:"slds-media__figure"},a().createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_medium",onClick:function(e){return e.preventDefault()}},a().createElement("img",{alt:"Jenna Davis",src:"/assets/images/avatar2.jpg",title:"Jenna Davis avatar"}))),a().createElement("div",{className:"slds-media__body"},e.children))},h=function(e){return a().createElement("header",{className:"slds-media slds-media_center"},a().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},a().createElement("p",{className:"slds-truncate",title:"Jenna Davis"},a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jenna Davis")),a().createElement(c.A,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})))},_=function(e){return a().createElement("div",{className:u()("slds-comment__content slds-text-longform",e.className)},e.children)},v=function(e){return a().createElement("footer",null,a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},a().createElement("button",{className:"slds-button_reset slds-text-color_weak",title:"Like this item","aria-pressed":!!e.liked},e.liked?"Liked":"Like")),e.liked?a().createElement("li",{className:"slds-item"},"1 Like"):null,a().createElement("li",{className:"slds-item"},"16hr Ago")))},N=l(8347),b=function(e){return a().createElement("ul",{className:"slds-post__footer-actions-list slds-list_horizontal"},a().createElement("li",{className:"slds-col slds-item slds-m-right_medium"},a().createElement("button",{title:"Like this item",className:u()("slds-button_reset slds-post__footer-action",e.liked?"slds-is-active":null),"aria-pressed":!!e.liked},a().createElement(N.A,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"like"}),e.liked?"Liked":"Like")),a().createElement("li",{className:"slds-col slds-item slds-m-right_medium"},a().createElement("button",{title:"Comment on this item",className:"slds-button_reset slds-post__footer-action"},a().createElement(N.A,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share_post"})," ","Comment")),a().createElement("li",{className:"slds-col slds-item slds-m-right_medium"},a().createElement("button",{title:"Share this item",className:"slds-button_reset slds-post__footer-action"},a().createElement(N.A,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share"})," ","Share")))},g=function(e){return a().createElement("ul",{className:"slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title"},e.comments?a().createElement("li",{className:"slds-item"},e.comments||"0"," comments"):null,a().createElement("li",{className:"slds-item"},"20 shares"),a().createElement("li",{className:"slds-item"},"259 views"))},y=function(e){return a().createElement("header",{className:"slds-post__header slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_large",onClick:function(e){return e.preventDefault()}},a().createElement("img",{alt:"Jason Rodgers",src:"/assets/images/avatar1.jpg",title:"Jason Rodgers avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},a().createElement("p",null,a().createElement("a",{href:"#",title:"Jason Rodgers",onClick:function(e){return e.preventDefault()}},"Jason Rogers")," ","—"," ",a().createElement("a",{href:"#",title:"Design Systems",onClick:function(e){return e.preventDefault()}},"Design Systems")),a().createElement(c.A,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})),a().createElement("p",{className:"slds-text-body_small"},a().createElement("a",{href:"#",title:"Click for single-item view of this post",className:"slds-text-link_reset",onClick:function(e){return e.preventDefault()}},"5 days Ago"))))},k=function(e){return a().createElement("div",{className:u()("slds-post__content slds-text-longform",e.className)},e.children)},w=function(e){return a().createElement("footer",{className:u()("slds-post__footer",e.className)},e.children)},x=function(e){return a().createElement("article",{className:u()("slds-post",e.className)},e.children)},D=function(e){return a().createElement("div",{className:"slds-feed__item-comments"},e.children)},O=function(e){return a().createElement("ul",null,i.Ay.times(e.comments||1,function(e){return a().createElement("li",{key:"comment-".concat(e)},a().createElement(p,null,a().createElement(h,null),a().createElement(_,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),a().createElement(v,null)))}))},A=[{id:"default",label:"Default",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))))))}],C=[{id:"post-with-liker-bar",label:"Like",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,{liked:!0}),a().createElement(g,{liked:!0}))),a().createElement(D,null,a().createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small"},a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"You")," ","liked this post")))))}],J=[{id:"post-attachment-link",label:"Link attachment",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement("div",{className:"slds-post__payload"},a().createElement(m.S,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))))))},{id:"post-attachment-files",label:"Files(s) attachment",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement("div",{className:"slds-post__payload"},a().createElement("ul",{className:"slds-grid slds-grid_pull-padded"},a().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},a().createElement(m.Z,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"image",hasImage:!0})),a().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},a().createElement(m.Z,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf"})),a().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},a().createElement(m.Z,{isCard:!0,has16x9Crop:!0,title:"22+",hasImage:!0,hasOverlay:!0})))),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))))))},{id:"post-with-comments",label:"With replies",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,{comments:"2"}))),a().createElement(D,null,a().createElement(O,{comments:"2"}),a().createElement(E,null)))))},{id:"post-with-overflow",label:"Replies - Overflow Bar",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,{comments:"8"}))),a().createElement(D,null,a().createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},a().createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),a().createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),a().createElement(O,null),a().createElement(E,null)))))},{id:"post-with-publisher-active",label:"Replies - Publisher active",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,{comments:"8"}))),a().createElement(D,null,a().createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},a().createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),a().createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),a().createElement(O,null),a().createElement(E,{className:"slds-is-active slds-has-focus"})))))},{id:"questions",label:"Question",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("h3",{className:"slds-text-heading_small"},"Barbecue Party Tips For A Truly Amazing Event?"),a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))))))}],S=[{id:"default",label:"Default",element:a().createElement("div",{className:"slds-feed"},a().createElement("ul",{className:"slds-feed__list"},a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))),a().createElement(D,null,a().createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},a().createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),a().createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),a().createElement("ul",null,a().createElement("li",null,a().createElement(p,null,a().createElement(h,null),a().createElement(_,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),a().createElement(v,null)))))),a().createElement("li",{className:"slds-feed__item"},a().createElement(x,null,a().createElement(y,null),a().createElement(k,null,a().createElement("p",null,"Hey there! Here's the latest demo presentation"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),a().createElement(w,null,a().createElement(b,null),a().createElement(g,null))))))}],L=n.XB.code,j=n.XB.h2,H=n.XB.h3,z=n.XB.p,P=function(){return(0,s.createElement)(n.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed."),(0,s.createElement)(r.A,{exampleOnly:!0},(0,i.NO)(C,"post-with-liker-bar")),j({id:"About-Feeds"},"About Feeds"),H({id:"Accessibility"},"Accessibility"),z({},"Most feeds have a media object containing the user's name and avatar image. If both the image and the name link to the same location, add ",L({},'tab-index="-1"')," to the ",L({},"<a>")," element so that assistive technology does not read out duplicate links."),j({id:"Base"},"Base"),(0,s.createElement)(r.A,null,(0,i.NO)(S)),j({id:"Post"},"Post"),(0,s.createElement)(r.A,null,(0,i.NO)(A)),j({id:"Examples"},"Examples"),H({id:"Link-attachment"},"Link attachment"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"post-attachment-link")),H({id:"Files(s)-attachment"},"Files(s) attachment"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"post-attachment-files")),H({id:"With-replies"},"With replies"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"post-with-comments")),H({id:"Replies-Overflow-Bar"},"Replies - Overflow Bar"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"post-with-overflow")),H({id:"Replies-Publisher-active"},"Replies - Publisher active"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"post-with-publisher-active")),H({id:"Question"},"Question"),(0,s.createElement)(r.A,null,(0,i.NO)(J,"questions")),j({id:"States"},"States"),H({id:"Like"},"Like"),(0,s.createElement)(r.A,null,(0,i.NO)(C,"post-with-liker-bar")))},T=function(){return(0,n.Qr)(P())}},5206:function(e){e.exports=ReactDOM}},a={};function n(e){var t=a[e];if(void 0!==t)return t.exports;var l=a[e]={id:e,exports:{}};return s[e](l,l.exports,n),l.exports}n.m=s,n.amdO={},e=[],n.O=function(t,l,s,a){if(!l){var r=1/0;for(d=0;d<e.length;d++){l=e[d][0],s=e[d][1],a=e[d][2];for(var i=!0,c=0;c<l.length;c++)(!1&a||r>=a)&&Object.keys(n.O).every(function(e){return n.O[e](l[c])})?l.splice(c--,1):(i=!1,a<r&&(r=a));if(i){e.splice(d--,1);var m=s();void 0!==m&&(t=m)}}return t}a=a||0;for(var d=e.length;d>0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[l,s,a]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var a=Object.create(null);n.r(a);var r={};t=t||[null,l({}),l([]),l(l)];for(var i=2&s&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=l(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},n.d(a,r),a},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=4018,function(){var e={4018:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,a,r=l[0],i=l[1],c=l[2],m=0;if(r.some(function(t){return 0!==e[t]})){for(s in i)n.o(i,s)&&(n.m[s]=i[s]);if(c)var d=c(n)}for(t&&t(l);m<r.length;m++)a=r[m],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return n.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))}(),n.nc=void 0;var r=n.O(void 0,[3540],function(){return n(3359)});r=n.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/feeds/docs.mdx.js"]=r}();