@sps-woodland/content-row 7.9.0 → 7.10.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.
Files changed (3) hide show
  1. package/lib/index.cjs.js +52 -48
  2. package/lib/index.es.js +66 -62
  3. package/package.json +11 -11
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("react"),a=require("@sps-woodland/core"),F=require("@spscommerce/ds-react"),c=require("@spscommerce/utils");function O(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const s=O(z);function A(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function k(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function v(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?k(Object(o),!0).forEach(function(n){A(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):k(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var D=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},b=e=>t=>{var o=e.defaultClassName,n=v(v({},e.defaultVariants),t);for(var r in n){var i,d=(i=n[r])!==null&&i!==void 0?i:e.defaultVariants[r];if(d!=null){var l=d;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=e.variantClassNames[r][l];m&&(o+=" "+m)}}for(var[C,w]of e.compoundVariants)D(C,n,e.defaultVariants)&&(o+=" "+w);return o},H=b({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"}},defaultVariants:{lean:!1,borderless:!1},compoundVariants:[]});function p({children:e,className:t,borderless:o,lean:n,widthPx:r,widthRem:i,style:d,...l}){const m=r?r/16:i,C=m?{...d,width:`${m}rem`}:d;return s.createElement("div",{className:a.cl(H({lean:n,borderless:o}),t),...l,style:C},e)}a.Metadata.set(p,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"}}});var T=b({defaultClassName:"_11ztjee1",variantClassNames:{expanded:{true:"_11ztjee2",false:"_11ztjee3"}},defaultVariants:{expanded:!1},compoundVariants:[]}),q=b({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"},selected:{true:"_11ztjee7",false:"_11ztjee8"},cardSpacing:{true:"_11ztjee9",false:"_11ztjeea"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeb"]]}),G="_11ztjeee",K="_11ztjeec",W="_11ztjeed",N="_11ztjeef";function f({children:e,className:t,...o}){return s.createElement("div",{className:a.cl(G,t),...o},e)}a.Metadata.set(f,{name:"Content Row Expansion"});function x({children:e,className:t,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:r=!1,expanded:i,onBeforeCollapsed:d,onBeforeExpanded:l,onSelectionChange:m,onCollapsed:C,onExpanded:w,selectable:y=!1,selected:h,...M}){const[P,[R]]=a.selectChildren(e,[{type:p},{type:f}]),{t:I}=s.useContext(a.I18nContext),[V,g]=s.useState(n),u=typeof i=="boolean"?i:V;function _(j){j.stopPropagation(),u&&(!d||d())?(g(!1),C&&C()):!u&&(!l||l())&&(g(!0),w&&w())}const E=()=>s.createElement(F.SpsCheckbox,{checked:h,onChange:m}),S=()=>s.createElement("button",{type:"button",className:a.cl(K),onClick:_,"aria-label":I(`design-system:contentRow.${u?"collapse":"expand"}`)},s.createElement(a.Icon,{className:a.cl(W),icon:u?"minus-circle":"plus-circle"}));return s.createElement("div",{className:a.cl(T({expanded:u}),t),...M},s.createElement("div",{className:a.cl(q({expanded:u,selected:h,cardSpacing:r}))},y&&!o&&s.createElement(p,{widthPx:46},s.createElement(E,null)),R&&!o&&s.createElement(p,{widthPx:44},s.createElement(S,null)),R&&y&&o&&s.createElement(p,{widthPx:46},s.createElement("section",{className:N},s.createElement(E,null)),s.createElement("section",{className:N},s.createElement(S,null))),P),R)}a.Metadata.set(x,{name:"Content Row",props:{alternateLayout:{type:"boolean",default:"false"},initiallyExpanded:{type:"boolean",default:"false"},cardSpacing:{type:"boolean",default:"false"},expanded:{type:"boolean"},onBeforeCollapsed:{type:"() => boolean"},onBeforeExpanded:{type:"() => boolean"},onSelectionChange:{type:"ChangeEventHandler"},onCollapsed:{type:"() => void"},onExpanded:{type:"() => void"},selectable:{type:"boolean",default:"false"},selected:{type:"boolean"}}});const B={components:[x,p,f],examples:{basic:{label:"Content Rows",examples:{basic:{react:c.code`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const z=require("react"),a=require("@sps-woodland/core"),F=require("@spscommerce/ds-react"),c=require("@spscommerce/utils");function O(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const s=O(z);function H(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function k(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function v(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?k(Object(o),!0).forEach(function(n){H(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):k(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var A=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},b=e=>t=>{var o=e.defaultClassName,n=v(v({},e.defaultVariants),t);for(var r in n){var i,d=(i=n[r])!==null&&i!==void 0?i:e.defaultVariants[r];if(d!=null){var l=d;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=e.variantClassNames[r][l];m&&(o+=" "+m)}}for(var[C,w]of e.compoundVariants)A(C,n,e.defaultVariants)&&(o+=" "+w);return o},D=b({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"}},defaultVariants:{lean:!1,borderless:!1},compoundVariants:[]});function p({children:e,className:t,borderless:o,lean:n,widthPx:r,widthRem:i,style:d,...l}){const m=r?r/16:i,C=m?{...d,width:`${m}rem`}:d;return s.createElement("div",{className:a.cl(D({lean:n,borderless:o}),t),...l,style:C},e)}a.Metadata.set(p,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"}}});var T=b({defaultClassName:"_11ztjee1",variantClassNames:{expanded:{true:"_11ztjee2",false:"_11ztjee3"}},defaultVariants:{expanded:!1},compoundVariants:[]}),q=b({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"},selected:{true:"_11ztjee7",false:"_11ztjee8"},cardSpacing:{true:"_11ztjee9",false:"_11ztjeea"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeb"]]}),G="_11ztjeee",K="_11ztjeec",W="_11ztjeed",N="_11ztjeef";function f({children:e,className:t,...o}){return s.createElement("div",{className:a.cl(G,t),...o},e)}a.Metadata.set(f,{name:"Content Row Expansion"});function x({children:e,className:t,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:r=!1,expanded:i,onBeforeCollapsed:d,onBeforeExpanded:l,onSelectionChange:m,onCollapsed:C,onExpanded:w,selectable:y=!1,selected:g,...P}){const[M,[R]]=a.selectChildren(e,[{type:p},{type:f}]),{t:I}=s.useContext(a.I18nContext),[V,h]=s.useState(n),u=typeof i=="boolean"?i:V;function _(j){j.stopPropagation(),u&&(!d||d())?(h(!1),C&&C()):!u&&(!l||l())&&(h(!0),w&&w())}const S=()=>s.createElement(F.SpsCheckbox,{checked:g,onChange:m}),E=()=>s.createElement("button",{type:"button",className:a.cl(K),onClick:_,"aria-label":I(`design-system:contentRow.${u?"collapse":"expand"}`)},s.createElement(a.Icon,{className:a.cl(W),icon:u?"minus-circle":"plus-circle"}));return s.createElement("div",{className:a.cl(T({expanded:u}),t),...P},s.createElement("div",{className:a.cl(q({expanded:u,selected:g,cardSpacing:r}))},y&&!o&&s.createElement(p,{widthPx:46},s.createElement(S,null)),R&&!o&&s.createElement(p,{widthPx:44},s.createElement(E,null)),R&&y&&o&&s.createElement(p,{widthPx:46},s.createElement("section",{className:N},s.createElement(S,null)),s.createElement("section",{className:N},s.createElement(E,null))),M),R)}a.Metadata.set(x,{name:"Content Row",props:{alternateLayout:{type:"boolean",default:"false"},initiallyExpanded:{type:"boolean",default:"false"},cardSpacing:{type:"boolean",default:"false"},expanded:{type:"boolean"},onBeforeCollapsed:{type:"() => boolean"},onBeforeExpanded:{type:"() => boolean"},onSelectionChange:{type:"ChangeEventHandler"},onCollapsed:{type:"() => void"},onExpanded:{type:"() => void"},selectable:{type:"boolean",default:"false"},selected:{type:"boolean"}}});const B={components:[x,p,f],examples:{basic:{label:"Content Rows",examples:{basic:{react:c.code`
2
2
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-rows";
3
3
  import { Icon } from "@sps-woodland/core";
4
4
  import { sprinkles } from "@sps-woodland/tokens";
@@ -302,6 +302,7 @@
302
302
  import { grid } from "@sps-woodland/tokens";
303
303
 
304
304
  function Component() {
305
+ const [pinSortingHeader, setPinSortingHeader] = React.useState(false);
305
306
  const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);
306
307
  const { formValue, formMeta, updateForm } = useSpsForm({
307
308
  selected: null
@@ -344,54 +345,57 @@
344
345
  return 0;
345
346
  }
346
347
  }), [sort]);
347
-
348
+
348
349
  return (
349
- <div className={grid.root}>
350
- <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
351
- <SortingHeaderCell sortDisabled widthRem={2.9} />
352
- <SortingHeaderCell sortDisabled widthRem={2.9} />
353
- <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
354
- <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
355
- <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
356
- </SortingHeader>
357
-
358
- {items.map(item => {
359
- return (
360
- <ContentRow
361
- key={item.id}
362
- selectable
363
- selected={formValue.selected === item.id}
364
- onSelectionChange={() => selectRow(item.id)}
365
- className={grid[12]}
366
- >
367
- <ContentRowCol>
368
- {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
369
- {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
370
- <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
371
- </ContentRowCol>
372
- <ContentRowCol>
373
- <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
374
- </ContentRowCol>
375
- <ContentRowCol widthPx={150}>
376
- {item.timestamp}
377
- </ContentRowCol>
378
- <ContentRowExpansion>
379
- <Card>
380
- <br />
381
- <br />
382
- <br />
383
- <br />
384
- Additional content
385
- <br />
386
- <br />
387
- <br />
388
- <br />
389
- </Card>
390
- </ContentRowExpansion>
391
- </ContentRow>
392
- );
393
- })}
394
- </div>
350
+ <>
351
+ <SpsToggle label="Pin the Sorting Header" onChange={() => { setPinSortingHeader(!pinSortingHeader); }}/>
352
+ <div className={grid.root}>
353
+ <SortingHeader pinSortingHeader={pinSortingHeader} sort={sort} onSortChange={setSort} className={grid[12]}>
354
+ <SortingHeaderCell sortDisabled widthRem={2.9} />
355
+ <SortingHeaderCell sortDisabled widthRem={2.9} />
356
+ <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
357
+ <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
358
+ <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
359
+ </SortingHeader>
360
+
361
+ {items.map(item => {
362
+ return (
363
+ <ContentRow
364
+ key={item.id}
365
+ selectable
366
+ selected={formValue.selected === item.id}
367
+ onSelectionChange={() => selectRow(item.id)}
368
+ className={grid[12]}
369
+ >
370
+ <ContentRowCol>
371
+ {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
372
+ {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
373
+ <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
374
+ </ContentRowCol>
375
+ <ContentRowCol>
376
+ <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
377
+ </ContentRowCol>
378
+ <ContentRowCol widthPx={150}>
379
+ {item.timestamp}
380
+ </ContentRowCol>
381
+ <ContentRowExpansion>
382
+ <Card>
383
+ <br />
384
+ <br />
385
+ <br />
386
+ <br />
387
+ Additional content
388
+ <br />
389
+ <br />
390
+ <br />
391
+ <br />
392
+ </Card>
393
+ </ContentRowExpansion>
394
+ </ContentRow>
395
+ );
396
+ })}
397
+ </div>
398
+ </>
395
399
  )
396
400
  }
397
401
  `}}}}},L={"Content Rows":B};exports.ContentRow=x;exports.ContentRowCol=p;exports.ContentRowExpansion=f;exports.MANIFEST=L;
package/lib/index.es.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as s from "react";
2
- import { Metadata as R, cl as C, selectChildren as _, I18nContext as O, Icon as A } from "@sps-woodland/core";
3
- import { SpsCheckbox as D } from "@spscommerce/ds-react";
2
+ import { Metadata as R, cl as C, selectChildren as _, I18nContext as H, Icon as O } from "@sps-woodland/core";
3
+ import { SpsCheckbox as A } from "@spscommerce/ds-react";
4
4
  import { code as l } from "@spscommerce/utils";
5
- function H(e, t, o) {
5
+ function D(e, t, o) {
6
6
  return t in e ? Object.defineProperty(e, t, {
7
7
  value: o,
8
8
  enumerable: !0,
@@ -10,7 +10,7 @@ function H(e, t, o) {
10
10
  writable: !0
11
11
  }) : e[t] = o, e;
12
12
  }
13
- function S(e, t) {
13
+ function k(e, t) {
14
14
  var o = Object.keys(e);
15
15
  if (Object.getOwnPropertySymbols) {
16
16
  var n = Object.getOwnPropertySymbols(e);
@@ -23,9 +23,9 @@ function S(e, t) {
23
23
  function v(e) {
24
24
  for (var t = 1; t < arguments.length; t++) {
25
25
  var o = arguments[t] != null ? arguments[t] : {};
26
- t % 2 ? S(Object(o), !0).forEach(function(n) {
27
- H(e, n, o[n]);
28
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : S(Object(o)).forEach(function(n) {
26
+ t % 2 ? k(Object(o), !0).forEach(function(n) {
27
+ D(e, n, o[n]);
28
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : k(Object(o)).forEach(function(n) {
29
29
  Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(o, n));
30
30
  });
31
31
  }
@@ -115,19 +115,19 @@ function P({
115
115
  const [M, [f]] = _(e, [
116
116
  { type: u },
117
117
  { type: x }
118
- ]), { t: V } = s.useContext(O), [z, g] = s.useState(n), p = typeof i == "boolean" ? i : z;
118
+ ]), { t: V } = s.useContext(H), [z, g] = s.useState(n), p = typeof i == "boolean" ? i : z;
119
119
  function F(j) {
120
120
  j.stopPropagation(), p && (!d || d()) ? (g(!1), m && m()) : !p && (!a || a()) && (g(!0), w && w());
121
121
  }
122
- const E = () => /* @__PURE__ */ s.createElement(D, {
122
+ const S = () => /* @__PURE__ */ s.createElement(A, {
123
123
  checked: h,
124
124
  onChange: c
125
- }), k = () => /* @__PURE__ */ s.createElement("button", {
125
+ }), E = () => /* @__PURE__ */ s.createElement("button", {
126
126
  type: "button",
127
127
  className: C(L),
128
128
  onClick: F,
129
129
  "aria-label": V(`design-system:contentRow.${p ? "collapse" : "expand"}`)
130
- }, /* @__PURE__ */ s.createElement(A, {
130
+ }, /* @__PURE__ */ s.createElement(O, {
131
131
  className: C(J),
132
132
  icon: p ? "minus-circle" : "plus-circle"
133
133
  }));
@@ -144,15 +144,15 @@ function P({
144
144
  )
145
145
  }, y && !o && /* @__PURE__ */ s.createElement(u, {
146
146
  widthPx: 46
147
- }, /* @__PURE__ */ s.createElement(E, null)), f && !o && /* @__PURE__ */ s.createElement(u, {
147
+ }, /* @__PURE__ */ s.createElement(S, null)), f && !o && /* @__PURE__ */ s.createElement(u, {
148
148
  widthPx: 44
149
- }, /* @__PURE__ */ s.createElement(k, null)), f && y && o && /* @__PURE__ */ s.createElement(u, {
149
+ }, /* @__PURE__ */ s.createElement(E, null)), f && y && o && /* @__PURE__ */ s.createElement(u, {
150
150
  widthPx: 46
151
151
  }, /* @__PURE__ */ s.createElement("section", {
152
152
  className: N
153
- }, /* @__PURE__ */ s.createElement(E, null)), /* @__PURE__ */ s.createElement("section", {
153
+ }, /* @__PURE__ */ s.createElement(S, null)), /* @__PURE__ */ s.createElement("section", {
154
154
  className: N
155
- }, /* @__PURE__ */ s.createElement(k, null))), M), f);
155
+ }, /* @__PURE__ */ s.createElement(E, null))), M), f);
156
156
  }
157
157
  R.set(P, {
158
158
  name: "Content Row",
@@ -515,6 +515,7 @@ const q = {
515
515
  import { grid } from "@sps-woodland/tokens";
516
516
 
517
517
  function Component() {
518
+ const [pinSortingHeader, setPinSortingHeader] = React.useState(false);
518
519
  const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);
519
520
  const { formValue, formMeta, updateForm } = useSpsForm({
520
521
  selected: null
@@ -557,54 +558,57 @@ const q = {
557
558
  return 0;
558
559
  }
559
560
  }), [sort]);
560
-
561
+
561
562
  return (
562
- <div className={grid.root}>
563
- <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
564
- <SortingHeaderCell sortDisabled widthRem={2.9} />
565
- <SortingHeaderCell sortDisabled widthRem={2.9} />
566
- <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
567
- <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
568
- <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
569
- </SortingHeader>
570
-
571
- {items.map(item => {
572
- return (
573
- <ContentRow
574
- key={item.id}
575
- selectable
576
- selected={formValue.selected === item.id}
577
- onSelectionChange={() => selectRow(item.id)}
578
- className={grid[12]}
579
- >
580
- <ContentRowCol>
581
- {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
582
- {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
583
- <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
584
- </ContentRowCol>
585
- <ContentRowCol>
586
- <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
587
- </ContentRowCol>
588
- <ContentRowCol widthPx={150}>
589
- {item.timestamp}
590
- </ContentRowCol>
591
- <ContentRowExpansion>
592
- <Card>
593
- <br />
594
- <br />
595
- <br />
596
- <br />
597
- Additional content
598
- <br />
599
- <br />
600
- <br />
601
- <br />
602
- </Card>
603
- </ContentRowExpansion>
604
- </ContentRow>
605
- );
606
- })}
607
- </div>
563
+ <>
564
+ <SpsToggle label="Pin the Sorting Header" onChange={() => { setPinSortingHeader(!pinSortingHeader); }}/>
565
+ <div className={grid.root}>
566
+ <SortingHeader pinSortingHeader={pinSortingHeader} sort={sort} onSortChange={setSort} className={grid[12]}>
567
+ <SortingHeaderCell sortDisabled widthRem={2.9} />
568
+ <SortingHeaderCell sortDisabled widthRem={2.9} />
569
+ <SortingHeaderCell sortKey='id'>ID</SortingHeaderCell>
570
+ <SortingHeaderCell sortKey='type'>Type</SortingHeaderCell>
571
+ <SortingHeaderCell sortKey='timestamp' widthPx={150}>Timestamp</SortingHeaderCell>
572
+ </SortingHeader>
573
+
574
+ {items.map(item => {
575
+ return (
576
+ <ContentRow
577
+ key={item.id}
578
+ selectable
579
+ selected={formValue.selected === item.id}
580
+ onSelectionChange={() => selectRow(item.id)}
581
+ className={grid[12]}
582
+ >
583
+ <ContentRowCol>
584
+ {item.status === 'processing' && <Icon className={sprinkles({ mr: "sm" })} icon="status-in-process" size="lg" color="purple-medium" />}
585
+ {item.status === 'success' && <Icon className={sprinkles({ mr: "sm" })} icon="status-ok" size="lg" color="green-medium" />}
586
+ <a href="#" className={sprinkles({ fs: "body-md" })}>{item.id}</a>
587
+ </ContentRowCol>
588
+ <ContentRowCol>
589
+ <a href="#" className={sprinkles({ fs: "body-md" })}>{item.type}</a>
590
+ </ContentRowCol>
591
+ <ContentRowCol widthPx={150}>
592
+ {item.timestamp}
593
+ </ContentRowCol>
594
+ <ContentRowExpansion>
595
+ <Card>
596
+ <br />
597
+ <br />
598
+ <br />
599
+ <br />
600
+ Additional content
601
+ <br />
602
+ <br />
603
+ <br />
604
+ <br />
605
+ </Card>
606
+ </ContentRowExpansion>
607
+ </ContentRow>
608
+ );
609
+ })}
610
+ </div>
611
+ </>
608
612
  )
609
613
  }
610
614
  `
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/content-row",
3
3
  "description": "SPS Woodland Design System page title component",
4
- "version": "7.9.0",
4
+ "version": "7.10.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
@@ -26,23 +26,23 @@
26
26
  "access": "public"
27
27
  },
28
28
  "peerDependencies": {
29
- "@sps-woodland/core": "7.9.0",
30
- "@sps-woodland/tokens": "7.9.0",
31
- "@spscommerce/ds-colors": "7.9.0",
29
+ "@sps-woodland/core": "7.10.0",
30
+ "@sps-woodland/tokens": "7.10.0",
31
+ "@spscommerce/ds-colors": "7.10.0",
32
32
  "@spscommerce/ds-illustrations": "6.37.3",
33
- "@spscommerce/ds-react": "7.9.0",
34
- "@spscommerce/ds-shared": "7.9.0",
33
+ "@spscommerce/ds-react": "7.10.0",
34
+ "@spscommerce/ds-shared": "7.10.0",
35
35
  "@spscommerce/utils": "^6.12.1",
36
36
  "react": "^16.14.0",
37
37
  "react-dom": "^16.14.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@sps-woodland/core": "7.9.0",
41
- "@sps-woodland/tokens": "7.9.0",
42
- "@spscommerce/ds-colors": "7.9.0",
40
+ "@sps-woodland/core": "7.10.0",
41
+ "@sps-woodland/tokens": "7.10.0",
42
+ "@spscommerce/ds-colors": "7.10.0",
43
43
  "@spscommerce/ds-illustrations": "6.37.3",
44
- "@spscommerce/ds-react": "7.9.0",
45
- "@spscommerce/ds-shared": "7.9.0",
44
+ "@spscommerce/ds-react": "7.10.0",
45
+ "@spscommerce/ds-shared": "7.10.0",
46
46
  "@spscommerce/utils": "^6.12.1",
47
47
  "@vanilla-extract/css": "^1.9.3",
48
48
  "@vanilla-extract/recipes": "^0.2.5",