@purpurds/grid 5.11.0 → 5.11.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/dist/grid.cjs.js +2 -2
- package/dist/grid.es.js +46 -46
- package/dist/grid.item.d.ts +1 -1
- package/dist/grid.item.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +14 -13
- package/src/grid.module.scss +2 -1
- package/src/grid.stories.tsx +14 -5
- package/src/{grid.item.stories.tsx → grids.item.stories.tsx} +8 -9
package/dist/grid.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),s=require("react");function N(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var z={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/(function(p){(function(){var l={}.hasOwnProperty;function _(){for(var r="",i=0;i<arguments.length;i++){var u=arguments[i];u&&(r=
|
|
5
|
+
*/(function(p){(function(){var l={}.hasOwnProperty;function _(){for(var r="",i=0;i<arguments.length;i++){var u=arguments[i];u&&(r=d(r,e.call(this,u)))}return r}function e(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return _.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var i="";for(var u in r)l.call(r,u)&&r[u]&&(i=d(i,this&&this[u]||u));return i}function d(r,i){return i?r?r+" "+i:r+i:r}p.exports?(_.default=_,p.exports=_):window.classNames=_})()})(z);var w=z.exports;const x=N(w),O={"purpur-grid-item":"_purpur-grid-item_zx9tz_1","purpur-grid-item--no-col-gap":"_purpur-grid-item--no-col-gap_zx9tz_6","purpur-grid-item-colspan-sm-4":"_purpur-grid-item-colspan-sm-4_zx9tz_24","purpur-grid-item-colspan-sm-3":"_purpur-grid-item-colspan-sm-3_zx9tz_27","purpur-grid-item-colspan-sm-2":"_purpur-grid-item-colspan-sm-2_zx9tz_30","purpur-grid-item-colspan-sm-1":"_purpur-grid-item-colspan-sm-1_zx9tz_33","purpur-grid-item-colspan-md-8":"_purpur-grid-item-colspan-md-8_zx9tz_37","purpur-grid-item-colspan-md-7":"_purpur-grid-item-colspan-md-7_zx9tz_42","purpur-grid-item-colspan-md-6":"_purpur-grid-item-colspan-md-6_zx9tz_47","purpur-grid-item-colspan-md-5":"_purpur-grid-item-colspan-md-5_zx9tz_52","purpur-grid-item-colspan-md-4":"_purpur-grid-item-colspan-md-4_zx9tz_57","purpur-grid-item-colspan-md-3":"_purpur-grid-item-colspan-md-3_zx9tz_62","purpur-grid-item-colspan-md-2":"_purpur-grid-item-colspan-md-2_zx9tz_67","purpur-grid-item-colspan-md-1":"_purpur-grid-item-colspan-md-1_zx9tz_72","purpur-grid-item-colspan-lg-12":"_purpur-grid-item-colspan-lg-12_zx9tz_77","purpur-grid-item-colspan-lg-11":"_purpur-grid-item-colspan-lg-11_zx9tz_82","purpur-grid-item-colspan-lg-10":"_purpur-grid-item-colspan-lg-10_zx9tz_87","purpur-grid-item-colspan-lg-9":"_purpur-grid-item-colspan-lg-9_zx9tz_92","purpur-grid-item-colspan-lg-8":"_purpur-grid-item-colspan-lg-8_zx9tz_97","purpur-grid-item-colspan-lg-7":"_purpur-grid-item-colspan-lg-7_zx9tz_102","purpur-grid-item-colspan-lg-6":"_purpur-grid-item-colspan-lg-6_zx9tz_107","purpur-grid-item-colspan-lg-5":"_purpur-grid-item-colspan-lg-5_zx9tz_112","purpur-grid-item-colspan-lg-4":"_purpur-grid-item-colspan-lg-4_zx9tz_117","purpur-grid-item-colspan-lg-3":"_purpur-grid-item-colspan-lg-3_zx9tz_122","purpur-grid-item-colspan-lg-2":"_purpur-grid-item-colspan-lg-2_zx9tz_127","purpur-grid-item-colspan-lg-1":"_purpur-grid-item-colspan-lg-1_zx9tz_77"},S=x.bind(O),o="purpur-grid-item",f=({children:p,className:l,["data-testid"]:_,colSpanSm:e=4,colSpanMd:d=8,colSpanLg:r=12,noColGap:i=!1})=>{const u=S([l,o,{[`${o}--no-col-gap`]:i,[`${o}-colspan-sm-${e}`]:e,[`${o}-colspan-md-${d}`]:d,[`${o}-colspan-lg-${r}`]:r}]);return g.jsx("div",{className:u,"data-testid":_,children:p})},I=p=>!!p&&s.isValidElement(p)&&(!!p.props.colSpanSm||!!p.props.colSpanMd||!!p.props.colSpanLg),A={"purpur-grid":"_purpur-grid_113du_1","purpur-grid__inner":"_purpur-grid__inner_113du_7","purpur-grid__inner--no-gap":"_purpur-grid__inner--no-gap_113du_14","purpur-grid__inner--no-row-gap":"_purpur-grid__inner--no-row-gap_113du_14","purpur-grid__inner--grid":"_purpur-grid__inner--grid_113du_38","purpur-grid__inner--no-col-gap":"_purpur-grid__inner--no-col-gap_113du_42","purpur-grid__inner-col-sm-4":"_purpur-grid__inner-col-sm-4_113du_45","purpur-grid__inner-col-sm-3":"_purpur-grid__inner-col-sm-3_113du_48","purpur-grid__inner-col-sm-2":"_purpur-grid__inner-col-sm-2_113du_51","purpur-grid__inner-col-md-8":"_purpur-grid__inner-col-md-8_113du_55","purpur-grid__inner-col-md-7":"_purpur-grid__inner-col-md-7_113du_60","purpur-grid__inner-col-md-6":"_purpur-grid__inner-col-md-6_113du_65","purpur-grid__inner-col-md-5":"_purpur-grid__inner-col-md-5_113du_70","purpur-grid__inner-col-md-4":"_purpur-grid__inner-col-md-4_113du_75","purpur-grid__inner-col-md-3":"_purpur-grid__inner-col-md-3_113du_80","purpur-grid__inner-col-md-2":"_purpur-grid__inner-col-md-2_113du_85","purpur-grid__inner-col-lg-12":"_purpur-grid__inner-col-lg-12_113du_90","purpur-grid__inner-col-lg-11":"_purpur-grid__inner-col-lg-11_113du_95","purpur-grid__inner-col-lg-10":"_purpur-grid__inner-col-lg-10_113du_100","purpur-grid__inner-col-lg-9":"_purpur-grid__inner-col-lg-9_113du_105","purpur-grid__inner-col-lg-8":"_purpur-grid__inner-col-lg-8_113du_110","purpur-grid__inner-col-lg-7":"_purpur-grid__inner-col-lg-7_113du_115","purpur-grid__inner-col-lg-6":"_purpur-grid__inner-col-lg-6_113du_120","purpur-grid__inner-col-lg-5":"_purpur-grid__inner-col-lg-5_113du_125","purpur-grid__inner-col-lg-4":"_purpur-grid__inner-col-lg-4_113du_130","purpur-grid__inner-col-lg-3":"_purpur-grid__inner-col-lg-3_113du_135","purpur-grid__inner-col-lg-2":"_purpur-grid__inner-col-lg-2_113du_140","purpur-grid__inner--flex":"_purpur-grid__inner--flex_113du_144"},a=x.bind(A),E="purpur-grid",n="purpur-grid__inner",$=({children:p,className:l,containerClassName:_,["data-testid"]:e,colsSm:d=1,colsMd:r=1,colsLg:i=1,noGap:u=!1,noColGap:c=!1,noRowGap:h=!1,...y})=>{const m=s.Children.toArray(p).filter(I),t=m.length,b=a([_,E]),j=a([l,n,{[`${n}--grid`]:!t,[`${n}--flex`]:t,[`${n}--no-gap`]:u,[`${n}--no-col-gap`]:c,[`${n}--no-row-gap`]:h,[`${n}-col-sm-${d}`]:d>1&&!t,[`${n}-col-md-${r}`]:r>1&&!t,[`${n}-col-lg-${i}`]:i>1&&!t}]);return g.jsx("div",{className:b,"data-testid":e,...y,children:g.jsx("div",{className:j,children:t?s.Children.map(m,({props:{children:v,...C}})=>g.jsx(f,{...C,noColGap:u||c,children:v})):p})})};$.Item=f;exports.Grid=$;
|
|
6
6
|
//# sourceMappingURL=grid.cjs.js.map
|
package/dist/grid.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import { isValidElement as C, Children as m } from "react";
|
|
3
3
|
function w(p) {
|
|
4
4
|
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
|
|
@@ -15,7 +15,7 @@ var z = { exports: {} };
|
|
|
15
15
|
function _() {
|
|
16
16
|
for (var r = "", i = 0; i < arguments.length; i++) {
|
|
17
17
|
var u = arguments[i];
|
|
18
|
-
u && (r =
|
|
18
|
+
u && (r = d(r, e.call(this, u)));
|
|
19
19
|
}
|
|
20
20
|
return r;
|
|
21
21
|
}
|
|
@@ -30,17 +30,17 @@ var z = { exports: {} };
|
|
|
30
30
|
return r.toString();
|
|
31
31
|
var i = "";
|
|
32
32
|
for (var u in r)
|
|
33
|
-
t.call(r, u) && r[u] && (i =
|
|
33
|
+
t.call(r, u) && r[u] && (i = d(i, this && this[u] || u));
|
|
34
34
|
return i;
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function d(r, i) {
|
|
37
37
|
return i ? r ? r + " " + i : r + i : r;
|
|
38
38
|
}
|
|
39
39
|
p.exports ? (_.default = _, p.exports = _) : window.classNames = _;
|
|
40
40
|
})();
|
|
41
41
|
})(z);
|
|
42
42
|
var j = z.exports;
|
|
43
|
-
const
|
|
43
|
+
const x = /* @__PURE__ */ w(j), I = {
|
|
44
44
|
"purpur-grid-item": "_purpur-grid-item_zx9tz_1",
|
|
45
45
|
"purpur-grid-item--no-col-gap": "_purpur-grid-item--no-col-gap_zx9tz_6",
|
|
46
46
|
"purpur-grid-item-colspan-sm-4": "_purpur-grid-item-colspan-sm-4_zx9tz_24",
|
|
@@ -67,12 +67,12 @@ const v = /* @__PURE__ */ w(j), I = {
|
|
|
67
67
|
"purpur-grid-item-colspan-lg-3": "_purpur-grid-item-colspan-lg-3_zx9tz_122",
|
|
68
68
|
"purpur-grid-item-colspan-lg-2": "_purpur-grid-item-colspan-lg-2_zx9tz_127",
|
|
69
69
|
"purpur-grid-item-colspan-lg-1": "_purpur-grid-item-colspan-lg-1_zx9tz_77"
|
|
70
|
-
}, O =
|
|
70
|
+
}, O = x.bind(I), o = "purpur-grid-item", f = ({
|
|
71
71
|
children: p,
|
|
72
72
|
className: t,
|
|
73
73
|
["data-testid"]: _,
|
|
74
74
|
colSpanSm: e = 4,
|
|
75
|
-
colSpanMd:
|
|
75
|
+
colSpanMd: d = 8,
|
|
76
76
|
colSpanLg: r = 12,
|
|
77
77
|
noColGap: i = !1
|
|
78
78
|
}) => {
|
|
@@ -82,54 +82,54 @@ const v = /* @__PURE__ */ w(j), I = {
|
|
|
82
82
|
{
|
|
83
83
|
[`${o}--no-col-gap`]: i,
|
|
84
84
|
[`${o}-colspan-sm-${e}`]: e,
|
|
85
|
-
[`${o}-colspan-md-${
|
|
85
|
+
[`${o}-colspan-md-${d}`]: d,
|
|
86
86
|
[`${o}-colspan-lg-${r}`]: r
|
|
87
87
|
}
|
|
88
88
|
]);
|
|
89
|
-
return /* @__PURE__ */
|
|
89
|
+
return /* @__PURE__ */ g("div", { className: u, "data-testid": _, children: p });
|
|
90
90
|
}, S = (p) => !!p && C(p) && (!!p.props.colSpanSm || !!p.props.colSpanMd || !!p.props.colSpanLg), A = {
|
|
91
|
-
"purpur-grid": "_purpur-
|
|
92
|
-
"purpur-grid__inner": "_purpur-
|
|
93
|
-
"purpur-grid__inner--no-gap": "_purpur-grid__inner--no-
|
|
94
|
-
"purpur-grid__inner--no-row-gap": "_purpur-grid__inner--no-row-
|
|
95
|
-
"purpur-grid__inner--grid": "_purpur-grid__inner--
|
|
96
|
-
"purpur-grid__inner--no-col-gap": "_purpur-grid__inner--no-col-
|
|
97
|
-
"purpur-grid__inner-col-sm-4": "_purpur-grid__inner-col-sm-
|
|
98
|
-
"purpur-grid__inner-col-sm-3": "_purpur-grid__inner-col-sm-
|
|
99
|
-
"purpur-grid__inner-col-sm-2": "_purpur-grid__inner-col-sm-
|
|
100
|
-
"purpur-grid__inner-col-md-8": "_purpur-grid__inner-col-md-
|
|
101
|
-
"purpur-grid__inner-col-md-7": "_purpur-grid__inner-col-md-
|
|
102
|
-
"purpur-grid__inner-col-md-6": "_purpur-grid__inner-col-md-
|
|
103
|
-
"purpur-grid__inner-col-md-5": "_purpur-grid__inner-col-md-
|
|
104
|
-
"purpur-grid__inner-col-md-4": "_purpur-grid__inner-col-md-
|
|
105
|
-
"purpur-grid__inner-col-md-3": "_purpur-grid__inner-col-md-
|
|
106
|
-
"purpur-grid__inner-col-md-2": "_purpur-grid__inner-col-md-
|
|
107
|
-
"purpur-grid__inner-col-lg-12": "_purpur-grid__inner-col-lg-
|
|
108
|
-
"purpur-grid__inner-col-lg-11": "_purpur-grid__inner-col-lg-
|
|
109
|
-
"purpur-grid__inner-col-lg-10": "_purpur-grid__inner-col-lg-
|
|
110
|
-
"purpur-grid__inner-col-lg-9": "_purpur-grid__inner-col-lg-
|
|
111
|
-
"purpur-grid__inner-col-lg-8": "_purpur-grid__inner-col-lg-
|
|
112
|
-
"purpur-grid__inner-col-lg-7": "_purpur-grid__inner-col-lg-
|
|
113
|
-
"purpur-grid__inner-col-lg-6": "_purpur-grid__inner-col-lg-
|
|
114
|
-
"purpur-grid__inner-col-lg-5": "_purpur-grid__inner-col-lg-
|
|
115
|
-
"purpur-grid__inner-col-lg-4": "_purpur-grid__inner-col-lg-
|
|
116
|
-
"purpur-grid__inner-col-lg-3": "_purpur-grid__inner-col-lg-
|
|
117
|
-
"purpur-grid__inner-col-lg-2": "_purpur-grid__inner-col-lg-
|
|
118
|
-
"purpur-grid__inner--flex": "_purpur-grid__inner--
|
|
119
|
-
}, a =
|
|
91
|
+
"purpur-grid": "_purpur-grid_113du_1",
|
|
92
|
+
"purpur-grid__inner": "_purpur-grid__inner_113du_7",
|
|
93
|
+
"purpur-grid__inner--no-gap": "_purpur-grid__inner--no-gap_113du_14",
|
|
94
|
+
"purpur-grid__inner--no-row-gap": "_purpur-grid__inner--no-row-gap_113du_14",
|
|
95
|
+
"purpur-grid__inner--grid": "_purpur-grid__inner--grid_113du_38",
|
|
96
|
+
"purpur-grid__inner--no-col-gap": "_purpur-grid__inner--no-col-gap_113du_42",
|
|
97
|
+
"purpur-grid__inner-col-sm-4": "_purpur-grid__inner-col-sm-4_113du_45",
|
|
98
|
+
"purpur-grid__inner-col-sm-3": "_purpur-grid__inner-col-sm-3_113du_48",
|
|
99
|
+
"purpur-grid__inner-col-sm-2": "_purpur-grid__inner-col-sm-2_113du_51",
|
|
100
|
+
"purpur-grid__inner-col-md-8": "_purpur-grid__inner-col-md-8_113du_55",
|
|
101
|
+
"purpur-grid__inner-col-md-7": "_purpur-grid__inner-col-md-7_113du_60",
|
|
102
|
+
"purpur-grid__inner-col-md-6": "_purpur-grid__inner-col-md-6_113du_65",
|
|
103
|
+
"purpur-grid__inner-col-md-5": "_purpur-grid__inner-col-md-5_113du_70",
|
|
104
|
+
"purpur-grid__inner-col-md-4": "_purpur-grid__inner-col-md-4_113du_75",
|
|
105
|
+
"purpur-grid__inner-col-md-3": "_purpur-grid__inner-col-md-3_113du_80",
|
|
106
|
+
"purpur-grid__inner-col-md-2": "_purpur-grid__inner-col-md-2_113du_85",
|
|
107
|
+
"purpur-grid__inner-col-lg-12": "_purpur-grid__inner-col-lg-12_113du_90",
|
|
108
|
+
"purpur-grid__inner-col-lg-11": "_purpur-grid__inner-col-lg-11_113du_95",
|
|
109
|
+
"purpur-grid__inner-col-lg-10": "_purpur-grid__inner-col-lg-10_113du_100",
|
|
110
|
+
"purpur-grid__inner-col-lg-9": "_purpur-grid__inner-col-lg-9_113du_105",
|
|
111
|
+
"purpur-grid__inner-col-lg-8": "_purpur-grid__inner-col-lg-8_113du_110",
|
|
112
|
+
"purpur-grid__inner-col-lg-7": "_purpur-grid__inner-col-lg-7_113du_115",
|
|
113
|
+
"purpur-grid__inner-col-lg-6": "_purpur-grid__inner-col-lg-6_113du_120",
|
|
114
|
+
"purpur-grid__inner-col-lg-5": "_purpur-grid__inner-col-lg-5_113du_125",
|
|
115
|
+
"purpur-grid__inner-col-lg-4": "_purpur-grid__inner-col-lg-4_113du_130",
|
|
116
|
+
"purpur-grid__inner-col-lg-3": "_purpur-grid__inner-col-lg-3_113du_135",
|
|
117
|
+
"purpur-grid__inner-col-lg-2": "_purpur-grid__inner-col-lg-2_113du_140",
|
|
118
|
+
"purpur-grid__inner--flex": "_purpur-grid__inner--flex_113du_144"
|
|
119
|
+
}, a = x.bind(A), E = "purpur-grid", n = "purpur-grid__inner", P = ({
|
|
120
120
|
children: p,
|
|
121
121
|
className: t,
|
|
122
122
|
containerClassName: _,
|
|
123
123
|
["data-testid"]: e,
|
|
124
|
-
colsSm:
|
|
124
|
+
colsSm: d = 1,
|
|
125
125
|
colsMd: r = 1,
|
|
126
126
|
colsLg: i = 1,
|
|
127
127
|
noGap: u = !1,
|
|
128
128
|
noColGap: s = !1,
|
|
129
|
-
noRowGap:
|
|
130
|
-
|
|
129
|
+
noRowGap: $ = !1,
|
|
130
|
+
...h
|
|
131
131
|
}) => {
|
|
132
|
-
const c = m.toArray(p).filter(S), l = c.length,
|
|
132
|
+
const c = m.toArray(p).filter(S), l = c.length, y = a([_, E]), v = a([
|
|
133
133
|
t,
|
|
134
134
|
n,
|
|
135
135
|
{
|
|
@@ -137,15 +137,15 @@ const v = /* @__PURE__ */ w(j), I = {
|
|
|
137
137
|
[`${n}--flex`]: l,
|
|
138
138
|
[`${n}--no-gap`]: u,
|
|
139
139
|
[`${n}--no-col-gap`]: s,
|
|
140
|
-
[`${n}--no-row-gap`]:
|
|
141
|
-
[`${n}-col-sm-${
|
|
140
|
+
[`${n}--no-row-gap`]: $,
|
|
141
|
+
[`${n}-col-sm-${d}`]: d > 1 && !l,
|
|
142
142
|
[`${n}-col-md-${r}`]: r > 1 && !l,
|
|
143
143
|
[`${n}-col-lg-${i}`]: i > 1 && !l
|
|
144
144
|
}
|
|
145
145
|
]);
|
|
146
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ g("div", { className: y, "data-testid": e, ...h, children: /* @__PURE__ */ g("div", { className: v, children: l ? m.map(c, ({ props: { children: b, ...N } }) => /* @__PURE__ */ g(f, { ...N, noColGap: u || s, children: b })) : p }) });
|
|
147
147
|
};
|
|
148
|
-
P.Item =
|
|
148
|
+
P.Item = f;
|
|
149
149
|
export {
|
|
150
150
|
P as Grid
|
|
151
151
|
};
|
package/dist/grid.item.d.ts
CHANGED
|
@@ -14,5 +14,5 @@ export type ItemProps = {
|
|
|
14
14
|
noColGap?: boolean;
|
|
15
15
|
};
|
|
16
16
|
export declare const Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, noColGap, }: ItemProps) => React.JSX.Element;
|
|
17
|
-
export declare const isItem: (child: ReactChild | ReactElement | ReactFragment | ReactPortal | string | number | boolean | null | undefined) => child is
|
|
17
|
+
export declare const isItem: (child: ReactChild | ReactElement | ReactFragment | ReactPortal | string | number | boolean | null | undefined) => child is ReactElement<ItemProps>;
|
|
18
18
|
//# sourceMappingURL=grid.item.d.ts.map
|
package/dist/grid.item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,IAAI,qGAQd,SAAS,sBAiBX,CAAC;AAEF,eAAO,MAAM,MAAM,UAEb,UAAU,GACV,YAAY,GACZ,aAAa,GACb,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,
|
|
1
|
+
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,IAAI,qGAQd,SAAS,sBAiBX,CAAC;AAEF,eAAO,MAAM,MAAM,UAEb,UAAU,GACV,YAAY,GACZ,aAAa,GACb,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,KACZ,KAAK,IAAI,YAAY,CAAC,SAAS,CAG+C,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-sm) / 2);padding:0 var(--padding);box-sizing:border-box}._purpur-grid-item--no-col-gap_zx9tz_6{padding:0}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-md) / 2)}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-lg) / 2)}}@media screen and (min-width: 1440px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-xl) / 2)}}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-4_zx9tz_24{width:100%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-3_zx9tz_27{width:75%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-2_zx9tz_30{width:50%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-1_zx9tz_33{width:25%}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-8_zx9tz_37{width:100%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-7_zx9tz_42{width:87.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-6_zx9tz_47{width:75%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-5_zx9tz_52{width:62.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-4_zx9tz_57{width:50%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-3_zx9tz_62{width:37.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-2_zx9tz_67{width:25%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-1_zx9tz_72{width:12.5%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-12_zx9tz_77{width:100%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-11_zx9tz_82{width:91.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-10_zx9tz_87{width:83.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-9_zx9tz_92{width:75%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-8_zx9tz_97{width:66.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-7_zx9tz_102{width:58.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-6_zx9tz_107{width:50%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-5_zx9tz_112{width:41.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-4_zx9tz_117{width:33.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-3_zx9tz_122{width:25%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-2_zx9tz_127{width:16.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-1_zx9tz_77{width:8.3333333333%}}._purpur-
|
|
1
|
+
._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-sm) / 2);padding:0 var(--padding);box-sizing:border-box}._purpur-grid-item--no-col-gap_zx9tz_6{padding:0}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-md) / 2)}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-lg) / 2)}}@media screen and (min-width: 1440px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-xl) / 2)}}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-4_zx9tz_24{width:100%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-3_zx9tz_27{width:75%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-2_zx9tz_30{width:50%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-1_zx9tz_33{width:25%}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-8_zx9tz_37{width:100%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-7_zx9tz_42{width:87.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-6_zx9tz_47{width:75%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-5_zx9tz_52{width:62.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-4_zx9tz_57{width:50%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-3_zx9tz_62{width:37.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-2_zx9tz_67{width:25%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-1_zx9tz_72{width:12.5%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-12_zx9tz_77{width:100%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-11_zx9tz_82{width:91.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-10_zx9tz_87{width:83.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-9_zx9tz_92{width:75%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-8_zx9tz_97{width:66.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-7_zx9tz_102{width:58.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-6_zx9tz_107{width:50%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-5_zx9tz_112{width:41.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-4_zx9tz_117{width:33.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-3_zx9tz_122{width:25%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-2_zx9tz_127{width:16.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-1_zx9tz_77{width:8.3333333333%}}._purpur-grid_113du_1{box-sizing:border-box;width:100%;max-width:var(--purpur-breakpoint-xl);margin:0 auto}._purpur-grid__inner_113du_7{--gap: var(--purpur-spacing-gutter-sm);--padding: var(--purpur-spacing-page-padding-sm);row-gap:var(--gap);padding:0 var(--padding)}._purpur-grid__inner--no-gap_113du_14,._purpur-grid__inner--no-row-gap_113du_14{row-gap:0}._purpur-grid__inner_113du_7 ._purpur-grid__inner_113du_7{padding:0}@media screen and (min-width: 600px){._purpur-grid__inner_113du_7{--gap: var(--purpur-spacing-gutter-md);--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid__inner_113du_7{--gap: var(--purpur-spacing-gutter-lg);--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid__inner_113du_7{--gap: var(--purpur-spacing-gutter-xl);--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-grid__inner--grid_113du_38{display:grid;column-gap:var(--gap)}._purpur-grid__inner--grid_113du_38._purpur-grid__inner--no-gap_113du_14,._purpur-grid__inner--grid_113du_38._purpur-grid__inner--no-col-gap_113du_42{column-gap:0}._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-sm-4_113du_45{grid-template-columns:repeat(4,1fr)}._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-sm-3_113du_48{grid-template-columns:repeat(3,1fr)}._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-sm-2_113du_51{grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-8_113du_55{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-7_113du_60{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-6_113du_65{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-5_113du_70{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-4_113du_75{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-3_113du_80{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 600px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-md-2_113du_85{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-12_113du_90{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-11_113du_95{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-10_113du_100{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-9_113du_105{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-8_113du_110{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-7_113du_115{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-6_113du_120{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-5_113du_125{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-4_113du_130{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-3_113du_135{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1024px){._purpur-grid__inner--grid_113du_38._purpur-grid__inner-col-lg-2_113du_140{grid-template-columns:repeat(2,1fr)}}._purpur-grid__inner--flex_113du_144{--gutter: var(--purpur-spacing-gutter-sm);display:flex;flex-wrap:wrap;width:calc(100% + var(--gutter));margin:0 calc(-1 * var(--gutter) / 2);box-sizing:border-box}._purpur-grid__inner--flex_113du_144._purpur-grid__inner--no-gap_113du_14,._purpur-grid__inner--flex_113du_144._purpur-grid__inner--no-col-gap_113du_42{width:100%;margin:0}@media screen and (min-width: 600px){._purpur-grid__inner--flex_113du_144{--gutter: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-grid__inner--flex_113du_144{--gutter: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 1440px){._purpur-grid__inner--flex_113du_144{--gutter: var(--purpur-spacing-gutter-xl)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/grid",
|
|
3
|
-
"version": "5.11.
|
|
3
|
+
"version": "5.11.2",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/grid.cjs.js",
|
|
6
6
|
"types": "./dist/grid.d.ts",
|
|
@@ -15,33 +15,34 @@
|
|
|
15
15
|
"source": "src/grid.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/tokens": "5.11.
|
|
18
|
+
"@purpurds/tokens": "5.11.2"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
22
|
-
"@storybook/blocks": "
|
|
23
|
-
"@storybook/react": "
|
|
22
|
+
"@storybook/blocks": "^8.2.6",
|
|
23
|
+
"@storybook/react": "^8.2.6",
|
|
24
|
+
"storybook": "^8.2.6",
|
|
24
25
|
"@telia/base-rig": "~8.2.0",
|
|
25
26
|
"@telia/react-rig": "~3.2.0",
|
|
26
27
|
"@testing-library/dom": "~9.3.3",
|
|
27
28
|
"@testing-library/jest-dom": "~6.4.0",
|
|
28
29
|
"@testing-library/react": "~14.3.0",
|
|
29
30
|
"@types/node": "20.12.12",
|
|
30
|
-
"@types/react-dom": "
|
|
31
|
-
"@types/react": "
|
|
31
|
+
"@types/react-dom": "^18.3.0",
|
|
32
|
+
"@types/react": "^18.3.3",
|
|
32
33
|
"builtin-modules": "~3.3.0",
|
|
33
34
|
"eslint-plugin-testing-library": "~6.2.0",
|
|
34
|
-
"eslint": "
|
|
35
|
+
"eslint": "^8.57.0",
|
|
35
36
|
"jsdom": "~22.1.0",
|
|
36
37
|
"lint-staged": "~10.5.3",
|
|
37
38
|
"prettier": "~2.8.8",
|
|
38
|
-
"react-dom": "
|
|
39
|
-
"react": "
|
|
40
|
-
"typescript": "
|
|
41
|
-
"vite": "
|
|
39
|
+
"react-dom": "^18.3.1",
|
|
40
|
+
"react": "^18.3.1",
|
|
41
|
+
"typescript": "^5.5.4",
|
|
42
|
+
"vite": "5.3.4",
|
|
42
43
|
"vitest": "~1.5.0",
|
|
43
|
-
"@purpurds/
|
|
44
|
-
"@purpurds/
|
|
44
|
+
"@purpurds/component-rig": "1.0.0",
|
|
45
|
+
"@purpurds/link": "5.11.2"
|
|
45
46
|
},
|
|
46
47
|
"scripts": {
|
|
47
48
|
"build:dev": "vite",
|
package/src/grid.module.scss
CHANGED
package/src/grid.stories.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from "@storybook/react";
|
|
|
6
6
|
|
|
7
7
|
import { Grid } from "./grid";
|
|
8
8
|
|
|
9
|
-
const meta
|
|
9
|
+
const meta = {
|
|
10
10
|
title: "Components/Grid",
|
|
11
11
|
component: Grid,
|
|
12
12
|
parameters: {
|
|
@@ -22,16 +22,25 @@ const meta: Meta<typeof Grid> = {
|
|
|
22
22
|
["data-testid"]: { control: { type: "text" } },
|
|
23
23
|
className: { control: { type: "text" } },
|
|
24
24
|
children: { control: { type: "text" } },
|
|
25
|
-
colsSm: {
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
colsSm: {
|
|
26
|
+
control: { type: "range", min: 1, max: 4, step: 1 },
|
|
27
|
+
table: { type: { summary: "1 | 2 | 3 | 4" } },
|
|
28
|
+
},
|
|
29
|
+
colsMd: {
|
|
30
|
+
control: { type: "range", min: 1, max: 8, step: 1 },
|
|
31
|
+
table: { type: { summary: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8" } },
|
|
32
|
+
},
|
|
33
|
+
colsLg: {
|
|
34
|
+
control: { type: "range", min: 1, max: 12, step: 1 },
|
|
35
|
+
table: { type: { summary: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12" } },
|
|
36
|
+
},
|
|
28
37
|
},
|
|
29
38
|
args: {
|
|
30
39
|
colsSm: 2,
|
|
31
40
|
colsMd: 4,
|
|
32
41
|
colsLg: 6,
|
|
33
42
|
},
|
|
34
|
-
}
|
|
43
|
+
} satisfies Meta<typeof Grid>;
|
|
35
44
|
|
|
36
45
|
export default meta;
|
|
37
46
|
|
|
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
|
|
|
4
4
|
|
|
5
5
|
import { Grid } from "./grid";
|
|
6
6
|
|
|
7
|
-
const meta
|
|
7
|
+
const meta = {
|
|
8
8
|
title: "Components/Grid",
|
|
9
9
|
component: Grid.Item,
|
|
10
10
|
parameters: {
|
|
@@ -32,13 +32,6 @@ const meta: Meta<typeof Grid.Item> = {
|
|
|
32
32
|
colSpanMd: 8,
|
|
33
33
|
colSpanLg: 12,
|
|
34
34
|
},
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export default meta;
|
|
38
|
-
|
|
39
|
-
type Story = StoryObj<typeof Grid.Item>;
|
|
40
|
-
|
|
41
|
-
export const Item: Story = {
|
|
42
35
|
render: ({ children, ...args }) => (
|
|
43
36
|
<Grid.Item {...args}>
|
|
44
37
|
<div style={{ border: "1px solid lightgray", padding: ".5rem" }}>
|
|
@@ -47,4 +40,10 @@ export const Item: Story = {
|
|
|
47
40
|
</div>
|
|
48
41
|
</Grid.Item>
|
|
49
42
|
),
|
|
50
|
-
}
|
|
43
|
+
} satisfies Meta<typeof Grid.Item>;
|
|
44
|
+
|
|
45
|
+
export default meta;
|
|
46
|
+
|
|
47
|
+
type Story = StoryObj<typeof Grid.Item>;
|
|
48
|
+
|
|
49
|
+
export const Item: Story = {};
|