@spscommerce/ds-react 5.20.4 → 5.20.5

package/lib/index.cjs.js

@@ -8273,7 +8273,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         </SpsWfStep>
                     </SpsWf>
                 </div>
-            `}}}},G_={illustration:"string",artwork:{type:"string",deprecated:!0},heading:{type:"string",required:!0},subHeading:"string"},U_=$(I({},q),{illustration:T.exports.string,artwork:T.exports.string,heading:T.exports.string.isRequired,subHeading:T.exports.string});function Ol(e){const g=e,{artwork:t,children:n,className:a,heading:o,illustration:i,subHeading:l,"data-testid":c,unsafelyReplaceClassName:p}=g,u=Z(g,["artwork","children","className","heading","illustration","subHeading","data-testid","unsafelyReplaceClassName"]),f=i||t||Bc.SpsIllustrations.Large.BUILDING,m=A(p||"sps-zero-state",a);return s.createElement("div",{className:"sps-card__body","data-testid":`${c}`},s.createElement("div",I({className:m,"data-testid":`${c}__actual-zero-state`},u),s.createElement("img",{className:"sps-zero-state__image",src:f,alt:"","data-testid":`${c}__artwork`}),s.createElement("h1",{className:"sps-zero-state__heading","data-testid":`${c}__heading`},o),s.createElement("h2",{className:"sps-zero-state__subheading","data-testid":`${c}__subheading`},l),s.createElement("div",{className:"sps-zero-state__content","data-testid":`${c}__content`},n)))}Object.assign(Ol,{props:G_,propTypes:U_,displayName:"SpsZeroState"});const z_={illustration:"string",icon:{type:"SpsIcon",deprecated:!0},heading:"ReactNodeOrRenderFn",subHeading:"ReactNodeOrRenderFn"},q_=$(I({},q),{illustration:T.exports.string,icon:be(M.SpsIcon),heading:Nt,subHeading:Nt});function Rl(e){const f=e,{className:t,heading:n,icon:a,illustration:o=Bc.SpsIllustrations.Small.BUILDING,subHeading:i,"data-testid":l,unsafelyReplaceClassName:c}=f,p=Z(f,["className","heading","icon","illustration","subHeading","data-testid","unsafelyReplaceClassName"]),u=A(c||"sps-zero-state","sps-zero-state--micro",t);return s.createElement("div",I({className:u,"data-testid":`${l}__actual-micro-zero-state`},p),a?s.createElement("i",{className:`sps-icon sps-icon-${a}`,"aria-hidden":"true","data-testid":`${l}__icon`}):s.createElement("img",{style:{height:"3rem"},src:o}),n&&s.createElement("h1",{className:"sps-zero-state__heading","data-testid":`${l}__heading`},n),i&&s.createElement("h2",{className:"sps-zero-state__subheading","data-testid":`${l}__subheading`},i))}Object.assign(Rl,{props:z_,propTypes:q_,displayName:"SpsMicroZeroState"});const mh={sizes:{label:"Sizes",customSection:()=>s.createElement("section",{id:"zero-states-sizes"},s.createElement("div",{className:"flex-color-header"},s.createElement("h4",null,"Sizes"),s.createElement(Ge,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:M.ButtonKind.LINK},"Back to Top")),s.createElement("h5",{className:"mb-3"},"There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."),s.createElement("h4",null,"Large Zero States"),s.createElement("h5",{className:"mb-3"},"Use Large Zero States in primary or large areas of a page."),s.createElement("h4",null,"Small Zero States"),s.createElement("h5",{className:"mb-0"},"Use Small Zero States in a secondary or small areas of a page."))},regular:{label:"Usage: Large Zero States",description:({NavigateTo:e})=>s.createElement("span",{className:"sps-body-14 mt-4"},"Large Zero States may be accompanied by other components such as Headings, Subtitles, ",s.createElement(e,{to:"Button"},"Buttons"),","," ",s.createElement(e,{to:"List Toolbar"},"Search Bars"),", or a combination of these"),examples:{illustrationAndHeading:{description:"Illustration + Heading",jsx:x.code`
+            `}}}},G_={illustration:"string",artwork:{type:"string",deprecated:!0},heading:{type:"string",required:!0},subHeading:"string"},U_=$(I({},q),{illustration:T.exports.string,artwork:T.exports.string,heading:T.exports.string.isRequired,subHeading:T.exports.string});function Ol(e){const g=e,{artwork:t,children:n,className:a,heading:o,illustration:i,subHeading:l,"data-testid":c,unsafelyReplaceClassName:p}=g,u=Z(g,["artwork","children","className","heading","illustration","subHeading","data-testid","unsafelyReplaceClassName"]),f=i||t||Bc.SpsIllustrations.Large.BUILDING,m=A(p||"sps-zero-state",a);return s.createElement("div",{className:"sps-card__body","data-testid":`${c}`},s.createElement("div",I({className:m,"data-testid":`${c}__actual-zero-state`},u),s.createElement("img",{className:"sps-zero-state__image",src:f,alt:"","data-testid":`${c}__artwork`}),s.createElement("h1",{className:"sps-zero-state__heading","data-testid":`${c}__heading`},o),s.createElement("h2",{className:"sps-zero-state__subheading","data-testid":`${c}__subheading`},l),s.createElement("div",{className:"sps-zero-state__content","data-testid":`${c}__content`},n)))}Object.assign(Ol,{props:G_,propTypes:U_,displayName:"SpsZeroState"});const z_={illustration:"string",icon:{type:"SpsIcon",deprecated:!0},heading:"ReactNodeOrRenderFn",subHeading:"ReactNodeOrRenderFn"},q_=$(I({},q),{illustration:T.exports.string,icon:be(M.SpsIcon),heading:Nt,subHeading:Nt});function Rl(e){const f=e,{className:t,heading:n,icon:a,illustration:o=Bc.SpsIllustrations.Small.BUILDING,subHeading:i,"data-testid":l,unsafelyReplaceClassName:c}=f,p=Z(f,["className","heading","icon","illustration","subHeading","data-testid","unsafelyReplaceClassName"]),u=A(c||"sps-zero-state","sps-zero-state--micro",t);return s.createElement("div",I({className:u,"data-testid":`${l}__actual-micro-zero-state`},p),a?s.createElement("i",{className:`sps-zero-state__icon sps-icon sps-icon-${a}`,"aria-hidden":"true","data-testid":`${l}__icon`}):s.createElement("img",{style:{height:"3rem"},src:o}),n&&s.createElement("h1",{className:"sps-zero-state__heading","data-testid":`${l}__heading`},n),i&&s.createElement("h2",{className:"sps-zero-state__subheading","data-testid":`${l}__subheading`},i))}Object.assign(Rl,{props:z_,propTypes:q_,displayName:"SpsMicroZeroState"});const mh={sizes:{label:"Sizes",customSection:()=>s.createElement("section",{id:"zero-states-sizes"},s.createElement("div",{className:"flex-color-header"},s.createElement("h4",null,"Sizes"),s.createElement(Ge,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:M.ButtonKind.LINK},"Back to Top")),s.createElement("h5",{className:"mb-3"},"There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."),s.createElement("h4",null,"Large Zero States"),s.createElement("h5",{className:"mb-3"},"Use Large Zero States in primary or large areas of a page."),s.createElement("h4",null,"Small Zero States"),s.createElement("h5",{className:"mb-0"},"Use Small Zero States in a secondary or small areas of a page."))},regular:{label:"Usage: Large Zero States",description:({NavigateTo:e})=>s.createElement("span",{className:"sps-body-14 mt-4"},"Large Zero States may be accompanied by other components such as Headings, Subtitles, ",s.createElement(e,{to:"Button"},"Buttons"),","," ",s.createElement(e,{to:"List Toolbar"},"Search Bars"),", or a combination of these"),examples:{illustrationAndHeading:{description:"Illustration + Heading",jsx:x.code`
 <SpsCard>
   <SpsZeroState
     heading="Search for a record"

