@spscommerce/ds-react 5.18.3-ie → 5.18.3-ie2
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/dist/out-tsc/zero-state/SpsMicroZeroState.d.ts +0 -1
- package/dist/out-tsc/zero-state/SpsMicroZeroState.js +4 -8
- package/dist/out-tsc/zero-state/SpsMicroZeroState.js.map +1 -1
- package/dist/out-tsc/zero-state/SpsZeroState.d.ts +1 -2
- package/dist/out-tsc/zero-state/SpsZeroState.examples.js +8 -8
- package/dist/out-tsc/zero-state/SpsZeroState.examples.js.map +1 -1
- package/dist/out-tsc/zero-state/SpsZeroState.js +4 -7
- package/dist/out-tsc/zero-state/SpsZeroState.js.map +1 -1
- package/lib/index.cjs.js +16 -22
- package/lib/index.es.js +16 -22
- package/lib/zero-state/SpsMicroZeroState.d.ts +0 -1
- package/lib/zero-state/SpsZeroState.d.ts +1 -2
- package/package.json +9 -11
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { SpsIcon } from "@spscommerce/ds-shared";
|
|
2
2
|
import * as PropTypes from "../prop-types";
|
|
3
3
|
declare const propTypes: {
|
|
4
|
-
illustration: PropTypes.Requireable<string>;
|
|
5
4
|
icon: PropTypes.Requireable<SpsIcon>;
|
|
6
5
|
heading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
7
6
|
subHeading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
@@ -21,24 +21,20 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { SpsIcon } from "@spscommerce/ds-shared";
|
|
24
|
-
import { SpsIllustrations } from "@spscommerce/ds-illustrations";
|
|
25
24
|
import clsx from "clsx";
|
|
26
25
|
import * as React from "react";
|
|
27
26
|
import * as PropTypes from "../prop-types";
|
|
28
27
|
var propsDoc = {
|
|
29
|
-
|
|
30
|
-
icon: { type: "SpsIcon", deprecated: true },
|
|
28
|
+
icon: { type: "SpsIcon" },
|
|
31
29
|
heading: "ReactNodeOrRenderFn",
|
|
32
30
|
subHeading: "ReactNodeOrRenderFn",
|
|
33
31
|
};
|
|
34
|
-
var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), {
|
|
32
|
+
var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { icon: PropTypes.enumValue(SpsIcon), heading: PropTypes.nodeOrRenderFn, subHeading: PropTypes.nodeOrRenderFn });
|
|
35
33
|
export function SpsMicroZeroState(props) {
|
|
36
|
-
var className = props.className, heading = props.heading, icon = props.icon,
|
|
34
|
+
var className = props.className, heading = props.heading, icon = props.icon, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["className", "heading", "icon", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
37
35
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", "sps-zero-state--micro", className);
|
|
38
36
|
return (React.createElement("div", __assign({ className: classes, "data-testid": testId + "__actual-micro-zero-state" }, rest),
|
|
39
|
-
icon
|
|
40
|
-
? React.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" })
|
|
41
|
-
: React.createElement("img", { style: { height: "3rem" }, src: illustration }),
|
|
37
|
+
React.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" }),
|
|
42
38
|
heading && React.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
43
39
|
subHeading && React.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading)));
|
|
44
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpsMicroZeroState.js","sourceRoot":"","sources":["../../../src/zero-state/SpsMicroZeroState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,
|
|
1
|
+
{"version":3,"file":"SpsMicroZeroState.js","sourceRoot":"","sources":["../../../src/zero-state/SpsMicroZeroState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;IACzB,OAAO,EAAE,qBAAqB;IAC9B,UAAU,EAAE,qBAAqB;CAClC,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC3C,OAAO,EAAE,SAAS,CAAC,cAAc,EACjC,UAAU,EAAE,SAAS,CAAC,cAAc,GACrC,CAAC;AAIF,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAE3D,IAAA,SAAS,GAOP,KAAK,UAPE,EACT,OAAO,GAML,KAAK,QANA,EACP,IAAI,GAKF,KAAK,KALH,EACJ,UAAU,GAIR,KAAK,WAJG,EACK,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EARH,yFAQL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,gBAAgB,EAC5C,uBAAuB,EACvB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,iBAAkB,MAAM,8BAA2B,IAAM,IAAI;QAClF,2BAAG,SAAS,EAAE,uBAAqB,IAAM,iBAAc,MAAM,iBAAiB,MAAM,WAAQ,GAAI;QAC/F,OAAO,IAAI,4BAAI,SAAS,EAAC,yBAAyB,iBAAiB,MAAM,cAAW,IAAG,OAAO,CAAM;QACpG,UAAU,IAAI,4BAAI,SAAS,EAAC,4BAA4B,iBAAiB,MAAM,iBAAc,IAAG,UAAU,CAAM,CAC7G,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC/B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,mBAAmB;CACjC,CAAC,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as PropTypes from "../prop-types";
|
|
2
2
|
declare const propTypes: {
|
|
3
|
-
|
|
4
|
-
artwork: PropTypes.Requireable<string>;
|
|
3
|
+
artwork: PropTypes.Validator<string>;
|
|
5
4
|
heading: PropTypes.Validator<string>;
|
|
6
5
|
subHeading: PropTypes.Requireable<string>;
|
|
7
6
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
@@ -36,23 +36,23 @@ export var SpsZeroStateExamples = {
|
|
|
36
36
|
examples: {
|
|
37
37
|
illustrationAndHeading: {
|
|
38
38
|
description: "Illustration + Heading",
|
|
39
|
-
jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork
|
|
39
|
+
jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "], ["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "]))),
|
|
40
40
|
},
|
|
41
41
|
illustrationHeadingAndSubtitle: {
|
|
42
42
|
description: "Illustration + Heading + Subtitle",
|
|
43
|
-
jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
43
|
+
jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "]))),
|
|
44
44
|
},
|
|
45
45
|
illustrationHeadingAndButton: {
|
|
46
46
|
description: "Illustration + Heading + Button",
|
|
47
|
-
jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork=
|
|
47
|
+
jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
48
48
|
},
|
|
49
49
|
illustrationHeadingSubtitleAndButton: {
|
|
50
50
|
description: "Illustration + Heading + Subtitle + Button",
|
|
51
|
-
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
51
|
+
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
52
52
|
},
|
|
53
53
|
illustrationHeadingSubtitleAndSearch: {
|
|
54
54
|
description: "Illustration + Heading + Subtitle + Search",
|
|
55
|
-
react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork
|
|
55
|
+
react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "], ["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "]))),
|
|
56
56
|
},
|
|
57
57
|
},
|
|
58
58
|
},
|
|
@@ -62,15 +62,15 @@ export var SpsZeroStateExamples = {
|
|
|
62
62
|
examples: {
|
|
63
63
|
illustrationAndHeading: {
|
|
64
64
|
description: "Illustration + Heading",
|
|
65
|
-
jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
65
|
+
jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
66
66
|
},
|
|
67
67
|
IllustrationAndSubtitle: {
|
|
68
68
|
description: "Illustration + Subtitle",
|
|
69
|
-
jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
69
|
+
jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
70
70
|
},
|
|
71
71
|
IllustrationHeadingAndSubtitle: {
|
|
72
72
|
description: "Illustration + Heading + Subtitle",
|
|
73
|
-
jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
73
|
+
jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
74
74
|
},
|
|
75
75
|
},
|
|
76
76
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpsZeroState.examples.js","sourceRoot":"","sources":["../../../src/zero-state/SpsZeroState.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,CAAC,IAAM,oBAAoB,GAAoB;IACnD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,cAAM,OAAA,CACnB,iCAAS,EAAE,EAAC,mBAAmB;YAC7B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,wCAAc;gBACd,oBAAC,SAAS,IACR,OAAO,EAAE;wBACP,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAClD,CAAC,EACD,IAAI,EAAE,UAAU,CAAC,IAAI,kBAGX,CACR;YACN,4BAAI,SAAS,EAAC,MAAM,oHAGf;YACL,oDAA0B;YAC1B,4BAAI,SAAS,EAAC,MAAM,iEAAgE;YACpF,oDAA0B;YAC1B,4BAAI,SAAS,EAAC,MAAM,qEAEf,CACG,CACX,EAxBoB,CAwBpB;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAErB,oBAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,cAAqB;;gBAAE,GAAG;gBAC5D,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,kBAAyB;8CACjD,CACR;QANgC,CAMhC;QACD,QAAQ,EAAE;YACR,sBAAsB,EAAE;gBACtB,WAAW,EAAE,wBAAwB;gBACrC,GAAG,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"SpsZeroState.examples.js","sourceRoot":"","sources":["../../../src/zero-state/SpsZeroState.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,CAAC,IAAM,oBAAoB,GAAoB;IACnD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,cAAM,OAAA,CACnB,iCAAS,EAAE,EAAC,mBAAmB;YAC7B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,wCAAc;gBACd,oBAAC,SAAS,IACR,OAAO,EAAE;wBACP,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAClD,CAAC,EACD,IAAI,EAAE,UAAU,CAAC,IAAI,kBAGX,CACR;YACN,4BAAI,SAAS,EAAC,MAAM,oHAGf;YACL,oDAA0B;YAC1B,4BAAI,SAAS,EAAC,MAAM,iEAAgE;YACpF,oDAA0B;YAC1B,4BAAI,SAAS,EAAC,MAAM,qEAEf,CACG,CACX,EAxBoB,CAwBpB;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,UAAC,EAAc;gBAAZ,UAAU,gBAAA;YAAO,OAAA,CAC/B,8BAAM,SAAS,EAAC,kBAAkB;;gBAErB,oBAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,cAAqB;;gBAAE,GAAG;gBAC5D,oBAAC,UAAU,IAAC,EAAE,EAAC,cAAc,kBAAyB;8CACjD,CACR;QANgC,CAMhC;QACD,QAAQ,EAAE;YACR,sBAAsB,EAAE;gBACtB,WAAW,EAAE,wBAAwB;gBACrC,GAAG,EAAE,IAAI,0QAAA,uMAOR,IAAA;aACF;YACD,8BAA8B,EAAE;gBAC9B,WAAW,EAAE,mCAAmC;gBAChD,GAAG,EAAE,IAAI,mZAAA,gVAQR,IAAA;aACF;YACD,4BAA4B,EAAE;gBAC5B,WAAW,EAAE,iCAAiC;gBAC9C,GAAG,EAAE,IAAI,mdAAA,gZAWR,IAAA;aACF;YACD,oCAAoC,EAAE;gBACpC,WAAW,EAAE,4CAA4C;gBACzD,GAAG,EAAE,IAAI,8hBAAA,2dAYR,IAAA;aACF;YACD,oCAAoC,EAAE;gBACpC,WAAW,EAAE,4CAA4C;gBACzD,KAAK,EAAE,IAAI,83BAAA,2zBA4BV,IAAA;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,uEAAuE;QACpF,QAAQ,EAAE;YACR,sBAAsB,EAAE;gBACtB,WAAW,EAAE,wBAAwB;gBACrC,GAAG,EAAE,IAAI,+YAAA,4UAWR,IAAA;aACF;YACD,uBAAuB,EAAE;gBACvB,WAAW,EAAE,yBAAyB;gBACtC,GAAG,EAAE,IAAI,kbAAA,+WAWR,IAAA;aACF;YACD,8BAA8B,EAAE;gBAC9B,WAAW,EAAE,mCAAmC;gBAChD,GAAG,EAAE,IAAI,meAAA,gaAYR,IAAA;aACF;SACF;KACF;CACF,CAAC"}
|
|
@@ -22,22 +22,19 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import clsx from "clsx";
|
|
24
24
|
import * as React from "react";
|
|
25
|
-
import { SpsIllustrations } from "@spscommerce/ds-illustrations";
|
|
26
25
|
import * as PropTypes from "../prop-types";
|
|
27
26
|
var propsDoc = {
|
|
28
|
-
|
|
29
|
-
artwork: { type: "string", deprecated: true },
|
|
27
|
+
artwork: { type: "string", required: true },
|
|
30
28
|
heading: { type: "string", required: true },
|
|
31
29
|
subHeading: "string",
|
|
32
30
|
};
|
|
33
|
-
var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), {
|
|
31
|
+
var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { artwork: PropTypes.string.isRequired, heading: PropTypes.string.isRequired, subHeading: PropTypes.string });
|
|
34
32
|
export function SpsZeroState(props) {
|
|
35
|
-
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading,
|
|
36
|
-
var imageSrc = illustration || artwork || SpsIllustrations.Large.BUILDING;
|
|
33
|
+
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["artwork", "children", "className", "heading", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
37
34
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", className);
|
|
38
35
|
return (React.createElement("div", { className: "sps-card__body", "data-testid": "" + testId },
|
|
39
36
|
React.createElement("div", __assign({ className: classes, "data-testid": testId + "__actual-zero-state" }, rest),
|
|
40
|
-
React.createElement("img", { className: "sps-zero-state__image", src:
|
|
37
|
+
React.createElement("img", { className: "sps-zero-state__image", src: artwork, alt: "", "data-testid": testId + "__artwork" }),
|
|
41
38
|
React.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
42
39
|
React.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading),
|
|
43
40
|
React.createElement("div", { className: "sps-zero-state__content", "data-testid": testId + "__content" }, children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpsZeroState.js","sourceRoot":"","sources":["../../../src/zero-state/SpsZeroState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"SpsZeroState.js","sourceRoot":"","sources":["../../../src/zero-state/SpsZeroState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC3C,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,EACpC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,EACpC,UAAU,EAAE,SAAS,CAAC,MAAM,GAC7B,CAAC;AAIF,MAAM,UAAU,YAAY,CAAC,KAAwB;IAEjD,IAAA,OAAO,GAQL,KAAK,QARA,EACP,QAAQ,GAON,KAAK,SAPC,EACR,SAAS,GAMP,KAAK,UANE,EACT,OAAO,GAKL,KAAK,QALA,EACP,UAAU,GAIR,KAAK,WAJG,EACK,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EATH,wGASL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,gBAAgB,EAC5C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,iBAAc,KAAG,MAAQ;QACtD,sCAAK,SAAS,EAAE,OAAO,iBAAkB,MAAM,wBAAqB,IAAM,IAAI;YAC5E,6BACE,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,OAAO,EACZ,GAAG,EAAC,EAAE,iBACU,MAAM,cAAW,GACjC;YACF,4BAAI,SAAS,EAAC,yBAAyB,iBAAiB,MAAM,cAAW,IACtE,OAAO,CACL;YACL,4BAAI,SAAS,EAAC,4BAA4B,iBAAiB,MAAM,iBAAc,IAC5E,UAAU,CACR;YACL,6BAAK,SAAS,EAAC,yBAAyB,iBAAiB,MAAM,cAAW,IACvE,QAAQ,CACL,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAC1B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,cAAc;CAC5B,CAAC,CAAC"}
|
package/lib/index.cjs.js
CHANGED
|
@@ -10,7 +10,6 @@ var moment$6 = require('moment-timezone');
|
|
|
10
10
|
var ReactDOM = require('react-dom');
|
|
11
11
|
var positioning = require('@spscommerce/positioning');
|
|
12
12
|
var dsColors = require('@spscommerce/ds-colors');
|
|
13
|
-
var dsIllustrations = require('@spscommerce/ds-illustrations');
|
|
14
13
|
|
|
15
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
15
|
|
|
@@ -32914,19 +32913,17 @@ var __rest$h = (undefined && undefined.__rest) || function (s, e) {
|
|
|
32914
32913
|
return t;
|
|
32915
32914
|
};
|
|
32916
32915
|
var propsDoc$h = {
|
|
32917
|
-
|
|
32918
|
-
artwork: { type: "string", deprecated: true },
|
|
32916
|
+
artwork: { type: "string", required: true },
|
|
32919
32917
|
heading: { type: "string", required: true },
|
|
32920
32918
|
subHeading: "string",
|
|
32921
32919
|
};
|
|
32922
|
-
var propTypes$j = __assign$l(__assign$l({}, spsGlobalPropTypes), {
|
|
32920
|
+
var propTypes$j = __assign$l(__assign$l({}, spsGlobalPropTypes), { artwork: propTypes$1J.exports.string.isRequired, heading: propTypes$1J.exports.string.isRequired, subHeading: propTypes$1J.exports.string });
|
|
32923
32921
|
function SpsZeroState(props) {
|
|
32924
|
-
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading,
|
|
32925
|
-
var imageSrc = illustration || artwork || dsIllustrations.SpsIllustrations.Large.BUILDING;
|
|
32922
|
+
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest$h(props, ["artwork", "children", "className", "heading", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
32926
32923
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", className);
|
|
32927
32924
|
return (React__namespace.createElement("div", { className: "sps-card__body", "data-testid": "" + testId },
|
|
32928
32925
|
React__namespace.createElement("div", __assign$l({ className: classes, "data-testid": testId + "__actual-zero-state" }, rest),
|
|
32929
|
-
React__namespace.createElement("img", { className: "sps-zero-state__image", src:
|
|
32926
|
+
React__namespace.createElement("img", { className: "sps-zero-state__image", src: artwork, alt: "", "data-testid": testId + "__artwork" }),
|
|
32930
32927
|
React__namespace.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
32931
32928
|
React__namespace.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading),
|
|
32932
32929
|
React__namespace.createElement("div", { className: "sps-zero-state__content", "data-testid": testId + "__content" }, children))));
|
|
@@ -32960,19 +32957,16 @@ var __rest$g = (undefined && undefined.__rest) || function (s, e) {
|
|
|
32960
32957
|
return t;
|
|
32961
32958
|
};
|
|
32962
32959
|
var propsDoc$g = {
|
|
32963
|
-
|
|
32964
|
-
icon: { type: "SpsIcon", deprecated: true },
|
|
32960
|
+
icon: { type: "SpsIcon" },
|
|
32965
32961
|
heading: "ReactNodeOrRenderFn",
|
|
32966
32962
|
subHeading: "ReactNodeOrRenderFn",
|
|
32967
32963
|
};
|
|
32968
|
-
var propTypes$i = __assign$k(__assign$k({}, spsGlobalPropTypes), {
|
|
32964
|
+
var propTypes$i = __assign$k(__assign$k({}, spsGlobalPropTypes), { icon: enumValue(dsShared.SpsIcon), heading: nodeOrRenderFn, subHeading: nodeOrRenderFn });
|
|
32969
32965
|
function SpsMicroZeroState(props) {
|
|
32970
|
-
var className = props.className, heading = props.heading, icon = props.icon,
|
|
32966
|
+
var className = props.className, heading = props.heading, icon = props.icon, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest$g(props, ["className", "heading", "icon", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
32971
32967
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", "sps-zero-state--micro", className);
|
|
32972
32968
|
return (React__namespace.createElement("div", __assign$k({ className: classes, "data-testid": testId + "__actual-micro-zero-state" }, rest),
|
|
32973
|
-
icon
|
|
32974
|
-
? React__namespace.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" })
|
|
32975
|
-
: React__namespace.createElement("img", { style: { height: "3rem" }, src: illustration }),
|
|
32969
|
+
React__namespace.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" }),
|
|
32976
32970
|
heading && React__namespace.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
32977
32971
|
subHeading && React__namespace.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading)));
|
|
32978
32972
|
}
|
|
@@ -33016,23 +33010,23 @@ var SpsZeroStateExamples = {
|
|
|
33016
33010
|
examples: {
|
|
33017
33011
|
illustrationAndHeading: {
|
|
33018
33012
|
description: "Illustration + Heading",
|
|
33019
|
-
jsx: utils.code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$5(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork
|
|
33013
|
+
jsx: utils.code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$5(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "], ["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "]))),
|
|
33020
33014
|
},
|
|
33021
33015
|
illustrationHeadingAndSubtitle: {
|
|
33022
33016
|
description: "Illustration + Heading + Subtitle",
|
|
33023
|
-
jsx: utils.code(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
33017
|
+
jsx: utils.code(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "]))),
|
|
33024
33018
|
},
|
|
33025
33019
|
illustrationHeadingAndButton: {
|
|
33026
33020
|
description: "Illustration + Heading + Button",
|
|
33027
|
-
jsx: utils.code(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=
|
|
33021
|
+
jsx: utils.code(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
33028
33022
|
},
|
|
33029
33023
|
illustrationHeadingSubtitleAndButton: {
|
|
33030
33024
|
description: "Illustration + Heading + Subtitle + Button",
|
|
33031
|
-
jsx: utils.code(templateObject_4 || (templateObject_4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
33025
|
+
jsx: utils.code(templateObject_4 || (templateObject_4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
33032
33026
|
},
|
|
33033
33027
|
illustrationHeadingSubtitleAndSearch: {
|
|
33034
33028
|
description: "Illustration + Heading + Subtitle + Search",
|
|
33035
|
-
react: utils.code(templateObject_5 || (templateObject_5 = __makeTemplateObject$5(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork
|
|
33029
|
+
react: utils.code(templateObject_5 || (templateObject_5 = __makeTemplateObject$5(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "], ["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "]))),
|
|
33036
33030
|
},
|
|
33037
33031
|
},
|
|
33038
33032
|
},
|
|
@@ -33042,15 +33036,15 @@ var SpsZeroStateExamples = {
|
|
|
33042
33036
|
examples: {
|
|
33043
33037
|
illustrationAndHeading: {
|
|
33044
33038
|
description: "Illustration + Heading",
|
|
33045
|
-
jsx: utils.code(templateObject_6 || (templateObject_6 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33039
|
+
jsx: utils.code(templateObject_6 || (templateObject_6 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33046
33040
|
},
|
|
33047
33041
|
IllustrationAndSubtitle: {
|
|
33048
33042
|
description: "Illustration + Subtitle",
|
|
33049
|
-
jsx: utils.code(templateObject_7 || (templateObject_7 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33043
|
+
jsx: utils.code(templateObject_7 || (templateObject_7 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33050
33044
|
},
|
|
33051
33045
|
IllustrationHeadingAndSubtitle: {
|
|
33052
33046
|
description: "Illustration + Heading + Subtitle",
|
|
33053
|
-
jsx: utils.code(templateObject_8 || (templateObject_8 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33047
|
+
jsx: utils.code(templateObject_8 || (templateObject_8 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33054
33048
|
},
|
|
33055
33049
|
},
|
|
33056
33050
|
},
|
package/lib/index.es.js
CHANGED
|
@@ -9,7 +9,6 @@ import * as ReactDOM from 'react-dom';
|
|
|
9
9
|
import { createPortal, unstable_batchedUpdates } from 'react-dom';
|
|
10
10
|
import { PositioningService, Position as Position$1 } from '@spscommerce/positioning';
|
|
11
11
|
import { colors } from '@spscommerce/ds-colors';
|
|
12
|
-
import { SpsIllustrations } from '@spscommerce/ds-illustrations';
|
|
13
12
|
|
|
14
13
|
function toVal(mix) {
|
|
15
14
|
var k, y, str='';
|
|
@@ -32886,19 +32885,17 @@ var __rest$h = (undefined && undefined.__rest) || function (s, e) {
|
|
|
32886
32885
|
return t;
|
|
32887
32886
|
};
|
|
32888
32887
|
var propsDoc$h = {
|
|
32889
|
-
|
|
32890
|
-
artwork: { type: "string", deprecated: true },
|
|
32888
|
+
artwork: { type: "string", required: true },
|
|
32891
32889
|
heading: { type: "string", required: true },
|
|
32892
32890
|
subHeading: "string",
|
|
32893
32891
|
};
|
|
32894
|
-
var propTypes$j = __assign$l(__assign$l({}, spsGlobalPropTypes), {
|
|
32892
|
+
var propTypes$j = __assign$l(__assign$l({}, spsGlobalPropTypes), { artwork: propTypes$1J.exports.string.isRequired, heading: propTypes$1J.exports.string.isRequired, subHeading: propTypes$1J.exports.string });
|
|
32895
32893
|
function SpsZeroState(props) {
|
|
32896
|
-
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading,
|
|
32897
|
-
var imageSrc = illustration || artwork || SpsIllustrations.Large.BUILDING;
|
|
32894
|
+
var artwork = props.artwork, children = props.children, className = props.className, heading = props.heading, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest$h(props, ["artwork", "children", "className", "heading", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
32898
32895
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", className);
|
|
32899
32896
|
return (React.createElement("div", { className: "sps-card__body", "data-testid": "" + testId },
|
|
32900
32897
|
React.createElement("div", __assign$l({ className: classes, "data-testid": testId + "__actual-zero-state" }, rest),
|
|
32901
|
-
React.createElement("img", { className: "sps-zero-state__image", src:
|
|
32898
|
+
React.createElement("img", { className: "sps-zero-state__image", src: artwork, alt: "", "data-testid": testId + "__artwork" }),
|
|
32902
32899
|
React.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
32903
32900
|
React.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading),
|
|
32904
32901
|
React.createElement("div", { className: "sps-zero-state__content", "data-testid": testId + "__content" }, children))));
|
|
@@ -32932,19 +32929,16 @@ var __rest$g = (undefined && undefined.__rest) || function (s, e) {
|
|
|
32932
32929
|
return t;
|
|
32933
32930
|
};
|
|
32934
32931
|
var propsDoc$g = {
|
|
32935
|
-
|
|
32936
|
-
icon: { type: "SpsIcon", deprecated: true },
|
|
32932
|
+
icon: { type: "SpsIcon" },
|
|
32937
32933
|
heading: "ReactNodeOrRenderFn",
|
|
32938
32934
|
subHeading: "ReactNodeOrRenderFn",
|
|
32939
32935
|
};
|
|
32940
|
-
var propTypes$i = __assign$k(__assign$k({}, spsGlobalPropTypes), {
|
|
32936
|
+
var propTypes$i = __assign$k(__assign$k({}, spsGlobalPropTypes), { icon: enumValue(SpsIcon), heading: nodeOrRenderFn, subHeading: nodeOrRenderFn });
|
|
32941
32937
|
function SpsMicroZeroState(props) {
|
|
32942
|
-
var className = props.className, heading = props.heading, icon = props.icon,
|
|
32938
|
+
var className = props.className, heading = props.heading, icon = props.icon, subHeading = props.subHeading, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest$g(props, ["className", "heading", "icon", "subHeading", "data-testid", "unsafelyReplaceClassName"]);
|
|
32943
32939
|
var classes = clsx(unsafelyReplaceClassName || "sps-zero-state", "sps-zero-state--micro", className);
|
|
32944
32940
|
return (React.createElement("div", __assign$k({ className: classes, "data-testid": testId + "__actual-micro-zero-state" }, rest),
|
|
32945
|
-
icon
|
|
32946
|
-
? React.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" })
|
|
32947
|
-
: React.createElement("img", { style: { height: "3rem" }, src: illustration }),
|
|
32941
|
+
React.createElement("i", { className: "sps-icon sps-icon-" + icon, "aria-hidden": "true", "data-testid": testId + "__icon" }),
|
|
32948
32942
|
heading && React.createElement("h1", { className: "sps-zero-state__heading", "data-testid": testId + "__heading" }, heading),
|
|
32949
32943
|
subHeading && React.createElement("h2", { className: "sps-zero-state__subheading", "data-testid": testId + "__subheading" }, subHeading)));
|
|
32950
32944
|
}
|
|
@@ -32988,23 +32982,23 @@ var SpsZeroStateExamples = {
|
|
|
32988
32982
|
examples: {
|
|
32989
32983
|
illustrationAndHeading: {
|
|
32990
32984
|
description: "Illustration + Heading",
|
|
32991
|
-
jsx: code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$5(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork
|
|
32985
|
+
jsx: code(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$5(["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "], ["\n<SpsCard>\n <SpsZeroState\n heading=\"Search for a record\"\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n />\n</SpsCard>\n "]))),
|
|
32992
32986
|
},
|
|
32993
32987
|
illustrationHeadingAndSubtitle: {
|
|
32994
32988
|
description: "Illustration + Heading + Subtitle",
|
|
32995
|
-
jsx: code(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
32989
|
+
jsx: code(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new record by using the search box above.\"\n />\n </SpsCard>\n "]))),
|
|
32996
32990
|
},
|
|
32997
32991
|
illustrationHeadingAndButton: {
|
|
32998
32992
|
description: "Illustration + Heading + Button",
|
|
32999
|
-
jsx: code(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=
|
|
32993
|
+
jsx: code(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
33000
32994
|
},
|
|
33001
32995
|
illustrationHeadingSubtitleAndButton: {
|
|
33002
32996
|
description: "Illustration + Heading + Subtitle + Button",
|
|
33003
|
-
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork
|
|
32997
|
+
jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject$5(["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "], ["\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new companies by using the Search button below.\"\n >\n <SpsButton kind={ButtonKind.CONFIRM}>\n Search\n </SpsButton>\n </SpsZeroState>\n </SpsCard>\n "]))),
|
|
33004
32998
|
},
|
|
33005
32999
|
illustrationHeadingSubtitleAndSearch: {
|
|
33006
33000
|
description: "Illustration + Heading + Subtitle + Search",
|
|
33007
|
-
react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject$5(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork
|
|
33001
|
+
react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject$5(["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "], ["\nfunction Component() {\n const [searchText, setSearchText] = React.useState(\"\");\n\n function handleChange(e) {\n setSearchText(e.target.value);\n }\n\n return (\n <SpsCard>\n <SpsZeroState\n artwork=\"https://cdn.prod.spsc.io/web/framework/assets/18.03.02/images/icon-empty-search@2x.svg\"\n heading=\"Search for a record\"\n subHeading=\"Find new records by using the search box below.\"\n >\n <SpsInputGroup>\n <SpsTextInput\n name=\"search\"\n value={searchText}\n placeholder=\"Search for a record\"\n onChange={handleChange}\n />\n <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label=\"Search\" />\n </SpsInputGroup>\n </SpsZeroState>\n </SpsCard>\n );\n}\n "]))),
|
|
33008
33002
|
},
|
|
33009
33003
|
},
|
|
33010
33004
|
},
|
|
@@ -33014,15 +33008,15 @@ var SpsZeroStateExamples = {
|
|
|
33014
33008
|
examples: {
|
|
33015
33009
|
illustrationAndHeading: {
|
|
33016
33010
|
description: "Illustration + Heading",
|
|
33017
|
-
jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33011
|
+
jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33018
33012
|
},
|
|
33019
33013
|
IllustrationAndSubtitle: {
|
|
33020
33014
|
description: "Illustration + Subtitle",
|
|
33021
|
-
jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33015
|
+
jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33022
33016
|
},
|
|
33023
33017
|
IllustrationHeadingAndSubtitle: {
|
|
33024
33018
|
description: "Illustration + Heading + Subtitle",
|
|
33025
|
-
jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n
|
|
33019
|
+
jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject$5(["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "], ["\n <div className=\"sfg-row\">\n <div className=\"sfg-col-4\">\n <SpsCard>\n <SpsMicroZeroState\n heading=\"No Data Available\"\n subHeading=\"No data available. Create a report and try again.\"\n icon={SpsIcon.CHART_BAR}\n />\n </SpsCard>\n </div>\n </div>\n "]))),
|
|
33026
33020
|
},
|
|
33027
33021
|
},
|
|
33028
33022
|
},
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { SpsIcon } from "@spscommerce/ds-shared";
|
|
2
2
|
import * as PropTypes from "../prop-types";
|
|
3
3
|
declare const propTypes: {
|
|
4
|
-
illustration: PropTypes.Requireable<string>;
|
|
5
4
|
icon: PropTypes.Requireable<SpsIcon>;
|
|
6
5
|
heading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
7
6
|
subHeading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as PropTypes from "../prop-types";
|
|
2
2
|
declare const propTypes: {
|
|
3
|
-
|
|
4
|
-
artwork: PropTypes.Requireable<string>;
|
|
3
|
+
artwork: PropTypes.Validator<string>;
|
|
5
4
|
heading: PropTypes.Validator<string>;
|
|
6
5
|
subHeading: PropTypes.Requireable<string>;
|
|
7
6
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-react",
|
|
3
3
|
"description": "SPS Design System React components",
|
|
4
|
-
"version": "5.18.3-
|
|
4
|
+
"version": "5.18.3-ie2",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -23,22 +23,20 @@
|
|
|
23
23
|
"tiny-invariant": "^1.0.4"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@spscommerce/ds-colors": "5.18.3-
|
|
27
|
-
"@spscommerce/ds-
|
|
28
|
-
"@spscommerce/
|
|
29
|
-
"@spscommerce/
|
|
30
|
-
"@spscommerce/utils": "5.18.3-ie",
|
|
26
|
+
"@spscommerce/ds-colors": "5.18.3-ie2",
|
|
27
|
+
"@spscommerce/ds-shared": "5.18.3-ie2",
|
|
28
|
+
"@spscommerce/positioning": "5.18.3-ie2",
|
|
29
|
+
"@spscommerce/utils": "5.18.3-ie2",
|
|
31
30
|
"moment": "^2.25.3",
|
|
32
31
|
"moment-timezone": "^0.5.28",
|
|
33
32
|
"react": "^16.9.0",
|
|
34
33
|
"react-dom": "^16.9.0"
|
|
35
34
|
},
|
|
36
35
|
"devDependencies": {
|
|
37
|
-
"@spscommerce/ds-colors": "5.18.3-
|
|
38
|
-
"@spscommerce/ds-
|
|
39
|
-
"@spscommerce/
|
|
40
|
-
"@spscommerce/
|
|
41
|
-
"@spscommerce/utils": "5.18.3-ie",
|
|
36
|
+
"@spscommerce/ds-colors": "5.18.3-ie2",
|
|
37
|
+
"@spscommerce/ds-shared": "5.18.3-ie2",
|
|
38
|
+
"@spscommerce/positioning": "5.18.3-ie2",
|
|
39
|
+
"@spscommerce/utils": "5.18.3-ie2",
|
|
42
40
|
"@testing-library/react": "^9.3.2",
|
|
43
41
|
"@types/prop-types": "^15.7.1",
|
|
44
42
|
"@types/react": "^16.9.0",
|