@spscommerce/ds-react 5.21.2 → 5.21.5

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.
Files changed (3) hide show
  1. package/lib/index.cjs.js +45 -45
  2. package/lib/index.es.js +45 -45
  3. package/package.json +11 -11
package/lib/index.cjs.js CHANGED
@@ -2342,14 +2342,14 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
2342
2342
  <div className="sfg-row">
2343
2343
  <div className="sfg-col-3"></div>
2344
2344
  <div className="sfg-col-6">
2345
- <SpsCard>
2345
+ <SpsCardV2>
2346
2346
  <i>pretend there's a form here</i>
2347
- </SpsCard>
2347
+ </SpsCardV2>
2348
2348
  </div>
2349
2349
  <div className="sfg-col-3"></div>
2350
2350
  </div>
2351
2351
  <SpsFocusedTaskActions>
2352
- <SpsButton kind="confirm" onClick={onFormSubmit}>
2352
+ <SpsButton kind={ButtonKind.CONFIRM} onClick={onFormSubmit}>
2353
2353
  Submit
2354
2354
  </SpsButton>
2355
2355
  </SpsFocusedTaskActions>
@@ -2380,14 +2380,14 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
2380
2380
  <div className="sfg-row">
2381
2381
  <div className="sfg-col-3"></div>
2382
2382
  <div className="sfg-col-6">
2383
- <SpsCard>
2383
+ <SpsCardV2>
2384
2384
  <i>pretend there's a form here</i>
2385
- </SpsCard>
2385
+ </SpsCardV2>
2386
2386
  </div>
2387
2387
  <div className="sfg-col-3"></div>
2388
2388
  </div>
2389
2389
  <SpsFocusedTaskActions>
2390
- <SpsButton kind="confirm" onClick={onFormSubmit}>
2390
+ <SpsButton kind={ButtonKind.CONFIRM} onClick={onFormSubmit}>
2391
2391
  Submit
2392
2392
  </SpsButton>
2393
2393
  </SpsFocusedTaskActions>
@@ -3241,27 +3241,27 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3241
3241
  `}}}};function tf(e){const{children:t}=e;return s.createElement("div",{className:"insight-tile-wrapper"},t)}const nI={horizontal:"boolean",icon:"SpsIcon",kind:"SpsInsightTileKind",title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"},aI=$(I({},q),{horizontal:T.exports.bool,icon:be(M.SpsIcon),kind:be(M.SpsInsightTileKind),title:T.exports.string,metric:T.exports.number||T.exports.string,partnerCount:T.exports.number,totalPartners:T.exports.number});function Ji(e){const w=e,{children:t,className:n,horizontal:a=!1,icon:o,kind:i="general",title:l,metric:c,partnerCount:p,totalPartners:u,unsafelyReplaceClassName:f}=w,m=Z(w,["children","className","horizontal","icon","kind","title","metric","partnerCount","totalPartners","unsafelyReplaceClassName"]),g=A(f||"sps-insight-tile",`sps-insight-tile--${i}`,n,a&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail"),{t:v}=s.useContext(Ye),[C,k,S]=(p?v("design-system:insightTile.partnerCount",{count:p,total:u}):"").split("|");return s.createElement(s.Fragment,null,s.createElement("div",I({className:g},m),s.createElement("div",{className:"sps-insight-tile__body"},o?s.createElement("i",{className:`sps-icon sps-icon-${o}`}):s.createElement("i",{className:`sps-icon sps-icon-${M.SpsInsightTileIcons[i]}`}),c&&s.createElement("div",{className:"sps-insight-tile__metric-count"},c),l&&s.createElement("div",{className:"sps-insight-tile__description"},s.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"}},l),s.createElement("div",{className:"sps-insight-tile__detail"},t))),p&&s.createElement("div",{className:"sps-insight-tile__partner-count"},p===u?s.createElement("div",null,v("design-system:insightTile.all")):s.createElement(s.Fragment,null,s.createElement("div",null,C),s.createElement("div",null,k),s.createElement("div",null,S)),s.createElement("div",{className:"sps-insight-tile__partners-text"},v("design-system:insightTile.partners")))))}Object.assign(Ji,{props:nI,propTypes:aI,displayName:"SpsInsightTile"});const sI={basic:{label:"Basic Insight Tiles",examples:{basic:{jsx:x.code`
3242
3242
  <SpsInsights>
3243
3243
  <SpsInsightTile
3244
- kind={SpsInsightCardKind.GENERAL}
3244
+ kind={SpsInsightTileKind.GENERAL}
3245
3245
  metric="1234"
3246
3246
  title="Insight Tile Title"
3247
3247
  />
3248
3248
  <SpsInsightTile
3249
- kind={SpsInsightCardKind.PROCESSING}
3249
+ kind={SpsInsightTileKind.PROCESSING}
3250
3250
  metric="1234"
3251
3251
  title="Insight Tile Title"
