@salesforce-ux/design-system 2.27.1 → 2.27.2

package/__internal/chunked/docs/ui/components/expression/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expression/docs.mdx.js"]=function(e){function t(t){for(var n,s,i=t[0],r=t[1],c=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&m.push(o[s][0]),o[s]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c||[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,i=1;i<l.length;i++){var r=l[i];0!==o[r]&&(n=!1)}n&&(a.splice(t--,1),e=s(s.s=l[0]))}return e}var n={},o={35:0},a=[];function s(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=n,s.d=function(e,t,l){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(l,n,function(t){return e[t]}.bind(null,n));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.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 c=0;c<i.length;c++)t(i[c]);var d=r;return a.push([727,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},727:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return te})),l.d(t,"getContents",(function(){return le}));var n=l(0),o=l.n(n),a=l(4),s=l(2),i=l(27),r=l(15),c=l(14),d=l(3),u=l.n(d),m=l(11),p=l(9),b=l(7),h=l(12),E=l(23),g=l(24),f=l(8),O=l(17),x={conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},v={resourceOption1:{name:"Resource 1"},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},y={resourceOption1:{name:"Resource 1",selected:!0,focused:!0},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},j={operatorOption1:{name:"Equals"},operatorOption2:{name:"Does Not Equal"},operatorOption3:{name:"Greater Than"},operatorOption4:{name:"Less Than"}},_={all:{snapshot:{conditionOption1:{name:"All Conditions Are Met",selected:!0,focused:!0},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"All Conditions Are Met"},any:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met"},custom:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met",selected:!0,focused:!0},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Custom Logic Is Met"},always:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)",selected:!0,focused:!0},conditionOption5:{name:"Formula Evaluates to True"}},value:"Always (No Criteria)"},formula:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True",selected:!0,focused:!0}},value:"Formula Evaluates to True"},group:{snapshot:{conditionOption1:{name:"All Conditions Are Met for This Group"},conditionOption2:{name:"Any Condition Is Met for This Group",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met for This Group"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met in This Group"}},N=l(5),w=l.n(N),S=l(1),A=function(e){var t=e.optionSelected,l=e.isInFilter,n=e.label,a=e.placeholderText,s=S.d.uniqueId("listbox-id-"),i=t&&_[t];return o.a.createElement("div",{className:w()(l?"slds-m-vertical_small":"slds-expression__options")},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":s,label:n,value:i&&i.value,placeholder:a,selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:s,hasUniqueId:!0,snapshot:i?i.snapshot:x,type:"plain",count:i?Object.keys(i.snapshot).length:Object.keys(x).length,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0}))};A.propTypes={label:u.a.string.isRequired,isInFilter:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),placeholderText:u.a.string},A.defaultProps={label:"Take Action When",placeholderText:"Select…"};var T=function(e){var t=S.d.uniqueId("text-input-id-");return o.a.createElement("div",{className:"slds-expression__custom-logic"},o.a.createElement(f.b,{labelContent:"Custom Logic",inputId:t},o.a.createElement(O.a,{id:t,defaultValue:e.defaultValue})))};T.propTypes={defaultValue:u.a.string};var C=function(e){return o.a.createElement("ul",null,e.children)};C.propTypes={children:u.a.node};var I=function(e){return o.a.createElement("legend",{className:w()("slds-expression__legend",{"slds-expression__legend_group":e.isGroup})},e.legendText&&o.a.createElement("span",null,e.legendText),o.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))};I.propTypes={isGroup:u.a.bool,legendText:u.a.string,assistiveText:u.a.string};var D=function(e){return o.a.createElement("div",{className:w()("slds-col",{"slds-grow-none":e.doesNotGrow})},e.children)};D.propTypes={doesNotGrow:u.a.bool,children:u.a.node};var M=function(e){var t=e.isGroup,l=e.groupName,n=e.conditionName,a=e.placeholderText,s=e.resourceIsSelected,i=e.inputIsDisabled,r=e.hasError,c=e.errorMessage,d=e.buttonIsDisabled,u=e.legendText,p=S.d.uniqueId("listbox-id-"),h=S.d.uniqueId("listbox-id-"),x=S.d.uniqueId("text-input-id-"),_="error-message-unique-id";return o.a.createElement("li",{className:w()("slds-expression__row",{"slds-expression__row_group":t})},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:u,assistiveText:t?n+" of "+l:n}),o.a.createElement("div",{className:"slds-grid slds-gutters_xx-small"},o.a.createElement(D,null,o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":p,label:"Resource",placeholder:a,selectOnly:!0,inputIconPosition:"right",value:s&&"Resource 1",formClassName:"slds-has-error",errorId:_,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:p,hasUniqueId:!0,snapshot:s?y:v,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":h,label:"Operator",placeholder:a,selectOnly:!0,inputIconPosition:"right",isDisabled:i,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:h,hasUniqueId:!0,snapshot:j,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,null,o.a.createElement(f.b,{hasError:r,labelContent:"Value",inputId:x,errorId:c&&_,inlineMessage:c},o.a.createElement(O.a,{disabled:i,id:x,"aria-describedby":c&&_}))),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(f.h,null,o.a.createElement(f.e,null," "),o.a.createElement(f.c,null,o.a.createElement(b.b,{theme:"neutral",symbol:"delete",disabled:d,assistiveText:t?"Delete "+n+" of "+l:"Delete "+n,title:t?"Delete "+n+" of "+l:"Delete "+n})))))))};M.propTypes={legendText:u.a.string,conditionName:u.a.string.isRequired,isGroup:u.a.bool,groupName:function(e,t){if(e.isGroup&&(void 0===e[t]||"string"!=typeof e[t]))return new Error("Please provide a string of this row's group name for assistive text.")},inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,resourceIsSelected:u.a.bool,errorMessage:u.a.string,placeholderText:u.a.string},M.defaultProps={conditionName:"Condition 1",placeholderText:"Select…"};var G=function(e){return o.a.createElement("li",{className:"slds-expression__group"},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:e.legendText,assistiveText:e.assistiveText,isGroup:!0}),o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("ul",null,e.children),o.a.createElement(R,{isGroup:!0})))};G.propTypes={legendText:u.a.string,assistiveText:u.a.string.isRequired,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),children:u.a.node},G.defaultProps={assistiveText:"Condition Group 1"};var R=function(e){return o.a.createElement("div",{className:"slds-expression__buttons"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),!e.isGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};R.propTypes={isGroup:u.a.bool};var L=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement("h2",{className:"slds-expression__title"},"Conditions"),o.a.createElement(A,{optionSelected:e.optionSelected}),e.hasCustomLogic&&o.a.createElement(T,{defaultValue:e.customLogicValue}),o.a.createElement(C,null,o.a.createElement(M,{legendText:e.legendText,assistiveText:"Condition 1",inputIsDisabled:e.inputIsDisabled,buttonIsDisabled:e.buttonIsDisabled,resourceIsSelected:e.resourceIsSelected}),e.children),o.a.createElement(R,null))};L.propTypes={hasCustomLogic:u.a.bool,legendText:u.a.string,inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always"]),resourceIsSelected:u.a.bool,customLogicValue:u.a.string,children:u.a.node};var F=l(19),k=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("div",{className:"slds-expression_formula__rte"},o.a.createElement(F.a,{label:"Formula"},o.a.createElement(F.l,null,o.a.createElement(F.h,null)),o.a.createElement(F.k,{label:"Compose formula",placeholder:"Compose formula..."}))),o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},"Check Syntax")))};k.propTypes={optionSelected:u.a.string};var q=l(42),B=function(e){return o.a.createElement("div",{className:"demo-only",style:{maxWidth:"320px",overflow:"hidden"}},e.children)};B.propTypes={children:u.a.node};var P=function(e){return o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),e.hasGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};P.propTypes={hasGroup:u.a.bool};var W=function(e){return o.a.createElement("div",{className:"slds-filters__group"},o.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},o.a.createElement("span",null,o.a.createElement("strong",null,"AND")),o.a.createElement("span",{className:"slds-assistive-text"},"Condition Group 1"),o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:"Remove Group",title:"Remove Group"})),o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected}),o.a.createElement("ol",null,o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"')),o.a.createElement(P,null))};W.propTypes={optionSelected:u.a.string};var V=function(e){return o.a.createElement(B,null,o.a.createElement(q.c,null,o.a.createElement("h2",{className:"slds-text-heading_small"},"Conditions"),o.a.createElement("div",{className:"slds-m-vertical_small"},o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected})),o.a.createElement("ol",{className:"slds-list_vertical slds-list_vertical-space"},o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"'),e.children),o.a.createElement(P,{hasGroup:!0})))};V.propTypes={optionSelected:u.a.string,children:u.a.node};q.a,q.b,q.a;var U=a.c.a,J=a.c.code,H=a.c.em,K=a.c.h2,z=a.c.h3,Q=a.c.h4,X=a.c.li,Y=a.c.ol,Z=a.c.p,$=a.c.strong,ee=a.c.ul,te=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Expression builders help users declaratively construct logical expressions. These expressions can be used when querying for a filtered set of records, creating rules to control when something executes, or any other conditional logic."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0})),K({id:"About-Expression-Builder"},"About Expression Builder"),Z({},"The variants scale from lightweight e-commerce style filtering to declarative rule building, and even to advanced formula or SOQL/SQL expressions."),Z({},"We also include size variants to fit a variety of use cases:"),ee({},X({},"Use the narrow version for in-context expression building, enabling users to preview their results."),X({},"Use the full width version when expression building is a standalone task, perhaps in a modal.")),z({id:"Accessibility"},"Accessibility"),Q({id:"Markup"},"Markup"),Z({},"Each row in the expression builder is a ",J({},"<fieldset>")," and is contained in an ",J({},"<li>")," inside of a ",J({},"<ul>"),"."),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("ul",null,Object(n.createElement)("li",{className:"slds-expression__row"},Object(n.createElement)("fieldset",null,Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N")),Object(n.createElement)("div",{className:"slds-expression__row_inputs"},"..."))))),Z({},"The first child DOM element of the ",J({},"<fieldset>")," should be the ",J({},"<legend>"),', which includes the logic operator, such as "AND" or "OR", and assistive text describing the current rule, such as "Condition 3".'),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N"))),Q({id:"Focus-Management"},"Focus Management"),Z({},$({},"Adding:")),Z({},"When clicking ",J({},"Add Condition"),":"),ee({},X({},'Focus should move to the first combobox input in the new rule, labeled "Resource" or something similar')),Z({},"When clicking ",J({},"Add Group"),":"),ee({},X({},'Focus should move to the mode combobox in the new group, where "All Conditions Are Met For This Group" should be selected by default')),Z({},$({},"Deleting:")),Z({},'When "deleting" the only row:'),ee({},X({},"When there is only one row, the delete button is disabled until a Resource is selected."),X({},"If a Resource has been selected, then clicking the delete button resets to the ",U({href:"/components/expression/#Default"},"Default State"),", since there is a one row minimum. This includes:",Y({},X({},"Clear any comboboxes or inputs that have been changed from the default"),X({},'Use JavaScript to move focus to the "Resource" combobox input of that same row.'),X({},'Disable the "Operator" and "Value" inputs, as well as the Delete button')))),Z({},"When deleting the first row or a middle row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"next"),' row, labeled "Resource" or something similar.')),Z({},"When deleting the last row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"previous"),' row, labeled "Resource" or something similar.')),K({id:"Base"},"Base"),Object(n.createElement)(r.a,{title:"Expression Builder -  Base"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),Z({},'By default, the expression builder starts with one condition. The default option for the mode combobox is "All Conditions Are Met". Until a Resource is selected, the Operator and Value fields, as well as the Delete button, are disabled.'),Z({},"The expression builder has a one row minimum requirement. Therefore, clicking the delete button on a single row will only clear any populated values from the inputs."),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'Be sure to show labels above all inputs. By default "Take Action When" is the label for the mode combobox. However, this should be updated based on the product or persona to best match the use case. Similarly, use “Resource”, “Operator”, and “Value” as labels in each row, but, when relevant, replace “Resource” with a more specific label for your use case (e.g. “Field”).')),z({id:"Initial-State"},"Initial State"),Z({},"Since the options in the Operator field and the type of component used for the Value field are dependent on the Resource selected, the Operator and Value Fields are disabled in the initial state until a Resource is selected. The Delete button is also disabled until a Resource is selected."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial Disabled State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0}))),z({id:"Resource-Selected"},"Resource Selected"),Z({},"Once a resource is selected, the values for the Operator field update to correspond with the type of Resource selected. Similarly, the component used for the Value field can be an input, combobox, picklist, or lookup, depending on what Resource was chosen."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial State Resource Selected"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),z({id:"New-Condition-Added"},"New Condition Added"),Object(n.createElement)(r.a,{title:"Expression Builder - Condition Added"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",inputIsDisabled:!0})))),z({id:"Error-State"},"Error State"),Object(n.createElement)(r.a,{title:"Expression Builder - Error State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",errorMessage:"Enter a value",hasError:!0})))),K({id:"All-or-Any-Conditions"},"All or Any Conditions"),Z({},'When the user selects "All Conditions Are Met" from the mode combobox and adds a second condition, the expression builder will use ',J({},"AND")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - All Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",resourceIsSelected:!0})))),Z({},'If the user selects "Any Condition Is Met" from the mode combobox, the expression builder will use ',J({},"OR")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - Any Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"any",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",resourceIsSelected:!0})))),z({id:"With-an-Expression-Group"},"With an Expression Group"),Z({},"To create more complex expressions, the user can add an expression group to create something like ",J({},"Condition 1 AND (Condition 2 OR Condition 3)")),Z({},$({},"Interaction Details:")),Y({},X({},"New groups are added when the ",J({},"Add Group")," button is selected"),X({},"The only mode combobox options inside of a group are ",J({},"All")," and ",J({},"Any")),X({},"Only one level of groups is desirable, so there is no ",J({},"Add Group")," button inside of a Group",ee({},X({},"All logical expressions can be written with one level of nesting, so this maintains the best readability"))),X({},"Deleting the only rule in a group removes the entire group"),X({},"If a group is added but the first, default rule has not been altered, the first rule is replaced by the group")),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'The values in the group mode combobox get "for This Group" appended, ex. "All Conditions are Met for This Group"')),Object(n.createElement)(r.a,{title:"Expression Builder - With Expression Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(G,{legendText:"AND",assistiveText:"Condition Group 1",optionSelected:"group",isGroup:!0},Object(n.createElement)(M,{conditionName:"Condition 1",isGroup:!0,groupName:"Condition Group 1",resourceIsSelected:!0}),Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",isGroup:!0,groupName:"Condition Group 1",inputIsDisabled:!0}))))),K({id:"Custom-Logic"},"Custom Logic"),Z({},"Another option for creating more complex expressions is using the Custom Logic variant. This allows users to manually type their custom logic into an input field, which references the numbered conditions below, like ",J({},"1 AND 2"),"."),Z({},$({},"Interaction Details:")),ee({},X({},'After switching the mode to "Custom Logic", the default custom logic text input should match the previous user selection.',Y({},X({},'For example, if the user was previously using "match Any", the input would default to something like ',J({},"1 OR 2")),X({},"If the user had added a group previously, the input should reflect that group as well, something like ",J({},"1 AND (2 OR 3)")),X({},'Otherwise, the input defaults to "match All", such as ',J({},"1 AND 2")))),X({},"New conditions are added to the end of the list, while ",J({},"AND n")," is added to the custom logic input text"),X({},"If a rule is removed, the custom logic should automatically rewrite to maintain intended logic")),Object(n.createElement)(r.a,{title:"Expression Builder - Custom Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{hasCustomLogic:!0,customLogicValue:"1 AND 2",legendText:"1",optionSelected:"custom",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"2",conditionName:"Condition 2",inputIsDisabled:!0})))),K({id:"Formula-Logic"},"Formula Logic"),Z({},"The Formula variant provides the user the most customization for their expressions. Users can write free-form custom logic by using the insertion comboboxes and/or typing freely. By default, the formula variant does not appear with default text."),Z({},"Users can also validate the syntax to check for errors."),Object(n.createElement)(r.a,{title:"Expression Builder - Formula Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(k,{optionSelected:"formula"}))),K({id:"Narrow"},"Narrow"),Z({},"Use the narrow variant for in-context expression building, where users are able to immediately preview the results of their conditional logic, like a list or report."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"Be sure to use assistive text to improve the clarity of what the user might be editing. For example, add"," ",Object(n.createElement)("code",null,Object(n.createElement)("span",{className:"slds-assistive-text"},"Edit filter:"))," ","to each expression button element.")),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"}))),z({id:"With-an-Expression-Group-2"},"With an Expression Group"),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant with Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"},Object(n.createElement)(q.a,{operator:"AND",type:"Status",removable:!0},"equals Red"),Object(n.createElement)(q.b,null,Object(n.createElement)(W,{optionSelected:"any"}))))),z({id:"Filtering"},"Filtering"),Z({},"One example of in-context expression building is filtering. To see examples of filtering logic inside of a panel, checkout our ",U({href:"/components/panels/#Panels-for-Filtering"},"Panel")," documentation"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)(q.d,null)))),Q({id:"Adding-a-new-filter"},"Adding a new filter"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with new filter"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ul",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-is-new",removable:!0},"New Filter")),Object(n.createElement)(q.d,null)))),Q({id:"With-an-error"},"With an error"),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},"When an error message is displayed to the user, the"," ",Object(n.createElement)("code",null,"<div>")," containing the error message should have the ",Object(n.createElement)("code",null,'role="alert"')," attribute applied. This will immediately notify the user that an error has occurred."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"The filter button that has an error is associated to that error with the use of ",Object(n.createElement)("code",null,"aria-describedby"),". The value of"," ",Object(n.createElement)("code",null,"aria-describedby")," matches the ID given to the element that contains the corresponding error message.")),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with error"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("div",{className:"slds-text-color_error slds-m-bottom_x-small",role:"alert"},"Filters could not be applied. Please fix the validation errors below."),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-has-error",type:"Stage",errorMessage:"Error Message",removable:!0},'equals "Red"')),Object(n.createElement)(q.d,null)))),Q({id:"With-locked-filters"},"With locked filters"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with locked filters"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small slds-grid"},"Locked Filters",Object(n.createElement)(p.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_x-small",sprite:"utility",symbol:"lock"})),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{className:"slds-is-locked",type:"Name",disabled:!0},'equals "ACME"')),Object(n.createElement)(q.d,null)))))},le=function(){return Object(a.a)(te())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expression/docs.mdx.js"]=function(e){function t(t){for(var n,s,i=t[0],r=t[1],c=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&m.push(o[s][0]),o[s]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c||[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,i=1;i<l.length;i++){var r=l[i];0!==o[r]&&(n=!1)}n&&(a.splice(t--,1),e=s(s.s=l[0]))}return e}var n={},o={35:0},a=[];function s(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=n,s.d=function(e,t,l){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(l,n,function(t){return e[t]}.bind(null,n));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.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 c=0;c<i.length;c++)t(i[c]);var d=r;return a.push([728,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},728:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return te})),l.d(t,"getContents",(function(){return le}));var n=l(0),o=l.n(n),a=l(4),s=l(2),i=l(27),r=l(15),c=l(13),d=l(3),u=l.n(d),m=l(11),p=l(9),b=l(7),h=l(12),E=l(23),g=l(24),f=l(8),O=l(16),x={conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},v={resourceOption1:{name:"Resource 1"},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},y={resourceOption1:{name:"Resource 1",selected:!0,focused:!0},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},j={operatorOption1:{name:"Equals"},operatorOption2:{name:"Does Not Equal"},operatorOption3:{name:"Greater Than"},operatorOption4:{name:"Less Than"}},_={all:{snapshot:{conditionOption1:{name:"All Conditions Are Met",selected:!0,focused:!0},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"All Conditions Are Met"},any:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met"},custom:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met",selected:!0,focused:!0},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Custom Logic Is Met"},always:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)",selected:!0,focused:!0},conditionOption5:{name:"Formula Evaluates to True"}},value:"Always (No Criteria)"},formula:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True",selected:!0,focused:!0}},value:"Formula Evaluates to True"},group:{snapshot:{conditionOption1:{name:"All Conditions Are Met for This Group"},conditionOption2:{name:"Any Condition Is Met for This Group",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met for This Group"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met in This Group"}},N=l(5),w=l.n(N),S=l(1),A=function(e){var t=e.optionSelected,l=e.isInFilter,n=e.label,a=e.placeholderText,s=S.d.uniqueId("listbox-id-"),i=t&&_[t];return o.a.createElement("div",{className:w()(l?"slds-m-vertical_small":"slds-expression__options")},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":s,label:n,value:i&&i.value,placeholder:a,selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:s,hasUniqueId:!0,snapshot:i?i.snapshot:x,type:"plain",count:i?Object.keys(i.snapshot).length:Object.keys(x).length,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0}))};A.propTypes={label:u.a.string.isRequired,isInFilter:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),placeholderText:u.a.string},A.defaultProps={label:"Take Action When",placeholderText:"Select…"};var T=function(e){var t=S.d.uniqueId("text-input-id-");return o.a.createElement("div",{className:"slds-expression__custom-logic"},o.a.createElement(f.b,{labelContent:"Custom Logic",inputId:t},o.a.createElement(O.a,{id:t,defaultValue:e.defaultValue})))};T.propTypes={defaultValue:u.a.string};var C=function(e){return o.a.createElement("ul",null,e.children)};C.propTypes={children:u.a.node};var I=function(e){return o.a.createElement("legend",{className:w()("slds-expression__legend",{"slds-expression__legend_group":e.isGroup})},e.legendText&&o.a.createElement("span",null,e.legendText),o.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))};I.propTypes={isGroup:u.a.bool,legendText:u.a.string,assistiveText:u.a.string};var D=function(e){return o.a.createElement("div",{className:w()("slds-col",{"slds-grow-none":e.doesNotGrow})},e.children)};D.propTypes={doesNotGrow:u.a.bool,children:u.a.node};var M=function(e){var t=e.isGroup,l=e.groupName,n=e.conditionName,a=e.placeholderText,s=e.resourceIsSelected,i=e.inputIsDisabled,r=e.hasError,c=e.errorMessage,d=e.buttonIsDisabled,u=e.legendText,p=S.d.uniqueId("listbox-id-"),h=S.d.uniqueId("listbox-id-"),x=S.d.uniqueId("text-input-id-"),_="error-message-unique-id";return o.a.createElement("li",{className:w()("slds-expression__row",{"slds-expression__row_group":t})},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:u,assistiveText:t?n+" of "+l:n}),o.a.createElement("div",{className:"slds-grid slds-gutters_xx-small"},o.a.createElement(D,null,o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":p,label:"Resource",placeholder:a,selectOnly:!0,inputIconPosition:"right",value:s&&"Resource 1",formClassName:"slds-has-error",errorId:_,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:p,hasUniqueId:!0,snapshot:s?y:v,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":h,label:"Operator",placeholder:a,selectOnly:!0,inputIconPosition:"right",isDisabled:i,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:h,hasUniqueId:!0,snapshot:j,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,null,o.a.createElement(f.b,{hasError:r,labelContent:"Value",inputId:x,errorId:c&&_,inlineMessage:c},o.a.createElement(O.a,{disabled:i,id:x,"aria-describedby":c&&_}))),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(f.h,null,o.a.createElement(f.e,null," "),o.a.createElement(f.c,null,o.a.createElement(b.b,{theme:"neutral",symbol:"delete",disabled:d,assistiveText:t?"Delete "+n+" of "+l:"Delete "+n,title:t?"Delete "+n+" of "+l:"Delete "+n})))))))};M.propTypes={legendText:u.a.string,conditionName:u.a.string.isRequired,isGroup:u.a.bool,groupName:function(e,t){if(e.isGroup&&(void 0===e[t]||"string"!=typeof e[t]))return new Error("Please provide a string of this row's group name for assistive text.")},inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,resourceIsSelected:u.a.bool,errorMessage:u.a.string,placeholderText:u.a.string},M.defaultProps={conditionName:"Condition 1",placeholderText:"Select…"};var G=function(e){return o.a.createElement("li",{className:"slds-expression__group"},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:e.legendText,assistiveText:e.assistiveText,isGroup:!0}),o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("ul",null,e.children),o.a.createElement(R,{isGroup:!0})))};G.propTypes={legendText:u.a.string,assistiveText:u.a.string.isRequired,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),children:u.a.node},G.defaultProps={assistiveText:"Condition Group 1"};var R=function(e){return o.a.createElement("div",{className:"slds-expression__buttons"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),!e.isGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};R.propTypes={isGroup:u.a.bool};var L=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement("h2",{className:"slds-expression__title"},"Conditions"),o.a.createElement(A,{optionSelected:e.optionSelected}),e.hasCustomLogic&&o.a.createElement(T,{defaultValue:e.customLogicValue}),o.a.createElement(C,null,o.a.createElement(M,{legendText:e.legendText,assistiveText:"Condition 1",inputIsDisabled:e.inputIsDisabled,buttonIsDisabled:e.buttonIsDisabled,resourceIsSelected:e.resourceIsSelected}),e.children),o.a.createElement(R,null))};L.propTypes={hasCustomLogic:u.a.bool,legendText:u.a.string,inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always"]),resourceIsSelected:u.a.bool,customLogicValue:u.a.string,children:u.a.node};var F=l(19),k=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("div",{className:"slds-expression_formula__rte"},o.a.createElement(F.a,{label:"Formula"},o.a.createElement(F.l,null,o.a.createElement(F.h,null)),o.a.createElement(F.k,{label:"Compose formula",placeholder:"Compose formula..."}))),o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},"Check Syntax")))};k.propTypes={optionSelected:u.a.string};var q=l(42),B=function(e){return o.a.createElement("div",{className:"demo-only",style:{maxWidth:"320px",overflow:"hidden"}},e.children)};B.propTypes={children:u.a.node};var P=function(e){return o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),e.hasGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};P.propTypes={hasGroup:u.a.bool};var W=function(e){return o.a.createElement("div",{className:"slds-filters__group"},o.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},o.a.createElement("span",null,o.a.createElement("strong",null,"AND")),o.a.createElement("span",{className:"slds-assistive-text"},"Condition Group 1"),o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:"Remove Group",title:"Remove Group"})),o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected}),o.a.createElement("ol",null,o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"')),o.a.createElement(P,null))};W.propTypes={optionSelected:u.a.string};var V=function(e){return o.a.createElement(B,null,o.a.createElement(q.c,null,o.a.createElement("h2",{className:"slds-text-heading_small"},"Conditions"),o.a.createElement("div",{className:"slds-m-vertical_small"},o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected})),o.a.createElement("ol",{className:"slds-list_vertical slds-list_vertical-space"},o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"'),e.children),o.a.createElement(P,{hasGroup:!0})))};V.propTypes={optionSelected:u.a.string,children:u.a.node};q.a,q.b,q.a;var U=a.c.a,J=a.c.code,H=a.c.em,K=a.c.h2,z=a.c.h3,Q=a.c.h4,X=a.c.li,Y=a.c.ol,Z=a.c.p,$=a.c.strong,ee=a.c.ul,te=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Expression builders help users declaratively construct logical expressions. These expressions can be used when querying for a filtered set of records, creating rules to control when something executes, or any other conditional logic."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0})),K({id:"About-Expression-Builder"},"About Expression Builder"),Z({},"The variants scale from lightweight e-commerce style filtering to declarative rule building, and even to advanced formula or SOQL/SQL expressions."),Z({},"We also include size variants to fit a variety of use cases:"),ee({},X({},"Use the narrow version for in-context expression building, enabling users to preview their results."),X({},"Use the full width version when expression building is a standalone task, perhaps in a modal.")),z({id:"Accessibility"},"Accessibility"),Q({id:"Markup"},"Markup"),Z({},"Each row in the expression builder is a ",J({},"<fieldset>")," and is contained in an ",J({},"<li>")," inside of a ",J({},"<ul>"),"."),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("ul",null,Object(n.createElement)("li",{className:"slds-expression__row"},Object(n.createElement)("fieldset",null,Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N")),Object(n.createElement)("div",{className:"slds-expression__row_inputs"},"..."))))),Z({},"The first child DOM element of the ",J({},"<fieldset>")," should be the ",J({},"<legend>"),', which includes the logic operator, such as "AND" or "OR", and assistive text describing the current rule, such as "Condition 3".'),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N"))),Q({id:"Focus-Management"},"Focus Management"),Z({},$({},"Adding:")),Z({},"When clicking ",J({},"Add Condition"),":"),ee({},X({},'Focus should move to the first combobox input in the new rule, labeled "Resource" or something similar')),Z({},"When clicking ",J({},"Add Group"),":"),ee({},X({},'Focus should move to the mode combobox in the new group, where "All Conditions Are Met For This Group" should be selected by default')),Z({},$({},"Deleting:")),Z({},'When "deleting" the only row:'),ee({},X({},"When there is only one row, the delete button is disabled until a Resource is selected."),X({},"If a Resource has been selected, then clicking the delete button resets to the ",U({href:"/components/expression/#Default"},"Default State"),", since there is a one row minimum. This includes:",Y({},X({},"Clear any comboboxes or inputs that have been changed from the default"),X({},'Use JavaScript to move focus to the "Resource" combobox input of that same row.'),X({},'Disable the "Operator" and "Value" inputs, as well as the Delete button')))),Z({},"When deleting the first row or a middle row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"next"),' row, labeled "Resource" or something similar.')),Z({},"When deleting the last row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"previous"),' row, labeled "Resource" or something similar.')),K({id:"Base"},"Base"),Object(n.createElement)(r.a,{title:"Expression Builder -  Base"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),Z({},'By default, the expression builder starts with one condition. The default option for the mode combobox is "All Conditions Are Met". Until a Resource is selected, the Operator and Value fields, as well as the Delete button, are disabled.'),Z({},"The expression builder has a one row minimum requirement. Therefore, clicking the delete button on a single row will only clear any populated values from the inputs."),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'Be sure to show labels above all inputs. By default "Take Action When" is the label for the mode combobox. However, this should be updated based on the product or persona to best match the use case. Similarly, use “Resource”, “Operator”, and “Value” as labels in each row, but, when relevant, replace “Resource” with a more specific label for your use case (e.g. “Field”).')),z({id:"Initial-State"},"Initial State"),Z({},"Since the options in the Operator field and the type of component used for the Value field are dependent on the Resource selected, the Operator and Value Fields are disabled in the initial state until a Resource is selected. The Delete button is also disabled until a Resource is selected."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial Disabled State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0}))),z({id:"Resource-Selected"},"Resource Selected"),Z({},"Once a resource is selected, the values for the Operator field update to correspond with the type of Resource selected. Similarly, the component used for the Value field can be an input, combobox, picklist, or lookup, depending on what Resource was chosen."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial State Resource Selected"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),z({id:"New-Condition-Added"},"New Condition Added"),Object(n.createElement)(r.a,{title:"Expression Builder - Condition Added"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",inputIsDisabled:!0})))),z({id:"Error-State"},"Error State"),Object(n.createElement)(r.a,{title:"Expression Builder - Error State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",errorMessage:"Enter a value",hasError:!0})))),K({id:"All-or-Any-Conditions"},"All or Any Conditions"),Z({},'When the user selects "All Conditions Are Met" from the mode combobox and adds a second condition, the expression builder will use ',J({},"AND")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - All Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",resourceIsSelected:!0})))),Z({},'If the user selects "Any Condition Is Met" from the mode combobox, the expression builder will use ',J({},"OR")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - Any Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"any",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",resourceIsSelected:!0})))),z({id:"With-an-Expression-Group"},"With an Expression Group"),Z({},"To create more complex expressions, the user can add an expression group to create something like ",J({},"Condition 1 AND (Condition 2 OR Condition 3)")),Z({},$({},"Interaction Details:")),Y({},X({},"New groups are added when the ",J({},"Add Group")," button is selected"),X({},"The only mode combobox options inside of a group are ",J({},"All")," and ",J({},"Any")),X({},"Only one level of groups is desirable, so there is no ",J({},"Add Group")," button inside of a Group",ee({},X({},"All logical expressions can be written with one level of nesting, so this maintains the best readability"))),X({},"Deleting the only rule in a group removes the entire group"),X({},"If a group is added but the first, default rule has not been altered, the first rule is replaced by the group")),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'The values in the group mode combobox get "for This Group" appended, ex. "All Conditions are Met for This Group"')),Object(n.createElement)(r.a,{title:"Expression Builder - With Expression Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(G,{legendText:"AND",assistiveText:"Condition Group 1",optionSelected:"group",isGroup:!0},Object(n.createElement)(M,{conditionName:"Condition 1",isGroup:!0,groupName:"Condition Group 1",resourceIsSelected:!0}),Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",isGroup:!0,groupName:"Condition Group 1",inputIsDisabled:!0}))))),K({id:"Custom-Logic"},"Custom Logic"),Z({},"Another option for creating more complex expressions is using the Custom Logic variant. This allows users to manually type their custom logic into an input field, which references the numbered conditions below, like ",J({},"1 AND 2"),"."),Z({},$({},"Interaction Details:")),ee({},X({},'After switching the mode to "Custom Logic", the default custom logic text input should match the previous user selection.',Y({},X({},'For example, if the user was previously using "match Any", the input would default to something like ',J({},"1 OR 2")),X({},"If the user had added a group previously, the input should reflect that group as well, something like ",J({},"1 AND (2 OR 3)")),X({},'Otherwise, the input defaults to "match All", such as ',J({},"1 AND 2")))),X({},"New conditions are added to the end of the list, while ",J({},"AND n")," is added to the custom logic input text"),X({},"If a rule is removed, the custom logic should automatically rewrite to maintain intended logic")),Object(n.createElement)(r.a,{title:"Expression Builder - Custom Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{hasCustomLogic:!0,customLogicValue:"1 AND 2",legendText:"1",optionSelected:"custom",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"2",conditionName:"Condition 2",inputIsDisabled:!0})))),K({id:"Formula-Logic"},"Formula Logic"),Z({},"The Formula variant provides the user the most customization for their expressions. Users can write free-form custom logic by using the insertion comboboxes and/or typing freely. By default, the formula variant does not appear with default text."),Z({},"Users can also validate the syntax to check for errors."),Object(n.createElement)(r.a,{title:"Expression Builder - Formula Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(k,{optionSelected:"formula"}))),K({id:"Narrow"},"Narrow"),Z({},"Use the narrow variant for in-context expression building, where users are able to immediately preview the results of their conditional logic, like a list or report."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"Be sure to use assistive text to improve the clarity of what the user might be editing. For example, add"," ",Object(n.createElement)("code",null,Object(n.createElement)("span",{className:"slds-assistive-text"},"Edit filter:"))," ","to each expression button element.")),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"}))),z({id:"With-an-Expression-Group-2"},"With an Expression Group"),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant with Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"},Object(n.createElement)(q.a,{operator:"AND",type:"Status",removable:!0},"equals Red"),Object(n.createElement)(q.b,null,Object(n.createElement)(W,{optionSelected:"any"}))))),z({id:"Filtering"},"Filtering"),Z({},"One example of in-context expression building is filtering. To see examples of filtering logic inside of a panel, checkout our ",U({href:"/components/panels/#Panels-for-Filtering"},"Panel")," documentation"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)(q.d,null)))),Q({id:"Adding-a-new-filter"},"Adding a new filter"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with new filter"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ul",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-is-new",removable:!0},"New Filter")),Object(n.createElement)(q.d,null)))),Q({id:"With-an-error"},"With an error"),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},"When an error message is displayed to the user, the"," ",Object(n.createElement)("code",null,"<div>")," containing the error message should have the ",Object(n.createElement)("code",null,'role="alert"')," attribute applied. This will immediately notify the user that an error has occurred."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"The filter button that has an error is associated to that error with the use of ",Object(n.createElement)("code",null,"aria-describedby"),". The value of"," ",Object(n.createElement)("code",null,"aria-describedby")," matches the ID given to the element that contains the corresponding error message.")),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with error"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("div",{className:"slds-text-color_error slds-m-bottom_x-small",role:"alert"},"Filters could not be applied. Please fix the validation errors below."),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-has-error",type:"Stage",errorMessage:"Error Message",removable:!0},'equals "Red"')),Object(n.createElement)(q.d,null)))),Q({id:"With-locked-filters"},"With locked filters"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with locked filters"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small slds-grid"},"Locked Filters",Object(n.createElement)(p.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_x-small",sprite:"utility",symbol:"lock"})),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{className:"slds-is-locked",type:"Name",disabled:!0},'equals "ACME"')),Object(n.createElement)(q.d,null)))))},le=function(){return Object(a.a)(te())}}});

