@sps-woodland/zero-state 8.51.3 → 8.52.1
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.css.d.ts +40 -0
- package/lib/ZeroState.d.ts +11 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +100 -21
- package/lib/index.umd.cjs +9 -9
- package/lib/style.css +1 -1
- package/package.json +10 -8
- package/vite.config.mjs +13 -6
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export declare const zeroStateWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
2
|
+
micro: {
|
|
3
|
+
true: {};
|
|
4
|
+
false: {
|
|
5
|
+
padding: string;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
}>;
|
|
9
|
+
export declare const zeroState: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
10
|
+
micro: {
|
|
11
|
+
true: {
|
|
12
|
+
alignItems: "center";
|
|
13
|
+
display: "flex";
|
|
14
|
+
flexDirection: "column";
|
|
15
|
+
height: "100%";
|
|
16
|
+
justifyContent: "center";
|
|
17
|
+
width: "auto";
|
|
18
|
+
};
|
|
19
|
+
false: {};
|
|
20
|
+
};
|
|
21
|
+
}>;
|
|
22
|
+
export declare const zeroStateImage: string;
|
|
23
|
+
export declare const zeroStateHeading: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
24
|
+
micro: {
|
|
25
|
+
true: {
|
|
26
|
+
color: string;
|
|
27
|
+
fontSize: string;
|
|
28
|
+
fontWeight: number;
|
|
29
|
+
lineHeight: string;
|
|
30
|
+
};
|
|
31
|
+
false: {
|
|
32
|
+
color: string;
|
|
33
|
+
fontSize: string;
|
|
34
|
+
lineHeight: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
}>;
|
|
38
|
+
export declare const zeroStateSubheading: string;
|
|
39
|
+
export declare const zeroStateContent: string;
|
|
40
|
+
export declare const microZeroStateIcon: string;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import type { IconName } from "@sps-woodland/tokens";
|
|
4
|
+
export declare function ZeroState({ artwork, heading, illustration, subHeading, micro, children, className, icon, ...rest }: ComponentProps<{
|
|
5
|
+
artwork?: string;
|
|
6
|
+
heading?: string | React.ReactNode | (() => React.ReactNode);
|
|
7
|
+
illustration?: string;
|
|
8
|
+
subHeading?: string | React.ReactNode | (() => React.ReactNode);
|
|
9
|
+
micro?: boolean;
|
|
10
|
+
icon?: IconName;
|
|
11
|
+
}, HTMLDivElement>): React.ReactElement;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "
|
|
1
|
+
export * from "./ZeroState";
|
|
2
2
|
export * from "./manifest";
|
package/lib/index.js
CHANGED
|
@@ -1,23 +1,101 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import { code as
|
|
5
|
-
import { sprinkles as
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import * as r from "react";
|
|
2
|
+
import { Metadata as E, cl as w, Icon as A, contentOf as c } from "@sps-woodland/core";
|
|
3
|
+
import { BUILDING_LARGE as C } from "@sps-woodland/illustrations";
|
|
4
|
+
import { code as s } from "@spscommerce/utils";
|
|
5
|
+
import { sprinkles as u } from "@sps-woodland/tokens";
|
|
6
|
+
function v(e, a, o) {
|
|
7
|
+
return a in e ? Object.defineProperty(e, a, {
|
|
8
|
+
value: o,
|
|
9
|
+
enumerable: !0,
|
|
10
|
+
configurable: !0,
|
|
11
|
+
writable: !0
|
|
12
|
+
}) : e[a] = o, e;
|
|
13
|
+
}
|
|
14
|
+
function f(e, a) {
|
|
15
|
+
var o = Object.keys(e);
|
|
16
|
+
if (Object.getOwnPropertySymbols) {
|
|
17
|
+
var t = Object.getOwnPropertySymbols(e);
|
|
18
|
+
a && (t = t.filter(function(n) {
|
|
19
|
+
return Object.getOwnPropertyDescriptor(e, n).enumerable;
|
|
20
|
+
})), o.push.apply(o, t);
|
|
21
|
+
}
|
|
22
|
+
return o;
|
|
23
|
+
}
|
|
24
|
+
function S(e) {
|
|
25
|
+
for (var a = 1; a < arguments.length; a++) {
|
|
26
|
+
var o = arguments[a] != null ? arguments[a] : {};
|
|
27
|
+
a % 2 ? f(Object(o), !0).forEach(function(t) {
|
|
28
|
+
v(e, t, o[t]);
|
|
29
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : f(Object(o)).forEach(function(t) {
|
|
30
|
+
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(o, t));
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return e;
|
|
34
|
+
}
|
|
35
|
+
var b = (e, a, o) => {
|
|
36
|
+
for (var t of Object.keys(e)) {
|
|
37
|
+
var n;
|
|
38
|
+
if (e[t] !== ((n = a[t]) !== null && n !== void 0 ? n : o[t]))
|
|
39
|
+
return !1;
|
|
40
|
+
}
|
|
41
|
+
return !0;
|
|
42
|
+
}, _ = (e) => (a) => {
|
|
43
|
+
var o = e.defaultClassName, t = S(S({}, e.defaultVariants), a);
|
|
44
|
+
for (var n in t) {
|
|
45
|
+
var l, d = (l = t[n]) !== null && l !== void 0 ? l : e.defaultVariants[n];
|
|
46
|
+
if (d != null) {
|
|
47
|
+
var i = d;
|
|
48
|
+
typeof i == "boolean" && (i = i === !0 ? "true" : "false");
|
|
49
|
+
var p = (
|
|
50
|
+
// @ts-expect-error
|
|
51
|
+
e.variantClassNames[n][i]
|
|
52
|
+
);
|
|
53
|
+
p && (o += " " + p);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
for (var [m, g] of e.compoundVariants)
|
|
57
|
+
b(m, t, e.defaultVariants) && (o += " " + g);
|
|
58
|
+
return o;
|
|
59
|
+
}, R = _({ defaultClassName: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl0", variantClassNames: { micro: { true: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl1", false: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl2" } }, defaultVariants: {}, compoundVariants: [] }), y = _({ defaultClassName: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl3", variantClassNames: { micro: { true: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl4", false: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl5" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), L = "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl6", N = _({ defaultClassName: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl7", variantClassNames: { micro: { true: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl8", false: "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl9" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), H = "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnla", Z = "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlb", z = "pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlc";
|
|
60
|
+
function h({
|
|
61
|
+
artwork: e,
|
|
62
|
+
heading: a,
|
|
63
|
+
illustration: o,
|
|
64
|
+
subHeading: t,
|
|
65
|
+
micro: n = !1,
|
|
66
|
+
children: l,
|
|
67
|
+
className: d,
|
|
68
|
+
icon: i,
|
|
69
|
+
...p
|
|
70
|
+
}) {
|
|
71
|
+
const m = o || e || C;
|
|
72
|
+
return /* @__PURE__ */ r.createElement("div", { className: R({ micro: n }) }, /* @__PURE__ */ r.createElement("div", { className: w(y({ micro: n }), d), ...p }, n ? /* @__PURE__ */ r.createElement(r.Fragment, null, i ? /* @__PURE__ */ r.createElement(A, { className: z, icon: i, "aria-hidden": "true" }) : /* @__PURE__ */ r.createElement("img", { style: { height: "3rem" }, src: m })) : /* @__PURE__ */ r.createElement("img", { className: L, src: m, alt: "" }), a && (typeof a == "string" ? /* @__PURE__ */ r.createElement("h1", { className: N({ micro: n }) }, a) : c(a)), t && (typeof t == "string" ? /* @__PURE__ */ r.createElement("h2", { className: H }, t) : c(t)), /* @__PURE__ */ r.createElement("div", { className: Z }, l)));
|
|
73
|
+
}
|
|
74
|
+
E.set(h, {
|
|
75
|
+
name: "ZeroState",
|
|
76
|
+
props: {
|
|
77
|
+
artwork: { type: "string" },
|
|
78
|
+
heading: { type: "string | ReactNodeOrRenderFn" },
|
|
79
|
+
illustration: { type: "string" },
|
|
80
|
+
subHeading: { type: "string | ReactNodeOrRenderFn" },
|
|
81
|
+
micro: { type: "boolean", default: "false" }
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
const G = {
|
|
85
|
+
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."),
|
|
86
|
+
components: [h],
|
|
9
87
|
examples: {
|
|
10
88
|
general: {
|
|
11
89
|
label: "Sizes",
|
|
12
|
-
description: () => /* @__PURE__ */
|
|
90
|
+
description: () => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("h5", { className: u({ mb: "md" }) }, "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", { className: u({ mb: "md" }) }, "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."))
|
|
13
91
|
},
|
|
14
92
|
regular: {
|
|
15
93
|
label: "Usage: Large Zero States",
|
|
16
|
-
description: ({ NavigateTo:
|
|
94
|
+
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, { to: "Button" }, "Buttons"), ",", " ", /* @__PURE__ */ r.createElement(e, { to: "List Toolbar" }, "Search Bars"), ", or a combination of these"),
|
|
17
95
|
examples: {
|
|
18
96
|
illustrationAndHeading: {
|
|
19
97
|
description: "Illustration + Heading",
|
|
20
|
-
react:
|
|
98
|
+
react: s`
|
|
21
99
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
22
100
|
import { Card } from "@sps-woodland/cards";
|
|
23
101
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -36,7 +114,7 @@ const n = {
|
|
|
36
114
|
},
|
|
37
115
|
illustrationHeadingAndSubtitle: {
|
|
38
116
|
description: "Illustration + Heading + Subtitle",
|
|
39
|
-
react:
|
|
117
|
+
react: s`
|
|
40
118
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
41
119
|
import { Card } from "@sps-woodland/cards";
|
|
42
120
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -56,7 +134,7 @@ const n = {
|
|
|
56
134
|
},
|
|
57
135
|
illustrationHeadingAndButton: {
|
|
58
136
|
description: "Illustration + Heading + Button",
|
|
59
|
-
react:
|
|
137
|
+
react: s`
|
|
60
138
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
61
139
|
import { Card } from "@sps-woodland/cards";
|
|
62
140
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -80,7 +158,7 @@ const n = {
|
|
|
80
158
|
},
|
|
81
159
|
illustrationHeadingSubtitleAndButton: {
|
|
82
160
|
description: "Illustration + Heading + Subtitle + Button",
|
|
83
|
-
react:
|
|
161
|
+
react: s`
|
|
84
162
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
85
163
|
import { Card } from "@sps-woodland/cards";
|
|
86
164
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -105,7 +183,7 @@ const n = {
|
|
|
105
183
|
},
|
|
106
184
|
illustrationHeadingSubtitleAndSearch: {
|
|
107
185
|
description: "Illustration + Heading + Subtitle + Search",
|
|
108
|
-
react:
|
|
186
|
+
react: s`
|
|
109
187
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
110
188
|
import { Card } from "@sps-woodland/cards";
|
|
111
189
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -148,7 +226,7 @@ const n = {
|
|
|
148
226
|
examples: {
|
|
149
227
|
illustrationAndHeading: {
|
|
150
228
|
description: "Illustration + Heading",
|
|
151
|
-
react:
|
|
229
|
+
react: s`
|
|
152
230
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
153
231
|
import { Card } from "@sps-woodland/cards";
|
|
154
232
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -172,7 +250,7 @@ const n = {
|
|
|
172
250
|
},
|
|
173
251
|
illustrationAndSubtitle: {
|
|
174
252
|
description: "Illustration + Subtitle",
|
|
175
|
-
react:
|
|
253
|
+
react: s`
|
|
176
254
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
177
255
|
import { Card } from "@sps-woodland/cards";
|
|
178
256
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -196,7 +274,7 @@ const n = {
|
|
|
196
274
|
},
|
|
197
275
|
illustrationHeadingAndSubtitle: {
|
|
198
276
|
description: "Illustration + Heading + Subtitle",
|
|
199
|
-
react:
|
|
277
|
+
react: s`
|
|
200
278
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
201
279
|
import { Card } from "@sps-woodland/cards";
|
|
202
280
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -222,9 +300,10 @@ const n = {
|
|
|
222
300
|
}
|
|
223
301
|
}
|
|
224
302
|
}
|
|
225
|
-
},
|
|
226
|
-
"Zero States":
|
|
303
|
+
}, I = {
|
|
304
|
+
"Zero States": G
|
|
227
305
|
};
|
|
228
306
|
export {
|
|
229
|
-
|
|
307
|
+
I as MANIFEST,
|
|
308
|
+
h as ZeroState
|
|
230
309
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(s,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/illustrations"),require("@spscommerce/utils"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/illustrations","@spscommerce/utils","@sps-woodland/tokens"],d):(s=typeof globalThis<"u"?globalThis:s||self,d(s.ZeroState={},s.React,s.core,s.illustrations,s.utils,s.tokens))})(this,(function(s,d,p,E,i,h){"use strict";function b(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=b(d);function v(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 w(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){v(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 A=(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},f=e=>a=>{var t=e.defaultClassName,r=w(w({},e.defaultVariants),a);for(var n in r){var c,u=(c=r[n])!==null&&c!==void 0?c:e.defaultVariants[n];if(u!=null){var l=u;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=e.variantClassNames[n][l];m&&(t+=" "+m)}}for(var[_,O]of e.compoundVariants)A(_,r,e.defaultVariants)&&(t+=" "+O);return t},C=f({defaultClassName:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl0",variantClassNames:{micro:{true:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl1",false:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl2"}},defaultVariants:{},compoundVariants:[]}),R=f({defaultClassName:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl3",variantClassNames:{micro:{true:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl4",false:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl5"}},defaultVariants:{micro:!1},compoundVariants:[]}),y="pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl6",L=f({defaultClassName:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl7",variantClassNames:{micro:{true:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl8",false:"pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl9"}},defaultVariants:{micro:!1},compoundVariants:[]}),N="pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnla",Z="pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlb",H="pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlc";function S({artwork:e,heading:a,illustration:t,subHeading:r,micro:n=!1,children:c,className:u,icon:l,...m}){const _=t||e||E.BUILDING_LARGE;return o.createElement("div",{className:C({micro:n})},o.createElement("div",{className:p.cl(R({micro:n}),u),...m},n?o.createElement(o.Fragment,null,l?o.createElement(p.Icon,{className:H,icon:l,"aria-hidden":"true"}):o.createElement("img",{style:{height:"3rem"},src:_})):o.createElement("img",{className:y,src:_,alt:""}),a&&(typeof a=="string"?o.createElement("h1",{className:L({micro:n})},a):p.contentOf(a)),r&&(typeof r=="string"?o.createElement("h2",{className:N},r):p.contentOf(r)),o.createElement("div",{className:Z},c)))}p.Metadata.set(S,{name:"ZeroState",props:{artwork:{type:"string"},heading:{type:"string | ReactNodeOrRenderFn"},illustration:{type:"string"},subHeading:{type:"string | ReactNodeOrRenderFn"},micro:{type:"boolean",default:"false"}}});const z={"Zero States":{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:[S],examples:{general:{label:"Sizes",description:()=>o.createElement(o.Fragment,null,o.createElement("h5",{className:h.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:h.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:i.code`
|
|
2
2
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
3
3
|
import { Card } from "@sps-woodland/cards";
|
|
4
4
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</Card>
|
|
14
14
|
);
|
|
15
15
|
}
|
|
16
|
-
`},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:
|
|
16
|
+
`},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:i.code`
|
|
17
17
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
18
18
|
import { Card } from "@sps-woodland/cards";
|
|
19
19
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
</Card>
|
|
30
30
|
);
|
|
31
31
|
}
|
|
32
|
-
`},illustrationHeadingAndButton:{description:"Illustration + Heading + Button",react:
|
|
32
|
+
`},illustrationHeadingAndButton:{description:"Illustration + Heading + Button",react:i.code`
|
|
33
33
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
34
34
|
import { Card } from "@sps-woodland/cards";
|
|
35
35
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
</Card>
|
|
50
50
|
);
|
|
51
51
|
}
|
|
52
|
-
`},illustrationHeadingSubtitleAndButton:{description:"Illustration + Heading + Subtitle + Button",react:
|
|
52
|
+
`},illustrationHeadingSubtitleAndButton:{description:"Illustration + Heading + Subtitle + Button",react:i.code`
|
|
53
53
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
54
54
|
import { Card } from "@sps-woodland/cards";
|
|
55
55
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
</Card>
|
|
71
71
|
);
|
|
72
72
|
}
|
|
73
|
-
`},illustrationHeadingSubtitleAndSearch:{description:"Illustration + Heading + Subtitle + Search",react:
|
|
73
|
+
`},illustrationHeadingSubtitleAndSearch:{description:"Illustration + Heading + Subtitle + Search",react:i.code`
|
|
74
74
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
75
75
|
import { Card } from "@sps-woodland/cards";
|
|
76
76
|
import { GENERAL_SEARCH_LARGE } from "@sps-woodland/illustrations";
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
</Card>
|
|
104
104
|
);
|
|
105
105
|
}
|
|
106
|
-
`}}},micro:{label:"Usage: Small Zero State",description:"Small Zero States may be accompanied by Headings, Subtitles, or both.",examples:{illustrationAndHeading:{description:"Illustration + Heading",react:
|
|
106
|
+
`}}},micro:{label:"Usage: Small Zero State",description:"Small Zero States may be accompanied by Headings, Subtitles, or both.",examples:{illustrationAndHeading:{description:"Illustration + Heading",react:i.code`
|
|
107
107
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
108
108
|
import { Card } from "@sps-woodland/cards";
|
|
109
109
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
</div>
|
|
124
124
|
);
|
|
125
125
|
}
|
|
126
|
-
`},illustrationAndSubtitle:{description:"Illustration + Subtitle",react:
|
|
126
|
+
`},illustrationAndSubtitle:{description:"Illustration + Subtitle",react:i.code`
|
|
127
127
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
128
128
|
import { Card } from "@sps-woodland/cards";
|
|
129
129
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
</div>
|
|
144
144
|
);
|
|
145
145
|
}
|
|
146
|
-
`},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:
|
|
146
|
+
`},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:i.code`
|
|
147
147
|
import { ZeroState } from "@sps-woodland/zero-state";
|
|
148
148
|
import { Card } from "@sps-woodland/cards";
|
|
149
149
|
import { BAR_CHART_SMALL } from "@sps-woodland/illustrations";
|
|
@@ -164,4 +164,4 @@
|
|
|
164
164
|
</div>
|
|
165
165
|
);
|
|
166
166
|
}
|
|
167
|
-
`}}}}}};
|
|
167
|
+
`}}}}}};s.MANIFEST=z,s.ZeroState=S,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl2{padding:1rem}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl3{margin:auto;padding-top:2rem;padding-right:0;padding-bottom:2rem;padding-left:0;text-align:center}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl4{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:auto}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl6{height:6.25rem;margin-bottom:1rem;width:12.5rem}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl7{margin-bottom:0}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl8{color:#4b5356;font-size:1rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl9{color:#1f282c;font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnla{color:#4b5356;font-size:.875rem;line-height:1.25rem;margin-top:.25rem;margin-bottom:0}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlb{margin-top:1rem}.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnlc{color:#717779;font-size:3rem;line-height:3rem;padding-bottom:.25rem}@media screen and (min-width:768px){.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl3{width:75%}}@media screen and (min-width:992px){.pkg_sps-woodland_zero-state__version_8_52_1__hash_jrytnl3{width:50%}}
|
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": "8.
|
|
4
|
+
"version": "8.52.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/zero-state",
|
|
@@ -29,22 +29,24 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/
|
|
32
|
+
"@sps-woodland/core": "8.52.1",
|
|
33
|
+
"@sps-woodland/illustrations": "8.52.1",
|
|
34
|
+
"@sps-woodland/tokens": "8.52.1"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@spscommerce/utils": "9.0.3",
|
|
38
|
+
"@vanilla-extract/css": "1.17.4",
|
|
39
|
+
"@vanilla-extract/recipes": "0.2.5",
|
|
37
40
|
"react": "16.14.0",
|
|
38
41
|
"react-dom": "16.14.0",
|
|
39
|
-
"@sps-woodland/core": "8.
|
|
40
|
-
"@sps-woodland/illustrations": "8.
|
|
41
|
-
"@sps-woodland/tokens": "8.
|
|
42
|
+
"@sps-woodland/core": "8.52.1",
|
|
43
|
+
"@sps-woodland/illustrations": "8.52.1",
|
|
44
|
+
"@sps-woodland/tokens": "8.52.1"
|
|
42
45
|
},
|
|
43
46
|
"scripts": {
|
|
44
|
-
"build": "pnpm run build:js && pnpm run build:types
|
|
47
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
45
48
|
"build:js": "vite build",
|
|
46
49
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
47
|
-
"build:css": "cp ../core/lib/zero-state/style.css lib/style.css 2>/dev/null || echo 'zero-state style.css not found, skipping'",
|
|
48
50
|
"watch": "vite build --watch",
|
|
49
51
|
"clean": "git clean -fdX",
|
|
50
52
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
+
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
2
3
|
import { defineConfig } from "vite";
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
3
5
|
import pkg from "./package.json";
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
// No vanilla-extract needed - CSS is provided by the core package.
|
|
7
|
-
|
|
8
|
-
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
9
8
|
|
|
10
9
|
export default defineConfig({
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
11
18
|
build: {
|
|
12
19
|
lib: {
|
|
13
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
14
21
|
name: "ZeroState",
|
|
15
22
|
fileName: "index",
|
|
23
|
+
cssFileName: "style",
|
|
16
24
|
},
|
|
17
25
|
outDir: path.resolve(__dirname, "./lib"),
|
|
18
26
|
emptyOutDir: false,
|
|
19
27
|
rollupOptions: {
|
|
20
|
-
|
|
21
|
-
external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
|
|
28
|
+
external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
|
|
22
29
|
},
|
|
23
30
|
},
|
|
24
31
|
});
|