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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,i,a={56:function(e,t,i){i.r(t),i.d(t,{getContents:function(){return g},getElement:function(){return b}});var a=i(1594),l=i.n(a),n=i(5671),o=i(6547),r=(i(2436),i(9582),i(5619),i(806)),s=i(679),d=[{id:"default",label:"Default",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],c=[{id:"attachment-file-no-image",label:"File with no image",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"image",title:"Image Title"}))},{id:"attachment-file-no-title",label:"File with no title",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,noCaption:!0,symbol:"pdf",hasImage:!0}))},{id:"attachment-file-truncate-title",label:"File with truncating title",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{title:"super-super-long-file-name-that-will-truncate.pdf",symbol:"pdf",isCard:!0,hasCrop:!0,hasTitleCard:!0,hasActions:!0}))},{id:"attachment-file-with-actions",label:"File with actions",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,hasImage:!0}))},{id:"attachment-file-with-no-title-actions",label:"File with no title + actions",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,iconColor:"white",hasScrim:!0,noCaption:!0,hasImage:!0}))},{id:"attachment-file-external-icon",label:"File with external icon",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",isExternalSource:!0}))},{id:"attachment-file-loading-with-title",label:"File in loading state with title",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,sprite:"utility",symbol:"image",isLoading:!0}))},{id:"attachment-file-loading-no-title",label:"File in loading state without title",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,hasCrop:!0,isLoading:!0,noCaption:!0}))},{id:"multi-attachments",label:"Less than 3 file attachments",element:l().createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})))},{id:"multi-attachments-overflow",label:"Greater than 3 file attachments",element:l().createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3  slds-medium-show"},l().createElement(s.Z,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})),l().createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l().createElement(s.Z,{isCard:!0,hasCrop:!0,title:"+22",hasImage:!0,hasOverlay:!0})))},{id:"link-attachment",label:"Link attachment",element:l().createElement(s.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."})},{id:"crop-4-by-3",label:"Crop 4 x 3",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,has4x3Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-16-by-9",label:"Crop 16 x 9",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-1-by-1",label:"Crop 1 by 1",element:l().createElement("div",{style:{width:"20rem"}},l().createElement(s.Z,{isCard:!0,has1x1Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],m=n.XB.code,h=n.XB.h2,f=n.XB.h3,u=n.XB.h4,p=n.XB.p,y=n.XB.strong,b=function(){return(0,a.createElement)(n.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"Files are a representation of content uploaded as an attachment."),(0,a.createElement)(o.A,{exampleOnly:!0},(0,r.NO)(c,"attachment-file-with-actions")),h({id:"About-Files"},"About Files"),p({},"A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of ",m({},".slds-image__crop")," and passing in a ratio class such as ",m({},".slds-image__crop_16-by-9"),"."),f({id:"Accessibility"},"Accessibility"),p({},"Every ",m({},"<img>")," you add to your site needs to have an ",m({},"alt")," attribute. If the image is informational, set the ",m({},"alt")," equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set ",m({},'alt=""'),", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like ",y({},"photo"),", ",y({},"image"),", or ",y({},"icon")," as alt values, as they don’t communicate valuable content to the user."),h({id:"Base"},"Base"),(0,a.createElement)(o.A,null,(0,r.NO)(d)),h({id:"States"},"States"),f({id:"File-with-no-image"},"File with no image"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-no-image")),f({id:"File-with-no-title"},"File with no title"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-no-title")),f({id:"File-with-actions"},"File with actions"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-with-actions")),f({id:"File-with-no-title-+-actions"},"File with no title + actions"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-with-no-title-actions")),f({id:"File-with-external-icon"},"File with external icon"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-external-icon")),f({id:"File-in-loading-state-with-title"},"File in loading state with title"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-loading-with-title")),f({id:"File-in-loading-state-without-title"},"File in loading state without title"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"attachment-file-loading-no-title")),f({id:"3-file-attachments"},"< 3 file attachments"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"multi-attachments")),f({id:"3-file-attachments-2"},"> 3 file attachments"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"multi-attachments-overflow")),h({id:"Modifiers"},"Modifiers"),f({id:"Ratio"},"Ratio"),u({id:".slds-file__crop_4-by-3"},".slds-file__crop_4-by-3"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"crop-4-by-3")),u({id:".slds-file__crop_16-by-9"},".slds-file__crop_16-by-9"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"crop-16-by-9")),u({id:".slds-file__crop_1-by-1"},".slds-file__crop_1-by-1"),(0,a.createElement)(o.A,null,(0,r.NO)(c,"crop-1-by-1")))},g=function(){return(0,n.Qr)(b())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},l={};function n(e){var t=l[e];if(void 0!==t)return t.exports;var i=l[e]={id:e,exports:{}};return a[e](i,i.exports,n),i.exports}n.m=a,n.amdO={},e=[],n.O=function(t,i,a,l){if(!i){var o=1/0;for(c=0;c<e.length;c++){i=e[c][0],a=e[c][1],l=e[c][2];for(var r=!0,s=0;s<i.length;s++)(!1&l||o>=l)&&Object.keys(n.O).every(function(e){return n.O[e](i[s])})?i.splice(s--,1):(r=!1,l<o&&(o=l));if(r){e.splice(c--,1);var d=a();void 0!==d&&(t=d)}}return t}l=l||0;for(var c=e.length;c>0&&e[c-1][2]>l;c--)e[c]=e[c-1];e[c]=[i,a,l]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.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 l=Object.create(null);n.r(l);var o={};t=t||[null,i({}),i([]),i(i)];for(var r=2&a&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},n.d(l,o),l},n.d=function(e,t){for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},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=4004,function(){var e={4004:0};n.O.j=function(t){return 0===e[t]};var t=function(t,i){var a,l,o=i[0],r=i[1],s=i[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(a in r)n.o(r,a)&&(n.m[a]=r[a]);if(s)var c=s(n)}for(t&&t(i);d<o.length;d++)l=o[d],n.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return n.O(c)},i=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];i.forEach(t.bind(null,0)),i.push=t.bind(null,i.push.bind(i))}(),n.nc=void 0;var o=n.O(void 0,[3540],function(){return n(56)});o=n.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/files/docs.mdx.js"]=o}();