3252
3252
  />
3253
3253
  <SpsInsightTile
3254
- kind={SpsInsightCardKind.SUCCESS}
3254
+ kind={SpsInsightTileKind.SUCCESS}
3255
3255
  metric="1234"
3256
3256
  title="Insight Tile Title"
3257
3257
  />
3258
3258
  <SpsInsightTile
3259
- kind={SpsInsightCardKind.WARNING}
3259
+ kind={SpsInsightTileKind.WARNING}
3260
3260
  metric="1234"
3261
3261
  title="Insight Tile Title"
3262
3262
  />
3263
3263
  <SpsInsightTile
3264
- kind={SpsInsightCardKind.ERROR}
3264
+ kind={SpsInsightTileKind.ERROR}
3265
3265
  metric="1234"
3266
3266
  title="Insight Tile Title"
3267
3267
  />
@@ -3269,49 +3269,49 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3269
3269
  `}}},details:{label:"With Details",examples:{details:{jsx:x.code`
3270
3270
  <SpsInsights>
3271
3271
  <SpsInsightTile
3272
- kind={SpsInsightCardKind.GENERAL}
3272
+ kind={SpsInsightTileKind.GENERAL}
3273
3273
  metric="1234"
3274
3274
  title="Insight Tile Title"
3275
3275
  >
3276
3276
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3277
3277
  </SpsInsightTile>
3278
3278
  <SpsInsightTile
3279
- kind={SpsInsightCardKind.PROCESSING}
3279
+ kind={SpsInsightTileKind.PROCESSING}
3280
3280
  metric="1234"
3281
3281
  title="Insight Tile Title"
3282
3282
  >
3283
3283
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3284
3284
  </SpsInsightTile>
3285
3285
  <SpsInsightTile
3286
- kind={SpsInsightCardKind.SUCCESS}
3286
+ kind={SpsInsightTileKind.SUCCESS}
3287
3287
  metric="1234"
3288
3288
  title="Insight Tile Title"
3289
3289
  >
3290
3290
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3291
3291
  </SpsInsightTile>
3292
3292
  <SpsInsightTile
3293
- kind={SpsInsightCardKind.WARNING}
3293
+ kind={SpsInsightTileKind.WARNING}
3294
3294
  metric="1234"
3295
3295
  title="Insight Tile Title"
3296
3296
  >
3297
3297
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3298
3298
  </SpsInsightTile>
3299
3299
  <SpsInsightTile
3300
- kind={SpsInsightCardKind.ERROR}
3300
+ kind={SpsInsightTileKind.ERROR}
3301
3301
  metric="1234"
3302
3302
  title="Insight Tile Title"
3303
3303
  >
3304
3304
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3305
3305
  </SpsInsightTile>
3306
3306
  <SpsInsightTile
3307
- kind={SpsInsightCardKind.SUCCESS}
3307
+ kind={SpsInsightTileKind.SUCCESS}
3308
3308
  metric="1234"
3309
3309
  title="Insight Tile Title"
3310
3310
  >
3311
3311
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3312
3312
  </SpsInsightTile>
3313
3313
  <SpsInsightTile
3314
- kind={SpsInsightCardKind.ERROR}
3314
+ kind={SpsInsightTileKind.ERROR}
3315
3315
  metric="1234"
3316
3316
  title="Insight Tile Title"
3317
3317
  >
@@ -3321,35 +3321,35 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3321
3321
  `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{jsx:x.code`
3322
3322
  <SpsInsights>
3323
3323
  <SpsInsightTile
3324
- kind={SpsInsightCardKind.GENERAL}
3324
+ kind={SpsInsightTileKind.GENERAL}
3325
3325
  metric="1234"
3326
3326
  title="Insight Tile Title"
3327
3327
  partnerCount="250"
3328
3328
  totalPartners="250"
3329
3329
  />
3330
3330
  <SpsInsightTile
3331
- kind={SpsInsightCardKind.PROCESSING}
3331
+ kind={SpsInsightTileKind.PROCESSING}
3332
3332
  metric="1234"
3333
3333
  title="Insight Tile Title"
3334
3334
  partnerCount="122"
3335
3335
  totalPartners="250"
3336
3336
  />
3337
3337
  <SpsInsightTile
3338
- kind={SpsInsightCardKind.SUCCESS}
3338
+ kind={SpsInsightTileKind.SUCCESS}
3339
3339
  metric="1234"
3340
3340
  title="Insight Tile Title"
3341
3341
  partnerCount="207"
3342
3342
  totalPartners="250"
3343
3343
  />
3344
3344
  <SpsInsightTile
3345
- kind={SpsInsightCardKind.WARNING}
3345
+ kind={SpsInsightTileKind.WARNING}
3346
3346
  metric="1234"
3347
3347
  title="Insight Tile Title"
3348
3348
  partnerCount="12"
3349
3349
  totalPartners="250"
