@purpurds/grid 5.0.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/grid.cjs.js +2 -2
  2. package/dist/grid.cjs.js.map +1 -1
  3. package/dist/grid.d.ts +11 -4
  4. package/dist/grid.d.ts.map +1 -1
  5. package/dist/grid.es.js +100 -62
  6. package/dist/grid.es.js.map +1 -1
  7. package/dist/grid.item.d.ts +16 -0
  8. package/dist/grid.item.d.ts.map +1 -0
  9. package/dist/styles.css +1 -1
  10. package/package.json +4 -3
  11. package/readme.mdx +58 -0
  12. package/src/grid.item.module.scss +43 -0
  13. package/src/grid.item.stories.tsx +47 -0
  14. package/src/grid.item.tsx +68 -0
  15. package/src/grid.module.scss +53 -19
  16. package/src/grid.stories.tsx +82 -3
  17. package/src/grid.tsx +25 -8
package/dist/grid.cjs.js CHANGED
@@ -1,6 +1,6 @@
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:{}};/*!
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("react");function f(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var n={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 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;
5
+ */(function(p){(function(){var _={}.hasOwnProperty;function o(){for(var r="",u=0;u<arguments.length;u++){var i=arguments[u];i&&(r=l(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 o.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)_.call(r,i)&&r[i]&&(u=l(u,this&&this[i]||i));return u}function l(r,u){return u?r?r+" "+u:r+u:r}p.exports?(o.default=o,p.exports=o):window.classNames=o})()})(n);var $=n.exports;const m=f($),y={"purpur-grid-item":"_purpur-grid-item_1o8x1_1","purpur-grid-item-colspan-sm-4":"_purpur-grid-item-colspan-sm-4_1o8x1_21","purpur-grid-item-colspan-sm-3":"_purpur-grid-item-colspan-sm-3_1o8x1_24","purpur-grid-item-colspan-sm-2":"_purpur-grid-item-colspan-sm-2_1o8x1_27","purpur-grid-item-colspan-sm-1":"_purpur-grid-item-colspan-sm-1_1o8x1_30","purpur-grid-item-colspan-md-8":"_purpur-grid-item-colspan-md-8_1o8x1_34","purpur-grid-item-colspan-md-7":"_purpur-grid-item-colspan-md-7_1o8x1_39","purpur-grid-item-colspan-md-6":"_purpur-grid-item-colspan-md-6_1o8x1_44","purpur-grid-item-colspan-md-5":"_purpur-grid-item-colspan-md-5_1o8x1_49","purpur-grid-item-colspan-md-4":"_purpur-grid-item-colspan-md-4_1o8x1_54","purpur-grid-item-colspan-md-3":"_purpur-grid-item-colspan-md-3_1o8x1_59","purpur-grid-item-colspan-md-2":"_purpur-grid-item-colspan-md-2_1o8x1_64","purpur-grid-item-colspan-md-1":"_purpur-grid-item-colspan-md-1_1o8x1_69","purpur-grid-item-colspan-lg-12":"_purpur-grid-item-colspan-lg-12_1o8x1_74","purpur-grid-item-colspan-lg-11":"_purpur-grid-item-colspan-lg-11_1o8x1_79","purpur-grid-item-colspan-lg-10":"_purpur-grid-item-colspan-lg-10_1o8x1_84","purpur-grid-item-colspan-lg-9":"_purpur-grid-item-colspan-lg-9_1o8x1_89","purpur-grid-item-colspan-lg-8":"_purpur-grid-item-colspan-lg-8_1o8x1_94","purpur-grid-item-colspan-lg-7":"_purpur-grid-item-colspan-lg-7_1o8x1_99","purpur-grid-item-colspan-lg-6":"_purpur-grid-item-colspan-lg-6_1o8x1_104","purpur-grid-item-colspan-lg-5":"_purpur-grid-item-colspan-lg-5_1o8x1_109","purpur-grid-item-colspan-lg-4":"_purpur-grid-item-colspan-lg-4_1o8x1_114","purpur-grid-item-colspan-lg-3":"_purpur-grid-item-colspan-lg-3_1o8x1_119","purpur-grid-item-colspan-lg-2":"_purpur-grid-item-colspan-lg-2_1o8x1_124","purpur-grid-item-colspan-lg-1":"_purpur-grid-item-colspan-lg-1_1o8x1_74"},j=m.bind(y),s="purpur-grid-item",a=({children:p,className:_,["data-testid"]:o,colSpanSm:d=4,colSpanMd:l=8,colSpanLg:r=12})=>{const u=j([_,s,{[`${s}-colspan-sm-${d}`]:d,[`${s}-colspan-md-${l}`]:l,[`${s}-colspan-lg-${r}`]:r}]);return c.jsx("div",{className:u,"data-testid":o,children:p})},C=p=>!!p&&e.isValidElement(p)&&(!!p.props.colSpanSm||!!p.props.colSpanMd||!!p.props.colSpanLg),N={"purpur-grid":"_purpur-grid_1vbh2_1","purpur-grid--grid":"_purpur-grid--grid_1vbh2_33","purpur-grid-col-sm-4":"_purpur-grid-col-sm-4_1vbh2_37","purpur-grid-col-sm-3":"_purpur-grid-col-sm-3_1vbh2_40","purpur-grid-col-sm-2":"_purpur-grid-col-sm-2_1vbh2_43","purpur-grid-col-md-8":"_purpur-grid-col-md-8_1vbh2_47","purpur-grid-col-md-7":"_purpur-grid-col-md-7_1vbh2_52","purpur-grid-col-md-6":"_purpur-grid-col-md-6_1vbh2_57","purpur-grid-col-md-5":"_purpur-grid-col-md-5_1vbh2_62","purpur-grid-col-md-4":"_purpur-grid-col-md-4_1vbh2_67","purpur-grid-col-md-3":"_purpur-grid-col-md-3_1vbh2_72","purpur-grid-col-md-2":"_purpur-grid-col-md-2_1vbh2_77","purpur-grid-col-lg-12":"_purpur-grid-col-lg-12_1vbh2_82","purpur-grid-col-lg-11":"_purpur-grid-col-lg-11_1vbh2_87","purpur-grid-col-lg-10":"_purpur-grid-col-lg-10_1vbh2_92","purpur-grid-col-lg-9":"_purpur-grid-col-lg-9_1vbh2_97","purpur-grid-col-lg-8":"_purpur-grid-col-lg-8_1vbh2_102","purpur-grid-col-lg-7":"_purpur-grid-col-lg-7_1vbh2_107","purpur-grid-col-lg-6":"_purpur-grid-col-lg-6_1vbh2_112","purpur-grid-col-lg-5":"_purpur-grid-col-lg-5_1vbh2_117","purpur-grid-col-lg-4":"_purpur-grid-col-lg-4_1vbh2_122","purpur-grid-col-lg-3":"_purpur-grid-col-lg-3_1vbh2_127","purpur-grid-col-lg-2":"_purpur-grid-col-lg-2_1vbh2_132","purpur-grid--flex":"_purpur-grid--flex_1vbh2_136"},O=m.bind(N),g="purpur-grid",h=({children:p,className:_,["data-testid"]:o,colsSm:d=1,colsMd:l=1,colsLg:r=1,...u})=>{const i=e.Children.toArray(p).filter(C),t=i.length,x=O([_,g,{[`${g}--grid`]:!t,[`${g}--flex`]:t,[`${g}-col-sm-${d}`]:d>1&&!t,[`${g}-col-md-${l}`]:l>1&&!t,[`${g}-col-lg-${r}`]:r>1&&!t}]);return c.jsx("div",{className:x,"data-testid":o,...u,children:t?e.Children.map(i,({props:{children:b,...v}})=>c.jsx(a,{...v,children:b})):p})};h.Item=a;exports.Grid=h;
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/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]}
1
+ {"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../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, {\n isValidElement,\n ReactChild,\n ReactElement,\n ReactFragment,\n ReactNode,\n ReactPortal,\n} from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps = {\n children: ReactNode;\n [\"data-testid\"]?: string;\n className?: string;\n /** The number of columns that the item spans on small screens. */\n colSpanSm?: 1 | 2 | 3 | 4;\n /** The number of columns that the item spans on medium screens. */\n colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns that the item spans on large screens. */\n colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid-item\";\n\nexport const Item = ({\n children,\n className,\n [\"data-testid\"]: dataTestId,\n colSpanSm = 4,\n colSpanMd = 8,\n colSpanLg = 12,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,\n [`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,\n [`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,\n },\n ]);\n\n return (\n <div className={classes} data-testid={dataTestId}>\n {children}\n </div>\n );\n};\n\nexport const isItem = (\n child:\n | ReactChild\n | ReactElement\n | ReactFragment\n | ReactPortal\n | string\n | number\n | boolean\n | null\n | undefined\n): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n","import React, { Children, ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport { isItem, Item } from \"./grid.item\";\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 /** The number of columns on small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** The number of columns on medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns on large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\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 gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--grid`]: !hasItemChildren,\n [`${rootClassName}--flex`]: hasItemChildren,\n [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps}>{children}</Item>\n ))\n : children}\n </div>\n );\n};\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","isItem","child","isValidElement","Grid","colsSm","colsMd","colsLg","props","gridItemChildren","Children","hasItemChildren","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/grid.d.ts CHANGED
@@ -1,15 +1,22 @@
1
+ import { Item } from './grid.item';
1
2
  import { default as React, ReactNode } from 'react';
2
3
 
3
4
  export type GridProps = {
4
5
  children: ReactNode;
5
6
  ["data-testid"]?: string;
6
7
  className?: string;
7
- /** colsSm represents the number of columns for small screens. */
8
+ /** The number of columns on small screens. */
8
9
  colsSm?: 1 | 2 | 3 | 4;
9
- /** colsMd represents the number of columns for medium screens. */
10
+ /** The number of columns on medium screens. */
10
11
  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
11
- /** colsLg represents the number of columns for large screens. */
12
+ /** The number of columns on large screens. */
12
13
  colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
13
14
  };
14
- export declare const Grid: ({ children, className, ["data-testid"]: dataTestId, colsSm, colsMd, colsLg, ...props }: GridProps) => React.JSX.Element;
15
+ export type GridCmp<P> = React.FunctionComponent<P> & {
16
+ Item: typeof Item;
17
+ };
18
+ export declare const Grid: {
19
+ ({ children, className, ["data-testid"]: dataTestId, colsSm, colsMd, colsLg, ...props }: GridProps): React.JSX.Element;
20
+ Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, }: import('./grid.item').ItemProps) => React.JSX.Element;
21
+ };
15
22
  //# 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;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"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAU,IAAI,EAAE,MAAM,aAAa,CAAC;AAK3C,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvC,8CAA8C;IAC9C,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;AAEF,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACpD,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,IAAI;6FAQd,SAAS;;CAyBX,CAAC"}
