@sps-woodland/matrix 8.26.8 → 8.27.2
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.js +1 -1
- package/lib/index.umd.cjs +1 -1
- package/package.json +8 -8
package/lib/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import * as e from "react";
|
|
|
2
2
|
import t from "react";
|
|
3
3
|
import { Metadata as o, cl as l, Title as f } from "@sps-woodland/core";
|
|
4
4
|
import { code as s } from "@spscommerce/utils";
|
|
5
|
-
var c = "_67ajyb0",
|
|
5
|
+
var c = "_67ajyb0", p = "_67ajyb1", d = "_67ajyb2", b = "_67ajyb3";
|
|
6
6
|
function m({
|
|
7
7
|
title: a,
|
|
8
8
|
children: r,
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.Matrix={},l.React,l.core,l.utils))})(this,function(l,t,n,s){"use strict";function p(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>a[r]})}}return i.default=a,Object.freeze(i)}const e=p(t);var u="_67ajyb0",
|
|
1
|
+
(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.Matrix={},l.React,l.core,l.utils))})(this,function(l,t,n,s){"use strict";function p(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>a[r]})}}return i.default=a,Object.freeze(i)}const e=p(t);var u="_67ajyb0",b="_67ajyb1",d="_67ajyb2",g="_67ajyb3";function c({title:a,children:i,"data-testid":r,...o}){return t.createElement("div",{className:n.cl(u),"data-testid":"matrix"},t.createElement(n.Title,{size:"lg"},a),t.createElement("table",{className:n.cl(u),"data-testid":`${r}`,...o},i))}n.Metadata.set(c,{name:"Matrix",props:{title:"string"}});function x({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("thead",{"data-testid":`${i}`,...r},a))}n.Metadata.set(x,{name:"Matrix Head"});function m({icon:a,tooltip:i,width:r,className:o,children:y,"data-testid":H,...E}){return t.createElement(t.Fragment,null,t.createElement("th",{className:n.cl(b),style:{width:`${r}`},"data-testid":`${H}`,...E},y,t.createElement("div",{className:n.cl(g)},a,i)))}n.Metadata.set(m,{name:"Matrix Header",props:{icon:"Icon",tooltip:"SpsTooltip",width:"string"}});function h({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tbody",{"data-testid":`${i}`,...r},a))}n.Metadata.set(h,{name:"Matrix Body"});function M({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tr",{"data-testid":`${i}`,...r},a))}n.Metadata.set(M,{name:"Matrix Row"});function f({className:a,children:i,"data-testid":r,...o}){return i!==void 0?i===null?t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},"null"):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},i):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},"—")}n.Metadata.set(f,{name:"Matrix Cell"});const w={Matrix:{components:[c,m],description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ",e.createElement(a,{to:"tables"},"Table")," or ",e.createElement(a,{to:"description-lists"},"Description List")," for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),examples:{general:{label:"General Usage",description:({NavigateTo:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."),e.createElement("h5",null," When to Use "),e.createElement("ul",null,e.createElement("li",null," If the data set requires an identifier on both the X-axis and a Y-axis. "),e.createElement("li",null," If the data set requires six (6) or fewer columns (including the header column). "),e.createElement("li",null," If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")),e.createElement("h5",null," When Not to Use "),e.createElement("ul",null,e.createElement("li",null," If form elements are required, consider a ",e.createElement(a,{to:"tables"},"Table")," or ",e.createElement(a,{to:"description-lists"},"Description List"),". "),e.createElement("li",null," If the data set requires more than six (6) columns (including the header column), use a ",e.createElement(a,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(a,{to:"tables"},"Table")," instead. ")),e.createElement("h5",null," Avoid Over-Crowding "),e.createElement("p",null," Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),examples:{general:{react:s.code`
|
|
2
2
|
import {
|
|
3
3
|
Matrix,
|
|
4
4
|
MatrixHead,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/matrix",
|
|
3
3
|
"description": "SPS Woodland Design System Matrix component",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.27.2",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/matrix",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/tokens": "8.
|
|
32
|
+
"@sps-woodland/core": "8.27.2",
|
|
33
|
+
"@sps-woodland/tokens": "8.27.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@react-stately/collections": "^3.6.0",
|
|
@@ -38,13 +38,13 @@
|
|
|
38
38
|
"@vanilla-extract/css": "^1.9.3",
|
|
39
39
|
"react": "^16.14.0",
|
|
40
40
|
"react-dom": "^16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.
|
|
42
|
-
"@sps-woodland/tabs": "8.
|
|
43
|
-
"@sps-woodland/tokens": "8.
|
|
41
|
+
"@sps-woodland/core": "8.27.2",
|
|
42
|
+
"@sps-woodland/tabs": "8.27.2",
|
|
43
|
+
"@sps-woodland/tokens": "8.27.2"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@spscommerce/ds-react": "8.
|
|
47
|
-
"@spscommerce/ds-shared": "8.
|
|
46
|
+
"@spscommerce/ds-react": "8.27.2",
|
|
47
|
+
"@spscommerce/ds-shared": "8.27.2"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "pnpm run build:js && pnpm run build:types",
|