3350
3350
  />
3351
3351
  <SpsInsightTile
3352
- kind={SpsInsightCardKind.ERROR}
3352
+ kind={SpsInsightTileKind.ERROR}
3353
3353
  metric="1234"
3354
3354
  title="Insight Tile Title"
3355
3355
  partnerCount="94"
@@ -3359,19 +3359,19 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3359
3359
  `}}},clickHandler:{label:"Adding a click handler",examples:{clickHandler:{jsx:x.code`
3360
3360
  <SpsInsights>
3361
3361
  <SpsInsightTile
3362
- kind={SpsInsightCardKind.GENERAL}
3362
+ kind={SpsInsightTileKind.GENERAL}
3363
3363
  metric="1234"
3364
3364
  title="Insight Tile Title"
3365
3365
  onClick={() => console.log("insight tile 1 clicked!")}
3366
3366
  />
3367
3367
  <SpsInsightTile
3368
- kind={SpsInsightCardKind.GENERAL}
3368
+ kind={SpsInsightTileKind.GENERAL}
3369
3369
  metric="1234"
3370
3370
  title="Insight Tile Title"
3371
3371
  onClick={() => console.log("insight tile 2 clicked!")}
3372
3372
  />
3373
3373
  <SpsInsightTile
3374
- kind={SpsInsightCardKind.GENERAL}
3374
+ kind={SpsInsightTileKind.GENERAL}
3375
3375
  metric="1234"
3376
3376
  title="Insight Tile Title"
3377
3377
  onClick={() => console.log("insight tile 3 clicked!")}
@@ -3380,31 +3380,31 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3380
3380
  `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{jsx:x.code`
3381
3381
  <SpsInsights>
3382
3382
  <SpsInsightTile
3383
- kind={SpsInsightCardKind.GENERAL}
3383
+ kind={SpsInsightTileKind.GENERAL}
3384
3384
  metric="1234"
3385
3385
  title="Insight Tile Title"
3386
3386
  icon={SpsIcon.USER}
3387
3387
  />
3388
3388
  <SpsInsightTile
3389
- kind={SpsInsightCardKind.PROCESSING}
3389
+ kind={SpsInsightTileKind.PROCESSING}
3390
3390
  metric="1234"
3391
3391
  title="Insight Tile Title"
3392
3392
  icon={SpsIcon.ASTERISK}
3393
3393
  />
3394
3394
  <SpsInsightTile
3395
- kind={SpsInsightCardKind.SUCCESS}
3395
+ kind={SpsInsightTileKind.SUCCESS}
3396
3396
  metric="1234"
3397
3397
  title="Insight Tile Title"
3398
3398
  icon={SpsIcon.DOLLAR_SIGN}
3399
3399
  />
3400
3400
  <SpsInsightTile
3401
- kind={SpsInsightCardKind.WARNING}
3401
+ kind={SpsInsightTileKind.WARNING}
3402
3402
  metric="1234"
3403
3403
  title="Insight Tile Title"
3404
3404
  icon={SpsIcon.FOLDER_OPEN}
3405
3405
  />
3406
3406
  <SpsInsightTile
3407
- kind={SpsInsightCardKind.ERROR}
3407
+ kind={SpsInsightTileKind.ERROR}
3408
3408
  metric="1234"
3409
3409
  title="Insight Tile Title"
3410
3410
  icon={SpsIcon.BAN}
@@ -3413,7 +3413,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3413
3413
  `}}},horizontal:{label:"Horizontal",examples:{horizontal:{jsx:x.code`
3414
3414
  <SpsInsights>
3415
3415
  <SpsInsightTile
3416
- kind={SpsInsightCardKind.GENERAL}
3416
+ kind={SpsInsightTileKind.GENERAL}
3417
3417
  metric="1234"
3418
3418
  title="Insight Tile Title"
3419
3419
  partnerCount="100"
@@ -3423,7 +3423,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3423
3423
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3424
3424
  </SpsInsightTile>
3425
3425
  <SpsInsightTile
3426
- kind={SpsInsightCardKind.PROCESSING}
3426
+ kind={SpsInsightTileKind.PROCESSING}
3427
3427
  metric="1234"
3428
3428
  title="Insight Tile Title"
3429
3429
  partnerCount="100"
@@ -3431,7 +3431,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3431
3431
  horizontal
3432
3432
  />
3433
3433
  <SpsInsightTile
3434
- kind={SpsInsightCardKind.SUCCESS}
3434
+ kind={SpsInsightTileKind.SUCCESS}
3435
3435
  metric="1234"
3436
3436
  title="Insight Tile Title"
3437
3437
  partnerCount="100"
@@ -3441,7 +3441,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3441
3441
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
3442
3442
  </SpsInsightTile>
3443
3443
  <SpsInsightTile
3444
- kind={SpsInsightCardKind.WARNING}
3444
+ kind={SpsInsightTileKind.WARNING}
3445
3445
  metric="1234"