package/__internal/chunked/docs/ui/components/feeds/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/feeds/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],m=t[2],o=0,u=[];o<i.length;o++)r=i[o],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&u.push(s[r][0]),s[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m||[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==s[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=l[0]))}return e}var a={},s={36:0},n=[];function r(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=a,r.d=function(e,t,l){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(l,a,function(t){return e[t]}.bind(null,a));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var m=0;m<i.length;m++)t(i[m]);var d=c;return n.push([735,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},735:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return z})),l.d(t,"getContents",(function(){return I}));var a=l(0),s=l.n(a),n=l(4),r=l(2),i=(l(28),l(45),l(14),l(1)),c=l(7),m=l(54),d=l(117),o=l(5),u=l.n(o),E=function(e){return s.a.createElement("article",{className:u()("slds-comment slds-media slds-hint-parent",e.className)},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_medium",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jenna Davis",src:"/assets/images/avatar2.jpg",title:"Jenna Davis avatar"}))),s.a.createElement("div",{className:"slds-media__body"},e.children))},f=function(e){return s.a.createElement("header",{className:"slds-media slds-media_center"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",{className:"slds-truncate",title:"Jenna Davis"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jenna Davis")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})))},p=function(e){return s.a.createElement("div",{className:u()("slds-comment__content slds-text-longform",e.className)},e.children)},h=function(e){return s.a.createElement("footer",null,s.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},s.a.createElement("li",{className:"slds-item"},s.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?s.a.createElement("li",{className:"slds-item"},"1 Like"):null,s.a.createElement("li",{className:"slds-item"},"16hr Ago")))},_=l(9),v=function(e){return s.a.createElement("ul",{className:"slds-post__footer-actions-list slds-list_horizontal"},s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.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},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"like"}),e.liked?"Liked":"Like")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Comment on this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share_post"})," ","Comment")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Share this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share"})," ","Share")))},b=function(e){return s.a.createElement("ul",{className:"slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title"},e.comments?s.a.createElement("li",{className:"slds-item"},e.comments||"0"," comments"):null,s.a.createElement("li",{className:"slds-item"},"20 shares"),s.a.createElement("li",{className:"slds-item"},"259 views"))},N=function(e){return s.a.createElement("header",{className:"slds-post__header slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_large",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jason Rodgers",src:"/assets/images/avatar1.jpg",title:"Jason Rodgers avatar"}))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",null,s.a.createElement("a",{href:"#",title:"Jason Rodgers",onClick:function(e){return e.preventDefault()}},"Jason Rogers")," ","—"," ",s.a.createElement("a",{href:"#",title:"Design Systems",onClick:function(e){return e.preventDefault()}},"Design Systems")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})),s.a.createElement("p",{className:"slds-text-body_small"},s.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"))))},g=function(e){return s.a.createElement("div",{className:u()("slds-post__content slds-text-longform",e.className)},e.children)},y=function(e){return s.a.createElement("footer",{className:u()("slds-post__footer",e.className)},e.children)},k=function(e){return s.a.createElement("article",{className:u()("slds-post",e.className)},e.children)},w=function(e){return s.a.createElement("div",{className:"slds-feed__item-comments"},e.children)},x=function(e){return s.a.createElement("ul",null,i.d.times(e.comments||1,(function(e){return s.a.createElement("li",{key:"comment-".concat(e)},s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))})))},D=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],O=[{id:"post-with-liker-bar",label:"Like",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,{liked:!0}),s.a.createElement(b,{liked:!0}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"You")," ","liked this post")))))}],j=[{id:"post-attachment-link",label:"Link attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement(m.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-attachment-files",label:"Files(s) attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"image",hasImage:!0})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf"})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,title:"22+",hasImage:!0,hasOverlay:!0})))),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-with-comments",label:"With replies",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"2"}))),s.a.createElement(w,null,s.a.createElement(x,{comments:"2"}),s.a.createElement(d.a,null)))))},{id:"post-with-overflow",label:"Replies - Overflow Bar",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,null)))))},{id:"post-with-publisher-active",label:"Replies - Publisher active",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,{className:"slds-is-active slds-has-focus"})))))},{id:"questions",label:"Question",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("h3",{className:"slds-text-heading_small"},"Barbecue Party Tips For A Truly Amazing Event?"),s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],J=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement("ul",null,s.a.createElement("li",null,s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))))),s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],C=n.c.code,S=n.c.h2,L=n.c.h3,H=n.c.p,z=function(){return Object(a.createElement)(n.b,{},Object(a.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."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(i.f)(O,"post-with-liker-bar")),S({id:"About-Feeds"},"About Feeds"),L({id:"Accessibility"},"Accessibility"),H({},"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 ",C({},'tab-index="-1"')," to the ",C({},"<a>")," element so that assistive technology does not read out duplicate links."),S({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(i.f)(J)),S({id:"Post"},"Post"),Object(a.createElement)(r.a,null,Object(i.f)(D)),S({id:"Examples"},"Examples"),L({id:"Link-attachment"},"Link attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-link")),L({id:"Files(s)-attachment"},"Files(s) attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-files")),L({id:"With-replies"},"With replies"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-comments")),L({id:"Replies-Overflow-Bar"},"Replies - Overflow Bar"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-overflow")),L({id:"Replies-Publisher-active"},"Replies - Publisher active"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-publisher-active")),L({id:"Question"},"Question"),Object(a.createElement)(r.a,null,Object(i.f)(j,"questions")),S({id:"States"},"States"),L({id:"Like"},"Like"),Object(a.createElement)(r.a,null,Object(i.f)(O,"post-with-liker-bar")))},I=function(){return Object(n.a)(z())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/feeds/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],m=t[2],o=0,u=[];o<i.length;o++)r=i[o],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&u.push(s[r][0]),s[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m||[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==s[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=l[0]))}return e}var a={},s={36:0},n=[];function r(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=a,r.d=function(e,t,l){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(l,a,function(t){return e[t]}.bind(null,a));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var m=0;m<i.length;m++)t(i[m]);var d=c;return n.push([736,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},736:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return z})),l.d(t,"getContents",(function(){return I}));var a=l(0),s=l.n(a),n=l(4),r=l(2),i=(l(28),l(46),l(13),l(1)),c=l(7),m=l(54),d=l(118),o=l(5),u=l.n(o),E=function(e){return s.a.createElement("article",{className:u()("slds-comment slds-media slds-hint-parent",e.className)},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_medium",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jenna Davis",src:"/assets/images/avatar2.jpg",title:"Jenna Davis avatar"}))),s.a.createElement("div",{className:"slds-media__body"},e.children))},f=function(e){return s.a.createElement("header",{className:"slds-media slds-media_center"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",{className:"slds-truncate",title:"Jenna Davis"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jenna Davis")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})))},p=function(e){return s.a.createElement("div",{className:u()("slds-comment__content slds-text-longform",e.className)},e.children)},h=function(e){return s.a.createElement("footer",null,s.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},s.a.createElement("li",{className:"slds-item"},s.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?s.a.createElement("li",{className:"slds-item"},"1 Like"):null,s.a.createElement("li",{className:"slds-item"},"16hr Ago")))},_=l(9),v=function(e){return s.a.createElement("ul",{className:"slds-post__footer-actions-list slds-list_horizontal"},s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.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},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"like"}),e.liked?"Liked":"Like")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Comment on this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share_post"})," ","Comment")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Share this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share"})," ","Share")))},b=function(e){return s.a.createElement("ul",{className:"slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title"},e.comments?s.a.createElement("li",{className:"slds-item"},e.comments||"0"," comments"):null,s.a.createElement("li",{className:"slds-item"},"20 shares"),s.a.createElement("li",{className:"slds-item"},"259 views"))},N=function(e){return s.a.createElement("header",{className:"slds-post__header slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_large",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jason Rodgers",src:"/assets/images/avatar1.jpg",title:"Jason Rodgers avatar"}))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",null,s.a.createElement("a",{href:"#",title:"Jason Rodgers",onClick:function(e){return e.preventDefault()}},"Jason Rogers")," ","—"," ",s.a.createElement("a",{href:"#",title:"Design Systems",onClick:function(e){return e.preventDefault()}},"Design Systems")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})),s.a.createElement("p",{className:"slds-text-body_small"},s.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"))))},g=function(e){return s.a.createElement("div",{className:u()("slds-post__content slds-text-longform",e.className)},e.children)},y=function(e){return s.a.createElement("footer",{className:u()("slds-post__footer",e.className)},e.children)},k=function(e){return s.a.createElement("article",{className:u()("slds-post",e.className)},e.children)},w=function(e){return s.a.createElement("div",{className:"slds-feed__item-comments"},e.children)},x=function(e){return s.a.createElement("ul",null,i.d.times(e.comments||1,(function(e){return s.a.createElement("li",{key:"comment-".concat(e)},s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))})))},D=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],O=[{id:"post-with-liker-bar",label:"Like",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,{liked:!0}),s.a.createElement(b,{liked:!0}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"You")," ","liked this post")))))}],j=[{id:"post-attachment-link",label:"Link attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement(m.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-attachment-files",label:"Files(s) attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"image",hasImage:!0})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf"})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,title:"22+",hasImage:!0,hasOverlay:!0})))),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-with-comments",label:"With replies",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"2"}))),s.a.createElement(w,null,s.a.createElement(x,{comments:"2"}),s.a.createElement(d.a,null)))))},{id:"post-with-overflow",label:"Replies - Overflow Bar",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,null)))))},{id:"post-with-publisher-active",label:"Replies - Publisher active",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,{className:"slds-is-active slds-has-focus"})))))},{id:"questions",label:"Question",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("h3",{className:"slds-text-heading_small"},"Barbecue Party Tips For A Truly Amazing Event?"),s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],J=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement("ul",null,s.a.createElement("li",null,s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))))),s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.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.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],C=n.c.code,S=n.c.h2,L=n.c.h3,H=n.c.p,z=function(){return Object(a.createElement)(n.b,{},Object(a.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."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(i.f)(O,"post-with-liker-bar")),S({id:"About-Feeds"},"About Feeds"),L({id:"Accessibility"},"Accessibility"),H({},"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 ",C({},'tab-index="-1"')," to the ",C({},"<a>")," element so that assistive technology does not read out duplicate links."),S({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(i.f)(J)),S({id:"Post"},"Post"),Object(a.createElement)(r.a,null,Object(i.f)(D)),S({id:"Examples"},"Examples"),L({id:"Link-attachment"},"Link attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-link")),L({id:"Files(s)-attachment"},"Files(s) attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-files")),L({id:"With-replies"},"With replies"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-comments")),L({id:"Replies-Overflow-Bar"},"Replies - Overflow Bar"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-overflow")),L({id:"Replies-Publisher-active"},"Replies - Publisher active"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-publisher-active")),L({id:"Question"},"Question"),Object(a.createElement)(r.a,null,Object(i.f)(j,"questions")),S({id:"States"},"States"),L({id:"Like"},"Like"),Object(a.createElement)(r.a,null,Object(i.f)(O,"post-with-liker-bar")))},I=function(){return Object(n.a)(z())}}});

