@purpurds/grid 4.5.1 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/grid.cjs.js +2 -2
- package/dist/grid.cjs.js.map +1 -1
- package/dist/grid.d.ts +7 -8
- package/dist/grid.d.ts.map +1 -1
- package/dist/grid.es.js +63 -101
- package/dist/grid.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -2
- package/readme.mdx +12 -22
- package/src/grid.module.scss +30 -4
- package/src/grid.stories.tsx +13 -33
- package/src/grid.tsx +22 -15
- package/dist/col.d.ts +0 -13
- package/dist/col.d.ts.map +0 -1
- package/dist/row.d.ts +0 -18
- package/dist/row.d.ts.map +0 -1
- package/src/col.module.scss +0 -62
- package/src/col.tsx +0 -43
- package/src/grid.col.stories.tsx +0 -79
- package/src/grid.row.stories.tsx +0 -67
- package/src/row.module.scss +0 -58
- package/src/row.tsx +0 -47
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 t=require("react/jsx-runtime");function s(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var g={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
|
|
5
|
+
*/(function(p){(function(){var c={}.hasOwnProperty;function l(){for(var r="",u=0;u<arguments.length;u++){var i=arguments[u];i&&(r=o(r,d.call(this,i)))}return r}function d(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return l.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var u="";for(var i in r)c.call(r,i)&&r[i]&&(u=o(u,this&&this[i]||i));return u}function o(r,u){return u?r?r+" "+u:r+u:r}p.exports?(l.default=l,p.exports=l):window.classNames=l})()})(g);var e=g.exports;const m=s(e),n={"purpur-grid":"_purpur-grid_12u5q_1","purpur-grid-col-sm-12":"_purpur-grid-col-sm-12_12u5q_30","purpur-grid-col-sm-11":"_purpur-grid-col-sm-11_12u5q_33","purpur-grid-col-sm-10":"_purpur-grid-col-sm-10_12u5q_36","purpur-grid-col-sm-9":"_purpur-grid-col-sm-9_12u5q_39","purpur-grid-col-sm-8":"_purpur-grid-col-sm-8_12u5q_42","purpur-grid-col-sm-7":"_purpur-grid-col-sm-7_12u5q_45","purpur-grid-col-sm-6":"_purpur-grid-col-sm-6_12u5q_48","purpur-grid-col-sm-5":"_purpur-grid-col-sm-5_12u5q_51","purpur-grid-col-sm-4":"_purpur-grid-col-sm-4_12u5q_54","purpur-grid-col-sm-3":"_purpur-grid-col-sm-3_12u5q_57","purpur-grid-col-sm-2":"_purpur-grid-col-sm-2_12u5q_60","purpur-grid-col-md-12":"_purpur-grid-col-md-12_12u5q_64","purpur-grid-col-md-11":"_purpur-grid-col-md-11_12u5q_69","purpur-grid-col-md-10":"_purpur-grid-col-md-10_12u5q_74","purpur-grid-col-md-9":"_purpur-grid-col-md-9_12u5q_79","purpur-grid-col-md-8":"_purpur-grid-col-md-8_12u5q_84","purpur-grid-col-md-7":"_purpur-grid-col-md-7_12u5q_89","purpur-grid-col-md-6":"_purpur-grid-col-md-6_12u5q_94","purpur-grid-col-md-5":"_purpur-grid-col-md-5_12u5q_99","purpur-grid-col-md-4":"_purpur-grid-col-md-4_12u5q_104","purpur-grid-col-md-3":"_purpur-grid-col-md-3_12u5q_109","purpur-grid-col-md-2":"_purpur-grid-col-md-2_12u5q_114","purpur-grid-col-lg-12":"_purpur-grid-col-lg-12_12u5q_119","purpur-grid-col-lg-11":"_purpur-grid-col-lg-11_12u5q_124","purpur-grid-col-lg-10":"_purpur-grid-col-lg-10_12u5q_129","purpur-grid-col-lg-9":"_purpur-grid-col-lg-9_12u5q_134","purpur-grid-col-lg-8":"_purpur-grid-col-lg-8_12u5q_139","purpur-grid-col-lg-7":"_purpur-grid-col-lg-7_12u5q_144","purpur-grid-col-lg-6":"_purpur-grid-col-lg-6_12u5q_149","purpur-grid-col-lg-5":"_purpur-grid-col-lg-5_12u5q_154","purpur-grid-col-lg-4":"_purpur-grid-col-lg-4_12u5q_159","purpur-grid-col-lg-3":"_purpur-grid-col-lg-3_12u5q_164","purpur-grid-col-lg-2":"_purpur-grid-col-lg-2_12u5q_169"},q=m.bind(n),_="purpur-grid",a=({children:p,className:c,["data-testid"]:l,colsSm:d=1,colsMd:o=1,colsLg:r=1,...u})=>{const i=q([c,_,{[`${_}-col-sm-${d}`]:d>1,[`${_}-col-md-${o}`]:o>1,[`${_}-col-lg-${r}`]:r>1}]);return t.jsx("div",{className:i,"data-testid":l,...u,children:p})};exports.Grid=a;
|
|
6
6
|
//# sourceMappingURL=grid.cjs.js.map
|
package/dist/grid.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/
|
|
1
|
+
{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = {\n children: ReactNode;\n [\"data-testid\"]?: string;\n className?: string;\n /** colsSm represents the number of columns for small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** colsMd represents the number of columns for medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** colsLg represents the number of columns for large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid = ({\n children,\n className,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n ...props\n}: GridProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,\n [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,\n [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,\n },\n ]);\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n {children}\n </div>\n );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Grid","children","className","dataTestId","colsSm","colsMd","colsLg","props","jsx"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,w6DCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAclBC,EAAgB,cAETC,EAAO,CAAC,CACnB,SAAAC,EACA,UAAAC,EACA,CAAC,eAAgBC,EACjB,OAAAC,EAAS,EACT,OAAAC,EAAS,EACT,OAAAC,EAAS,EACT,GAAGC,CACL,IAAiB,CACf,MAAMpB,EAAUS,EAAG,CACjBM,EACAH,EACA,CACE,CAAC,GAAGA,CAAa,WAAWK,CAAM,EAAE,EAAGA,EAAS,EAChD,CAAC,GAAGL,CAAa,WAAWM,CAAM,EAAE,EAAGA,EAAS,EAChD,CAAC,GAAGN,CAAa,WAAWO,CAAM,EAAE,EAAGA,EAAS,CAClD,CAAA,CACD,EAEC,OAAAE,MAAC,OAAI,UAAWrB,EAAS,cAAagB,EAAa,GAAGI,EACnD,SAAAN,CACH,CAAA,CAEJ","x_google_ignoreList":[0]}
|
package/dist/grid.d.ts
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import { Row } from './row';
|
|
2
|
-
import { Col } from './col';
|
|
3
1
|
import { default as React, ReactNode } from 'react';
|
|
4
2
|
|
|
5
|
-
type GridCmp<P> = React.FunctionComponent<P> & {
|
|
6
|
-
Row: typeof Row;
|
|
7
|
-
Col: typeof Col;
|
|
8
|
-
};
|
|
9
3
|
export type GridProps = {
|
|
10
4
|
children: ReactNode;
|
|
11
5
|
["data-testid"]?: string;
|
|
12
6
|
className?: string;
|
|
7
|
+
/** colsSm represents the number of columns for small screens. */
|
|
8
|
+
colsSm?: 1 | 2 | 3 | 4;
|
|
9
|
+
/** colsMd represents the number of columns for medium screens. */
|
|
10
|
+
colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
11
|
+
/** colsLg represents the number of columns for large screens. */
|
|
12
|
+
colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
13
13
|
};
|
|
14
|
-
export
|
|
15
|
-
export declare const Grid: GridCmp<GridProps>;
|
|
14
|
+
export declare const Grid: ({ children, className, ["data-testid"]: dataTestId, colsSm, colsMd, colsLg, ...props }: GridProps) => React.JSX.Element;
|
|
16
15
|
//# sourceMappingURL=grid.d.ts.map
|
package/dist/grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOzC,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvC,iEAAiE;IACjE,MAAM,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;CAC3D,CAAC;AAIF,eAAO,MAAM,IAAI,2FAQd,SAAS,sBAeX,CAAC"}
|
package/dist/grid.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
function
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
function s(p) {
|
|
3
3
|
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
|
|
4
4
|
}
|
|
5
|
-
var
|
|
5
|
+
var g = { exports: {} };
|
|
6
6
|
/*!
|
|
7
7
|
Copyright (c) 2018 Jed Watson.
|
|
8
8
|
Licensed under the MIT License (MIT), see
|
|
@@ -10,129 +10,91 @@ var i = { exports: {} };
|
|
|
10
10
|
*/
|
|
11
11
|
(function(p) {
|
|
12
12
|
(function() {
|
|
13
|
-
var
|
|
14
|
-
function
|
|
13
|
+
var c = {}.hasOwnProperty;
|
|
14
|
+
function l() {
|
|
15
15
|
for (var r = "", u = 0; u < arguments.length; u++) {
|
|
16
|
-
var
|
|
17
|
-
|
|
16
|
+
var o = arguments[u];
|
|
17
|
+
o && (r = d(r, i.call(this, o)));
|
|
18
18
|
}
|
|
19
19
|
return r;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function i(r) {
|
|
22
22
|
if (typeof r == "string" || typeof r == "number")
|
|
23
|
-
return r;
|
|
23
|
+
return this && this[r] || r;
|
|
24
24
|
if (typeof r != "object")
|
|
25
25
|
return "";
|
|
26
26
|
if (Array.isArray(r))
|
|
27
|
-
return
|
|
27
|
+
return l.apply(this, r);
|
|
28
28
|
if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
|
|
29
29
|
return r.toString();
|
|
30
30
|
var u = "";
|
|
31
|
-
for (var
|
|
32
|
-
|
|
31
|
+
for (var o in r)
|
|
32
|
+
c.call(r, o) && r[o] && (u = d(u, this && this[o] || o));
|
|
33
33
|
return u;
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function d(r, u) {
|
|
36
36
|
return u ? r ? r + " " + u : r + u : r;
|
|
37
37
|
}
|
|
38
|
-
p.exports ? (
|
|
38
|
+
p.exports ? (l.default = l, p.exports = l) : window.classNames = l;
|
|
39
39
|
})();
|
|
40
|
-
})(
|
|
41
|
-
var
|
|
42
|
-
const
|
|
43
|
-
"purpur-
|
|
44
|
-
"purpur-col-12": "_purpur-col-
|
|
45
|
-
"purpur-col-
|
|
46
|
-
"purpur-col-
|
|
47
|
-
"purpur-col-
|
|
48
|
-
"purpur-col-
|
|
49
|
-
"purpur-col-
|
|
50
|
-
"purpur-col-
|
|
51
|
-
"purpur-col-
|
|
52
|
-
"purpur-col-
|
|
53
|
-
"purpur-col-
|
|
54
|
-
"purpur-col-
|
|
55
|
-
"purpur-col-
|
|
56
|
-
"purpur-col-
|
|
57
|
-
"purpur-col-md-
|
|
58
|
-
"purpur-col-
|
|
59
|
-
"purpur-col-
|
|
60
|
-
"purpur-col-md-7": "_purpur-col-md-
|
|
61
|
-
"purpur-col-
|
|
62
|
-
"purpur-col-
|
|
63
|
-
"purpur-col-md-
|
|
64
|
-
"purpur-col-
|
|
65
|
-
"purpur-col-
|
|
66
|
-
"purpur-col-
|
|
67
|
-
"purpur-col-lg-
|
|
68
|
-
"purpur-col-
|
|
69
|
-
"purpur-col-
|
|
70
|
-
"purpur-col-lg-
|
|
71
|
-
"purpur-col-
|
|
72
|
-
"purpur-col-
|
|
73
|
-
"purpur-col-lg-
|
|
74
|
-
"purpur-col-
|
|
75
|
-
"purpur-col-
|
|
76
|
-
"purpur-col-lg-2": "_purpur-col-lg-
|
|
77
|
-
|
|
78
|
-
"purpur-col-md-1": "_purpur-col-md-1_13t6m_20",
|
|
79
|
-
"purpur-col-lg-1": "_purpur-col-lg-1_13t6m_25"
|
|
80
|
-
}, m = "purpur-col", w = ({
|
|
40
|
+
})(g);
|
|
41
|
+
var m = g.exports;
|
|
42
|
+
const n = /* @__PURE__ */ s(m), e = {
|
|
43
|
+
"purpur-grid": "_purpur-grid_12u5q_1",
|
|
44
|
+
"purpur-grid-col-sm-12": "_purpur-grid-col-sm-12_12u5q_30",
|
|
45
|
+
"purpur-grid-col-sm-11": "_purpur-grid-col-sm-11_12u5q_33",
|
|
46
|
+
"purpur-grid-col-sm-10": "_purpur-grid-col-sm-10_12u5q_36",
|
|
47
|
+
"purpur-grid-col-sm-9": "_purpur-grid-col-sm-9_12u5q_39",
|
|
48
|
+
"purpur-grid-col-sm-8": "_purpur-grid-col-sm-8_12u5q_42",
|
|
49
|
+
"purpur-grid-col-sm-7": "_purpur-grid-col-sm-7_12u5q_45",
|
|
50
|
+
"purpur-grid-col-sm-6": "_purpur-grid-col-sm-6_12u5q_48",
|
|
51
|
+
"purpur-grid-col-sm-5": "_purpur-grid-col-sm-5_12u5q_51",
|
|
52
|
+
"purpur-grid-col-sm-4": "_purpur-grid-col-sm-4_12u5q_54",
|
|
53
|
+
"purpur-grid-col-sm-3": "_purpur-grid-col-sm-3_12u5q_57",
|
|
54
|
+
"purpur-grid-col-sm-2": "_purpur-grid-col-sm-2_12u5q_60",
|
|
55
|
+
"purpur-grid-col-md-12": "_purpur-grid-col-md-12_12u5q_64",
|
|
56
|
+
"purpur-grid-col-md-11": "_purpur-grid-col-md-11_12u5q_69",
|
|
57
|
+
"purpur-grid-col-md-10": "_purpur-grid-col-md-10_12u5q_74",
|
|
58
|
+
"purpur-grid-col-md-9": "_purpur-grid-col-md-9_12u5q_79",
|
|
59
|
+
"purpur-grid-col-md-8": "_purpur-grid-col-md-8_12u5q_84",
|
|
60
|
+
"purpur-grid-col-md-7": "_purpur-grid-col-md-7_12u5q_89",
|
|
61
|
+
"purpur-grid-col-md-6": "_purpur-grid-col-md-6_12u5q_94",
|
|
62
|
+
"purpur-grid-col-md-5": "_purpur-grid-col-md-5_12u5q_99",
|
|
63
|
+
"purpur-grid-col-md-4": "_purpur-grid-col-md-4_12u5q_104",
|
|
64
|
+
"purpur-grid-col-md-3": "_purpur-grid-col-md-3_12u5q_109",
|
|
65
|
+
"purpur-grid-col-md-2": "_purpur-grid-col-md-2_12u5q_114",
|
|
66
|
+
"purpur-grid-col-lg-12": "_purpur-grid-col-lg-12_12u5q_119",
|
|
67
|
+
"purpur-grid-col-lg-11": "_purpur-grid-col-lg-11_12u5q_124",
|
|
68
|
+
"purpur-grid-col-lg-10": "_purpur-grid-col-lg-10_12u5q_129",
|
|
69
|
+
"purpur-grid-col-lg-9": "_purpur-grid-col-lg-9_12u5q_134",
|
|
70
|
+
"purpur-grid-col-lg-8": "_purpur-grid-col-lg-8_12u5q_139",
|
|
71
|
+
"purpur-grid-col-lg-7": "_purpur-grid-col-lg-7_12u5q_144",
|
|
72
|
+
"purpur-grid-col-lg-6": "_purpur-grid-col-lg-6_12u5q_149",
|
|
73
|
+
"purpur-grid-col-lg-5": "_purpur-grid-col-lg-5_12u5q_154",
|
|
74
|
+
"purpur-grid-col-lg-4": "_purpur-grid-col-lg-4_12u5q_159",
|
|
75
|
+
"purpur-grid-col-lg-3": "_purpur-grid-col-lg-3_12u5q_164",
|
|
76
|
+
"purpur-grid-col-lg-2": "_purpur-grid-col-lg-2_12u5q_169"
|
|
77
|
+
}, q = n.bind(e), _ = "purpur-grid", f = ({
|
|
81
78
|
children: p,
|
|
82
|
-
["data-testid"]: _,
|
|
83
|
-
width: o,
|
|
84
79
|
className: c,
|
|
85
|
-
|
|
86
|
-
|
|
80
|
+
["data-testid"]: l,
|
|
81
|
+
colsSm: i = 1,
|
|
82
|
+
colsMd: d = 1,
|
|
83
|
+
colsLg: r = 1,
|
|
87
84
|
...u
|
|
88
85
|
}) => {
|
|
89
|
-
const
|
|
86
|
+
const o = q([
|
|
90
87
|
c,
|
|
91
|
-
|
|
88
|
+
_,
|
|
92
89
|
{
|
|
93
|
-
[
|
|
94
|
-
[
|
|
95
|
-
[
|
|
90
|
+
[`${_}-col-sm-${i}`]: i > 1,
|
|
91
|
+
[`${_}-col-md-${d}`]: d > 1,
|
|
92
|
+
[`${_}-col-lg-${r}`]: r > 1
|
|
96
93
|
}
|
|
97
94
|
]);
|
|
98
|
-
return /* @__PURE__ */
|
|
99
|
-
}, y = {
|
|
100
|
-
"purpur-grid": "_purpur-grid_6ht8d_1"
|
|
101
|
-
}, e = {
|
|
102
|
-
"purpur-row": "_purpur-row_13nch_1",
|
|
103
|
-
"purpur-row--sm": "_purpur-row--sm_13nch_28",
|
|
104
|
-
"purpur-row--md": "_purpur-row--md_13nch_31",
|
|
105
|
-
"purpur-row--lg": "_purpur-row--lg_13nch_34",
|
|
106
|
-
"purpur-row--col-gap": "_purpur-row--col-gap_13nch_42"
|
|
107
|
-
}, n = "purpur-row", v = ({
|
|
108
|
-
children: p,
|
|
109
|
-
["data-testid"]: _,
|
|
110
|
-
spacing: o,
|
|
111
|
-
className: c,
|
|
112
|
-
colGap: l,
|
|
113
|
-
...r
|
|
114
|
-
}) => {
|
|
115
|
-
const u = a([
|
|
116
|
-
c,
|
|
117
|
-
e[n],
|
|
118
|
-
{
|
|
119
|
-
[e[`${n}--${o}`]]: o,
|
|
120
|
-
[e[`${n}--col-gap`]]: l
|
|
121
|
-
}
|
|
122
|
-
]);
|
|
123
|
-
return /* @__PURE__ */ d("div", { className: u, "data-testid": _, ...r, children: p });
|
|
124
|
-
}, N = "purpur-grid", g = ({
|
|
125
|
-
children: p,
|
|
126
|
-
className: _,
|
|
127
|
-
["data-testid"]: o,
|
|
128
|
-
...c
|
|
129
|
-
}) => {
|
|
130
|
-
const l = a([_, y[N]]);
|
|
131
|
-
return /* @__PURE__ */ d("div", { className: l, "data-testid": o, ...c, children: p });
|
|
95
|
+
return /* @__PURE__ */ t("div", { className: o, "data-testid": l, ...u, children: p });
|
|
132
96
|
};
|
|
133
|
-
g.Col = w;
|
|
134
|
-
g.Row = v;
|
|
135
97
|
export {
|
|
136
|
-
|
|
98
|
+
f as Grid
|
|
137
99
|
};
|
|
138
100
|
//# sourceMappingURL=grid.es.js.map
|
package/dist/grid.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/
|
|
1
|
+
{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = {\n children: ReactNode;\n [\"data-testid\"]?: string;\n className?: string;\n /** colsSm represents the number of columns for small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** colsMd represents the number of columns for medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** colsLg represents the number of columns for large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid\";\n\nexport const Grid = ({\n children,\n className,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n ...props\n}: GridProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,\n [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,\n [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,\n },\n ]);\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n {children}\n </div>\n );\n};\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Grid","children","className","dataTestId","colsSm","colsMd","colsLg","props","jsx"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,MAE1D;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAclBC,IAAgB,eAETC,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,MAAiB;AACf,QAAMpB,IAAUS,EAAG;AAAA,IACjBM;AAAA,IACAH;AAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAa,WAAWK,CAAM,EAAE,GAAGA,IAAS;AAAA,MAChD,CAAC,GAAGL,CAAa,WAAWM,CAAM,EAAE,GAAGA,IAAS;AAAA,MAChD,CAAC,GAAGN,CAAa,WAAWO,CAAM,EAAE,GAAGA,IAAS;AAAA,IAClD;AAAA,EAAA,CACD;AAEC,SAAA,gBAAAE,EAAC,SAAI,WAAWrB,GAAS,eAAagB,GAAa,GAAGI,GACnD,UAAAN,EACH,CAAA;AAEJ;","x_google_ignoreList":[0]}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)*1)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-12_13t6m_1{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-12_13t6m_20{width:calc((100% - 1px)*1)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-12_13t6m_25{width:calc((100% - 1px)*1)}}._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 11)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-11_13t6m_29{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-11_13t6m_48{width:calc((100% - 1px) / 12 * 11)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-11_13t6m_53{width:calc((100% - 1px) / 12 * 11)}}._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 10)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-10_13t6m_57{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-10_13t6m_76{width:calc((100% - 1px) / 12 * 10)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-10_13t6m_81{width:calc((100% - 1px) / 12 * 10)}}._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)*.75)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-9_13t6m_85{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-9_13t6m_104{width:calc((100% - 1px)*.75)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-9_13t6m_109{width:calc((100% - 1px)*.75)}}._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 8)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-8_13t6m_113{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-8_13t6m_132{width:calc((100% - 1px) / 12 * 8)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-8_13t6m_137{width:calc((100% - 1px) / 12 * 8)}}._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 7)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-7_13t6m_141{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-7_13t6m_160{width:calc((100% - 1px) / 12 * 7)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-7_13t6m_165{width:calc((100% - 1px) / 12 * 7)}}._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)/2)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-6_13t6m_169{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-6_13t6m_188{width:calc((100% - 1px)/2)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-6_13t6m_193{width:calc((100% - 1px)/2)}}._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 5)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-5_13t6m_197{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-5_13t6m_216{width:calc((100% - 1px) / 12 * 5)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-5_13t6m_221{width:calc((100% - 1px) / 12 * 5)}}._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 4)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-4_13t6m_225{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-4_13t6m_244{width:calc((100% - 1px) / 12 * 4)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-4_13t6m_249{width:calc((100% - 1px) / 12 * 4)}}._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px)/4)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-3_13t6m_253{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-3_13t6m_272{width:calc((100% - 1px)/4)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-3_13t6m_277{width:calc((100% - 1px)/4)}}._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 2)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-2_13t6m_281{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-2_13t6m_300{width:calc((100% - 1px) / 12 * 2)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-2_13t6m_305{width:calc((100% - 1px) / 12 * 2)}}._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:block;padding-left:calc(var(--padding-col) / 2);padding-right:calc(var(--padding-col) / 2);width:calc((100% - 1px) / 12 * 1)}@media screen and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-1_13t6m_1{--padding-col: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 600px) and (min-width: 600px){._purpur-col_13t6m_1._purpur-col-md-1_13t6m_20{width:calc((100% - 1px) / 12 * 1)}}@media screen and (min-width: 1024px) and (min-width: 1024px){._purpur-col_13t6m_1._purpur-col-lg-1_13t6m_25{width:calc((100% - 1px) / 12 * 1)}}._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-sm);box-sizing:border-box;display:block;margin-left:auto;margin-right:auto;max-width:var(--purpur-breakpoint-xl);padding:0 var(--padding);width:100%}@media screen and (min-width: 600px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_6ht8d_1{--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-sm);box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:left;margin-left:calc(-1 * var(--margin) / 2);margin-right:calc(-1 * var(--margin) / 2)}@media screen and (min-width: 600px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 1440px){._purpur-row_13nch_1{--margin: var(--purpur-spacing-gutter-xl)}}._purpur-row_13nch_1:last-of-type{margin-bottom:0}._purpur-row--sm_13nch_28{margin-bottom:var(--purpur-spacing-gutter-sm)}._purpur-row--md_13nch_31,._purpur-row--lg_13nch_34{margin-bottom:var(--purpur-spacing-gutter-md)}@media screen and (min-width: 1024px){._purpur-row--lg_13nch_34{margin-bottom:var(--purpur-spacing-gutter-lg)}}._purpur-row--col-gap_13nch_42{margin-top:calc(-1 * var(--purpur-spacing-gutter-sm))}@media screen and (min-width: 600px){._purpur-row--col-gap_13nch_42{margin-top:calc(-1 * var(--purpur-spacing-gutter-md))}}._purpur-row--col-gap_13nch_42>.purpur-col{margin-top:var(--purpur-spacing-gutter-sm)}@media screen and (min-width: 600px){._purpur-row--col-gap_13nch_42>.purpur-col{margin-top:var(--purpur-spacing-gutter-md)}}
|
|
1
|
+
._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-sm);--padding: var(--purpur-spacing-page-padding-sm);box-sizing:border-box;display:grid;gap:var(--gap);width:100%;max-width:var(--purpur-breakpoint-xl);margin:0 auto;padding:0 var(--padding)}@media screen and (min-width: 600px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-md);--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-lg);--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_12u5q_1{--gap: var(--purpur-spacing-gutter-xl);--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-grid_12u5q_1._purpur-grid-col-sm-12_12u5q_30{grid-template-columns:repeat(12,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-11_12u5q_33{grid-template-columns:repeat(11,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-10_12u5q_36{grid-template-columns:repeat(10,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-9_12u5q_39{grid-template-columns:repeat(9,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-8_12u5q_42{grid-template-columns:repeat(8,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-7_12u5q_45{grid-template-columns:repeat(7,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-6_12u5q_48{grid-template-columns:repeat(6,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-5_12u5q_51{grid-template-columns:repeat(5,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-4_12u5q_54{grid-template-columns:repeat(4,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-3_12u5q_57{grid-template-columns:repeat(3,1fr)}._purpur-grid_12u5q_1._purpur-grid-col-sm-2_12u5q_60{grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-12_12u5q_64{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-11_12u5q_69{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-10_12u5q_74{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-9_12u5q_79{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-8_12u5q_84{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-7_12u5q_89{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-6_12u5q_94{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-5_12u5q_99{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-4_12u5q_104{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-3_12u5q_109{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 600px){._purpur-grid_12u5q_1._purpur-grid-col-md-2_12u5q_114{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-12_12u5q_119{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-11_12u5q_124{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-10_12u5q_129{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-9_12u5q_134{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-8_12u5q_139{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-7_12u5q_144{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-6_12u5q_149{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-5_12u5q_154{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-4_12u5q_159{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-3_12u5q_164{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1024px){._purpur-grid_12u5q_1._purpur-grid-col-lg-2_12u5q_169{grid-template-columns:repeat(2,1fr)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/grid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/grid.cjs.js",
|
|
6
6
|
"types": "./dist/grid.d.ts",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"source": "src/grid.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/tokens": "
|
|
18
|
+
"@purpurds/tokens": "5.0.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@rushstack/eslint-patch": "~1.10.0",
|
package/readme.mdx
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
|
|
2
2
|
|
|
3
3
|
import * as GridStories from "./src/grid.stories";
|
|
4
|
-
import * as GridColStories from "./src/grid.col.stories";
|
|
5
|
-
import * as GridRowStories from "./src/grid.row.stories";
|
|
6
4
|
import packageInfo from "./package.json";
|
|
7
5
|
|
|
8
6
|
<Meta name="Docs" title="Components/Grid" of={GridStories} />
|
|
@@ -21,20 +19,16 @@ import packageInfo from "./package.json";
|
|
|
21
19
|
|
|
22
20
|
<ArgTypes of={GridStories} />
|
|
23
21
|
|
|
24
|
-
#### Grid.Row
|
|
25
|
-
|
|
26
|
-
<ArgTypes of={GridRowStories} />
|
|
27
|
-
|
|
28
|
-
#### Grid.Col
|
|
29
|
-
|
|
30
|
-
<ArgTypes of={GridColStories} />
|
|
31
|
-
|
|
32
22
|
### Installation
|
|
33
23
|
|
|
34
24
|
#### Via NPM
|
|
35
25
|
|
|
36
26
|
Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
|
|
37
27
|
|
|
28
|
+
### Usage
|
|
29
|
+
|
|
30
|
+
The standard usage is to have multiple elements directly as children of the `Grid` component. It's also possible to only have one, to get the standard page padding, max width and prevent getting gaps between elements.
|
|
31
|
+
|
|
38
32
|
In MyApp.tsx
|
|
39
33
|
|
|
40
34
|
```tsx
|
|
@@ -48,18 +42,14 @@ import { Grid } from "@purpurds/purpur";
|
|
|
48
42
|
|
|
49
43
|
export const MyComponent = () => {
|
|
50
44
|
return (
|
|
51
|
-
<
|
|
52
|
-
<Grid
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</Grid.Col>
|
|
60
|
-
</Grid.Row>
|
|
61
|
-
</Grid>
|
|
62
|
-
</div>
|
|
45
|
+
<Grid colsSm={2} colsMd={4} colsLg={6}>
|
|
46
|
+
<div>Grid item 1</div>
|
|
47
|
+
<div>Grid item 2</div>
|
|
48
|
+
<div>Grid item 3</div>
|
|
49
|
+
<div>Grid item 4</div>
|
|
50
|
+
<div>Grid item 5</div>
|
|
51
|
+
<div>Grid item 6</div>
|
|
52
|
+
</Grid>
|
|
63
53
|
);
|
|
64
54
|
};
|
|
65
55
|
```
|
package/src/grid.module.scss
CHANGED
|
@@ -1,23 +1,49 @@
|
|
|
1
1
|
@import "@purpurds/tokens/breakpoint/variables";
|
|
2
2
|
|
|
3
3
|
.purpur-grid {
|
|
4
|
+
--gap: var(--purpur-spacing-gutter-sm);
|
|
4
5
|
--padding: var(--purpur-spacing-page-padding-sm);
|
|
5
6
|
|
|
6
7
|
box-sizing: border-box;
|
|
7
|
-
display:
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
display: grid;
|
|
9
|
+
gap: var(--gap);
|
|
10
|
+
width: 100%;
|
|
10
11
|
max-width: var(--purpur-breakpoint-xl);
|
|
12
|
+
margin: 0 auto;
|
|
11
13
|
padding: 0 var(--padding);
|
|
12
|
-
width: 100%;
|
|
13
14
|
|
|
14
15
|
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
16
|
+
--gap: var(--purpur-spacing-gutter-md);
|
|
15
17
|
--padding: var(--purpur-spacing-page-padding-md);
|
|
16
18
|
}
|
|
17
19
|
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
20
|
+
--gap: var(--purpur-spacing-gutter-lg);
|
|
18
21
|
--padding: var(--purpur-spacing-page-padding-lg);
|
|
19
22
|
}
|
|
20
23
|
@media screen and (min-width: #{$purpur-breakpoint-xl}) {
|
|
24
|
+
--gap: var(--purpur-spacing-gutter-xl);
|
|
21
25
|
--padding: var(--purpur-spacing-page-padding-xl);
|
|
22
26
|
}
|
|
27
|
+
|
|
28
|
+
@for $i from 12 through 2 {
|
|
29
|
+
&#{&}-col-sm-#{$i} {
|
|
30
|
+
grid-template-columns: repeat($i, 1fr);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@for $i from 12 through 2 {
|
|
35
|
+
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
36
|
+
&#{&}-col-md-#{$i} {
|
|
37
|
+
grid-template-columns: repeat($i, 1fr);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@for $i from 12 through 2 {
|
|
43
|
+
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
44
|
+
&#{&}-col-lg-#{$i} {
|
|
45
|
+
grid-template-columns: repeat($i, 1fr);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
23
49
|
}
|
package/src/grid.stories.tsx
CHANGED
|
@@ -20,6 +20,14 @@ const meta: Meta<typeof Grid> = {
|
|
|
20
20
|
["data-testid"]: { control: { type: "text" } },
|
|
21
21
|
className: { control: { type: "text" } },
|
|
22
22
|
children: { control: { type: "text" } },
|
|
23
|
+
colsSm: { control: { type: "range", min: 1, max: 4, step: 1 } },
|
|
24
|
+
colsMd: { control: { type: "range", min: 1, max: 8, step: 1 } },
|
|
25
|
+
colsLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
|
|
26
|
+
},
|
|
27
|
+
args: {
|
|
28
|
+
colsSm: 2,
|
|
29
|
+
colsMd: 4,
|
|
30
|
+
colsLg: 6,
|
|
23
31
|
},
|
|
24
32
|
};
|
|
25
33
|
|
|
@@ -30,40 +38,12 @@ type Story = StoryObj<typeof Grid>;
|
|
|
30
38
|
export const Showcase: Story = {
|
|
31
39
|
render: ({ children, ...args }) => (
|
|
32
40
|
<Grid {...args}>
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
<p>Column 1</p>
|
|
36
|
-
{children}
|
|
37
|
-
</Grid.Col>
|
|
38
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
39
|
-
<p>Column 2</p>
|
|
40
|
-
{children}
|
|
41
|
-
</Grid.Col>
|
|
42
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
43
|
-
<p>Column 3</p>
|
|
44
|
-
{children}
|
|
45
|
-
</Grid.Col>
|
|
46
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
47
|
-
<p>Column 4</p>
|
|
48
|
-
{children}
|
|
49
|
-
</Grid.Col>
|
|
50
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
51
|
-
<p>Column 5</p>
|
|
52
|
-
{children}
|
|
53
|
-
</Grid.Col>
|
|
54
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
55
|
-
<p>Column 6</p>
|
|
56
|
-
{children}
|
|
57
|
-
</Grid.Col>
|
|
58
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
59
|
-
<p>Column 7</p>
|
|
60
|
-
{children}
|
|
61
|
-
</Grid.Col>
|
|
62
|
-
<Grid.Col width={6} widthMd={4} widthLg={3}>
|
|
63
|
-
<p>Column 8</p>
|
|
41
|
+
{Array.from(Array(12).keys()).map((x) => (
|
|
42
|
+
<div key={x} style={{ border: "1px solid lightgray", padding: ".5rem" }}>
|
|
43
|
+
<p>Column {x + 1}</p>
|
|
64
44
|
{children}
|
|
65
|
-
</
|
|
66
|
-
|
|
45
|
+
</div>
|
|
46
|
+
))}
|
|
67
47
|
</Grid>
|
|
68
48
|
),
|
|
69
49
|
};
|
package/src/grid.tsx
CHANGED
|
@@ -1,38 +1,45 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
|
-
import c from "classnames";
|
|
2
|
+
import c from "classnames/bind";
|
|
3
3
|
|
|
4
|
-
import { Col } from "./col";
|
|
5
4
|
import styles from "./grid.module.scss";
|
|
6
|
-
import { Row } from "./row";
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
Row: typeof Row;
|
|
10
|
-
Col: typeof Col;
|
|
11
|
-
};
|
|
6
|
+
const cx = c.bind(styles);
|
|
12
7
|
|
|
13
8
|
export type GridProps = {
|
|
14
9
|
children: ReactNode;
|
|
15
10
|
["data-testid"]?: string;
|
|
16
11
|
className?: string;
|
|
12
|
+
/** colsSm represents the number of columns for small screens. */
|
|
13
|
+
colsSm?: 1 | 2 | 3 | 4;
|
|
14
|
+
/** colsMd represents the number of columns for medium screens. */
|
|
15
|
+
colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
16
|
+
/** colsLg represents the number of columns for large screens. */
|
|
17
|
+
colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
17
18
|
};
|
|
18
19
|
|
|
19
|
-
export type { ColumnWidthType } from "./col";
|
|
20
|
-
|
|
21
20
|
const rootClassName = "purpur-grid";
|
|
22
21
|
|
|
23
|
-
export const Grid
|
|
22
|
+
export const Grid = ({
|
|
24
23
|
children,
|
|
25
24
|
className,
|
|
26
25
|
["data-testid"]: dataTestId,
|
|
26
|
+
colsSm = 1,
|
|
27
|
+
colsMd = 1,
|
|
28
|
+
colsLg = 1,
|
|
27
29
|
...props
|
|
28
|
-
}) => {
|
|
29
|
-
const classes =
|
|
30
|
+
}: GridProps) => {
|
|
31
|
+
const classes = cx([
|
|
32
|
+
className,
|
|
33
|
+
rootClassName,
|
|
34
|
+
{
|
|
35
|
+
[`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,
|
|
36
|
+
[`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,
|
|
37
|
+
[`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,
|
|
38
|
+
},
|
|
39
|
+
]);
|
|
30
40
|
return (
|
|
31
41
|
<div className={classes} data-testid={dataTestId} {...props}>
|
|
32
42
|
{children}
|
|
33
43
|
</div>
|
|
34
44
|
);
|
|
35
45
|
};
|
|
36
|
-
|
|
37
|
-
Grid.Col = Col;
|
|
38
|
-
Grid.Row = Row;
|
package/dist/col.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { default as React, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
4
|
-
export type ColProps = {
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
className?: string;
|
|
7
|
-
["data-testid"]?: string;
|
|
8
|
-
width?: ColumnWidthType;
|
|
9
|
-
widthMd?: ColumnWidthType;
|
|
10
|
-
widthLg?: ColumnWidthType;
|
|
11
|
-
};
|
|
12
|
-
export declare const Col: ({ children, ["data-testid"]: dataTestId, width, className, widthMd, widthLg, ...props }: ColProps) => React.JSX.Element;
|
|
13
|
-
//# sourceMappingURL=col.d.ts.map
|
package/dist/col.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"col.d.ts","sourceRoot":"","sources":["../src/col.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE/E,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,GAAG,4FAQb,QAAQ,sBAgBV,CAAC"}
|
package/dist/row.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { default as React, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export declare const RowSpacings: {
|
|
4
|
-
readonly SM: "sm";
|
|
5
|
-
readonly MD: "md";
|
|
6
|
-
readonly LG: "lg";
|
|
7
|
-
};
|
|
8
|
-
export declare const RowSpacingSizes: ("sm" | "md" | "lg")[];
|
|
9
|
-
export type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];
|
|
10
|
-
export type RowProps = {
|
|
11
|
-
className?: string;
|
|
12
|
-
colGap?: boolean;
|
|
13
|
-
["data-testid"]?: string;
|
|
14
|
-
children: ReactNode;
|
|
15
|
-
spacing?: RowSpacingsType;
|
|
16
|
-
};
|
|
17
|
-
export declare const Row: ({ children, ["data-testid"]: dataTestId, spacing, className, colGap, ...props }: RowProps) => React.JSX.Element;
|
|
18
|
-
//# sourceMappingURL=row.d.ts.map
|
package/dist/row.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../src/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,eAAe,wBAA6B,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,GAAG,oFAOb,QAAQ,sBAeV,CAAC"}
|
package/src/col.module.scss
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
@import "@purpurds/tokens/breakpoint/variables";
|
|
2
|
-
|
|
3
|
-
$columns: 12;
|
|
4
|
-
|
|
5
|
-
@mixin validate-col-numbers($noOfCols) {
|
|
6
|
-
@if not(type-of($noOfCols) == "number") {
|
|
7
|
-
@error 'Invalid col value type "#{type-of($noOfCols)}"';
|
|
8
|
-
}
|
|
9
|
-
@if ($noOfCols < 1 or $noOfCols > 12) {
|
|
10
|
-
@error 'Invalid col value #{$noOfCols}, col number should be from 1 to 12';
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@mixin purpur-col($noOfCols: 1) {
|
|
15
|
-
--padding-col: var(--purpur-spacing-gutter-sm);
|
|
16
|
-
|
|
17
|
-
@include validate-col-numbers($noOfCols);
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
display: block;
|
|
20
|
-
padding-left: calc(var(--padding-col) / 2);
|
|
21
|
-
padding-right: calc(var(--padding-col) / 2);
|
|
22
|
-
width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
|
|
23
|
-
|
|
24
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
25
|
-
--padding-col: var(--purpur-spacing-gutter-md);
|
|
26
|
-
}
|
|
27
|
-
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
28
|
-
--padding-col: var(--purpur-spacing-gutter-lg);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@mixin purpur-col-md($noOfCols: 1) {
|
|
33
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
34
|
-
@include validate-col-numbers($noOfCols);
|
|
35
|
-
width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@mixin purpur-col-lg($noOfCols: 1) {
|
|
40
|
-
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
41
|
-
@include validate-col-numbers($noOfCols);
|
|
42
|
-
width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.purpur-col {
|
|
47
|
-
@for $i from 12 through 1 {
|
|
48
|
-
&.purpur-col-#{$i} {
|
|
49
|
-
@include purpur-col($i);
|
|
50
|
-
}
|
|
51
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
52
|
-
&.purpur-col-md-#{$i} {
|
|
53
|
-
@include purpur-col-md($i);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
57
|
-
&.purpur-col-lg-#{$i} {
|
|
58
|
-
@include purpur-col-lg($i);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
package/src/col.tsx
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
2
|
-
import c from "classnames";
|
|
3
|
-
|
|
4
|
-
import styles from "./col.module.scss";
|
|
5
|
-
|
|
6
|
-
export type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
7
|
-
|
|
8
|
-
export type ColProps = {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
className?: string;
|
|
11
|
-
["data-testid"]?: string;
|
|
12
|
-
width?: ColumnWidthType;
|
|
13
|
-
widthMd?: ColumnWidthType;
|
|
14
|
-
widthLg?: ColumnWidthType;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const rootClassName = "purpur-col";
|
|
18
|
-
|
|
19
|
-
export const Col = ({
|
|
20
|
-
children,
|
|
21
|
-
["data-testid"]: dataTestId,
|
|
22
|
-
width,
|
|
23
|
-
className,
|
|
24
|
-
widthMd,
|
|
25
|
-
widthLg,
|
|
26
|
-
...props
|
|
27
|
-
}: ColProps) => {
|
|
28
|
-
const classes = c([
|
|
29
|
-
className,
|
|
30
|
-
styles[rootClassName],
|
|
31
|
-
{
|
|
32
|
-
[styles[`${rootClassName}-${width}`]]: width,
|
|
33
|
-
[styles[`${rootClassName}-md-${widthMd}`]]: widthMd,
|
|
34
|
-
[styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,
|
|
35
|
-
},
|
|
36
|
-
]);
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>
|
|
40
|
-
{children}
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
};
|
package/src/grid.col.stories.tsx
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
-
|
|
4
|
-
import { Grid } from "./grid";
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Grid.Col> = {
|
|
7
|
-
title: "Components/Grid",
|
|
8
|
-
component: Grid.Col,
|
|
9
|
-
parameters: {
|
|
10
|
-
design: [
|
|
11
|
-
{
|
|
12
|
-
name: "Grid",
|
|
13
|
-
type: "figma",
|
|
14
|
-
url:
|
|
15
|
-
"https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
|
|
16
|
-
},
|
|
17
|
-
],
|
|
18
|
-
storyHead: {
|
|
19
|
-
title: "Grid.Col",
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
argTypes: {
|
|
23
|
-
["data-testid"]: { control: { type: "text" } },
|
|
24
|
-
className: { control: { type: "text" } },
|
|
25
|
-
children: { control: { type: "text" } },
|
|
26
|
-
width: { control: { type: "range", min: 1, max: 12, step: 1 } },
|
|
27
|
-
widthMd: { control: { type: "range", min: 1, max: 12, step: 1 } },
|
|
28
|
-
widthLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
export default meta;
|
|
32
|
-
|
|
33
|
-
type Story = StoryObj<typeof Grid.Col>;
|
|
34
|
-
|
|
35
|
-
export const Column: Story = {
|
|
36
|
-
args: {
|
|
37
|
-
width: 12,
|
|
38
|
-
widthMd: 12,
|
|
39
|
-
widthLg: 12,
|
|
40
|
-
},
|
|
41
|
-
render: ({ children, ...args }) => (
|
|
42
|
-
<Grid>
|
|
43
|
-
<Grid.Row>
|
|
44
|
-
<Grid.Col {...args}>
|
|
45
|
-
<p>Column 1</p>
|
|
46
|
-
{children}
|
|
47
|
-
</Grid.Col>
|
|
48
|
-
<Grid.Col {...args}>
|
|
49
|
-
<p>Column 2</p>
|
|
50
|
-
{children}
|
|
51
|
-
</Grid.Col>
|
|
52
|
-
<Grid.Col {...args}>
|
|
53
|
-
<p>Column 3</p>
|
|
54
|
-
{children}
|
|
55
|
-
</Grid.Col>
|
|
56
|
-
<Grid.Col {...args}>
|
|
57
|
-
<p>Column 4</p>
|
|
58
|
-
{children}
|
|
59
|
-
</Grid.Col>
|
|
60
|
-
<Grid.Col {...args}>
|
|
61
|
-
<p>Column 5</p>
|
|
62
|
-
{children}
|
|
63
|
-
</Grid.Col>
|
|
64
|
-
<Grid.Col {...args}>
|
|
65
|
-
<p>Column 6</p>
|
|
66
|
-
{children}
|
|
67
|
-
</Grid.Col>
|
|
68
|
-
<Grid.Col {...args}>
|
|
69
|
-
<p>Column 7</p>
|
|
70
|
-
{children}
|
|
71
|
-
</Grid.Col>
|
|
72
|
-
<Grid.Col {...args}>
|
|
73
|
-
<p>Column 8</p>
|
|
74
|
-
{children}
|
|
75
|
-
</Grid.Col>
|
|
76
|
-
</Grid.Row>
|
|
77
|
-
</Grid>
|
|
78
|
-
),
|
|
79
|
-
};
|
package/src/grid.row.stories.tsx
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
/* eslint-disable react/prop-types */
|
|
2
|
-
import React from "react";
|
|
3
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
4
|
-
|
|
5
|
-
import { Grid } from "./grid";
|
|
6
|
-
import { RowSpacingSizes } from "./row";
|
|
7
|
-
|
|
8
|
-
const meta: Meta<typeof Grid.Row> = {
|
|
9
|
-
title: "Components/Grid",
|
|
10
|
-
component: Grid.Row,
|
|
11
|
-
parameters: {
|
|
12
|
-
design: [
|
|
13
|
-
{
|
|
14
|
-
name: "Grid",
|
|
15
|
-
type: "figma",
|
|
16
|
-
url:
|
|
17
|
-
"https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
|
|
18
|
-
},
|
|
19
|
-
],
|
|
20
|
-
storyHead: {
|
|
21
|
-
title: "Grid.Row",
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
argTypes: {
|
|
25
|
-
["data-testid"]: { control: { type: "text" } },
|
|
26
|
-
className: { control: { type: "text" } },
|
|
27
|
-
children: { control: { type: "text" } },
|
|
28
|
-
colGap: { control: { type: "boolean" } },
|
|
29
|
-
spacing: {
|
|
30
|
-
control: { type: "select" },
|
|
31
|
-
options: [undefined, ...RowSpacingSizes],
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
export default meta;
|
|
36
|
-
|
|
37
|
-
type Story = StoryObj<typeof Grid.Row>;
|
|
38
|
-
|
|
39
|
-
export const Row: Story = {
|
|
40
|
-
args: {
|
|
41
|
-
colGap: false,
|
|
42
|
-
},
|
|
43
|
-
render: ({ children, ...args }) => (
|
|
44
|
-
<Grid>
|
|
45
|
-
<Grid.Row {...args}>
|
|
46
|
-
<Grid.Col width={12} widthMd={6} widthLg={4}>
|
|
47
|
-
<p>Column 1 - Row 1</p>
|
|
48
|
-
{children}
|
|
49
|
-
</Grid.Col>
|
|
50
|
-
<Grid.Col width={12} widthMd={6} widthLg={4}>
|
|
51
|
-
<p>Column 2 - Row 1</p>
|
|
52
|
-
{children}
|
|
53
|
-
</Grid.Col>
|
|
54
|
-
</Grid.Row>
|
|
55
|
-
<Grid.Row {...args}>
|
|
56
|
-
<Grid.Col width={12} widthMd={6} widthLg={4}>
|
|
57
|
-
<p>Column 3 - Row 2</p>
|
|
58
|
-
{children}
|
|
59
|
-
</Grid.Col>
|
|
60
|
-
<Grid.Col width={12} widthMd={6} widthLg={4}>
|
|
61
|
-
<p>Column 4 - Row 2</p>
|
|
62
|
-
{children}
|
|
63
|
-
</Grid.Col>
|
|
64
|
-
</Grid.Row>
|
|
65
|
-
</Grid>
|
|
66
|
-
),
|
|
67
|
-
};
|
package/src/row.module.scss
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
@import "@purpurds/tokens/breakpoint/variables";
|
|
2
|
-
|
|
3
|
-
.purpur-row {
|
|
4
|
-
--margin: var(--purpur-spacing-gutter-sm);
|
|
5
|
-
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-wrap: wrap;
|
|
9
|
-
justify-content: left;
|
|
10
|
-
margin-left: calc(-1 * var(--margin) / 2);
|
|
11
|
-
margin-right: calc(-1 * var(--margin) / 2);
|
|
12
|
-
|
|
13
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
14
|
-
--margin: var(--purpur-spacing-gutter-md);
|
|
15
|
-
}
|
|
16
|
-
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
17
|
-
--margin: var(--purpur-spacing-gutter-lg);
|
|
18
|
-
}
|
|
19
|
-
@media screen and (min-width: #{$purpur-breakpoint-xl}) {
|
|
20
|
-
--margin: var(--purpur-spacing-gutter-xl);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&:last-of-type {
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&--sm {
|
|
28
|
-
margin-bottom: var(--purpur-spacing-gutter-sm);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&--md {
|
|
32
|
-
margin-bottom: var(--purpur-spacing-gutter-md);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&--lg {
|
|
36
|
-
margin-bottom: var(--purpur-spacing-gutter-md);
|
|
37
|
-
|
|
38
|
-
@media screen and (min-width: #{$purpur-breakpoint-lg}) {
|
|
39
|
-
margin-bottom: var(--purpur-spacing-gutter-lg);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&--col-gap {
|
|
44
|
-
margin-top: calc(-1 * var(--purpur-spacing-gutter-sm));
|
|
45
|
-
|
|
46
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
47
|
-
margin-top: calc(-1 * var(--purpur-spacing-gutter-md));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
> :global(.purpur-col) {
|
|
51
|
-
margin-top: var(--purpur-spacing-gutter-sm);
|
|
52
|
-
|
|
53
|
-
@media screen and (min-width: #{$purpur-breakpoint-md}) {
|
|
54
|
-
margin-top: var(--purpur-spacing-gutter-md);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
package/src/row.tsx
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
2
|
-
import c from "classnames";
|
|
3
|
-
|
|
4
|
-
import styles from "./row.module.scss";
|
|
5
|
-
|
|
6
|
-
export const RowSpacings = {
|
|
7
|
-
SM: "sm",
|
|
8
|
-
MD: "md",
|
|
9
|
-
LG: "lg",
|
|
10
|
-
} as const;
|
|
11
|
-
|
|
12
|
-
export const RowSpacingSizes = Object.values(RowSpacings);
|
|
13
|
-
export type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];
|
|
14
|
-
|
|
15
|
-
export type RowProps = {
|
|
16
|
-
className?: string;
|
|
17
|
-
colGap?: boolean;
|
|
18
|
-
["data-testid"]?: string;
|
|
19
|
-
children: ReactNode;
|
|
20
|
-
spacing?: RowSpacingsType;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const rootClassName = "purpur-row";
|
|
24
|
-
|
|
25
|
-
export const Row = ({
|
|
26
|
-
children,
|
|
27
|
-
["data-testid"]: dataTestId,
|
|
28
|
-
spacing,
|
|
29
|
-
className,
|
|
30
|
-
colGap,
|
|
31
|
-
...props
|
|
32
|
-
}: RowProps) => {
|
|
33
|
-
const classes = c([
|
|
34
|
-
className,
|
|
35
|
-
styles[rootClassName],
|
|
36
|
-
{
|
|
37
|
-
[styles[`${rootClassName}--${spacing}`]]: spacing,
|
|
38
|
-
[styles[`${rootClassName}--col-gap`]]: colGap,
|
|
39
|
-
},
|
|
40
|
-
]);
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<div className={classes} data-testid={dataTestId} {...props}>
|
|
44
|
-
{children}
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
};
|