3446
3446
  title="Insight Tile Title"
3447
3447
  partnerCount="100"
@@ -3449,7 +3449,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
3449
3449
  horizontal
3450
3450
  />
3451
3451
  <SpsInsightTile
3452
- kind={SpsInsightCardKind.ERROR}
3452
+ kind={SpsInsightTileKind.ERROR}
3453
3453
  metric="1234"
3454
3454
  title="Insight Tile Title"
3455
3455
  partnerCount="100"
@@ -5288,7 +5288,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
5288
5288
  formMeta={formMeta.fields.searchText}
5289
5289
  placeholder="Search fields"
5290
5290
  />
5291
- <SpsButton kind="icon" icon="search" />
5291
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
5292
5292
  </SpsListToolbarSearch>
5293
5293
  </SpsListToolbar>
5294
5294
  );
@@ -8281,13 +8281,13 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
8281
8281
  }
8282
8282
  `}}}},ah={},sh=I({},q);function $r(e){const c=e,{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:o}=c,i=Z(c,["children","className","data-testid","unsafelyReplaceClassName"]),l=A(o||"sps-workflow__document",n);return s.createElement("span",I({className:l,"data-testid":`${a}__document`},i),t)}Object.assign($r,{props:ah,propTypes:sh,displayName:"SpsWorkflowDocument"});function rh(e){return s.createElement($r,I({},e))}Object.assign(rh,{props:ah,propTypes:sh,displayName:"SpsWfDoc"});const oh={icon:"SpsIcon"},ih=$(I({},q),{icon:be(M.SpsIcon)});function Hr(e){const p=e,{children:t,className:n,icon:a,"data-testid":o,unsafelyReplaceClassName:i}=p,l=Z(p,["children","className","icon","data-testid","unsafelyReplaceClassName"]),c=A(i||"sps-workflow__document-status",n);return s.createElement("span",I({className:c,"data-testid":`${o}__doc-status`},l),a&&s.createElement("i",{"aria-hidden":"true",className:`sps-icon sps-icon-${a}`}),t)}Object.assign(Hr,{props:oh,propTypes:ih,displayName:"SpsWorkflowDocumentStatus"});function lh(e){return s.createElement(Hr,I({},e))}Object.assign(lh,{props:oh,propTypes:ih,displayName:"SpsWfDs"});const ch={icon:{type:"SpsIcon",required:!0},title:{type:"string",required:!0}},dh=$(I({},q),{icon:be(M.SpsIcon).isRequired,title:T.exports.string.isRequired});function Wr(e){const u=e,{children:t,className:n,icon:a,title:o,"data-testid":i,unsafelyReplaceClassName:l}=u,c=Z(u,["children","className","icon","title","data-testid","unsafelyReplaceClassName"]),p=A(l||"sps-workflow__step",n);return s.createElement("div",I({className:p,"data-testid":`${i}__step`},c),s.createElement("i",{"aria-hidden":"true",className:`sps-icon sps-icon-${a} sps-workflow__step-icon`}),s.createElement("h2",{className:"sps-workflow__step-heading","data-testid":`${i}__step-heading`},o),t)}Object.assign(Wr,{props:ch,propTypes:dh,displayName:"SpsWorkflowStep"});function ph(e){return s.createElement(Wr,I({},e))}Object.assign(ph,{props:ch,propTypes:dh,displayName:"SpsWfStep"});const uh={basic:{label:"Basic Usage",examples:{basic:{jsx:x.code`
8283
8283
  <div className="col-4">
8284
- <SpsWorkflow icon="list-summary" title="Workflow">
8285
- <SpsWorkflowStep icon="heart" title="Name of Step">
8284
+ <SpsWorkflow icon={SpsIcon.LIST_SUMMARY} title="Workflow">
8285
+ <SpsWorkflowStep icon={SpsIcon.HEART} title="Name of Step">
8286
8286
  <SpsWorkflowDocument>
8287
8287
  <a href="https://github.com/SPSCommerce/ui-angular" target="_blank">
8288
8288
  Document Name
8289
8289
  </a>
8290
- <SpsWorkflowDocumentStatus icon="status-error">
8290
+ <SpsWorkflowDocumentStatus icon={SpsIcon.STATUS_ERROR}>
8291
8291
  Status
8292
8292
  </SpsWorkflowDocumentStatus>
8293
8293
  </SpsWorkflowDocument>
@@ -8298,19 +8298,19 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
8298
8298
  </SpsWorkflowDocumentStatus>
8299
8299
  </SpsWorkflowDocument>
8300
8300
  </SpsWorkflowStep>
8301
- <SpsWorkflowStep icon="heart" title="Done">
8301
+ <SpsWorkflowStep icon={SpsIcon.HEART} title="Done">
8302
8302
  </SpsWorkflowStep>
8303
8303
  </SpsWorkflow>