package/dist/grid.es.js CHANGED
@@ -1,8 +1,9 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- function s(p) {
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { isValidElement as v, Children as e } from "react";
3
+ function f(p) {
3
4
  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
4
5
  }
5
- var g = { exports: {} };
6
+ var m = { exports: {} };
6
7
  /*!
7
8
  Copyright (c) 2018 Jed Watson.
8
9
  Licensed under the MIT License (MIT), see
@@ -10,91 +11,128 @@ var g = { exports: {} };
10
11
  */
11
12
  (function(p) {
12
13
  (function() {
13
- var c = {}.hasOwnProperty;
14
- function l() {
14
+ var _ = {}.hasOwnProperty;
15
+ function o() {
15
16
  for (var r = "", u = 0; u < arguments.length; u++) {
16
- var o = arguments[u];
17
- o && (r = d(r, i.call(this, o)));
17
+ var i = arguments[u];
18
+ i && (r = l(r, d.call(this, i)));
18
19
  }
19
20
  return r;
20
21
  }
21
- function i(r) {
22
+ function d(r) {
22
23
  if (typeof r == "string" || typeof r == "number")
23
24
  return this && this[r] || r;
24
25
  if (typeof r != "object")
25
26
  return "";
26
27
  if (Array.isArray(r))
27
- return l.apply(this, r);
28
+ return o.apply(this, r);
28
29
  if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
29
30
  return r.toString();
30
31
  var u = "";
31
- for (var o in r)
32
- c.call(r, o) && r[o] && (u = d(u, this && this[o] || o));
32
+ for (var i in r)
33
+ _.call(r, i) && r[i] && (u = l(u, this && this[i] || i));
33
34
  return u;
34
35
  }
35
- function d(r, u) {
36
+ function l(r, u) {
36
37
  return u ? r ? r + " " + u : r + u : r;
37
38
  }
38
- p.exports ? (l.default = l, p.exports = l) : window.classNames = l;
39
+ p.exports ? (o.default = o, p.exports = o) : window.classNames = o;
39
40
  })();
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 = ({
41
+ })(m);
42
+ var $ = m.exports;
43
+ const n = /* @__PURE__ */ f($), y = {
44
+ "purpur-grid-item": "_purpur-grid-item_1o8x1_1",
45
+ "purpur-grid-item-colspan-sm-4": "_purpur-grid-item-colspan-sm-4_1o8x1_21",
46
+ "purpur-grid-item-colspan-sm-3": "_purpur-grid-item-colspan-sm-3_1o8x1_24",
47
+ "purpur-grid-item-colspan-sm-2": "_purpur-grid-item-colspan-sm-2_1o8x1_27",
48
+ "purpur-grid-item-colspan-sm-1": "_purpur-grid-item-colspan-sm-1_1o8x1_30",
49
+ "purpur-grid-item-colspan-md-8": "_purpur-grid-item-colspan-md-8_1o8x1_34",
50
+ "purpur-grid-item-colspan-md-7": "_purpur-grid-item-colspan-md-7_1o8x1_39",
51
+ "purpur-grid-item-colspan-md-6": "_purpur-grid-item-colspan-md-6_1o8x1_44",
52
+ "purpur-grid-item-colspan-md-5": "_purpur-grid-item-colspan-md-5_1o8x1_49",
53
+ "purpur-grid-item-colspan-md-4": "_purpur-grid-item-colspan-md-4_1o8x1_54",
54
+ "purpur-grid-item-colspan-md-3": "_purpur-grid-item-colspan-md-3_1o8x1_59",
55
+ "purpur-grid-item-colspan-md-2": "_purpur-grid-item-colspan-md-2_1o8x1_64",
56
+ "purpur-grid-item-colspan-md-1": "_purpur-grid-item-colspan-md-1_1o8x1_69",
57
+ "purpur-grid-item-colspan-lg-12": "_purpur-grid-item-colspan-lg-12_1o8x1_74",
58
+ "purpur-grid-item-colspan-lg-11": "_purpur-grid-item-colspan-lg-11_1o8x1_79",
59
+ "purpur-grid-item-colspan-lg-10": "_purpur-grid-item-colspan-lg-10_1o8x1_84",
60
+ "purpur-grid-item-colspan-lg-9": "_purpur-grid-item-colspan-lg-9_1o8x1_89",
61
+ "purpur-grid-item-colspan-lg-8": "_purpur-grid-item-colspan-lg-8_1o8x1_94",
62
+ "purpur-grid-item-colspan-lg-7": "_purpur-grid-item-colspan-lg-7_1o8x1_99",
63
+ "purpur-grid-item-colspan-lg-6": "_purpur-grid-item-colspan-lg-6_1o8x1_104",
64
+ "purpur-grid-item-colspan-lg-5": "_purpur-grid-item-colspan-lg-5_1o8x1_109",
65
+ "purpur-grid-item-colspan-lg-4": "_purpur-grid-item-colspan-lg-4_1o8x1_114",
66
+ "purpur-grid-item-colspan-lg-3": "_purpur-grid-item-colspan-lg-3_1o8x1_119",
67
+ "purpur-grid-item-colspan-lg-2": "_purpur-grid-item-colspan-lg-2_1o8x1_124",
68
+ "purpur-grid-item-colspan-lg-1": "_purpur-grid-item-colspan-lg-1_1o8x1_74"
69
+ }, N = n.bind(y), s = "purpur-grid-item", a = ({
78
70
  children: p,
79
- className: c,
80
- ["data-testid"]: l,
81
- colsSm: i = 1,
82
- colsMd: d = 1,
71
+ className: _,
72
+ ["data-testid"]: o,
73
+ colSpanSm: d = 4,
74
+ colSpanMd: l = 8,
75
+ colSpanLg: r = 12
76
+ }) => {
77
+ const u = N([
78
+ _,
79
+ s,
80
+ {
81
+ [`${s}-colspan-sm-${d}`]: d,
82
+ [`${s}-colspan-md-${l}`]: l,
83
+ [`${s}-colspan-lg-${r}`]: r
84
+ }
85
+ ]);
86
+ return /* @__PURE__ */ c("div", { className: u, "data-testid": o, children: p });
87
+ }, j = (p) => !!p && v(p) && (!!p.props.colSpanSm || !!p.props.colSpanMd || !!p.props.colSpanLg), C = {
88
+ "purpur-grid": "_purpur-grid_1vbh2_1",
89
+ "purpur-grid--grid": "_purpur-grid--grid_1vbh2_33",
90
+ "purpur-grid-col-sm-4": "_purpur-grid-col-sm-4_1vbh2_37",
91
+ "purpur-grid-col-sm-3": "_purpur-grid-col-sm-3_1vbh2_40",
92
+ "purpur-grid-col-sm-2": "_purpur-grid-col-sm-2_1vbh2_43",
93
+ "purpur-grid-col-md-8": "_purpur-grid-col-md-8_1vbh2_47",
94
+ "purpur-grid-col-md-7": "_purpur-grid-col-md-7_1vbh2_52",
95
+ "purpur-grid-col-md-6": "_purpur-grid-col-md-6_1vbh2_57",
96
+ "purpur-grid-col-md-5": "_purpur-grid-col-md-5_1vbh2_62",
97
+ "purpur-grid-col-md-4": "_purpur-grid-col-md-4_1vbh2_67",
98
+ "purpur-grid-col-md-3": "_purpur-grid-col-md-3_1vbh2_72",
99
+ "purpur-grid-col-md-2": "_purpur-grid-col-md-2_1vbh2_77",
100
+ "purpur-grid-col-lg-12": "_purpur-grid-col-lg-12_1vbh2_82",
101
+ "purpur-grid-col-lg-11": "_purpur-grid-col-lg-11_1vbh2_87",
102
+ "purpur-grid-col-lg-10": "_purpur-grid-col-lg-10_1vbh2_92",
103
+ "purpur-grid-col-lg-9": "_purpur-grid-col-lg-9_1vbh2_97",
104
+ "purpur-grid-col-lg-8": "_purpur-grid-col-lg-8_1vbh2_102",
105
+ "purpur-grid-col-lg-7": "_purpur-grid-col-lg-7_1vbh2_107",
106
+ "purpur-grid-col-lg-6": "_purpur-grid-col-lg-6_1vbh2_112",
107
+ "purpur-grid-col-lg-5": "_purpur-grid-col-lg-5_1vbh2_117",
108
+ "purpur-grid-col-lg-4": "_purpur-grid-col-lg-4_1vbh2_122",
109
+ "purpur-grid-col-lg-3": "_purpur-grid-col-lg-3_1vbh2_127",
110
+ "purpur-grid-col-lg-2": "_purpur-grid-col-lg-2_1vbh2_132",
111
+ "purpur-grid--flex": "_purpur-grid--flex_1vbh2_136"
112
+ }, I = n.bind(C), g = "purpur-grid", O = ({
113
+ children: p,
114
+ className: _,
115
+ ["data-testid"]: o,
116
+ colsSm: d = 1,
117
+ colsMd: l = 1,
83
118
  colsLg: r = 1,
84
119
  ...u
85
120
  }) => {
86
- const o = q([
87
- c,
121
+ const i = e.toArray(p).filter(j), t = i.length, h = I([
88
122
  _,
123
+ g,
89
124
  {
90
- [`${_}-col-sm-${i}`]: i > 1,
91
- [`${_}-col-md-${d}`]: d > 1,
92
- [`${_}-col-lg-${r}`]: r > 1
125
+ [`${g}--grid`]: !t,
126
+ [`${g}--flex`]: t,
127
+ [`${g}-col-sm-${d}`]: d > 1 && !t,
128
+ [`${g}-col-md-${l}`]: l > 1 && !t,
129
+ [`${g}-col-lg-${r}`]: r > 1 && !t
93
130
  }
94
131
  ]);
95
- return /* @__PURE__ */ t("div", { className: o, "data-testid": l, ...u, children: p });
132
+ return /* @__PURE__ */ c("div", { className: h, "data-testid": o, ...u, children: t ? e.map(i, ({ props: { children: x, ...b } }) => /* @__PURE__ */ c(a, { ...b, children: x })) : p });
96
133
  };
134
+ O.Item = a;
97
135
  export {
98
- f as Grid
136
+ O as Grid
99
137
  };
100
138
  //# 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/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]}
1
+ {"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../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, {\n isValidElement,\n ReactChild,\n ReactElement,\n ReactFragment,\n ReactNode,\n ReactPortal,\n} from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps = {\n children: ReactNode;\n [\"data-testid\"]?: string;\n className?: string;\n /** The number of columns that the item spans on small screens. */\n colSpanSm?: 1 | 2 | 3 | 4;\n /** The number of columns that the item spans on medium screens. */\n colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns that the item spans on large screens. */\n colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nconst rootClassName = \"purpur-grid-item\";\n\nexport const Item = ({\n children,\n className,\n [\"data-testid\"]: dataTestId,\n colSpanSm = 4,\n colSpanMd = 8,\n colSpanLg = 12,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,\n [`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,\n [`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,\n },\n ]);\n\n return (\n <div className={classes} data-testid={dataTestId}>\n {children}\n </div>\n );\n};\n\nexport const isItem = (\n child:\n | ReactChild\n | ReactElement\n | ReactFragment\n | ReactPortal\n | string\n | number\n | boolean\n | null\n | undefined\n): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n","import React, { Children, ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport { isItem, Item } from \"./grid.item\";\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 /** The number of columns on small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** The number of columns on medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns on large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\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 gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--grid`]: !hasItemChildren,\n [`${rootClassName}--flex`]: hasItemChildren,\n [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps}>{children}</Item>\n ))\n : children}\n </div>\n );\n};\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","isItem","child","isValidElement","Grid","colsSm","colsMd","colsLg","props","gridItemChildren","Children","hasItemChildren","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/grid.item.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { default as React, ReactChild, ReactElement, ReactFragment, ReactNode, ReactPortal } from 'react';
2
+
3
+ export type ItemProps = {
4
+ children: ReactNode;
5
+ ["data-testid"]?: string;
6
+ className?: string;
7
+ /** The number of columns that the item spans on small screens. */
8
+ colSpanSm?: 1 | 2 | 3 | 4;
9
+ /** The number of columns that the item spans on medium screens. */
10
+ colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
11
+ /** The number of columns that the item spans on large screens. */
12
+ colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
13
+ };
14
+ export declare const Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, }: ItemProps) => React.JSX.Element;
15
+ export declare const isItem: (child: ReactChild | ReactElement | ReactFragment | ReactPortal | string | number | boolean | null | undefined) => child is React.ReactElement<ItemProps, string | React.JSXElementConstructor<any>>;
16
+ //# sourceMappingURL=grid.item.d.ts.map
package/dist/grid.item.d.ts.map ADDED
@@ -0,0 +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;CAC9D,CAAC;AAIF,eAAO,MAAM,IAAI,2FAOd,SAAS,sBAgBX,CAAC;AAEF,eAAO,MAAM,MAAM,UAEb,UAAU,GACV,YAAY,GACZ,aAAa,GACb,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,sFAIkE,CAAC"}
package/dist/styles.css CHANGED
@@ -1 +1 @@
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)}}
1
+ ._purpur-grid-item_1o8x1_1{--padding: calc(var(--purpur-spacing-gutter-sm) / 2);padding:0 var(--padding);box-sizing:border-box}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1{--padding: calc(var(--purpur-spacing-gutter-md) / 2)}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1{--padding: calc(var(--purpur-spacing-gutter-lg) / 2)}}@media screen and (min-width: 1440px){._purpur-grid-item_1o8x1_1{--padding: calc(var(--purpur-spacing-gutter-xl) / 2)}}._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-sm-4_1o8x1_21{width:100%}._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-sm-3_1o8x1_24{width:75%}._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-sm-2_1o8x1_27{width:50%}._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-sm-1_1o8x1_30{width:25%}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-8_1o8x1_34{width:100%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-7_1o8x1_39{width:87.5%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-6_1o8x1_44{width:75%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-5_1o8x1_49{width:62.5%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-4_1o8x1_54{width:50%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-3_1o8x1_59{width:37.5%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-2_1o8x1_64{width:25%}}@media screen and (min-width: 600px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-md-1_1o8x1_69{width:12.5%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-12_1o8x1_74{width:100%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-11_1o8x1_79{width:91.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-10_1o8x1_84{width:83.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-9_1o8x1_89{width:75%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-8_1o8x1_94{width:66.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-7_1o8x1_99{width:58.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-6_1o8x1_104{width:50%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-5_1o8x1_109{width:41.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-4_1o8x1_114{width:33.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-3_1o8x1_119{width:25%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-2_1o8x1_124{width:16.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_1o8x1_1._purpur-grid-item-colspan-lg-1_1o8x1_74{width:8.3333333333%}}._purpur-grid_1vbh2_1{--gap: var(--purpur-spacing-gutter-sm);--padding: var(--purpur-spacing-page-padding-sm);box-sizing:border-box;row-gap:var(--gap);width:100%;max-width:var(--purpur-breakpoint-xl);margin:0 auto;padding:0 var(--padding)}._purpur-grid_1vbh2_1 ._purpur-grid_1vbh2_1{padding:0}@media screen and (min-width: 600px){._purpur-grid_1vbh2_1{--gap: var(--purpur-spacing-gutter-md);--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_1vbh2_1{--gap: var(--purpur-spacing-gutter-lg);--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_1vbh2_1{--gap: var(--purpur-spacing-gutter-xl);--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-grid--grid_1vbh2_33{display:grid;column-gap:var(--gap)}._purpur-grid--grid_1vbh2_33._purpur-grid-col-sm-4_1vbh2_37{grid-template-columns:repeat(4,1fr)}._purpur-grid--grid_1vbh2_33._purpur-grid-col-sm-3_1vbh2_40{grid-template-columns:repeat(3,1fr)}._purpur-grid--grid_1vbh2_33._purpur-grid-col-sm-2_1vbh2_43{grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-8_1vbh2_47{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-7_1vbh2_52{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-6_1vbh2_57{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-5_1vbh2_62{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-4_1vbh2_67{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-3_1vbh2_72{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-md-2_1vbh2_77{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-12_1vbh2_82{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-11_1vbh2_87{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-10_1vbh2_92{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-9_1vbh2_97{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-8_1vbh2_102{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-7_1vbh2_107{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-6_1vbh2_112{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-5_1vbh2_117{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-4_1vbh2_122{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-3_1vbh2_127{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1vbh2_33._purpur-grid-col-lg-2_1vbh2_132{grid-template-columns:repeat(2,1fr)}}._purpur-grid--flex_1vbh2_136{--gutter: var(--purpur-spacing-gutter-sm);display:flex;flex-wrap:wrap;width:calc(100% + var(--gutter));margin:0 calc(-1 * var(--gutter) / 2)}@media screen and (min-width: 600px){._purpur-grid--flex_1vbh2_136{--gutter: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-grid--flex_1vbh2_136{--gutter: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 1440px){._purpur-grid--flex_1vbh2_136{--gutter: var(--purpur-spacing-gutter-xl)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purpurds/grid",
3
- "version": "5.0.0",
3
+ "version": "5.1.1",
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": "5.0.0"
18
+ "@purpurds/tokens": "5.1.1"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@rushstack/eslint-patch": "~1.10.0",
@@ -40,7 +40,8 @@
40
40
  "typescript": "~5.4.2",
41
41
  "vite": "~5.2.2",
42
42
  "vitest": "~1.5.0",
43
- "@purpurds/component-rig": "1.0.0"
43
+ "@purpurds/component-rig": "1.0.0",
44
+ "@purpurds/link": "5.1.1"
44
45
  },
45
46
  "scripts": {
46
47
  "build:dev": "vite",
package/readme.mdx CHANGED
@@ -1,6 +1,7 @@
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 GridItemStories from "./src/grid.item.stories";
4
5
  import packageInfo from "./package.json";
5
6
 
6
7
  <Meta name="Docs" title="Components/Grid" of={GridStories} />
@@ -19,6 +20,10 @@ import packageInfo from "./package.json";
19
20
 
20
21
  <ArgTypes of={GridStories} />
21
22
 
23
+ #### Grid.Item
24
+
25
+ <ArgTypes of={GridItemStories} />
26
+
22
27
  ### Installation
23
28
 
24
29
  #### Via NPM
@@ -37,6 +42,8 @@ import "@purpurds/purpur/styles";
37
42
 
38
43
  In MyComponent.tsx
39
44
 
45
+ #### Basic grid with same-width columns
46
+
40
47
  ```tsx
41
48
  import { Grid } from "@purpurds/purpur";
42
49
 
@@ -53,3 +60,54 @@ export const MyComponent = () => {
53
60
  );
54
61
  };
55
62
  ```
63
+
64
+ #### Advanced grid using nested grids
65
+
66
+ ```tsx
67
+ import { Grid } from "@purpurds/purpur";
68
+
69
+ export const MyComponent = () => {
70
+ return (
71
+ <Grid>
72
+ <Grid colsSm={1} colsMd={3} colsLg={3}>
73
+ <div>Grid item 1</div>
74
+ <div>Grid item 2</div>
75
+ <div>Grid item 3</div>
76
+ </Grid>
77
+ <Grid colsSm={1} colsMd={2} colsLg={2}>
78
+ <div>Grid item 4</div>
79
+ <div>Grid item 5</div>
80
+ </Grid>
81
+ <Grid colsSm={1} colsMd={2} colsLg={2}>
82
+ <div>Grid item 6</div>
83
+ <div>Grid item 7</div>
84
+ </Grid>
85
+ </Grid>
86
+ );
87
+ };
88
+ ```
89
+
90
+ #### Advanced grid using Grid.Item
91
+
92
+ ```tsx
93
+ import { Grid } from "@purpurds/purpur";
94
+
95
+ export const MyComponent = () => {
96
+ return (
97
+ <Grid>
98
+ <Grid.Item colSpanSm={2} colSpanMd={5} colSpanLg={3}>
99
+ Grid item 1
100
+ </Grid.Item>
101
+ <Grid.Item colSpanSm={2} colSpanMd={3} colSpanLg={9}>
102
+ Grid item 2
103
+ </Grid.Item>
104
+ <Grid.Item colSpanSm={4} colSpanMd={2} colSpanLg={6}>
105
+ Grid item 3
106
+ </Grid.Item>
107
+ <Grid.Item colSpanSm={4} colSpanMd={6} colSpanLg={6}>
108
+ Grid item 4
109
+ </Grid.Item>
110
+ </Grid>
111
+ );
112
+ };
113
+ ```
package/src/grid.item.module.scss ADDED
@@ -0,0 +1,43 @@
1
+ @import "@purpurds/tokens/breakpoint/variables";
2
+
3
+ .purpur-grid-item {
4
+ $root: &;
5
+ --padding: calc(var(--purpur-spacing-gutter-sm) / 2);
6
+
7
+ padding: 0 var(--padding);
8
+ box-sizing: border-box;
9
+
10
+ @media screen and (min-width: $purpur-breakpoint-md) {
11
+ --padding: calc(var(--purpur-spacing-gutter-md) / 2);
12
+ }
13
+
14
+ @media screen and (min-width: $purpur-breakpoint-lg) {
15
+ --padding: calc(var(--purpur-spacing-gutter-lg) / 2);
16
+ }
17
+
18
+ @media screen and (min-width: $purpur-breakpoint-xl) {
19
+ --padding: calc(var(--purpur-spacing-gutter-xl) / 2);
20
+ }
21
+
22
+ @for $i from 4 through 1 {
23
+ &#{$root}-colspan-sm-#{$i} {
24
+ width: calc($i / 4 * 100%);
25
+ }
26
+ }
27
+
28
+ @for $i from 8 through 1 {
29
+ @media screen and (min-width: $purpur-breakpoint-md) {
30
+ &#{$root}-colspan-md-#{$i} {
31
+ width: calc($i / 8 * 100%);
32
+ }
33
+ }
34
+ }
35
+
36
+ @for $i from 12 through 1 {
37
+ @media screen and (min-width: $purpur-breakpoint-lg) {
38
+ &#{$root}-colspan-lg-#{$i} {
39
+ width: calc($i / 12 * 100%);
40
+ }
41
+ }
42
+ }
43
+ }
package/src/grid.item.stories.tsx ADDED
@@ -0,0 +1,47 @@
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
+
7
+ const meta: Meta<typeof Grid.Item> = {
8
+ title: "Components/Grid",
9
+ component: Grid.Item,
10
+ parameters: {
11
+ design: [
12
+ {
13
+ name: "Grid",
14
+ type: "figma",
15
+ url: "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
16
+ },
17
+ ],
18
+ },
19
+ argTypes: {
20
+ ["data-testid"]: { control: { type: "text" } },
21
+ className: { control: { type: "text" } },
22
+ children: { control: { type: "text" } },
23
+ colSpanSm: { control: { type: "range", min: 1, max: 4, step: 1 } },
24
+ colSpanMd: { control: { type: "range", min: 1, max: 8, step: 1 } },
25
+ colSpanLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
26
+ },
27
+ args: {
28
+ colSpanSm: 4,
29
+ colSpanMd: 8,
30
+ colSpanLg: 12,
31
+ },
32
+ };
33
+
34
+ export default meta;
35
+
36
+ type Story = StoryObj<typeof Grid.Item>;
37
+
38
+ export const Item: Story = {
39
+ render: ({ children, ...args }) => (
40
+ <Grid.Item {...args}>
41
+ <div style={{ border: "1px solid lightgray", padding: ".5rem" }}>
42
+ <p>Column</p>
43
+ {children}
44
+ </div>
45
+ </Grid.Item>
46
+ ),
47
+ };
package/src/grid.item.tsx ADDED
@@ -0,0 +1,68 @@
1
+ import React, {
2
+ isValidElement,
3
+ ReactChild,
4
+ ReactElement,
5
+ ReactFragment,
6
+ ReactNode,
7
+ ReactPortal,
8
+ } from "react";
9
+ import c from "classnames/bind";
10
+
11
+ import styles from "./grid.item.module.scss";
12
+
13
+ const cx = c.bind(styles);
14
+
15
+ export type ItemProps = {
16
+ children: ReactNode;
17
+ ["data-testid"]?: string;
18
+ className?: string;
19
+ /** The number of columns that the item spans on small screens. */
20
+ colSpanSm?: 1 | 2 | 3 | 4;
21
+ /** The number of columns that the item spans on medium screens. */
22
+ colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
23
+ /** The number of columns that the item spans on large screens. */
24
+ colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
25
+ };
26
+
27
+ const rootClassName = "purpur-grid-item";
28
+
29
+ export const Item = ({
30
+ children,
31
+ className,
32
+ ["data-testid"]: dataTestId,
33
+ colSpanSm = 4,
34
+ colSpanMd = 8,
35
+ colSpanLg = 12,
36
+ }: ItemProps) => {
37
+ const classes = cx([
38
+ className,
39
+ rootClassName,
40
+ {
41
+ [`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,
42
+ [`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,
43
+ [`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,
44
+ },
45
+ ]);
46
+
47
+ return (
48
+ <div className={classes} data-testid={dataTestId}>
49
+ {children}
50
+ </div>
51
+ );
52
+ };
53
+
54
+ export const isItem = (
55
+ child:
56
+ | ReactChild
57
+ | ReactElement
58
+ | ReactFragment
59
+ | ReactPortal
60
+ | string
61
+ | number
62
+ | boolean
63
+ | null
64
+ | undefined
65
+ ): child is ReactElement<ItemProps> =>
66
+ !!child &&
67
+ isValidElement<ItemProps>(child) &&
68
+ (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);
package/src/grid.module.scss CHANGED
@@ -1,49 +1,83 @@
1
1
  @import "@purpurds/tokens/breakpoint/variables";
2
2
 
3
3
  .purpur-grid {
4
+ $root: &;
5
+
4
6
  --gap: var(--purpur-spacing-gutter-sm);
5
7
  --padding: var(--purpur-spacing-page-padding-sm);
6
8
 
7
9
  box-sizing: border-box;
8
- display: grid;
9
- gap: var(--gap);
10
+ row-gap: var(--gap);
10
11
  width: 100%;
11
12
  max-width: var(--purpur-breakpoint-xl);
12
13
  margin: 0 auto;
13
14
  padding: 0 var(--padding);
14
15
 
15
- @media screen and (min-width: #{$purpur-breakpoint-md}) {
16
+ /* Remove padding for nested grids */
17
+ #{$root} {
18
+ padding: 0;
19
+ }
20
+
21
+ @media screen and (min-width: $purpur-breakpoint-md) {
16
22
  --gap: var(--purpur-spacing-gutter-md);
17
23
  --padding: var(--purpur-spacing-page-padding-md);
18
24
  }
19
- @media screen and (min-width: #{$purpur-breakpoint-lg}) {
25
+
26
+ @media screen and (min-width: $purpur-breakpoint-lg) {
20
27
  --gap: var(--purpur-spacing-gutter-lg);
21
28
  --padding: var(--purpur-spacing-page-padding-lg);
22
29
  }
23
- @media screen and (min-width: #{$purpur-breakpoint-xl}) {
30
+
31
+ @media screen and (min-width: $purpur-breakpoint-xl) {
24
32
  --gap: var(--purpur-spacing-gutter-xl);
25
33
  --padding: var(--purpur-spacing-page-padding-xl);
26
34
  }
27
35
 
28
- @for $i from 12 through 2 {
29
- &#{&}-col-sm-#{$i} {
30
- grid-template-columns: repeat($i, 1fr);
31
- }
32
- }
36
+ &--grid {
37
+ display: grid;
38
+ column-gap: var(--gap);
33
39
 
34
- @for $i from 12 through 2 {
35
- @media screen and (min-width: #{$purpur-breakpoint-md}) {
36
- &#{&}-col-md-#{$i} {
40
+ @for $i from 4 through 2 {
41
+ &#{$root}-col-sm-#{$i} {
37
42
  grid-template-columns: repeat($i, 1fr);
38
43
  }
39
44
  }
40
- }
41
45
 
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
+ @for $i from 8 through 2 {
47
+ @media screen and (min-width: $purpur-breakpoint-md) {
48
+ &#{$root}-col-md-#{$i} {
49
+ grid-template-columns: repeat($i, 1fr);
50
+ }
46
51
  }
47
52
  }
53
+
54
+ @for $i from 12 through 2 {
55
+ @media screen and (min-width: $purpur-breakpoint-lg) {
56
+ &#{$root}-col-lg-#{$i} {
57
+ grid-template-columns: repeat($i, 1fr);
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ &--flex {
64
+ --gutter: var(--purpur-spacing-gutter-sm);
65
+
66
+ display: flex;
67
+ flex-wrap: wrap;
68
+ width: calc(100% + var(--gutter));
69
+ margin: 0 calc(-1 * (var(--gutter) / 2));
70
+
71
+ @media screen and (min-width: $purpur-breakpoint-md) {
72
+ --gutter: var(--purpur-spacing-gutter-md);
73
+ }
74
+
75
+ @media screen and (min-width: $purpur-breakpoint-lg) {
76
+ --gutter: var(--purpur-spacing-gutter-lg);
77
+ }
78
+
79
+ @media screen and (min-width: $purpur-breakpoint-xl) {
80
+ --gutter: var(--purpur-spacing-gutter-xl);
81
+ }
48
82
  }
49
- }
83
+ }
package/src/grid.stories.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  /* eslint-disable react/prop-types */
2
+ import type { ReactNode } from "react";
2
3
  import React from "react";
4
+ import { Link } from "@purpurds/link";
3
5
  import type { Meta, StoryObj } from "@storybook/react";
4
6
 
5
7
  import { Grid } from "./grid";
@@ -35,15 +37,92 @@ export default meta;
35
37
 
36
38
  type Story = StoryObj<typeof Grid>;
37
39
 
40
+ const Column = ({ number, children }: { number: number; children?: ReactNode }) => {
41
+ return (
42
+ <div style={{ border: "1px solid lightgray", padding: ".5rem" }}>
43
+ <p>Column {number}</p>
44
+ {children}
45
+ </div>
46
+ );
47
+ };
48
+
38
49
  export const Showcase: Story = {
39
50
  render: ({ children, ...args }) => (
40
51
  <Grid {...args}>
41
52
  {Array.from(Array(12).keys()).map((x) => (
42
- <div key={x} style={{ border: "1px solid lightgray", padding: ".5rem" }}>
43
- <p>Column {x + 1}</p>
53
+ <Column key={x} number={x + 1}>
44
54
  {children}
45
- </div>
55
+ </Column>
46
56
  ))}
47
57
  </Grid>
48
58
  ),
49
59
  };
60
+
61
+ export const AdvancedWithNestedGrids: Story = {
62
+ parameters: {
63
+ controls: {
64
+ exclude: ["colsSm", "colsMd", "colsLg"],
65
+ },
66
+ },
67
+ render: ({ children }) => (
68
+ <>
69
+ <Grid>
70
+ <Grid colsSm={1} colsMd={3} colsLg={3}>
71
+ <Column number={1}>{children}</Column>
72
+ <Column number={2}>{children}</Column>
73
+ <Column number={3}>{children}</Column>
74
+ </Grid>
75
+ <Grid colsSm={1} colsMd={2} colsLg={2}>
76
+ <Column number={4}>{children}</Column>
77
+ <Column number={5}>{children}</Column>
78
+ </Grid>
79
+ <Grid colsSm={1} colsMd={2} colsLg={2}>
80
+ <Column number={6}>{children}</Column>
81
+ <Column number={7}>{children}</Column>
82
+ </Grid>
83
+ </Grid>
84
+ <div style={{ marginTop: "3rem" }}>
85
+ <Link
86
+ variant="standalone"
87
+ href="/?path=/docs/components-grid--docs#advanced-grid-using-nested-grids"
88
+ >
89
+ See the example code in Docs
90
+ </Link>
91
+ </div>
92
+ </>
93
+ ),
94
+ };
95
+
96
+ export const AdvancedWithGridItems: Story = {
97
+ parameters: {
98
+ controls: {
99
+ exclude: ["colsSm", "colsMd", "colsLg"],
100
+ },
101
+ },
102
+ render: ({ children }) => (
103
+ <>
104
+ <Grid>
105
+ <Grid.Item colSpanSm={2} colSpanMd={5} colSpanLg={3}>
106
+ <Column number={1}>{children}</Column>
107
+ </Grid.Item>
108
+ <Grid.Item colSpanSm={2} colSpanMd={3} colSpanLg={9}>
109
+ <Column number={2}>{children}</Column>
110
+ </Grid.Item>
111
+ <Grid.Item colSpanSm={4} colSpanMd={2} colSpanLg={6}>
112
+ <Column number={3}>{children}</Column>
113
+ </Grid.Item>
114
+ <Grid.Item colSpanSm={4} colSpanMd={6} colSpanLg={6}>
115
+ <Column number={4}>{children}</Column>
116
+ </Grid.Item>
117
+ </Grid>
118
+ <div style={{ marginTop: "3rem" }}>
119
+ <Link
120
+ variant="standalone"
121
+ href="/?path=/docs/components-grid--docs#advanced-grid-using-griditem"
122
+ >
123
+ See the example code in Docs
124
+ </Link>
125
+ </div>
126
+ </>
127
+ ),
128
+ };
package/src/grid.tsx CHANGED
@@ -1,6 +1,7 @@
1
- import React, { ReactNode } from "react";
1
+ import React, { Children, ReactNode } from "react";
2
2
  import c from "classnames/bind";
3
3
 
4
+ import { isItem, Item } from "./grid.item";
4
5
  import styles from "./grid.module.scss";
5
6
 
6
7
  const cx = c.bind(styles);
@@ -9,14 +10,18 @@ export type GridProps = {
9
10
  children: ReactNode;
10
11
  ["data-testid"]?: string;
11
12
  className?: string;
12
- /** colsSm represents the number of columns for small screens. */
13
+ /** The number of columns on small screens. */
13
14
  colsSm?: 1 | 2 | 3 | 4;
14
- /** colsMd represents the number of columns for medium screens. */
15
+ /** The number of columns on medium screens. */
15
16
  colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
16
- /** colsLg represents the number of columns for large screens. */
17
+ /** The number of columns on large screens. */
17
18
  colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
18
19
  };
19
20
 
21
+ export type GridCmp<P> = React.FunctionComponent<P> & {
22
+ Item: typeof Item;
23
+ };
24
+
20
25
  const rootClassName = "purpur-grid";
21
26
 
22
27
  export const Grid = ({
@@ -28,18 +33,30 @@ export const Grid = ({
28
33
  colsLg = 1,
29
34
  ...props
30
35
  }: GridProps) => {
36
+ const gridItemChildren = Children.toArray(children).filter(isItem);
37
+ const hasItemChildren = gridItemChildren.length;
38
+
31
39
  const classes = cx([
32
40
  className,
33
41
  rootClassName,
34
42
  {
35
- [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1,
36
- [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1,
37
- [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1,
43
+ [`${rootClassName}--grid`]: !hasItemChildren,
44
+ [`${rootClassName}--flex`]: hasItemChildren,
45
+ [`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,
46
+ [`${rootClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,
47
+ [`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,
38
48
  },
39
49
  ]);
50
+
40
51
  return (
41
52
  <div className={classes} data-testid={dataTestId} {...props}>
42
- {children}
53
+ {hasItemChildren
54
+ ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (
55
+ <Item {...colProps}>{children}</Item>
56
+ ))
57
+ : children}
43
58
  </div>
44
59
  );
45
60
  };
61
+
62
+ Grid.Item = Item;