package/__internal/chunked/docs/ui/components/file-selector/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/file-selector/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],n=t[1],c=t[2],u=0,m=[];u<s.length;u++)o=s[u],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c||[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],l=!0,s=1;s<r.length;s++){var n=r[s];0!==a[n]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=r[0]))}return e}var l={},a={37:0},i=[];function o(t){if(l[t])return l[t].exports;var r=l[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=l,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(r,l,function(t){return e[t]}.bind(null,l));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],n=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var d=n;return i.push([726,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},726:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return N})),r.d(t,"getContents",(function(){return q}));var l=r(0),a=r.n(l),i=r(4),o=r(2),s=(r(28),r(45),r(14),r(1)),n=r(5),c=r.n(n),d=r(25),u=r.n(d),m=r(9),p=function(e){var t=u()("file-selector-primary-label-"),r=u()("file-selector-secondary-label"),l=u()("file-upload-input-"),i=u()("error-");return a.a.createElement("div",{className:c()("slds-form-element",{"slds-has-error":e.error}),role:"group","aria-labelledby":t},a.a.createElement("span",{className:"slds-form-element__label",id:t},"Attachment"),a.a.createElement("div",{className:"slds-form-element__control"},a.a.createElement("div",{className:c()("slds-file-selector",{"slds-file-selector_files":e.files,"slds-file-selector_images":e.images})},a.a.createElement("div",{className:c()("slds-file-selector__dropzone",{"slds-has-drag-over":e.dragover})},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:l,disabled:e.dragoverError,"aria-describedby":e.error?i:null}),a.a.createElement("label",{className:"slds-file-selector__body",htmlFor:l,id:r},a.a.createElement("span",{className:"slds-file-selector__button slds-button slds-button_neutral"},a.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"upload"}),"Upload ",e.files?"Files":"Image"),a.a.createElement("span",{className:"slds-file-selector__text slds-medium-show"},"or Drop ",e.files?"Files":"Image"))))),e.error&&a.a.createElement("div",{className:"slds-form-element__help",id:i},"File type not supported"))},f=a.a.createElement(p,{files:!0}),g=[{id:"file-selector-files-error",label:"Error",element:a.a.createElement(p,{files:!0,error:!0})},{id:"file-selector-files-dragover",label:"Dragover",element:a.a.createElement(p,{files:!0,dragover:!0})},{id:"file-selector-files-dragover-error",label:"Dragover with error",element:a.a.createElement(p,{files:!0,dragoverError:!0,error:!0})}],b=[{id:"default",label:"Files - Default",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0})}],v=[{id:"file-selector-images-error",label:"Error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,error:!0})},{id:"file-selector-images-dragover",label:"Dragover",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,dragover:!0})},{id:"file-selector-images-dragover-error",label:"Dragover with error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,dragoverError:!0,error:!0})}],h=function(e){return a.a.createElement("div",{className:c()("slds-file-selector slds-file-selector_integrated",e.className)},a.a.createElement("div",{className:c()("slds-file-selector__dropzone slds-file-selector__dropzone_integrated",e.drag?"slds-has-drag":null,e.dragover?"slds-has-drag-over":null),"aria-hidden":"true"},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:"file-upload-input-01",disabled:e.dragoverError,tabIndex:"-1"}),a.a.createElement("label",{className:"slds-file-selector__body slds-file-selector__body_integrated",htmlFor:"file-upload-input-01"},e.dragoverError?a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"error"}):a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"upload"}),a.a.createElement("span",{className:"slds-file-selector__text slds-file-selector__text_integrated slds-text-heading_medium slds-text-align_center"},e.dragoverError?"Too many files selected. Attach up to 1 file.":"Drop Files"))),e.children)},y=[{id:"default",label:"Integrated File Selector - Default",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated"},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],_=[{id:"integrated-file-selector-drag",label:"Drag",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover",label:"Dragover",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragover:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover-error",label:"Dragover with error",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragoverError:!0,error:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],E=i.c.code,x=i.c.h2,S=i.c.h3,O=i.c.h4,j=i.c.li,D=i.c.p,w=i.c.ul,N=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(s.f)(f)),x({id:"About-File-Selector"},"About File Selector"),S({id:"Accessibility"},"Accessibility"),D({},"When implementing this component, pay special attention to the following:"),O({id:"Markup"},"Markup"),w({},j({},"The ",E({},"role='group'")," attribute groups the form element label and the form control file input together. The ",E({},"aria-labelledby")," attribute provides an accessible label for the group, while the HTML input type file is labeled using a standard ",E({},"id/for")," attribute relationship.")),x({id:"Base"},"Base"),Object(l.createElement)(o.a,null,Object(s.f)(f)),x({id:"States"},"States"),S({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-error")),S({id:"Dragover"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover")),S({id:"Dragover-with-error"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover-error")),x({id:"Image"},"Image"),D({},"Multi Line / Image"),D({},"Use as a dedicated dropzone for image files only. May require a cropping control."),Object(l.createElement)(o.a,null,Object(s.f)(b)),x({id:"States-2"},"States"),S({id:"Error-2"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-error")),S({id:"Dragover-2"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover")),S({id:"Dragover-with-error-2"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover-error")),x({id:"Integrated"},"Integrated"),D({},"Invisible Dropzone (Container)"),D({},"Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page."),Object(l.createElement)(o.a,null,Object(s.f)(y)),x({id:"States-3"},"States"),S({id:"Drag"},"Drag"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-drag")),S({id:"Dragover-3"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover")),S({id:"Dragover-with-error-3"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover-error")))},q=function(){return Object(i.a)(N())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/file-selector/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],n=t[1],c=t[2],u=0,m=[];u<s.length;u++)o=s[u],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c||[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],l=!0,s=1;s<r.length;s++){var n=r[s];0!==a[n]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=r[0]))}return e}var l={},a={37:0},i=[];function o(t){if(l[t])return l[t].exports;var r=l[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=l,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(r,l,function(t){return e[t]}.bind(null,l));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],n=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var d=n;return i.push([727,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},727:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return N})),r.d(t,"getContents",(function(){return q}));var l=r(0),a=r.n(l),i=r(4),o=r(2),s=(r(28),r(46),r(13),r(1)),n=r(5),c=r.n(n),d=r(25),u=r.n(d),m=r(9),p=function(e){var t=u()("file-selector-primary-label-"),r=u()("file-selector-secondary-label"),l=u()("file-upload-input-"),i=u()("error-");return a.a.createElement("div",{className:c()("slds-form-element",{"slds-has-error":e.error}),role:"group","aria-labelledby":t},a.a.createElement("span",{className:"slds-form-element__label",id:t},"Attachment"),a.a.createElement("div",{className:"slds-form-element__control"},a.a.createElement("div",{className:c()("slds-file-selector",{"slds-file-selector_files":e.files,"slds-file-selector_images":e.images})},a.a.createElement("div",{className:c()("slds-file-selector__dropzone",{"slds-has-drag-over":e.dragover})},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:l,disabled:e.dragoverError,"aria-describedby":e.error?i:null}),a.a.createElement("label",{className:"slds-file-selector__body",htmlFor:l,id:r},a.a.createElement("span",{className:"slds-file-selector__button slds-button slds-button_neutral"},a.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"upload"}),"Upload ",e.files?"Files":"Image"),a.a.createElement("span",{className:"slds-file-selector__text slds-medium-show"},"or Drop ",e.files?"Files":"Image"))))),e.error&&a.a.createElement("div",{className:"slds-form-element__help",id:i},"File type not supported"))},f=a.a.createElement(p,{files:!0}),g=[{id:"file-selector-files-error",label:"Error",element:a.a.createElement(p,{files:!0,error:!0})},{id:"file-selector-files-dragover",label:"Dragover",element:a.a.createElement(p,{files:!0,dragover:!0})},{id:"file-selector-files-dragover-error",label:"Dragover with error",element:a.a.createElement(p,{files:!0,dragoverError:!0,error:!0})}],b=[{id:"default",label:"Files - Default",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0})}],v=[{id:"file-selector-images-error",label:"Error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,error:!0})},{id:"file-selector-images-dragover",label:"Dragover",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,dragover:!0})},{id:"file-selector-images-dragover-error",label:"Dragover with error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(p,{images:!0,dragoverError:!0,error:!0})}],h=function(e){return a.a.createElement("div",{className:c()("slds-file-selector slds-file-selector_integrated",e.className)},a.a.createElement("div",{className:c()("slds-file-selector__dropzone slds-file-selector__dropzone_integrated",e.drag?"slds-has-drag":null,e.dragover?"slds-has-drag-over":null),"aria-hidden":"true"},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:"file-upload-input-01",disabled:e.dragoverError,tabIndex:"-1"}),a.a.createElement("label",{className:"slds-file-selector__body slds-file-selector__body_integrated",htmlFor:"file-upload-input-01"},e.dragoverError?a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"error"}):a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"upload"}),a.a.createElement("span",{className:"slds-file-selector__text slds-file-selector__text_integrated slds-text-heading_medium slds-text-align_center"},e.dragoverError?"Too many files selected. Attach up to 1 file.":"Drop Files"))),e.children)},y=[{id:"default",label:"Integrated File Selector - Default",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated"},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],_=[{id:"integrated-file-selector-drag",label:"Drag",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover",label:"Dragover",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragover:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover-error",label:"Dragover with error",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragoverError:!0,error:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],E=i.c.code,x=i.c.h2,S=i.c.h3,O=i.c.h4,j=i.c.li,D=i.c.p,w=i.c.ul,N=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(s.f)(f)),x({id:"About-File-Selector"},"About File Selector"),S({id:"Accessibility"},"Accessibility"),D({},"When implementing this component, pay special attention to the following:"),O({id:"Markup"},"Markup"),w({},j({},"The ",E({},"role='group'")," attribute groups the form element label and the form control file input together. The ",E({},"aria-labelledby")," attribute provides an accessible label for the group, while the HTML input type file is labeled using a standard ",E({},"id/for")," attribute relationship.")),x({id:"Base"},"Base"),Object(l.createElement)(o.a,null,Object(s.f)(f)),x({id:"States"},"States"),S({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-error")),S({id:"Dragover"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover")),S({id:"Dragover-with-error"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover-error")),x({id:"Image"},"Image"),D({},"Multi Line / Image"),D({},"Use as a dedicated dropzone for image files only. May require a cropping control."),Object(l.createElement)(o.a,null,Object(s.f)(b)),x({id:"States-2"},"States"),S({id:"Error-2"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-error")),S({id:"Dragover-2"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover")),S({id:"Dragover-with-error-2"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover-error")),x({id:"Integrated"},"Integrated"),D({},"Invisible Dropzone (Container)"),D({},"Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page."),Object(l.createElement)(o.a,null,Object(s.f)(y)),x({id:"States-3"},"States"),S({id:"Drag"},"Drag"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-drag")),S({id:"Dragover-3"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover")),S({id:"Dragover-with-error-3"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover-error")))},q=function(){return Object(i.a)(N())}}});