8304
8304
  </div>
8305
8305
  `}}},withAlias:{label:"Basic Usage with Alias",examples:{withAlias:{jsx:x.code`
8306
8306
  <div className="col-4">
8307
- <SpsWf icon="list-summary" title="Workflow">
8308
- <SpsWfStep icon="heart" title="Name of Step">
8307
+ <SpsWf icon={SpsIcon.LIST_SUMMARY} title="Workflow">
8308
+ <SpsWfStep icon={SpsIcon.HEART} title="Name of Step">
8309
8309
  <SpsWfDoc>
8310
8310
  <a href="https://github.com/SPSCommerce/ui-angular" target="_blank">
8311
8311
  Document Name
8312
8312
  </a>
8313
- <SpsWfDs icon="status-error">Status</SpsWfDs>
8313
+ <SpsWfDs icon={SpsIcon.STATUS_ERROR}>Status</SpsWfDs>
8314
8314
  </SpsWfDoc>
8315
8315
  <SpsWfDoc>
8316
8316
  Document Name
@@ -8319,7 +8319,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
8319
8319
  </SpsWfDs>
8320
8320
  </SpsWfDoc>
8321
8321
  </SpsWfStep>
8322
- <SpsWfStep icon="heart" title="Done">
8322
+ <SpsWfStep icon={SpsIcon.HEART} title="Done">
8323
8323
  </SpsWfStep>
8324
8324
  </SpsWf>
8325
8325
  </div>
