@spscommerce/ds-react 5.16.1 → 5.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +175 -163
- package/lib/index.es.js +120 -95
- package/lib/zero-state/SpsMicroZeroState.d.ts +2 -1
- package/lib/zero-state/SpsZeroState.d.ts +2 -1
- package/package.json +11 -9
package/lib/index.es.js
CHANGED
|
@@ -40,6 +40,7 @@ import { createPortal, unstable_batchedUpdates } from "react-dom";
|
|
|
40
40
|
import { useCollection } from "@react-stately/collections";
|
|
41
41
|
import { PositioningService, Position as Position$1 } from "@spscommerce/positioning";
|
|
42
42
|
import { colors } from "@spscommerce/ds-colors";
|
|
43
|
+
import { SpsIllustrations } from "@spscommerce/ds-illustrations";
|
|
43
44
|
function toVal(mix) {
|
|
44
45
|
var k2, y2, str = "";
|
|
45
46
|
if (typeof mix === "string" || typeof mix === "number") {
|
|
@@ -28387,7 +28388,7 @@ function SpsListToolbar(props2) {
|
|
|
28387
28388
|
React.useEffect(() => {
|
|
28388
28389
|
emitToolbarPinned(isPinned);
|
|
28389
28390
|
}, [isPinned]);
|
|
28390
|
-
const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && pinToolbar && "sps-list-toolbar--pinned", isPinned && pinToolbar && "z-stratum-
|
|
28391
|
+
const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && pinToolbar && "sps-list-toolbar--pinned", isPinned && pinToolbar && "z-stratum-toolbar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
|
|
28391
28392
|
const [
|
|
28392
28393
|
listToolbarSearch,
|
|
28393
28394
|
listToolbarSearchInfo,
|
|
@@ -36089,12 +36090,14 @@ const SpsWorkflowExamples = {
|
|
|
36089
36090
|
}
|
|
36090
36091
|
};
|
|
36091
36092
|
const propsDoc$h = {
|
|
36092
|
-
|
|
36093
|
+
illustration: "string",
|
|
36094
|
+
artwork: { type: "string", deprecated: true },
|
|
36093
36095
|
heading: { type: "string", required: true },
|
|
36094
36096
|
subHeading: "string"
|
|
36095
36097
|
};
|
|
36096
36098
|
const propTypes$j = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
|
|
36097
|
-
|
|
36099
|
+
illustration: propTypes$1N.exports.string,
|
|
36100
|
+
artwork: propTypes$1N.exports.string,
|
|
36098
36101
|
heading: propTypes$1N.exports.string.isRequired,
|
|
36099
36102
|
subHeading: propTypes$1N.exports.string
|
|
36100
36103
|
});
|
|
@@ -36104,6 +36107,7 @@ function SpsZeroState(props2) {
|
|
|
36104
36107
|
children,
|
|
36105
36108
|
className,
|
|
36106
36109
|
heading,
|
|
36110
|
+
illustration,
|
|
36107
36111
|
subHeading,
|
|
36108
36112
|
"data-testid": testId,
|
|
36109
36113
|
unsafelyReplaceClassName
|
|
@@ -36112,10 +36116,12 @@ function SpsZeroState(props2) {
|
|
|
36112
36116
|
"children",
|
|
36113
36117
|
"className",
|
|
36114
36118
|
"heading",
|
|
36119
|
+
"illustration",
|
|
36115
36120
|
"subHeading",
|
|
36116
36121
|
"data-testid",
|
|
36117
36122
|
"unsafelyReplaceClassName"
|
|
36118
36123
|
]);
|
|
36124
|
+
const imageSrc = illustration || artwork || SpsIllustrations.Large.BUILDING;
|
|
36119
36125
|
const classes = clsx(unsafelyReplaceClassName || "sps-zero-state", className);
|
|
36120
36126
|
return /* @__PURE__ */ React.createElement("div", {
|
|
36121
36127
|
className: "sps-card__body",
|
|
@@ -36125,7 +36131,7 @@ function SpsZeroState(props2) {
|
|
|
36125
36131
|
"data-testid": `${testId}__actual-zero-state`
|
|
36126
36132
|
}, rest), /* @__PURE__ */ React.createElement("img", {
|
|
36127
36133
|
className: "sps-zero-state__image",
|
|
36128
|
-
src:
|
|
36134
|
+
src: imageSrc,
|
|
36129
36135
|
alt: "",
|
|
36130
36136
|
"data-testid": `${testId}__artwork`
|
|
36131
36137
|
}), /* @__PURE__ */ React.createElement("h1", {
|
|
@@ -36145,12 +36151,14 @@ Object.assign(SpsZeroState, {
|
|
|
36145
36151
|
displayName: "SpsZeroState"
|
|
36146
36152
|
});
|
|
36147
36153
|
const propsDoc$g = {
|
|
36148
|
-
|
|
36154
|
+
illustration: "string",
|
|
36155
|
+
icon: { type: "SpsIcon", deprecated: true },
|
|
36149
36156
|
heading: "ReactNodeOrRenderFn",
|
|
36150
36157
|
subHeading: "ReactNodeOrRenderFn"
|
|
36151
36158
|
};
|
|
36152
36159
|
const propTypes$i = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
|
|
36153
|
-
|
|
36160
|
+
illustration: propTypes$1N.exports.string,
|
|
36161
|
+
icon: enumValue(SpsIcon),
|
|
36154
36162
|
heading: nodeOrRenderFn,
|
|
36155
36163
|
subHeading: nodeOrRenderFn
|
|
36156
36164
|
});
|
|
@@ -36159,6 +36167,7 @@ function SpsMicroZeroState(props2) {
|
|
|
36159
36167
|
className,
|
|
36160
36168
|
heading,
|
|
36161
36169
|
icon,
|
|
36170
|
+
illustration = SpsIllustrations.Small.BUILDING,
|
|
36162
36171
|
subHeading,
|
|
36163
36172
|
"data-testid": testId,
|
|
36164
36173
|
unsafelyReplaceClassName
|
|
@@ -36166,6 +36175,7 @@ function SpsMicroZeroState(props2) {
|
|
|
36166
36175
|
"className",
|
|
36167
36176
|
"heading",
|
|
36168
36177
|
"icon",
|
|
36178
|
+
"illustration",
|
|
36169
36179
|
"subHeading",
|
|
36170
36180
|
"data-testid",
|
|
36171
36181
|
"unsafelyReplaceClassName"
|
|
@@ -36174,10 +36184,13 @@ function SpsMicroZeroState(props2) {
|
|
|
36174
36184
|
return /* @__PURE__ */ React.createElement("div", __spreadValues({
|
|
36175
36185
|
className: classes,
|
|
36176
36186
|
"data-testid": `${testId}__actual-micro-zero-state`
|
|
36177
|
-
}, rest), /* @__PURE__ */ React.createElement("i", {
|
|
36187
|
+
}, rest), icon ? /* @__PURE__ */ React.createElement("i", {
|
|
36178
36188
|
className: `sps-icon sps-icon-${icon}`,
|
|
36179
36189
|
"aria-hidden": "true",
|
|
36180
36190
|
"data-testid": `${testId}__icon`
|
|
36191
|
+
}) : /* @__PURE__ */ React.createElement("img", {
|
|
36192
|
+
style: { height: "3rem" },
|
|
36193
|
+
src: illustration
|
|
36181
36194
|
}), heading && /* @__PURE__ */ React.createElement("h1", {
|
|
36182
36195
|
className: "sps-zero-state__heading",
|
|
36183
36196
|
"data-testid": `${testId}__heading`
|
|
@@ -36224,88 +36237,88 @@ const SpsZeroStateExamples = {
|
|
|
36224
36237
|
illustrationAndHeading: {
|
|
36225
36238
|
description: "Illustration + Heading",
|
|
36226
36239
|
jsx: code`
|
|
36227
|
-
|
|
36228
|
-
|
|
36229
|
-
|
|
36230
|
-
|
|
36231
|
-
|
|
36232
|
-
|
|
36233
|
-
|
|
36240
|
+
<SpsCard>
|
|
36241
|
+
<SpsZeroState
|
|
36242
|
+
heading="Search for a record"
|
|
36243
|
+
artwork={SpsIllustrations.Large.GENERAL_SEARCH}
|
|
36244
|
+
/>
|
|
36245
|
+
</SpsCard>
|
|
36246
|
+
`
|
|
36234
36247
|
},
|
|
36235
36248
|
illustrationHeadingAndSubtitle: {
|
|
36236
36249
|
description: "Illustration + Heading + Subtitle",
|
|
36237
36250
|
jsx: code`
|
|
36238
|
-
|
|
36239
|
-
|
|
36240
|
-
|
|
36241
|
-
|
|
36242
|
-
|
|
36243
|
-
|
|
36244
|
-
|
|
36245
|
-
|
|
36251
|
+
<SpsCard>
|
|
36252
|
+
<SpsZeroState
|
|
36253
|
+
artwork={SpsIllustrations.Large.GENERAL_SEARCH}
|
|
36254
|
+
heading="Search for a record"
|
|
36255
|
+
subHeading="Find new record by using the search box above."
|
|
36256
|
+
/>
|
|
36257
|
+
</SpsCard>
|
|
36258
|
+
`
|
|
36246
36259
|
},
|
|
36247
36260
|
illustrationHeadingAndButton: {
|
|
36248
36261
|
description: "Illustration + Heading + Button",
|
|
36249
36262
|
jsx: code`
|
|
36250
|
-
|
|
36251
|
-
|
|
36252
|
-
|
|
36253
|
-
|
|
36254
|
-
|
|
36255
|
-
|
|
36256
|
-
|
|
36257
|
-
|
|
36258
|
-
|
|
36259
|
-
|
|
36260
|
-
|
|
36263
|
+
<SpsCard>
|
|
36264
|
+
<SpsZeroState
|
|
36265
|
+
artwork={SpsIllustrations.Large.GENERAL_SEARCH}
|
|
36266
|
+
heading="Search for a record"
|
|
36267
|
+
>
|
|
36268
|
+
<SpsButton kind={ButtonKind.CONFIRM}>
|
|
36269
|
+
Search
|
|
36270
|
+
</SpsButton>
|
|
36271
|
+
</SpsZeroState>
|
|
36272
|
+
</SpsCard>
|
|
36273
|
+
`
|
|
36261
36274
|
},
|
|
36262
36275
|
illustrationHeadingSubtitleAndButton: {
|
|
36263
36276
|
description: "Illustration + Heading + Subtitle + Button",
|
|
36264
36277
|
jsx: code`
|
|
36265
|
-
|
|
36266
|
-
|
|
36267
|
-
|
|
36268
|
-
|
|
36269
|
-
|
|
36270
|
-
|
|
36271
|
-
|
|
36272
|
-
|
|
36273
|
-
|
|
36274
|
-
|
|
36275
|
-
|
|
36276
|
-
|
|
36278
|
+
<SpsCard>
|
|
36279
|
+
<SpsZeroState
|
|
36280
|
+
artwork={SpsIllustrations.Large.GENERAL_SEARCH}
|
|
36281
|
+
heading="Search for a record"
|
|
36282
|
+
subHeading="Find new companies by using the Search button below."
|
|
36283
|
+
>
|
|
36284
|
+
<SpsButton kind={ButtonKind.CONFIRM}>
|
|
36285
|
+
Search
|
|
36286
|
+
</SpsButton>
|
|
36287
|
+
</SpsZeroState>
|
|
36288
|
+
</SpsCard>
|
|
36289
|
+
`
|
|
36277
36290
|
},
|
|
36278
36291
|
illustrationHeadingSubtitleAndSearch: {
|
|
36279
36292
|
description: "Illustration + Heading + Subtitle + Search",
|
|
36280
36293
|
react: code`
|
|
36281
|
-
|
|
36282
|
-
|
|
36283
|
-
|
|
36284
|
-
|
|
36285
|
-
|
|
36286
|
-
|
|
36287
|
-
|
|
36288
|
-
|
|
36289
|
-
|
|
36290
|
-
|
|
36291
|
-
|
|
36292
|
-
|
|
36293
|
-
|
|
36294
|
-
|
|
36295
|
-
|
|
36296
|
-
|
|
36297
|
-
|
|
36298
|
-
|
|
36299
|
-
|
|
36300
|
-
|
|
36301
|
-
|
|
36302
|
-
|
|
36303
|
-
|
|
36304
|
-
|
|
36305
|
-
|
|
36306
|
-
|
|
36307
|
-
|
|
36308
|
-
|
|
36294
|
+
function Component() {
|
|
36295
|
+
const [searchText, setSearchText] = React.useState("");
|
|
36296
|
+
|
|
36297
|
+
function handleChange(e) {
|
|
36298
|
+
setSearchText(e.target.value);
|
|
36299
|
+
}
|
|
36300
|
+
|
|
36301
|
+
return (
|
|
36302
|
+
<SpsCard>
|
|
36303
|
+
<SpsZeroState
|
|
36304
|
+
artwork={SpsIllustrations.Large.GENERAL_SEARCH}
|
|
36305
|
+
heading="Search for a record"
|
|
36306
|
+
subHeading="Find new records by using the search box below."
|
|
36307
|
+
>
|
|
36308
|
+
<SpsInputGroup>
|
|
36309
|
+
<SpsTextInput
|
|
36310
|
+
name="search"
|
|
36311
|
+
value={searchText}
|
|
36312
|
+
placeholder="Search for a record"
|
|
36313
|
+
onChange={handleChange}
|
|
36314
|
+
/>
|
|
36315
|
+
<SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label="Search" />
|
|
36316
|
+
</SpsInputGroup>
|
|
36317
|
+
</SpsZeroState>
|
|
36318
|
+
</SpsCard>
|
|
36319
|
+
);
|
|
36320
|
+
}
|
|
36321
|
+
`
|
|
36309
36322
|
}
|
|
36310
36323
|
}
|
|
36311
36324
|
},
|
|
@@ -36316,36 +36329,48 @@ const SpsZeroStateExamples = {
|
|
|
36316
36329
|
illustrationAndHeading: {
|
|
36317
36330
|
description: "Illustration + Heading",
|
|
36318
36331
|
jsx: code`
|
|
36319
|
-
|
|
36320
|
-
|
|
36321
|
-
|
|
36322
|
-
|
|
36323
|
-
|
|
36324
|
-
|
|
36325
|
-
|
|
36332
|
+
<div className="sfg-row">
|
|
36333
|
+
<div className="sfg-col-4">
|
|
36334
|
+
<SpsCard>
|
|
36335
|
+
<SpsMicroZeroState
|
|
36336
|
+
illustration={SpsIllustrations.Small.BAR_CHART}
|
|
36337
|
+
heading="No Data Available"
|
|
36338
|
+
/>
|
|
36339
|
+
</SpsCard>
|
|
36340
|
+
</div>
|
|
36341
|
+
</div>
|
|
36342
|
+
`
|
|
36326
36343
|
},
|
|
36327
36344
|
IllustrationAndSubtitle: {
|
|
36328
36345
|
description: "Illustration + Subtitle",
|
|
36329
36346
|
jsx: code`
|
|
36330
|
-
|
|
36331
|
-
|
|
36332
|
-
|
|
36333
|
-
|
|
36334
|
-
|
|
36335
|
-
|
|
36336
|
-
|
|
36347
|
+
<div className="sfg-row">
|
|
36348
|
+
<div className="sfg-col-4">
|
|
36349
|
+
<SpsCard>
|
|
36350
|
+
<SpsMicroZeroState
|
|
36351
|
+
illustration={SpsIllustrations.Small.BAR_CHART}
|
|
36352
|
+
subHeading="No data available. Create a report and try again."
|
|
36353
|
+
/>
|
|
36354
|
+
</SpsCard>
|
|
36355
|
+
</div>
|
|
36356
|
+
</div>
|
|
36357
|
+
`
|
|
36337
36358
|
},
|
|
36338
36359
|
IllustrationHeadingAndSubtitle: {
|
|
36339
36360
|
description: "Illustration + Heading + Subtitle",
|
|
36340
36361
|
jsx: code`
|
|
36341
|
-
|
|
36342
|
-
|
|
36343
|
-
|
|
36344
|
-
|
|
36345
|
-
|
|
36346
|
-
|
|
36347
|
-
|
|
36348
|
-
|
|
36362
|
+
<div className="sfg-row">
|
|
36363
|
+
<div className="sfg-col-4">
|
|
36364
|
+
<SpsCard>
|
|
36365
|
+
<SpsMicroZeroState
|
|
36366
|
+
illustration={SpsIllustrations.Small.BAR_CHART}
|
|
36367
|
+
heading="No Data Available"
|
|
36368
|
+
subHeading="No data available. Create a report and try again."
|
|
36369
|
+
/>
|
|
36370
|
+
</SpsCard>
|
|
36371
|
+
</div>
|
|
36372
|
+
</div>
|
|
36373
|
+
`
|
|
36349
36374
|
}
|
|
36350
36375
|
}
|
|
36351
36376
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { SpsIcon } from "@spscommerce/ds-shared";
|
|
2
2
|
import * as PropTypes from "../prop-types";
|
|
3
3
|
declare const propTypes: {
|
|
4
|
-
|
|
4
|
+
illustration: PropTypes.Requireable<string>;
|
|
5
|
+
icon: PropTypes.Requireable<SpsIcon>;
|
|
5
6
|
heading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
6
7
|
subHeading: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
|
|
7
8
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as PropTypes from "../prop-types";
|
|
2
2
|
declare const propTypes: {
|
|
3
|
-
|
|
3
|
+
illustration: PropTypes.Requireable<string>;
|
|
4
|
+
artwork: PropTypes.Requireable<string>;
|
|
4
5
|
heading: PropTypes.Validator<string>;
|
|
5
6
|
subHeading: PropTypes.Requireable<string>;
|
|
6
7
|
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.
|
|
4
|
+
"version": "5.17.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -28,10 +28,11 @@
|
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@react-stately/collections": "^3.3.3",
|
|
31
|
-
"@spscommerce/ds-colors": "5.
|
|
32
|
-
"@spscommerce/ds-
|
|
33
|
-
"@spscommerce/
|
|
34
|
-
"@spscommerce/
|
|
31
|
+
"@spscommerce/ds-colors": "5.17.0",
|
|
32
|
+
"@spscommerce/ds-illustrations": "5.17.0",
|
|
33
|
+
"@spscommerce/ds-shared": "5.17.0",
|
|
34
|
+
"@spscommerce/positioning": "5.17.0",
|
|
35
|
+
"@spscommerce/utils": "5.17.0",
|
|
35
36
|
"moment": "^2.25.3",
|
|
36
37
|
"moment-timezone": "^0.5.28",
|
|
37
38
|
"react": "^16.9.0",
|
|
@@ -39,10 +40,11 @@
|
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
42
|
"@react-stately/collections": "^3.3.3",
|
|
42
|
-
"@spscommerce/ds-colors": "5.
|
|
43
|
-
"@spscommerce/ds-
|
|
44
|
-
"@spscommerce/
|
|
45
|
-
"@spscommerce/
|
|
43
|
+
"@spscommerce/ds-colors": "5.17.0",
|
|
44
|
+
"@spscommerce/ds-illustrations": "5.17.0",
|
|
45
|
+
"@spscommerce/ds-shared": "5.17.0",
|
|
46
|
+
"@spscommerce/positioning": "5.17.0",
|
|
47
|
+
"@spscommerce/utils": "5.17.0",
|
|
46
48
|
"@testing-library/react": "^9.3.2",
|
|
47
49
|
"@types/prop-types": "^15.7.1",
|
|
48
50
|
"@types/react": "^16.9.0",
|