package/__internal/chunked/docs/ui/components/files/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/files/docs.mdx.js"]=function(e){function t(t){for(var i,s,r=t[0],o=t[1],c=t[2],m=0,h=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&h.push(l[s][0]),l[s]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);h.length;)h.shift()();return n.push.apply(n,c||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={38:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return n.push([789,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},789:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var i=a(0),l=a.n(i),n=a(4),s=a(2),r=(a(28),a(45),a(14),a(1)),o=a(54),c=[{id:"default",label:"Default",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],d=[{id:"attachment-file-no-image",label:"File with no image",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"image",title:"Image Title"}))},{id:"attachment-file-no-title",label:"File with no title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,noCaption:!0,symbol:"pdf",hasImage:!0}))},{id:"attachment-file-truncate-title",label:"File with truncating title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,isLoading:!0,noCaption:!0}))},{id:"multi-attachments",label:"Less than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})))},{id:"multi-attachments-overflow",label:"Greater than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3  slds-medium-show"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,title:"+22",hasImage:!0,hasOverlay:!0})))},{id:"link-attachment",label:"Link attachment",element:l.a.createElement(o.a,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has1x1Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],m=n.c.code,h=n.c.h2,p=n.c.h3,f=n.c.h4,u=n.c.p,b=n.c.strong,y=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Files are a representation of content uploaded as an attachment."),Object(i.createElement)(s.a,{exampleOnly:!0},Object(r.f)(d,"attachment-file-with-actions")),h({id:"About-Files"},"About Files"),u({},"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"),"."),p({id:"Accessibility"},"Accessibility"),u({},"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 ",b({},"photo"),", ",b({},"image"),", or ",b({},"icon")," as alt values, as they don’t communicate valuable content to the user."),h({id:"Base"},"Base"),Object(i.createElement)(s.a,null,Object(r.f)(c)),h({id:"States"},"States"),p({id:"File-with-no-image"},"File with no image"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-image")),p({id:"File-with-no-title"},"File with no title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-title")),p({id:"File-with-actions"},"File with actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-actions")),p({id:"File-with-no-title-+-actions"},"File with no title + actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-no-title-actions")),p({id:"File-with-external-icon"},"File with external icon"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-external-icon")),p({id:"File-in-loading-state-with-title"},"File in loading state with title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-with-title")),p({id:"File-in-loading-state-without-title"},"File in loading state without title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-no-title")),p({id:"3-file-attachments"},"< 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments")),p({id:"3-file-attachments-2"},"> 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments-overflow")),h({id:"Modifiers"},"Modifiers"),p({id:"Ratio"},"Ratio"),f({id:".slds-file__crop_4-by-3"},".slds-file__crop_4-by-3"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-4-by-3")),f({id:".slds-file__crop_16-by-9"},".slds-file__crop_16-by-9"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-16-by-9")),f({id:".slds-file__crop_1-by-1"},".slds-file__crop_1-by-1"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-1-by-1")))},g=function(){return Object(n.a)(y())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/files/docs.mdx.js"]=function(e){function t(t){for(var i,s,r=t[0],o=t[1],c=t[2],m=0,h=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&h.push(l[s][0]),l[s]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);h.length;)h.shift()();return n.push.apply(n,c||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={38:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return n.push([790,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},790:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var i=a(0),l=a.n(i),n=a(4),s=a(2),r=(a(28),a(46),a(13),a(1)),o=a(54),c=[{id:"default",label:"Default",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],d=[{id:"attachment-file-no-image",label:"File with no image",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"image",title:"Image Title"}))},{id:"attachment-file-no-title",label:"File with no title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,noCaption:!0,symbol:"pdf",hasImage:!0}))},{id:"attachment-file-truncate-title",label:"File with truncating title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,isLoading:!0,noCaption:!0}))},{id:"multi-attachments",label:"Less than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})))},{id:"multi-attachments-overflow",label:"Greater than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3  slds-medium-show"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,title:"+22",hasImage:!0,hasOverlay:!0})))},{id:"link-attachment",label:"Link attachment",element:l.a.createElement(o.a,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{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.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has1x1Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],m=n.c.code,h=n.c.h2,p=n.c.h3,f=n.c.h4,u=n.c.p,b=n.c.strong,y=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Files are a representation of content uploaded as an attachment."),Object(i.createElement)(s.a,{exampleOnly:!0},Object(r.f)(d,"attachment-file-with-actions")),h({id:"About-Files"},"About Files"),u({},"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"),"."),p({id:"Accessibility"},"Accessibility"),u({},"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 ",b({},"photo"),", ",b({},"image"),", or ",b({},"icon")," as alt values, as they don’t communicate valuable content to the user."),h({id:"Base"},"Base"),Object(i.createElement)(s.a,null,Object(r.f)(c)),h({id:"States"},"States"),p({id:"File-with-no-image"},"File with no image"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-image")),p({id:"File-with-no-title"},"File with no title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-title")),p({id:"File-with-actions"},"File with actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-actions")),p({id:"File-with-no-title-+-actions"},"File with no title + actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-no-title-actions")),p({id:"File-with-external-icon"},"File with external icon"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-external-icon")),p({id:"File-in-loading-state-with-title"},"File in loading state with title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-with-title")),p({id:"File-in-loading-state-without-title"},"File in loading state without title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-no-title")),p({id:"3-file-attachments"},"< 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments")),p({id:"3-file-attachments-2"},"> 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments-overflow")),h({id:"Modifiers"},"Modifiers"),p({id:"Ratio"},"Ratio"),f({id:".slds-file__crop_4-by-3"},".slds-file__crop_4-by-3"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-4-by-3")),f({id:".slds-file__crop_16-by-9"},".slds-file__crop_16-by-9"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-16-by-9")),f({id:".slds-file__crop_1-by-1"},".slds-file__crop_1-by-1"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-1-by-1")))},g=function(){return Object(n.a)(y())}}});