package/lib/index.es.js

@@ -36353,7 +36353,7 @@ function SpsMicroZeroState(props2) {
     className: classes,
     "data-testid": `${testId}__actual-micro-zero-state`
   }, rest), icon ? /* @__PURE__ */ React.createElement("i", {
-    className: `sps-icon sps-icon-${icon}`,
+    className: `sps-zero-state__icon sps-icon sps-icon-${icon}`,
     "aria-hidden": "true",
     "data-testid": `${testId}__icon`
   }) : /* @__PURE__ */ React.createElement("img", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.20.4",
+  "version": "5.20.5",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.4",
-    "@spscommerce/ds-illustrations": "5.20.4",
-    "@spscommerce/ds-shared": "5.20.4",
-    "@spscommerce/positioning": "5.20.4",
-    "@spscommerce/utils": "5.20.4",
+    "@spscommerce/ds-colors": "5.20.5",
+    "@spscommerce/ds-illustrations": "5.20.5",
+    "@spscommerce/ds-shared": "5.20.5",
+    "@spscommerce/positioning": "5.20.5",
+    "@spscommerce/utils": "5.20.5",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.20.4",
-    "@spscommerce/ds-illustrations": "5.20.4",
-    "@spscommerce/ds-shared": "5.20.4",
-    "@spscommerce/positioning": "5.20.4",
-    "@spscommerce/utils": "5.20.4",
+    "@spscommerce/ds-colors": "5.20.5",
+    "@spscommerce/ds-illustrations": "5.20.5",
+    "@spscommerce/ds-shared": "5.20.5",
+    "@spscommerce/positioning": "5.20.5",
+    "@spscommerce/utils": "5.20.5",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",