@sps-woodland/progress-indicators 8.17.1 → 8.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +9 -9
- package/lib/index.es.js +128 -128
- package/lib/style.css +1 -1
- package/package.json +9 -9
- package/vite.config.mjs +11 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),m=require("@sps-woodland/core"),N=require("@sps-woodland/buttons"),r=require("@spscommerce/ds-react"),d=require("@sps-woodland/tokens"),u=require("@spscommerce/utils");function q(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(s,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}return s.default=t,Object.freeze(s)}const e=q(j);function O(t,s,a){return s in t?Object.defineProperty(t,s,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[s]=a,t}function T(t,s){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);s&&(l=l.filter(function(o){return Object.getOwnPropertyDescriptor(t,o).enumerable})),a.push.apply(a,l)}return a}function w(t){for(var s=1;s<arguments.length;s++){var a=arguments[s]!=null?arguments[s]:{};s%2?T(Object(a),!0).forEach(function(l){O(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):T(Object(a)).forEach(function(l){Object.defineProperty(t,l,Object.getOwnPropertyDescriptor(a,l))})}return t}var k=(t,s,a)=>{for(var l of Object.keys(t)){var o;if(t[l]!==((o=s[l])!==null&&o!==void 0?o:a[l]))return!1}return!0},b=t=>s=>{var a=t.defaultClassName,l=w(w({},t.defaultVariants),s);for(var o in l){var n,p=(n=l[o])!==null&&n!==void 0?n:t.defaultVariants[o];if(p!=null){var c=p;typeof c=="boolean"&&(c=c===!0?"true":"false");var i=t.variantClassNames[o][c];i&&(a+=" "+i)}}for(var[f,B]of t.compoundVariants)k(f,l,t.defaultVariants)&&(a+=" "+B);return a},D="_1890qme0",V=b({defaultClassName:"_1890qmef",variantClassNames:{disabled:{true:"_1890qmeg",false:"_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),x="_1890qme2",R="_1890qme1",F="_1890qmet",H="_1890qme3",M=b({defaultClassName:"_1890qme5",variantClassNames:{completed:{true:"_1890qme6",false:"_1890qme7"},disabled:{true:"_1890qme8",false:"_1890qme9"},color:{purple:"_1890qmea",blue:"_1890qmeb",red:"_1890qmec",orange:"_1890qmed",grey:"_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=b({defaultClassName:"_1890qmei",variantClassNames:{completed:{true:"_1890qmej",false:"_1890qmek"},disabled:{true:"_1890qmel",false:"_1890qmem"},color:{purple:"_1890qmen",blue:"_1890qmeo",red:"_1890qmep",orange:"_1890qmeq",grey:"_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"_1890qmes"]]}),A="_1890qme4",$=b({defaultClassName:"_17lj0goj",variantClassNames:{stepCompleted:{true:"_17lj0gok",false:"_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=b({defaultClassName:"_17lj0gom",variantClassNames:{stepCompleted:{true:"_17lj0gon",false:"_17lj0goo"},disabled:{true:"_17lj0gop",false:"_17lj0goq"},barCompleted:{true:"_17lj0gor",false:"_17lj0gos"},color:{purple:"_17lj0got",red:"_17lj0gou",blue:"_17lj0gov",orange:"_17lj0gow",grey:"_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"_17lj0goy"],[{barCompleted:!0,disabled:!1},"_17lj0goz"],[{stepCompleted:!0,disabled:!0},"_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"_17lj0go15"]]}),U=b({defaultClassName:"",variantClassNames:{barCompleted:{true:"_17lj0goa",false:"_17lj0gob"},color:{purple:"_17lj0goc",blue:"_17lj0god",red:"_17lj0goe",orange:"_17lj0gof",grey:"_17lj0gog"},disabled:{true:"_17lj0goh",false:"_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=b({defaultClassName:"_17lj0go0",variantClassNames:{barCompleted:{true:"_17lj0go1",false:"_17lj0go2"},disabled:{true:"_17lj0go3",false:"_17lj0go4"},color:{purple:"_17lj0go5",blue:"_17lj0go6",red:"_17lj0go7",orange:"_17lj0go8",grey:"_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]});function P({className:t,title:s,description:a,icon:l,complete:o=!1,disabled:n,barCompleted:p,progressColor:c,...i}){const f=m.useElementId().current||void 0;return e.createElement("li",{id:f,className:m.cl(G({stepCompleted:o,disabled:n,barCompleted:p,color:c}),t),...i},l&&e.createElement(m.Icon,{icon:l,size:"sm",className:$({stepCompleted:o})}),s&&f&&e.createElement(r.SpsTooltip,{for:f,title:s},a))}m.Metadata.set(P,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function h({className:t,children:s,detail:a,disabled:l,onClose:o,percentComplete:n=0,title:p,showStepsCounter:c,progressColor:i="purple",...f}){const{t:B}=e.useContext(m.I18nContext),[C,_]=e.useState([]),[g]=m.selectChildren(s,[{type:P}]);e.useEffect(()=>{let S=[];g.forEach(E=>{E.hasOwnProperty("props")&&E.props.complete===!0&&S.push(E),_(S)})},[]),n&&g&&console.warn(["The percentComplete prop can't be used with the ProgressBarStep subcomponent.","The progress will be determined by how many nested ProgressBarStep components have the completed prop."].join(" "));const y=e.Children.map(s,S=>e.isValidElement(S)?e.cloneElement(S,{disabled:l,barCompleted:C.length===g.length,progressColor:i}):S);return e.createElement("div",{className:m.cl(D,t),...f},e.createElement("div",{className:R},p&&e.createElement("div",{className:H},e.createElement("div",{className:A},p),g.length>0?e.createElement(e.Fragment,null,c===!0&&e.createElement("div",{className:W({barCompleted:C.length===g.length,disabled:l,color:i})},`${C.length} of ${g.length} Complete`)):e.createElement("div",{className:M({completed:n===1,disabled:l,color:i})},`${Math.floor(n*100)}%`)),g.length>0?e.createElement("ul",{className:m.cl(U({barCompleted:C.length===g.length,disabled:l,color:i}),"d-flex align-items-center list-unstyled mb-0")},y):e.createElement("div",{className:V({disabled:l})},e.createElement("div",{className:I({completed:n===1,disabled:l,color:i}),style:{width:`${n*100}%`}})),a&&e.createElement("div",{className:F},a)),o&&n!==1&&e.createElement("div",{className:x},e.createElement(N.Button,{kind:"icon",icon:"x",onClick:o,title:B("design-system:progressBar.closeButtonTitle")})))}m.Metadata.set(h,{name:"Progress Bar",props:{detail:{type:"string"},disabled:{type:"boolean"},onClose:{type:"() => void"},percentComplete:{type:"number",default:"0"},progressColor:{type:'"purple" | "blue" | "red" | "orange" | "grey"',default:'"purple"'}}});function v({className:t,size:s="sm",progress:a=0,...l}){const n=d.Tokens.component["progress-ring"][s]-4,p=n*2*Math.PI,c=p-a/100*p;return e.createElement("div",{className:t,...l},e.createElement("svg",{height:d.Tokens.component["progress-ring"][s]*2,width:d.Tokens.component["progress-ring"][s]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:d.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,r:n,cx:d.Tokens.component["progress-ring"][s],cy:d.Tokens.component["progress-ring"][s]}),e.createElement("circle",{stroke:d.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,style:{strokeDashoffset:c},r:n,cx:d.Tokens.component["progress-ring"][s],cy:d.Tokens.component["progress-ring"][s]})))}m.Metadata.set(v,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const Y={description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[h,P],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Clear Button"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Progress Details"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:u.code`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),d=require("@sps-woodland/core"),j=require("@sps-woodland/buttons"),s=require("@spscommerce/ds-react"),c=require("@sps-woodland/tokens"),m=require("@spscommerce/utils");function N(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return o.default=r,Object.freeze(o)}const e=N(y);function q(r,o,t){return o in r?Object.defineProperty(r,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[o]=t,r}function P(r,o){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);o&&(a=a.filter(function(l){return Object.getOwnPropertyDescriptor(r,l).enumerable})),t.push.apply(t,a)}return t}function B(r){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?P(Object(t),!0).forEach(function(a){q(r,a,t[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach(function(a){Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(t,a))})}return r}var O=(r,o,t)=>{for(var a of Object.keys(r)){var l;if(r[a]!==((l=o[a])!==null&&l!==void 0?l:t[a]))return!1}return!0},h=r=>o=>{var t=r.defaultClassName,a=B(B({},r.defaultVariants),o);for(var l in a){var n,p=(n=a[l])!==null&&n!==void 0?n:r.defaultVariants[l];if(p!=null){var _=p;typeof _=="boolean"&&(_=_===!0?"true":"false");var i=r.variantClassNames[l][_];i&&(t+=" "+i)}}for(var[u,w]of r.compoundVariants)O(u,a,r.defaultVariants)&&(t+=" "+w);return t},D="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme0",V=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),x="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme2",R="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme1",F="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmet",H="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme3",M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme4",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go15"]]}),U=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]});function S({className:r,title:o,description:t,icon:a,complete:l=!1,disabled:n,barCompleted:p,progressColor:_,...i}){const u=d.useElementId().current||void 0;return e.createElement("li",{id:u,className:d.cl(G({stepCompleted:l,disabled:n,barCompleted:p,color:_}),r),...i},a&&e.createElement(d.Icon,{icon:a,size:"sm",className:$({stepCompleted:l})}),o&&u&&e.createElement(s.SpsTooltip,{for:u,title:o},t))}d.Metadata.set(S,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function C({className:r,children:o,detail:t,disabled:a,onClose:l,percentComplete:n=0,title:p,showStepsCounter:_,progressColor:i="purple",...u}){const{t:w}=e.useContext(d.I18nContext),[b,T]=e.useState([]),[g]=d.selectChildren(o,[{type:S}]);e.useEffect(()=>{let f=[];g.forEach(v=>{v.hasOwnProperty("props")&&v.props.complete===!0&&f.push(v),T(f)})},[]),n&&g&&console.warn(["The percentComplete prop can't be used with the ProgressBarStep subcomponent.","The progress will be determined by how many nested ProgressBarStep components have the completed prop."].join(" "));const k=e.Children.map(o,f=>e.isValidElement(f)?e.cloneElement(f,{disabled:a,barCompleted:b.length===g.length,progressColor:i}):f);return e.createElement("div",{className:d.cl(D,r),...u},e.createElement("div",{className:R},p&&e.createElement("div",{className:H},e.createElement("div",{className:A},p),g.length>0?e.createElement(e.Fragment,null,_===!0&&e.createElement("div",{className:W({barCompleted:b.length===g.length,disabled:a,color:i})},`${b.length} of ${g.length} Complete`)):e.createElement("div",{className:M({completed:n===1,disabled:a,color:i})},`${Math.floor(n*100)}%`)),g.length>0?e.createElement("ul",{className:d.cl(U({barCompleted:b.length===g.length,disabled:a,color:i}),"d-flex align-items-center list-unstyled mb-0")},k):e.createElement("div",{className:V({disabled:a})},e.createElement("div",{className:I({completed:n===1,disabled:a,color:i}),style:{width:`${n*100}%`}})),t&&e.createElement("div",{className:F},t)),l&&n!==1&&e.createElement("div",{className:x},e.createElement(j.Button,{kind:"icon",icon:"x",onClick:l,title:w("design-system:progressBar.closeButtonTitle")})))}d.Metadata.set(C,{name:"Progress Bar",props:{detail:{type:"string"},disabled:{type:"boolean"},onClose:{type:"() => void"},percentComplete:{type:"number",default:"0"},progressColor:{type:'"purple" | "blue" | "red" | "orange" | "grey"',default:'"purple"'}}});function E({className:r,size:o="sm",progress:t=0,...a}){const n=c.Tokens.component["progress-ring"][o]-4,p=n*2*Math.PI,_=p-t/100*p;return e.createElement("div",{className:r,...a},e.createElement("svg",{height:c.Tokens.component["progress-ring"][o]*2,width:c.Tokens.component["progress-ring"][o]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:c.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,r:n,cx:c.Tokens.component["progress-ring"][o],cy:c.Tokens.component["progress-ring"][o]}),e.createElement("circle",{stroke:c.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,style:{strokeDashoffset:_},r:n,cx:c.Tokens.component["progress-ring"][o],cy:c.Tokens.component["progress-ring"][o]})))}d.Metadata.set(E,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const Y={description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[C,S],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(s.SpsTable,null,e.createElement(s.SpsTableHead,null,e.createElement(s.SpsTableHeader,null,"Section"),e.createElement(s.SpsTableHeader,null,"Content Type"),e.createElement(s.SpsTableHeader,null,"Required"),e.createElement(s.SpsTableHeader,null,"Description/Guidelines")),e.createElement(s.SpsTableBody,null,e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(s.SpsTableCell,null,"Title"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(s.SpsTableCell,null,"Progress Meter"),e.createElement(s.SpsTableCell,null,"Yes"),e.createElement(s.SpsTableCell,null)),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(s.SpsTableCell,null,"Progress Counter"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(s.SpsTableCell,null,"Clear Button"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(s.SpsTableCell,null,"Progress Details"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:m.code`
|
|
2
2
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
3
3
|
import { Card } from "@sps-woodland/cards";
|
|
4
4
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
</Card>
|
|
19
19
|
)
|
|
20
20
|
}
|
|
21
|
-
`},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:
|
|
21
|
+
`},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:m.code`
|
|
22
22
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
23
23
|
import { Card } from "@sps-woodland/cards";
|
|
24
24
|
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</Card>
|
|
34
34
|
)
|
|
35
35
|
}
|
|
36
|
-
`},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:
|
|
36
|
+
`},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:m.code`
|
|
37
37
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
38
38
|
import { Card } from "@sps-woodland/cards";
|
|
39
39
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
</Card>
|
|
55
55
|
)
|
|
56
56
|
}
|
|
57
|
-
`}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(
|
|
57
|
+
`}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(s.SpsTable,null,e.createElement(s.SpsTableHead,null,e.createElement(s.SpsTableHeader,null,"Section"),e.createElement(s.SpsTableHeader,null,"Content Type"),e.createElement(s.SpsTableHeader,null,"Required"),e.createElement(s.SpsTableHeader,null,"Description/Guidelines")),e.createElement(s.SpsTableBody,null,e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(s.SpsTableCell,null,"Title"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(s.SpsTableCell,null,"Progress Meter"),e.createElement(s.SpsTableCell,null,"Yes"),e.createElement(s.SpsTableCell,null)),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(s.SpsTableCell,null,"Progress Counter"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(s.SpsTableCell,null,"Step icons"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(s.SpsTableCell,null,"Step Tooltips"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:m.code`
|
|
58
58
|
import { Card } from "@sps-woodland/cards";
|
|
59
59
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
60
60
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
</Card>
|
|
97
97
|
)
|
|
98
98
|
}
|
|
99
|
-
`},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:
|
|
99
|
+
`},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:m.code`
|
|
100
100
|
import { Card } from "@sps-woodland/cards";
|
|
101
101
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
102
102
|
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
</Card>
|
|
136
136
|
)
|
|
137
137
|
}
|
|
138
|
-
`},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:
|
|
138
|
+
`},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:m.code`
|
|
139
139
|
import { Card } from "@sps-woodland/cards";
|
|
140
140
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
141
141
|
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
</Card>
|
|
163
163
|
)
|
|
164
164
|
}
|
|
165
|
-
`},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:
|
|
165
|
+
`},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:m.code`
|
|
166
166
|
import { Card } from "@sps-woodland/cards";
|
|
167
167
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
168
168
|
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
</Card>
|
|
204
204
|
)
|
|
205
205
|
}
|
|
206
|
-
`},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:
|
|
206
|
+
`},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:m.code`
|
|
207
207
|
import { Card } from "@sps-woodland/cards";
|
|
208
208
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
209
209
|
|
|
@@ -229,4 +229,4 @@
|
|
|
229
229
|
</Card>
|
|
230
230
|
)
|
|
231
231
|
}
|
|
232
|
-
`}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=
|
|
232
|
+
`}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=C;exports.ProgressBarStep=S;exports.ProgressRing=E;
|
package/lib/index.es.js
CHANGED
|
@@ -1,104 +1,104 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as
|
|
2
|
+
import { Metadata as b, useElementId as x, cl as E, Icon as D, I18nContext as V, selectChildren as F } from "@sps-woodland/core";
|
|
3
3
|
import { Button as R } from "@sps-woodland/buttons";
|
|
4
|
-
import { SpsTooltip as I, SpsTable as
|
|
5
|
-
import { Tokens as
|
|
6
|
-
import { code as
|
|
7
|
-
function A(
|
|
8
|
-
return
|
|
9
|
-
value:
|
|
4
|
+
import { SpsTooltip as I, SpsTable as C, SpsTableHead as k, SpsTableHeader as m, SpsTableBody as y, SpsTableRow as d, SpsTableCell as r } from "@spscommerce/ds-react";
|
|
5
|
+
import { Tokens as c } from "@sps-woodland/tokens";
|
|
6
|
+
import { code as u } from "@spscommerce/utils";
|
|
7
|
+
function A(s, o, a) {
|
|
8
|
+
return o in s ? Object.defineProperty(s, o, {
|
|
9
|
+
value: a,
|
|
10
10
|
enumerable: !0,
|
|
11
11
|
configurable: !0,
|
|
12
12
|
writable: !0
|
|
13
|
-
}) :
|
|
13
|
+
}) : s[o] = a, s;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
var
|
|
15
|
+
function N(s, o) {
|
|
16
|
+
var a = Object.keys(s);
|
|
17
17
|
if (Object.getOwnPropertySymbols) {
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
return Object.getOwnPropertyDescriptor(
|
|
21
|
-
})),
|
|
18
|
+
var t = Object.getOwnPropertySymbols(s);
|
|
19
|
+
o && (t = t.filter(function(l) {
|
|
20
|
+
return Object.getOwnPropertyDescriptor(s, l).enumerable;
|
|
21
|
+
})), a.push.apply(a, t);
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return a;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
26
|
-
for (var
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
A(t, a
|
|
30
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(
|
|
31
|
-
Object.defineProperty(
|
|
25
|
+
function j(s) {
|
|
26
|
+
for (var o = 1; o < arguments.length; o++) {
|
|
27
|
+
var a = arguments[o] != null ? arguments[o] : {};
|
|
28
|
+
o % 2 ? N(Object(a), !0).forEach(function(t) {
|
|
29
|
+
A(s, t, a[t]);
|
|
30
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(s, Object.getOwnPropertyDescriptors(a)) : N(Object(a)).forEach(function(t) {
|
|
31
|
+
Object.defineProperty(s, t, Object.getOwnPropertyDescriptor(a, t));
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
|
-
return
|
|
34
|
+
return s;
|
|
35
35
|
}
|
|
36
|
-
var M = (
|
|
37
|
-
for (var
|
|
38
|
-
var
|
|
39
|
-
if (t
|
|
36
|
+
var M = (s, o, a) => {
|
|
37
|
+
for (var t of Object.keys(s)) {
|
|
38
|
+
var l;
|
|
39
|
+
if (s[t] !== ((l = o[t]) !== null && l !== void 0 ? l : a[t]))
|
|
40
40
|
return !1;
|
|
41
41
|
}
|
|
42
42
|
return !0;
|
|
43
|
-
},
|
|
44
|
-
var
|
|
45
|
-
for (var
|
|
46
|
-
var n, p = (n =
|
|
43
|
+
}, f = (s) => (o) => {
|
|
44
|
+
var a = s.defaultClassName, t = j(j({}, s.defaultVariants), o);
|
|
45
|
+
for (var l in t) {
|
|
46
|
+
var n, p = (n = t[l]) !== null && n !== void 0 ? n : s.defaultVariants[l];
|
|
47
47
|
if (p != null) {
|
|
48
|
-
var
|
|
49
|
-
typeof
|
|
50
|
-
var
|
|
48
|
+
var _ = p;
|
|
49
|
+
typeof _ == "boolean" && (_ = _ === !0 ? "true" : "false");
|
|
50
|
+
var i = (
|
|
51
51
|
// @ts-expect-error
|
|
52
|
-
|
|
52
|
+
s.variantClassNames[l][_]
|
|
53
53
|
);
|
|
54
|
-
|
|
54
|
+
i && (a += " " + i);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
for (var [
|
|
58
|
-
M(
|
|
59
|
-
return
|
|
60
|
-
}, H = "
|
|
61
|
-
function
|
|
62
|
-
className:
|
|
63
|
-
title:
|
|
64
|
-
description:
|
|
65
|
-
icon:
|
|
66
|
-
complete:
|
|
57
|
+
for (var [h, P] of s.compoundVariants)
|
|
58
|
+
M(h, t, s.defaultVariants) && (a += " " + P);
|
|
59
|
+
return a;
|
|
60
|
+
}, H = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme0", $ = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmef", variantClassNames: { disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeg", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), G = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme2", U = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme1", W = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmet", Y = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme3", K = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme5", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme6", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme7" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme8", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme9" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmea", blue: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeb", red: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmec", orange: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmed", grey: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmei", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmej", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmek" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmel", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmem" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmen", blue: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeo", red: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmep", orange: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeq", grey: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmes"]] }), J = "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme4", L = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goj", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gok", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Q = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gon", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goo" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gop", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goq" }, barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gor", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gos" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0got", red: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gou", blue: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gov", orange: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gow", grey: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go15"]] }), X = f({ defaultClassName: "", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goa", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gob" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goc", blue: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0god", red: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goe", orange: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gof", grey: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gog" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goh", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), Z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go0", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go1", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go2" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go3", false: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go4" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go5", blue: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go6", red: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go7", orange: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go8", grey: "pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] });
|
|
61
|
+
function S({
|
|
62
|
+
className: s,
|
|
63
|
+
title: o,
|
|
64
|
+
description: a,
|
|
65
|
+
icon: t,
|
|
66
|
+
complete: l = !1,
|
|
67
67
|
disabled: n,
|
|
68
68
|
barCompleted: p,
|
|
69
|
-
progressColor:
|
|
70
|
-
...
|
|
69
|
+
progressColor: _,
|
|
70
|
+
...i
|
|
71
71
|
}) {
|
|
72
|
-
const
|
|
72
|
+
const h = x().current || void 0;
|
|
73
73
|
return /* @__PURE__ */ e.createElement(
|
|
74
74
|
"li",
|
|
75
75
|
{
|
|
76
|
-
id:
|
|
77
|
-
className:
|
|
76
|
+
id: h,
|
|
77
|
+
className: E(
|
|
78
78
|
Q({
|
|
79
|
-
stepCompleted:
|
|
79
|
+
stepCompleted: l,
|
|
80
80
|
disabled: n,
|
|
81
81
|
barCompleted: p,
|
|
82
|
-
color:
|
|
82
|
+
color: _
|
|
83
83
|
}),
|
|
84
|
-
|
|
84
|
+
s
|
|
85
85
|
),
|
|
86
|
-
...
|
|
86
|
+
...i
|
|
87
87
|
},
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
t && /* @__PURE__ */ e.createElement(
|
|
89
|
+
D,
|
|
90
90
|
{
|
|
91
|
-
icon:
|
|
91
|
+
icon: t,
|
|
92
92
|
size: "sm",
|
|
93
93
|
className: L({
|
|
94
|
-
stepCompleted:
|
|
94
|
+
stepCompleted: l
|
|
95
95
|
})
|
|
96
96
|
}
|
|
97
97
|
),
|
|
98
|
-
|
|
98
|
+
o && h && /* @__PURE__ */ e.createElement(I, { for: h, title: o }, a)
|
|
99
99
|
);
|
|
100
100
|
}
|
|
101
|
-
|
|
101
|
+
b.set(S, {
|
|
102
102
|
name: "ProgressBarStep",
|
|
103
103
|
props: {
|
|
104
104
|
icon: { type: "IconName" },
|
|
@@ -107,25 +107,25 @@ v.set(_, {
|
|
|
107
107
|
description: { type: "string" }
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
|
-
function
|
|
111
|
-
className:
|
|
112
|
-
children:
|
|
113
|
-
detail:
|
|
114
|
-
disabled:
|
|
115
|
-
onClose:
|
|
110
|
+
function T({
|
|
111
|
+
className: s,
|
|
112
|
+
children: o,
|
|
113
|
+
detail: a,
|
|
114
|
+
disabled: t,
|
|
115
|
+
onClose: l,
|
|
116
116
|
percentComplete: n = 0,
|
|
117
117
|
title: p,
|
|
118
|
-
showStepsCounter:
|
|
119
|
-
progressColor:
|
|
120
|
-
...
|
|
118
|
+
showStepsCounter: _,
|
|
119
|
+
progressColor: i = "purple",
|
|
120
|
+
...h
|
|
121
121
|
}) {
|
|
122
|
-
const { t:
|
|
123
|
-
{ type:
|
|
122
|
+
const { t: P } = e.useContext(V), [w, q] = e.useState([]), [g] = F(o, [
|
|
123
|
+
{ type: S }
|
|
124
124
|
]);
|
|
125
125
|
e.useEffect(() => {
|
|
126
|
-
let
|
|
127
|
-
g.forEach((
|
|
128
|
-
|
|
126
|
+
let v = [];
|
|
127
|
+
g.forEach((B) => {
|
|
128
|
+
B.hasOwnProperty("props") && B.props.complete === !0 && v.push(B), q(v);
|
|
129
129
|
});
|
|
130
130
|
}, []), n && g && console.warn(
|
|
131
131
|
[
|
|
@@ -133,49 +133,49 @@ function q({
|
|
|
133
133
|
"The progress will be determined by how many nested ProgressBarStep components have the completed prop."
|
|
134
134
|
].join(" ")
|
|
135
135
|
);
|
|
136
|
-
const
|
|
137
|
-
disabled:
|
|
138
|
-
barCompleted:
|
|
139
|
-
progressColor:
|
|
140
|
-
}) :
|
|
141
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
136
|
+
const O = e.Children.map(o, (v) => e.isValidElement(v) ? e.cloneElement(v, {
|
|
137
|
+
disabled: t,
|
|
138
|
+
barCompleted: w.length === g.length,
|
|
139
|
+
progressColor: i
|
|
140
|
+
}) : v);
|
|
141
|
+
return /* @__PURE__ */ e.createElement("div", { className: E(H, s), ...h }, /* @__PURE__ */ e.createElement("div", { className: U }, p && /* @__PURE__ */ e.createElement("div", { className: Y }, /* @__PURE__ */ e.createElement("div", { className: J }, p), g.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, _ === !0 && /* @__PURE__ */ e.createElement(
|
|
142
142
|
"div",
|
|
143
143
|
{
|
|
144
144
|
className: Z({
|
|
145
|
-
barCompleted:
|
|
146
|
-
disabled:
|
|
147
|
-
color:
|
|
145
|
+
barCompleted: w.length === g.length,
|
|
146
|
+
disabled: t,
|
|
147
|
+
color: i
|
|
148
148
|
})
|
|
149
149
|
},
|
|
150
|
-
`${
|
|
150
|
+
`${w.length} of ${g.length} Complete`
|
|
151
151
|
)) : /* @__PURE__ */ e.createElement(
|
|
152
152
|
"div",
|
|
153
153
|
{
|
|
154
154
|
className: K({
|
|
155
155
|
completed: n === 1,
|
|
156
|
-
disabled:
|
|
157
|
-
color:
|
|
156
|
+
disabled: t,
|
|
157
|
+
color: i
|
|
158
158
|
})
|
|
159
159
|
},
|
|
160
160
|
`${Math.floor(n * 100)}%`
|
|
161
161
|
)), g.length > 0 ? /* @__PURE__ */ e.createElement(
|
|
162
162
|
"ul",
|
|
163
163
|
{
|
|
164
|
-
className:
|
|
164
|
+
className: E(
|
|
165
165
|
X({
|
|
166
|
-
barCompleted:
|
|
167
|
-
disabled:
|
|
168
|
-
color:
|
|
166
|
+
barCompleted: w.length === g.length,
|
|
167
|
+
disabled: t,
|
|
168
|
+
color: i
|
|
169
169
|
}),
|
|
170
170
|
"d-flex align-items-center list-unstyled mb-0"
|
|
171
171
|
)
|
|
172
172
|
},
|
|
173
|
-
|
|
173
|
+
O
|
|
174
174
|
) : /* @__PURE__ */ e.createElement(
|
|
175
175
|
"div",
|
|
176
176
|
{
|
|
177
177
|
className: $({
|
|
178
|
-
disabled:
|
|
178
|
+
disabled: t
|
|
179
179
|
})
|
|
180
180
|
},
|
|
181
181
|
/* @__PURE__ */ e.createElement(
|
|
@@ -183,23 +183,23 @@ function q({
|
|
|
183
183
|
{
|
|
184
184
|
className: z({
|
|
185
185
|
completed: n === 1,
|
|
186
|
-
disabled:
|
|
187
|
-
color:
|
|
186
|
+
disabled: t,
|
|
187
|
+
color: i
|
|
188
188
|
}),
|
|
189
189
|
style: { width: `${n * 100}%` }
|
|
190
190
|
}
|
|
191
191
|
)
|
|
192
|
-
),
|
|
192
|
+
), a && /* @__PURE__ */ e.createElement("div", { className: W }, a)), l && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement(
|
|
193
193
|
R,
|
|
194
194
|
{
|
|
195
195
|
kind: "icon",
|
|
196
196
|
icon: "x",
|
|
197
|
-
onClick:
|
|
198
|
-
title:
|
|
197
|
+
onClick: l,
|
|
198
|
+
title: P("design-system:progressBar.closeButtonTitle")
|
|
199
199
|
}
|
|
200
200
|
)));
|
|
201
201
|
}
|
|
202
|
-
|
|
202
|
+
b.set(T, {
|
|
203
203
|
name: "Progress Bar",
|
|
204
204
|
props: {
|
|
205
205
|
detail: { type: "string" },
|
|
@@ -210,47 +210,47 @@ v.set(q, {
|
|
|
210
210
|
}
|
|
211
211
|
});
|
|
212
212
|
function ee({
|
|
213
|
-
className:
|
|
214
|
-
size:
|
|
215
|
-
progress:
|
|
216
|
-
...
|
|
213
|
+
className: s,
|
|
214
|
+
size: o = "sm",
|
|
215
|
+
progress: a = 0,
|
|
216
|
+
...t
|
|
217
217
|
}) {
|
|
218
|
-
const n =
|
|
219
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
218
|
+
const n = c.component["progress-ring"][o] - 4, p = n * 2 * Math.PI, _ = p - a / 100 * p;
|
|
219
|
+
return /* @__PURE__ */ e.createElement("div", { className: s, ...t }, /* @__PURE__ */ e.createElement(
|
|
220
220
|
"svg",
|
|
221
221
|
{
|
|
222
|
-
height:
|
|
223
|
-
width:
|
|
222
|
+
height: c.component["progress-ring"][o] * 2,
|
|
223
|
+
width: c.component["progress-ring"][o] * 2,
|
|
224
224
|
style: { transform: "rotate(-90deg)" }
|
|
225
225
|
},
|
|
226
226
|
/* @__PURE__ */ e.createElement(
|
|
227
227
|
"circle",
|
|
228
228
|
{
|
|
229
|
-
stroke:
|
|
229
|
+
stroke: c.color.grey["medium-light"],
|
|
230
230
|
fill: "transparent",
|
|
231
231
|
strokeWidth: 4,
|
|
232
232
|
strokeDasharray: `${p} ${p}`,
|
|
233
233
|
r: n,
|
|
234
|
-
cx:
|
|
235
|
-
cy:
|
|
234
|
+
cx: c.component["progress-ring"][o],
|
|
235
|
+
cy: c.component["progress-ring"][o]
|
|
236
236
|
}
|
|
237
237
|
),
|
|
238
238
|
/* @__PURE__ */ e.createElement(
|
|
239
239
|
"circle",
|
|
240
240
|
{
|
|
241
|
-
stroke:
|
|
241
|
+
stroke: c.color.purple.medium,
|
|
242
242
|
fill: "transparent",
|
|
243
243
|
strokeWidth: 4,
|
|
244
244
|
strokeDasharray: `${p} ${p}`,
|
|
245
|
-
style: { strokeDashoffset:
|
|
245
|
+
style: { strokeDashoffset: _ },
|
|
246
246
|
r: n,
|
|
247
|
-
cx:
|
|
248
|
-
cy:
|
|
247
|
+
cx: c.component["progress-ring"][o],
|
|
248
|
+
cy: c.component["progress-ring"][o]
|
|
249
249
|
}
|
|
250
250
|
)
|
|
251
251
|
));
|
|
252
252
|
}
|
|
253
|
-
|
|
253
|
+
b.set(ee, {
|
|
254
254
|
name: "Progress Ring",
|
|
255
255
|
props: {
|
|
256
256
|
size: { type: '"sm" | "md" | "lg"', default: '"sm"' },
|
|
@@ -259,7 +259,7 @@ v.set(ee, {
|
|
|
259
259
|
});
|
|
260
260
|
const re = {
|
|
261
261
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),
|
|
262
|
-
components: [
|
|
262
|
+
components: [T, S],
|
|
263
263
|
examples: {
|
|
264
264
|
general: {
|
|
265
265
|
label: "General Usage",
|
|
@@ -274,11 +274,11 @@ const re = {
|
|
|
274
274
|
alt: "A Progress Bar with labels on each section",
|
|
275
275
|
className: "w-100 mb-3"
|
|
276
276
|
}
|
|
277
|
-
), /* @__PURE__ */ e.createElement(
|
|
277
|
+
), /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(k, null, /* @__PURE__ */ e.createElement(m, null, "Section"), /* @__PURE__ */ e.createElement(m, null, "Content Type"), /* @__PURE__ */ e.createElement(m, null, "Required"), /* @__PURE__ */ e.createElement(m, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Clear Button"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "If the process requires the option to be cancelled or removed from a list the clear button can be used.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Progress Details"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),
|
|
278
278
|
examples: {
|
|
279
279
|
standard: {
|
|
280
280
|
description: () => /* @__PURE__ */ e.createElement("p", null, "The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),
|
|
281
|
-
react:
|
|
281
|
+
react: u`
|
|
282
282
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
283
283
|
import { Card } from "@sps-woodland/cards";
|
|
284
284
|
|
|
@@ -302,7 +302,7 @@ const re = {
|
|
|
302
302
|
},
|
|
303
303
|
completed: {
|
|
304
304
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),
|
|
305
|
-
react:
|
|
305
|
+
react: u`
|
|
306
306
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
307
307
|
import { Card } from "@sps-woodland/cards";
|
|
308
308
|
|
|
@@ -321,7 +321,7 @@ const re = {
|
|
|
321
321
|
},
|
|
322
322
|
disabled: {
|
|
323
323
|
description: () => /* @__PURE__ */ e.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),
|
|
324
|
-
react:
|
|
324
|
+
react: u`
|
|
325
325
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
326
326
|
import { Card } from "@sps-woodland/cards";
|
|
327
327
|
|
|
@@ -355,11 +355,11 @@ const re = {
|
|
|
355
355
|
alt: "A Progress Bar with labels on each section",
|
|
356
356
|
className: "w-100 mb-3"
|
|
357
357
|
}
|
|
358
|
-
), /* @__PURE__ */ e.createElement(
|
|
358
|
+
), /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(k, null, /* @__PURE__ */ e.createElement(m, null, "Section"), /* @__PURE__ */ e.createElement(m, null, "Content Type"), /* @__PURE__ */ e.createElement(m, null, "Required"), /* @__PURE__ */ e.createElement(m, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Step icons"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Icons can be set inside of steps for visual emphasis.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Step Tooltips"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),
|
|
359
359
|
examples: {
|
|
360
360
|
standard: {
|
|
361
361
|
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Building Stepped Progress Bars"), /* @__PURE__ */ e.createElement("p", null, "The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),
|
|
362
|
-
react:
|
|
362
|
+
react: u`
|
|
363
363
|
import { Card } from "@sps-woodland/cards";
|
|
364
364
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
365
365
|
|
|
@@ -405,7 +405,7 @@ const re = {
|
|
|
405
405
|
},
|
|
406
406
|
color: {
|
|
407
407
|
description: () => /* @__PURE__ */ e.createElement("h4", null, "Alternate Color"),
|
|
408
|
-
react:
|
|
408
|
+
react: u`
|
|
409
409
|
import { Card } from "@sps-woodland/cards";
|
|
410
410
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
411
411
|
|
|
@@ -448,7 +448,7 @@ const re = {
|
|
|
448
448
|
},
|
|
449
449
|
skippedSteps: {
|
|
450
450
|
description: () => /* @__PURE__ */ e.createElement("h4", null, "Skip steps"),
|
|
451
|
-
react:
|
|
451
|
+
react: u`
|
|
452
452
|
import { Card } from "@sps-woodland/cards";
|
|
453
453
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
454
454
|
|
|
@@ -479,7 +479,7 @@ const re = {
|
|
|
479
479
|
},
|
|
480
480
|
completed: {
|
|
481
481
|
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Completed State"), /* @__PURE__ */ e.createElement("p", null, "Once complete, the progress bar appears in green.")),
|
|
482
|
-
react:
|
|
482
|
+
react: u`
|
|
483
483
|
import { Card } from "@sps-woodland/cards";
|
|
484
484
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
485
485
|
|
|
@@ -524,7 +524,7 @@ const re = {
|
|
|
524
524
|
},
|
|
525
525
|
disabled: {
|
|
526
526
|
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Disabled State"), /* @__PURE__ */ e.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),
|
|
527
|
-
react:
|
|
527
|
+
react: u`
|
|
528
528
|
import { Card } from "@sps-woodland/cards";
|
|
529
529
|
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
530
530
|
|
|
@@ -560,7 +560,7 @@ const re = {
|
|
|
560
560
|
};
|
|
561
561
|
export {
|
|
562
562
|
ne as MANIFEST,
|
|
563
|
-
|
|
564
|
-
|
|
563
|
+
T as ProgressBar,
|
|
564
|
+
S as ProgressBarStep,
|
|
565
565
|
ee as ProgressRing
|
|
566
566
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme0{align-items:center;display:flex}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme1{flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme6{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qme8{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmea{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeb{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmec{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmed{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmee{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeg{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmej{background-color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmel{background-color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmen{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmen:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeo{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeo:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmep{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmep:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeq{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmeq:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmer{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmer:hover{background:#1f282c}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmes{background-color:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go0{font-weight:600}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go1{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go3{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go5{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go6{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go7{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go8{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go9{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goh{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goj{display:block}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gok{color:#fff}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gol{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0gom:only-child{border-radius:.5rem}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goy{background:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0goz{background:#0b8940}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go10{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go11{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go11:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go12{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go12:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go13{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go13:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go14{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go14:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go15{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_18_0__hash_17lj0go15:hover{background:#1f282c}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/progress-indicators",
|
|
3
3
|
"description": "SPS Woodland Design System progress indicator components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.18.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tokens": "8.
|
|
35
|
-
"@spscommerce/ds-react": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.18.0",
|
|
33
|
+
"@sps-woodland/core": "8.18.0",
|
|
34
|
+
"@sps-woodland/tokens": "8.18.0",
|
|
35
|
+
"@spscommerce/ds-react": "8.18.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
41
41
|
"react": "^16.9.0",
|
|
42
42
|
"react-dom": "^16.9.0",
|
|
43
|
-
"@sps-woodland/buttons": "8.
|
|
44
|
-
"@sps-woodland/core": "8.
|
|
45
|
-
"@sps-woodland/tokens": "8.
|
|
46
|
-
"@spscommerce/ds-react": "8.
|
|
43
|
+
"@sps-woodland/buttons": "8.18.0",
|
|
44
|
+
"@sps-woodland/core": "8.18.0",
|
|
45
|
+
"@sps-woodland/tokens": "8.18.0",
|
|
46
|
+
"@spscommerce/ds-react": "8.18.0"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import path from "path";
|
|
2
2
|
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
3
|
import { defineConfig } from "vite";
|
|
4
|
-
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
5
|
import pkg from "./package.json";
|
|
6
6
|
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
8
|
+
|
|
7
9
|
export default defineConfig({
|
|
8
|
-
plugins: [
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
9
18
|
build: {
|
|
10
19
|
lib: {
|
|
11
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|