package/lib/index.es.js CHANGED
@@ -23469,14 +23469,14 @@ const SpsFocusedTaskExamples = {
23469
23469
  <div className="sfg-row">
23470
23470
  <div className="sfg-col-3"></div>
23471
23471
  <div className="sfg-col-6">
23472
- <SpsCard>
23472
+ <SpsCardV2>
23473
23473
  <i>pretend there's a form here</i>
23474
- </SpsCard>
23474
+ </SpsCardV2>
23475
23475
  </div>
23476
23476
  <div className="sfg-col-3"></div>
23477
23477
  </div>
23478
23478
  <SpsFocusedTaskActions>
23479
- <SpsButton kind="confirm" onClick={onFormSubmit}>
23479
+ <SpsButton kind={ButtonKind.CONFIRM} onClick={onFormSubmit}>
23480
23480
  Submit
23481
23481
  </SpsButton>
23482
23482
  </SpsFocusedTaskActions>
@@ -23510,14 +23510,14 @@ const SpsFocusedTaskExamples = {
23510
23510
  <div className="sfg-row">
23511
23511
  <div className="sfg-col-3"></div>
23512
23512
  <div className="sfg-col-6">
23513
- <SpsCard>
23513
+ <SpsCardV2>
23514
23514
  <i>pretend there's a form here</i>
23515
- </SpsCard>
23515
+ </SpsCardV2>
23516
23516
  </div>
23517
23517
  <div className="sfg-col-3"></div>
23518
23518
  </div>
23519
23519
  <SpsFocusedTaskActions>
23520
- <SpsButton kind="confirm" onClick={onFormSubmit}>
23520
+ <SpsButton kind={ButtonKind.CONFIRM} onClick={onFormSubmit}>
23521
23521
  Submit
23522
23522
  </SpsButton>
23523
23523
  </SpsFocusedTaskActions>
@@ -25238,27 +25238,27 @@ const SpsInsightTileExamples = {
25238
25238
  jsx: code`
25239
25239
  <SpsInsights>
25240
25240
  <SpsInsightTile
25241
- kind={SpsInsightCardKind.GENERAL}
25241
+ kind={SpsInsightTileKind.GENERAL}
25242
25242
  metric="1234"
25243
25243
  title="Insight Tile Title"
25244
25244
  />
25245
25245
  <SpsInsightTile
25246
- kind={SpsInsightCardKind.PROCESSING}
25246
+ kind={SpsInsightTileKind.PROCESSING}
25247
25247
  metric="1234"
25248
25248
  title="Insight Tile Title"
25249
25249
  />
25250
25250
  <SpsInsightTile
25251
- kind={SpsInsightCardKind.SUCCESS}
25251
+ kind={SpsInsightTileKind.SUCCESS}
25252
25252
  metric="1234"
25253
25253
  title="Insight Tile Title"
25254
25254
  />
25255
25255
  <SpsInsightTile
25256
- kind={SpsInsightCardKind.WARNING}
25256
+ kind={SpsInsightTileKind.WARNING}
25257
25257
  metric="1234"
25258
25258
  title="Insight Tile Title"
25259
25259
  />
25260
25260
  <SpsInsightTile
25261
- kind={SpsInsightCardKind.ERROR}
25261
+ kind={SpsInsightTileKind.ERROR}
25262
25262
  metric="1234"
25263
25263
  title="Insight Tile Title"
25264
25264
  />
@@ -25274,49 +25274,49 @@ const SpsInsightTileExamples = {
25274
25274
  jsx: code`
25275
25275
  <SpsInsights>
25276
25276
  <SpsInsightTile
25277
- kind={SpsInsightCardKind.GENERAL}
25277
+ kind={SpsInsightTileKind.GENERAL}
25278
25278
  metric="1234"
25279
25279
  title="Insight Tile Title"
25280
25280
  >
25281
25281
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25282
25282
  </SpsInsightTile>
25283
25283
  <SpsInsightTile
25284
- kind={SpsInsightCardKind.PROCESSING}
25284
+ kind={SpsInsightTileKind.PROCESSING}
25285
25285
  metric="1234"
25286
25286
  title="Insight Tile Title"
25287
25287
  >
25288
25288
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25289
25289
  </SpsInsightTile>
25290
25290
  <SpsInsightTile
25291
- kind={SpsInsightCardKind.SUCCESS}
25291
+ kind={SpsInsightTileKind.SUCCESS}
25292
25292
  metric="1234"
25293
25293
  title="Insight Tile Title"
25294
25294
  >
25295
25295
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25296
25296
  </SpsInsightTile>
25297
25297
  <SpsInsightTile
25298
- kind={SpsInsightCardKind.WARNING}
25298
+ kind={SpsInsightTileKind.WARNING}
25299
25299
  metric="1234"
25300
25300
  title="Insight Tile Title"
25301
25301
  >
25302
25302
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25303
25303
  </SpsInsightTile>
25304
25304
  <SpsInsightTile
25305
- kind={SpsInsightCardKind.ERROR}
25305
+ kind={SpsInsightTileKind.ERROR}
25306
25306
  metric="1234"
25307
25307
  title="Insight Tile Title"
25308
25308
  >
25309
25309
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25310
25310
  </SpsInsightTile>
25311
25311
  <SpsInsightTile
25312
- kind={SpsInsightCardKind.SUCCESS}
25312
+ kind={SpsInsightTileKind.SUCCESS}
25313
25313
  metric="1234"
25314
25314
  title="Insight Tile Title"
25315
25315
  >
25316
25316
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25317
25317
  </SpsInsightTile>
25318
25318
  <SpsInsightTile
25319
- kind={SpsInsightCardKind.ERROR}
25319
+ kind={SpsInsightTileKind.ERROR}
25320
25320
  metric="1234"
25321
25321
  title="Insight Tile Title"
25322
25322
  >
@@ -25334,35 +25334,35 @@ const SpsInsightTileExamples = {
25334
25334
  jsx: code`
25335
25335
  <SpsInsights>
25336
25336
  <SpsInsightTile
25337
- kind={SpsInsightCardKind.GENERAL}
25337
+ kind={SpsInsightTileKind.GENERAL}
25338
25338
  metric="1234"
25339
25339
  title="Insight Tile Title"
25340
25340
  partnerCount="250"
25341
25341
  totalPartners="250"
25342
25342
  />
25343
25343
  <SpsInsightTile
25344
- kind={SpsInsightCardKind.PROCESSING}
25344
+ kind={SpsInsightTileKind.PROCESSING}
25345
25345
  metric="1234"
25346
25346
  title="Insight Tile Title"
25347
25347
  partnerCount="122"
25348
25348
  totalPartners="250"
25349
25349
  />
25350
25350
  <SpsInsightTile
25351
- kind={SpsInsightCardKind.SUCCESS}
25351
+ kind={SpsInsightTileKind.SUCCESS}
25352
25352
  metric="1234"
25353
25353
  title="Insight Tile Title"
25354
25354
  partnerCount="207"
25355
25355
  totalPartners="250"
25356
25356
  />
25357
25357
  <SpsInsightTile
25358
- kind={SpsInsightCardKind.WARNING}
25358
+ kind={SpsInsightTileKind.WARNING}
25359
25359
  metric="1234"
25360
25360
  title="Insight Tile Title"
25361
25361
  partnerCount="12"
25362
25362
  totalPartners="250"
25363
25363
  />
25364
25364
  <SpsInsightTile
25365
- kind={SpsInsightCardKind.ERROR}
25365
+ kind={SpsInsightTileKind.ERROR}
25366
25366
  metric="1234"
25367
25367
  title="Insight Tile Title"
25368
25368
  partnerCount="94"
@@ -25380,19 +25380,19 @@ const SpsInsightTileExamples = {
25380
25380
  jsx: code`
25381
25381
  <SpsInsights>
25382
25382
  <SpsInsightTile
25383
- kind={SpsInsightCardKind.GENERAL}
25383
+ kind={SpsInsightTileKind.GENERAL}
25384
25384
  metric="1234"
25385
25385
  title="Insight Tile Title"
25386
25386
  onClick={() => console.log("insight tile 1 clicked!")}
25387
25387
  />
25388
25388
  <SpsInsightTile
25389
- kind={SpsInsightCardKind.GENERAL}
25389
+ kind={SpsInsightTileKind.GENERAL}
25390
25390
  metric="1234"
25391
25391
  title="Insight Tile Title"
25392
25392
  onClick={() => console.log("insight tile 2 clicked!")}
25393
25393
  />
25394
25394
  <SpsInsightTile
25395
- kind={SpsInsightCardKind.GENERAL}
25395
+ kind={SpsInsightTileKind.GENERAL}
25396
25396
  metric="1234"
25397
25397
  title="Insight Tile Title"
25398
25398
  onClick={() => console.log("insight tile 3 clicked!")}
@@ -25409,31 +25409,31 @@ const SpsInsightTileExamples = {
25409
25409
  jsx: code`
25410
25410
  <SpsInsights>
25411
25411
  <SpsInsightTile
25412
- kind={SpsInsightCardKind.GENERAL}
25412
+ kind={SpsInsightTileKind.GENERAL}
25413
25413
  metric="1234"
25414
25414
  title="Insight Tile Title"
25415
25415
  icon={SpsIcon.USER}
25416
25416
  />
25417
25417
  <SpsInsightTile
25418
- kind={SpsInsightCardKind.PROCESSING}
25418
+ kind={SpsInsightTileKind.PROCESSING}
25419
25419
  metric="1234"
25420
25420
  title="Insight Tile Title"
25421
25421
  icon={SpsIcon.ASTERISK}
25422
25422
  />
25423
25423
  <SpsInsightTile
25424
- kind={SpsInsightCardKind.SUCCESS}
25424
+ kind={SpsInsightTileKind.SUCCESS}
25425
25425
  metric="1234"
25426
25426
  title="Insight Tile Title"
25427
25427
  icon={SpsIcon.DOLLAR_SIGN}
25428
25428
  />
25429
25429
  <SpsInsightTile
25430
- kind={SpsInsightCardKind.WARNING}
25430
+ kind={SpsInsightTileKind.WARNING}
25431
25431
  metric="1234"
25432
25432
  title="Insight Tile Title"
25433
25433
  icon={SpsIcon.FOLDER_OPEN}
25434
25434
  />
25435
25435
  <SpsInsightTile
25436
- kind={SpsInsightCardKind.ERROR}
25436
+ kind={SpsInsightTileKind.ERROR}
25437
25437
  metric="1234"
25438
25438
  title="Insight Tile Title"
25439
25439
  icon={SpsIcon.BAN}
@@ -25450,7 +25450,7 @@ const SpsInsightTileExamples = {
25450
25450
  jsx: code`
25451
25451
  <SpsInsights>
25452
25452
  <SpsInsightTile
25453
- kind={SpsInsightCardKind.GENERAL}
25453
+ kind={SpsInsightTileKind.GENERAL}
25454
25454
  metric="1234"
25455
25455
  title="Insight Tile Title"
25456
25456
  partnerCount="100"
@@ -25460,7 +25460,7 @@ const SpsInsightTileExamples = {
25460
25460
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25461
25461
  </SpsInsightTile>
25462
25462
  <SpsInsightTile
25463
- kind={SpsInsightCardKind.PROCESSING}
25463
+ kind={SpsInsightTileKind.PROCESSING}
25464
25464
  metric="1234"
25465
25465
  title="Insight Tile Title"
25466
25466
  partnerCount="100"
@@ -25468,7 +25468,7 @@ const SpsInsightTileExamples = {
25468
25468
  horizontal
25469
25469
  />
25470
25470
  <SpsInsightTile
25471
- kind={SpsInsightCardKind.SUCCESS}
25471
+ kind={SpsInsightTileKind.SUCCESS}
25472
25472
  metric="1234"
25473
25473
  title="Insight Tile Title"
25474
25474
  partnerCount="100"
@@ -25478,7 +25478,7 @@ const SpsInsightTileExamples = {
25478
25478
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
25479
25479
  </SpsInsightTile>
25480
25480
  <SpsInsightTile
25481
- kind={SpsInsightCardKind.WARNING}
25481
+ kind={SpsInsightTileKind.WARNING}
25482
25482
  metric="1234"
25483
25483
  title="Insight Tile Title"
25484
25484
  partnerCount="100"
@@ -25486,7 +25486,7 @@ const SpsInsightTileExamples = {
25486
25486
  horizontal
25487
25487
  />
25488
25488
  <SpsInsightTile
25489
- kind={SpsInsightCardKind.ERROR}
25489
+ kind={SpsInsightTileKind.ERROR}
25490
25490
  metric="1234"
25491
25491
  title="Insight Tile Title"
25492
25492
  partnerCount="100"
@@ -29190,7 +29190,7 @@ const SpsListToolbarExamples = {
29190
29190
  formMeta={formMeta.fields.searchText}
29191
29191
  placeholder="Search fields"
29192
29192
  />
29193
- <SpsButton kind="icon" icon="search" />
29193
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
29194
29194
  </SpsListToolbarSearch>
29195
29195
  </SpsListToolbar>
29196
29196
  );
@@ -36273,13 +36273,13 @@ const SpsWorkflowExamples = {
36273
36273
  basic: {
36274
36274
  jsx: code`
36275
36275
  <div className="col-4">
36276
- <SpsWorkflow icon="list-summary" title="Workflow">
36277
- <SpsWorkflowStep icon="heart" title="Name of Step">
36276
+ <SpsWorkflow icon={SpsIcon.LIST_SUMMARY} title="Workflow">
36277
+ <SpsWorkflowStep icon={SpsIcon.HEART} title="Name of Step">
36278
36278
  <SpsWorkflowDocument>
36279
36279
  <a href="https://github.com/SPSCommerce/ui-angular" target="_blank">
36280
36280
  Document Name
36281
36281
  </a>
36282
- <SpsWorkflowDocumentStatus icon="status-error">
36282
+ <SpsWorkflowDocumentStatus icon={SpsIcon.STATUS_ERROR}>
36283
36283
  Status
36284
36284
  </SpsWorkflowDocumentStatus>
36285
36285
  </SpsWorkflowDocument>
@@ -36290,7 +36290,7 @@ const SpsWorkflowExamples = {
36290
36290
  </SpsWorkflowDocumentStatus>
36291
36291
  </SpsWorkflowDocument>
36292
36292
  </SpsWorkflowStep>
36293
- <SpsWorkflowStep icon="heart" title="Done">
36293
+ <SpsWorkflowStep icon={SpsIcon.HEART} title="Done">
36294
36294
  </SpsWorkflowStep>
36295
36295
  </SpsWorkflow>
36296
36296
  </div>
@@ -36304,13 +36304,13 @@ const SpsWorkflowExamples = {
36304
36304
  withAlias: {
36305
36305
  jsx: code`
36306
36306
  <div className="col-4">
36307
- <SpsWf icon="list-summary" title="Workflow">
36308
- <SpsWfStep icon="heart" title="Name of Step">
36307
+ <SpsWf icon={SpsIcon.LIST_SUMMARY} title="Workflow">
36308
+ <SpsWfStep icon={SpsIcon.HEART} title="Name of Step">
36309
36309
  <SpsWfDoc>
36310
36310
  <a href="https://github.com/SPSCommerce/ui-angular" target="_blank">
36311
36311
  Document Name
36312
36312
  </a>
36313
- <SpsWfDs icon="status-error">Status</SpsWfDs>
36313
+ <SpsWfDs icon={SpsIcon.STATUS_ERROR}>Status</SpsWfDs>
36314
36314
  </SpsWfDoc>
36315
36315
  <SpsWfDoc>
36316
36316
  Document Name
@@ -36319,7 +36319,7 @@ const SpsWorkflowExamples = {
36319
36319
  </SpsWfDs>
36320
36320
  </SpsWfDoc>
36321
36321
  </SpsWfStep>
36322
- <SpsWfStep icon="heart" title="Done">
36322
+ <SpsWfStep icon={SpsIcon.HEART} title="Done">
36323
36323
  </SpsWfStep>
36324
36324
  </SpsWf>
36325
36325
  </div>
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.21.2",
4
+ "version": "5.21.5",
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,11 +28,11 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@react-stately/collections": "^3.3.3",
31
- "@spscommerce/ds-colors": "5.21.2",
32
- "@spscommerce/ds-illustrations": "5.21.2",
33
- "@spscommerce/ds-shared": "5.21.2",
34
- "@spscommerce/positioning": "5.21.2",
35
- "@spscommerce/utils": "5.21.2",
31
+ "@spscommerce/ds-colors": "5.21.5",
32
+ "@spscommerce/ds-illustrations": "5.21.5",
33
+ "@spscommerce/ds-shared": "5.21.5",
34
+ "@spscommerce/positioning": "5.21.5",
35
+ "@spscommerce/utils": "5.21.5",
36
36
  "moment": "^2.25.3",
37
37
  "moment-timezone": "^0.5.28",
38
38
  "react": "^16.9.0",
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "@react-stately/collections": "^3.3.3",
43
- "@spscommerce/ds-colors": "5.21.2",
44
- "@spscommerce/ds-illustrations": "5.21.2",
45
- "@spscommerce/ds-shared": "5.21.2",
46
- "@spscommerce/positioning": "5.21.2",
47
- "@spscommerce/utils": "5.21.2",
43
+ "@spscommerce/ds-colors": "5.21.5",
44
+ "@spscommerce/ds-illustrations": "5.21.5",
45
+ "@spscommerce/ds-shared": "5.21.5",
46
+ "@spscommerce/positioning": "5.21.5",
47
+ "@spscommerce/utils": "5.21.5",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",