@sps-woodland/zero-state 7.5.0 → 7.5.2
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/ZeroState.d.ts +2 -2
- package/lib/index.cjs.js +2 -2
- package/lib/index.es.js +68 -68
- package/package.json +7 -7
package/lib/ZeroState.d.ts
CHANGED
|
@@ -3,9 +3,9 @@ import type { ComponentProps } from "@sps-woodland/core";
|
|
|
3
3
|
import { IconName } from "@sps-woodland/tokens";
|
|
4
4
|
export declare function ZeroState({ artwork, heading, illustration, subHeading, micro, children, className, icon, ...rest }: ComponentProps<{
|
|
5
5
|
artwork?: string;
|
|
6
|
-
heading?: string;
|
|
6
|
+
heading?: string | React.ReactNode | (() => React.ReactNode);
|
|
7
7
|
illustration?: string;
|
|
8
|
-
subHeading?: string;
|
|
8
|
+
subHeading?: string | React.ReactNode | (() => React.ReactNode);
|
|
9
9
|
micro?: boolean;
|
|
10
10
|
icon?: IconName;
|
|
11
11
|
}, HTMLDivElement>): React.ReactElement;
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react"),d=require("@sps-woodland/core"),v=require("@sps-woodland/illustrations"),s=require("@spscommerce/utils"),S=require("@sps-woodland/tokens");function w(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=w(C);function y(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function g(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function b(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?g(Object(t),!0).forEach(function(r){y(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var I=(e,a,t)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=a[r])!==null&&n!==void 0?n:t[r]))return!1}return!0},p=e=>a=>{var t=e.defaultClassName,r=b(b({},e.defaultVariants),a);for(var n in r){var i,c=(i=r[n])!==null&&i!==void 0?i:e.defaultVariants[n];if(c!=null){var l=c;typeof l=="boolean"&&(l=l===!0?"true":"false");var u=e.variantClassNames[n][l];u&&(t+=" "+u)}}for(var[m,h]of e.compoundVariants)I(m,r,e.defaultVariants)&&(t+=" "+h);return t},E="jrytnlc",N=p({defaultClassName:"jrytnl3",variantClassNames:{micro:{true:"jrytnl4",false:"jrytnl5"}},defaultVariants:{micro:!1},compoundVariants:[]}),Z="jrytnlb",O=p({defaultClassName:"jrytnl7",variantClassNames:{micro:{true:"jrytnl8",false:"jrytnl9"}},defaultVariants:{micro:!1},compoundVariants:[]}),A="jrytnl6",H="jrytnla",j=p({defaultClassName:"jrytnl0",variantClassNames:{micro:{true:"jrytnl1",false:"jrytnl2"}},defaultVariants:{},compoundVariants:[]});function f({artwork:e,heading:a,illustration:t,subHeading:r,micro:n=!1,children:i,className:c,icon:l,...u}){const m=t||e||v.Illustrations.Large.BUILDING;return o.createElement("div",{className:j({micro:n})},o.createElement("div",{className:d.cl(N({micro:n}),c),...u},n?o.createElement(o.Fragment,null,l?o.createElement(d.Icon,{className:E,icon:l,"aria-hidden":"true"}):o.createElement("img",{style:{height:"3rem"},src:m})):o.createElement("img",{className:A,src:m,alt:""}),a&&(typeof a=="string"?o.createElement("h1",{className:O({micro:n})},a):d.contentOf(a)),r&&(typeof r=="string"?o.createElement("h2",{className:H},r):d.contentOf(r)),o.createElement("div",{className:Z},i)))}d.Metadata.set(f,{name:"ZeroState",props:{artwork:{type:"string"},heading:{type:"string | ReactNodeOrRenderFn"},illustration:{type:"string"},subHeading:{type:"string | ReactNodeOrRenderFn"},micro:{type:"boolean",default:"false"}}});const R={description:()=>o.createElement("p",null,"Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page."),components:[f],examples:{general:{label:"Sizes",description:()=>o.createElement(o.Fragment,null,o.createElement("h5",{className:S.sprinkles({mb:"md"})},"There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."),o.createElement("h4",null,"Large Zero States"),o.createElement("h5",{className:S.sprinkles({mb:"md"})},"Use Large Zero States in primary or large areas of a page."),o.createElement("h4",null,"Small Zero States"),o.createElement("h5",null,"Use Small Zero States in secondary or small areas of a page."))},regular:{label:"Usage: Large Zero States",description:({NavigateTo:e})=>o.createElement("p",null,"Large Zero States may be accompanied by other components such as Headings, Subtitles,"," ",o.createElement(e,{to:"Button"},"Buttons"),","," ",o.createElement(e,{to:"List Toolbar"},"Search Bars"),", or a combination of these"),examples:{illustrationAndHeading:{description:"Illustration + Heading",react:s.code`
|
|
2
2
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
3
3
|
import { Card } from "@sps-woodland/cards";
|
|
4
4
|
import { Illustrations } from "@sps-woodland/core";
|
|
@@ -166,4 +166,4 @@
|
|
|
166
166
|
</div>
|
|
167
167
|
);
|
|
168
168
|
}
|
|
169
|
-
`}}}}},
|
|
169
|
+
`}}}}},B={"Zero States":R};exports.MANIFEST=B;exports.ZeroState=f;
|
package/lib/index.es.js
CHANGED
|
@@ -1,122 +1,122 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { Metadata as b, cl as
|
|
3
|
-
import { Illustrations as
|
|
1
|
+
import * as r from "react";
|
|
2
|
+
import { Metadata as b, cl as v, Icon as w, contentOf as u } from "@sps-woodland/core";
|
|
3
|
+
import { Illustrations as I } from "@sps-woodland/illustrations";
|
|
4
4
|
import { code as s } from "@spscommerce/utils";
|
|
5
|
-
import { sprinkles as
|
|
6
|
-
function
|
|
7
|
-
return
|
|
8
|
-
value:
|
|
5
|
+
import { sprinkles as f } from "@sps-woodland/tokens";
|
|
6
|
+
function y(e, a, o) {
|
|
7
|
+
return a in e ? Object.defineProperty(e, a, {
|
|
8
|
+
value: o,
|
|
9
9
|
enumerable: !0,
|
|
10
10
|
configurable: !0,
|
|
11
11
|
writable: !0
|
|
12
|
-
}) : e[
|
|
12
|
+
}) : e[a] = o, e;
|
|
13
13
|
}
|
|
14
|
-
function
|
|
15
|
-
var
|
|
14
|
+
function S(e, a) {
|
|
15
|
+
var o = Object.keys(e);
|
|
16
16
|
if (Object.getOwnPropertySymbols) {
|
|
17
|
-
var
|
|
18
|
-
|
|
17
|
+
var t = Object.getOwnPropertySymbols(e);
|
|
18
|
+
a && (t = t.filter(function(n) {
|
|
19
19
|
return Object.getOwnPropertyDescriptor(e, n).enumerable;
|
|
20
|
-
})),
|
|
20
|
+
})), o.push.apply(o, t);
|
|
21
21
|
}
|
|
22
|
-
return
|
|
22
|
+
return o;
|
|
23
23
|
}
|
|
24
|
-
function
|
|
25
|
-
for (var
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(
|
|
30
|
-
Object.defineProperty(e,
|
|
24
|
+
function g(e) {
|
|
25
|
+
for (var a = 1; a < arguments.length; a++) {
|
|
26
|
+
var o = arguments[a] != null ? arguments[a] : {};
|
|
27
|
+
a % 2 ? S(Object(o), !0).forEach(function(t) {
|
|
28
|
+
y(e, t, o[t]);
|
|
29
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : S(Object(o)).forEach(function(t) {
|
|
30
|
+
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(o, t));
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
return e;
|
|
34
34
|
}
|
|
35
|
-
var E = (e,
|
|
36
|
-
for (var
|
|
35
|
+
var E = (e, a, o) => {
|
|
36
|
+
for (var t of Object.keys(e)) {
|
|
37
37
|
var n;
|
|
38
|
-
if (e[
|
|
38
|
+
if (e[t] !== ((n = a[t]) !== null && n !== void 0 ? n : o[t]))
|
|
39
39
|
return !1;
|
|
40
40
|
}
|
|
41
41
|
return !0;
|
|
42
|
-
},
|
|
43
|
-
var
|
|
44
|
-
for (var n in
|
|
45
|
-
var i, d = (i =
|
|
42
|
+
}, p = (e) => (a) => {
|
|
43
|
+
var o = e.defaultClassName, t = g(g({}, e.defaultVariants), a);
|
|
44
|
+
for (var n in t) {
|
|
45
|
+
var i, d = (i = t[n]) !== null && i !== void 0 ? i : e.defaultVariants[n];
|
|
46
46
|
if (d != null) {
|
|
47
47
|
var l = d;
|
|
48
48
|
typeof l == "boolean" && (l = l === !0 ? "true" : "false");
|
|
49
49
|
var m = e.variantClassNames[n][l];
|
|
50
|
-
m && (
|
|
50
|
+
m && (o += " " + m);
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
for (var [c,
|
|
54
|
-
E(c,
|
|
55
|
-
return
|
|
56
|
-
},
|
|
57
|
-
function
|
|
53
|
+
for (var [c, C] of e.compoundVariants)
|
|
54
|
+
E(c, t, e.defaultVariants) && (o += " " + C);
|
|
55
|
+
return o;
|
|
56
|
+
}, Z = "jrytnlc", N = p({ defaultClassName: "jrytnl3", variantClassNames: { micro: { true: "jrytnl4", false: "jrytnl5" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), A = "jrytnlb", H = p({ defaultClassName: "jrytnl7", variantClassNames: { micro: { true: "jrytnl8", false: "jrytnl9" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), R = "jrytnl6", B = "jrytnla", O = p({ defaultClassName: "jrytnl0", variantClassNames: { micro: { true: "jrytnl1", false: "jrytnl2" } }, defaultVariants: {}, compoundVariants: [] });
|
|
57
|
+
function h({
|
|
58
58
|
artwork: e,
|
|
59
|
-
heading:
|
|
60
|
-
illustration:
|
|
61
|
-
subHeading:
|
|
59
|
+
heading: a,
|
|
60
|
+
illustration: o,
|
|
61
|
+
subHeading: t,
|
|
62
62
|
micro: n = !1,
|
|
63
63
|
children: i,
|
|
64
64
|
className: d,
|
|
65
65
|
icon: l,
|
|
66
66
|
...m
|
|
67
67
|
}) {
|
|
68
|
-
const c =
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
className:
|
|
71
|
-
}, /* @__PURE__ */
|
|
72
|
-
className:
|
|
68
|
+
const c = o || e || I.Large.BUILDING;
|
|
69
|
+
return /* @__PURE__ */ r.createElement("div", {
|
|
70
|
+
className: O({ micro: n })
|
|
71
|
+
}, /* @__PURE__ */ r.createElement("div", {
|
|
72
|
+
className: v(N({ micro: n }), d),
|
|
73
73
|
...m
|
|
74
|
-
}, n ? /* @__PURE__ */
|
|
75
|
-
className:
|
|
74
|
+
}, n ? /* @__PURE__ */ r.createElement(r.Fragment, null, l ? /* @__PURE__ */ r.createElement(w, {
|
|
75
|
+
className: Z,
|
|
76
76
|
icon: l,
|
|
77
77
|
"aria-hidden": "true"
|
|
78
|
-
}) : /* @__PURE__ */
|
|
78
|
+
}) : /* @__PURE__ */ r.createElement("img", {
|
|
79
79
|
style: { height: "3rem" },
|
|
80
80
|
src: c
|
|
81
|
-
})) : /* @__PURE__ */
|
|
82
|
-
className:
|
|
81
|
+
})) : /* @__PURE__ */ r.createElement("img", {
|
|
82
|
+
className: R,
|
|
83
83
|
src: c,
|
|
84
84
|
alt: ""
|
|
85
|
-
}), /* @__PURE__ */
|
|
85
|
+
}), a && (typeof a == "string" ? /* @__PURE__ */ r.createElement("h1", {
|
|
86
86
|
className: H({ micro: n })
|
|
87
|
-
},
|
|
87
|
+
}, a) : u(a)), t && (typeof t == "string" ? /* @__PURE__ */ r.createElement("h2", {
|
|
88
88
|
className: B
|
|
89
|
-
},
|
|
90
|
-
className:
|
|
89
|
+
}, t) : u(t)), /* @__PURE__ */ r.createElement("div", {
|
|
90
|
+
className: A
|
|
91
91
|
}, i)));
|
|
92
92
|
}
|
|
93
|
-
b.set(
|
|
93
|
+
b.set(h, {
|
|
94
94
|
name: "ZeroState",
|
|
95
95
|
props: {
|
|
96
96
|
artwork: { type: "string" },
|
|
97
|
-
heading: { type: "string" },
|
|
97
|
+
heading: { type: "string | ReactNodeOrRenderFn" },
|
|
98
98
|
illustration: { type: "string" },
|
|
99
|
-
subHeading: { type: "string" },
|
|
99
|
+
subHeading: { type: "string | ReactNodeOrRenderFn" },
|
|
100
100
|
micro: { type: "boolean", default: "false" }
|
|
101
101
|
}
|
|
102
102
|
});
|
|
103
|
-
const
|
|
104
|
-
description: () => /* @__PURE__ */
|
|
105
|
-
components: [
|
|
103
|
+
const j = {
|
|
104
|
+
description: () => /* @__PURE__ */ r.createElement("p", null, "Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page."),
|
|
105
|
+
components: [h],
|
|
106
106
|
examples: {
|
|
107
107
|
general: {
|
|
108
108
|
label: "Sizes",
|
|
109
|
-
description: () => /* @__PURE__ */
|
|
110
|
-
className:
|
|
111
|
-
}, "There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."), /* @__PURE__ */
|
|
112
|
-
className:
|
|
113
|
-
}, "Use Large Zero States in primary or large areas of a page."), /* @__PURE__ */
|
|
109
|
+
description: () => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("h5", {
|
|
110
|
+
className: f({ mb: "md" })
|
|
111
|
+
}, "There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."), /* @__PURE__ */ r.createElement("h4", null, "Large Zero States"), /* @__PURE__ */ r.createElement("h5", {
|
|
112
|
+
className: f({ mb: "md" })
|
|
113
|
+
}, "Use Large Zero States in primary or large areas of a page."), /* @__PURE__ */ r.createElement("h4", null, "Small Zero States"), /* @__PURE__ */ r.createElement("h5", null, "Use Small Zero States in secondary or small areas of a page."))
|
|
114
114
|
},
|
|
115
115
|
regular: {
|
|
116
116
|
label: "Usage: Large Zero States",
|
|
117
|
-
description: ({ NavigateTo: e }) => /* @__PURE__ */
|
|
117
|
+
description: ({ NavigateTo: e }) => /* @__PURE__ */ r.createElement("p", null, "Large Zero States may be accompanied by other components such as Headings, Subtitles,", " ", /* @__PURE__ */ r.createElement(e, {
|
|
118
118
|
to: "Button"
|
|
119
|
-
}, "Buttons"), ",", " ", /* @__PURE__ */
|
|
119
|
+
}, "Buttons"), ",", " ", /* @__PURE__ */ r.createElement(e, {
|
|
120
120
|
to: "List Toolbar"
|
|
121
121
|
}, "Search Bars"), ", or a combination of these"),
|
|
122
122
|
examples: {
|
|
@@ -329,10 +329,10 @@ const O = {
|
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
}
|
|
332
|
-
},
|
|
333
|
-
"Zero States":
|
|
332
|
+
}, F = {
|
|
333
|
+
"Zero States": j
|
|
334
334
|
};
|
|
335
335
|
export {
|
|
336
|
-
|
|
337
|
-
|
|
336
|
+
F as MANIFEST,
|
|
337
|
+
h as ZeroState
|
|
338
338
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/zero-state",
|
|
3
3
|
"description": "SPS Woodland Design System zero state component",
|
|
4
|
-
"version": "7.5.
|
|
4
|
+
"version": "7.5.2",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/zero-state",
|
|
@@ -25,17 +25,17 @@
|
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@sps-woodland/core": "7.5.
|
|
29
|
-
"@sps-woodland/illustrations": "7.5.
|
|
30
|
-
"@sps-woodland/tokens": "7.5.
|
|
28
|
+
"@sps-woodland/core": "7.5.2",
|
|
29
|
+
"@sps-woodland/illustrations": "7.5.2",
|
|
30
|
+
"@sps-woodland/tokens": "7.5.2",
|
|
31
31
|
"@spscommerce/utils": "^6.12.1",
|
|
32
32
|
"react": "^16.14.0",
|
|
33
33
|
"react-dom": "^16.14.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@sps-woodland/core": "7.5.
|
|
37
|
-
"@sps-woodland/illustrations": "7.5.
|
|
38
|
-
"@sps-woodland/tokens": "7.5.
|
|
36
|
+
"@sps-woodland/core": "7.5.2",
|
|
37
|
+
"@sps-woodland/illustrations": "7.5.2",
|
|
38
|
+
"@sps-woodland/tokens": "7.5.2",
|
|
39
39
|
"@spscommerce/utils": "^6.12.1",
|
|
40
40
|
"@vanilla-extract/css": "^1.9.3",
|
|
41
41
|
"@vanilla-extract/recipes": "^0.2.5",
|