@purpurds/grid 6.3.0 → 6.4.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.es.js +61 -58
- package/dist/grid.es.js.map +1 -1
- package/package.json +9 -8
- package/src/grid.stories.tsx +3 -1
- package/src/grids.item.stories.tsx +3 -1
package/dist/grid.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),c=require("react");function C(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var s={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 d={}.hasOwnProperty;function u(){for(var r="",i=0;i<arguments.length;i++){var _=arguments[i];_&&(r=e(r,t.call(this,_)))}return r}function t(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var i="";for(var _ in r)d.call(r,_)&&r[_]&&(i=e(i,this&&this[_]||_));return i}function e(r,i){return i?r?r+" "+i:r+i:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()}
|
|
5
|
+
*/var x;function w(){return x||(x=1,function(p){(function(){var d={}.hasOwnProperty;function u(){for(var r="",i=0;i<arguments.length;i++){var _=arguments[i];_&&(r=e(r,t.call(this,_)))}return r}function t(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var i="";for(var _ in r)d.call(r,_)&&r[_]&&(i=e(i,this&&this[_]||_));return i}function e(r,i){return i?r?r+" "+i:r+i:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()}(s)),s.exports}var I=w();const f=C(I),O={"purpur-grid-item":"_purpur-grid-item_zx9tz_1","purpur-grid-item--no-col-gap":"_purpur-grid-item--no-col-gap_zx9tz_6","purpur-grid-item-colspan-sm-4":"_purpur-grid-item-colspan-sm-4_zx9tz_24","purpur-grid-item-colspan-sm-3":"_purpur-grid-item-colspan-sm-3_zx9tz_27","purpur-grid-item-colspan-sm-2":"_purpur-grid-item-colspan-sm-2_zx9tz_30","purpur-grid-item-colspan-sm-1":"_purpur-grid-item-colspan-sm-1_zx9tz_33","purpur-grid-item-colspan-md-8":"_purpur-grid-item-colspan-md-8_zx9tz_37","purpur-grid-item-colspan-md-7":"_purpur-grid-item-colspan-md-7_zx9tz_42","purpur-grid-item-colspan-md-6":"_purpur-grid-item-colspan-md-6_zx9tz_47","purpur-grid-item-colspan-md-5":"_purpur-grid-item-colspan-md-5_zx9tz_52","purpur-grid-item-colspan-md-4":"_purpur-grid-item-colspan-md-4_zx9tz_57","purpur-grid-item-colspan-md-3":"_purpur-grid-item-colspan-md-3_zx9tz_62","purpur-grid-item-colspan-md-2":"_purpur-grid-item-colspan-md-2_zx9tz_67","purpur-grid-item-colspan-md-1":"_purpur-grid-item-colspan-md-1_zx9tz_72","purpur-grid-item-colspan-lg-12":"_purpur-grid-item-colspan-lg-12_zx9tz_77","purpur-grid-item-colspan-lg-11":"_purpur-grid-item-colspan-lg-11_zx9tz_82","purpur-grid-item-colspan-lg-10":"_purpur-grid-item-colspan-lg-10_zx9tz_87","purpur-grid-item-colspan-lg-9":"_purpur-grid-item-colspan-lg-9_zx9tz_92","purpur-grid-item-colspan-lg-8":"_purpur-grid-item-colspan-lg-8_zx9tz_97","purpur-grid-item-colspan-lg-7":"_purpur-grid-item-colspan-lg-7_zx9tz_102","purpur-grid-item-colspan-lg-6":"_purpur-grid-item-colspan-lg-6_zx9tz_107","purpur-grid-item-colspan-lg-5":"_purpur-grid-item-colspan-lg-5_zx9tz_112","purpur-grid-item-colspan-lg-4":"_purpur-grid-item-colspan-lg-4_zx9tz_117","purpur-grid-item-colspan-lg-3":"_purpur-grid-item-colspan-lg-3_zx9tz_122","purpur-grid-item-colspan-lg-2":"_purpur-grid-item-colspan-lg-2_zx9tz_127","purpur-grid-item-colspan-lg-1":"_purpur-grid-item-colspan-lg-1_zx9tz_77"},S=f.bind(O),o="purpur-grid-item",m=({children:p,className:d,["data-testid"]:u,colSpanSm:t=4,colSpanMd:e=8,colSpanLg:r=12,noColGap:i=!1})=>{const _=S([d,o,{[`${o}--no-col-gap`]:i,[`${o}-colspan-sm-${t}`]:t,[`${o}-colspan-md-${e}`]:e,[`${o}-colspan-lg-${r}`]:r}]);return g.jsx("div",{className:_,"data-testid":u,children:p})},q=p=>!!p&&c.isValidElement(p)&&(!!p.props.colSpanSm||!!p.props.colSpanMd||!!p.props.colSpanLg);m.displayName="Grid.Item";const A={"purpur-grid":"_purpur-grid_8kjv6_1","purpur-grid__inner":"_purpur-grid__inner_8kjv6_27","purpur-grid__inner--no-gap":"_purpur-grid__inner--no-gap_8kjv6_32","purpur-grid__inner--no-row-gap":"_purpur-grid__inner--no-row-gap_8kjv6_32","purpur-grid__inner--grid":"_purpur-grid__inner--grid_8kjv6_50","purpur-grid__inner--no-col-gap":"_purpur-grid__inner--no-col-gap_8kjv6_54","purpur-grid__inner-col-sm-4":"_purpur-grid__inner-col-sm-4_8kjv6_57","purpur-grid__inner-col-sm-3":"_purpur-grid__inner-col-sm-3_8kjv6_60","purpur-grid__inner-col-sm-2":"_purpur-grid__inner-col-sm-2_8kjv6_63","purpur-grid__inner-col-md-8":"_purpur-grid__inner-col-md-8_8kjv6_67","purpur-grid__inner-col-md-7":"_purpur-grid__inner-col-md-7_8kjv6_72","purpur-grid__inner-col-md-6":"_purpur-grid__inner-col-md-6_8kjv6_77","purpur-grid__inner-col-md-5":"_purpur-grid__inner-col-md-5_8kjv6_82","purpur-grid__inner-col-md-4":"_purpur-grid__inner-col-md-4_8kjv6_87","purpur-grid__inner-col-md-3":"_purpur-grid__inner-col-md-3_8kjv6_92","purpur-grid__inner-col-md-2":"_purpur-grid__inner-col-md-2_8kjv6_97","purpur-grid__inner-col-lg-12":"_purpur-grid__inner-col-lg-12_8kjv6_102","purpur-grid__inner-col-lg-11":"_purpur-grid__inner-col-lg-11_8kjv6_107","purpur-grid__inner-col-lg-10":"_purpur-grid__inner-col-lg-10_8kjv6_112","purpur-grid__inner-col-lg-9":"_purpur-grid__inner-col-lg-9_8kjv6_117","purpur-grid__inner-col-lg-8":"_purpur-grid__inner-col-lg-8_8kjv6_122","purpur-grid__inner-col-lg-7":"_purpur-grid__inner-col-lg-7_8kjv6_127","purpur-grid__inner-col-lg-6":"_purpur-grid__inner-col-lg-6_8kjv6_132","purpur-grid__inner-col-lg-5":"_purpur-grid__inner-col-lg-5_8kjv6_137","purpur-grid__inner-col-lg-4":"_purpur-grid__inner-col-lg-4_8kjv6_142","purpur-grid__inner-col-lg-3":"_purpur-grid__inner-col-lg-3_8kjv6_147","purpur-grid__inner-col-lg-2":"_purpur-grid__inner-col-lg-2_8kjv6_152","purpur-grid__inner--flex":"_purpur-grid__inner--flex_8kjv6_156"},j=f.bind(A),E="purpur-grid",n="purpur-grid__inner",a=({children:p,className:d,containerClassName:u,["data-testid"]:t,colsSm:e=1,colsMd:r=1,colsLg:i=1,noGap:_=!1,noColGap:z=!1,noRowGap:k=!1,...$})=>{const v=c.Children.toArray(p).filter(q),l=v.length,h=j([u,E]),y=j([d,n,{[`${n}--grid`]:!l,[`${n}--flex`]:l,[`${n}--no-gap`]:_,[`${n}--no-col-gap`]:z,[`${n}--no-row-gap`]:k,[`${n}-col-sm-${e}`]:e>1&&!l,[`${n}-col-md-${r}`]:r>1&&!l,[`${n}-col-lg-${i}`]:i>1&&!l}]);return g.jsx("div",{className:h,"data-testid":t,...$,children:g.jsx("div",{className:y,children:l?c.Children.map(v,({props:{children:b,...N}})=>g.jsx(m,{...N,noColGap:_||z,children:b})):p})})};a.displayName="Grid";a.Item=m;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/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, { isValidElement, ReactElement, ReactNode } 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 /** This will be passed from the parent component. */\n noColGap?: boolean;\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 noColGap = false,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\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 = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n\nItem.displayName = \"Grid.Item\";\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 containerClassName?: 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 /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} data-testid={dataTestId} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","noColGap","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":";;;;
|
|
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, { isValidElement, ReactElement, ReactNode } 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 /** This will be passed from the parent component. */\n noColGap?: boolean;\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 noColGap = false,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\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 = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n\nItem.displayName = \"Grid.Item\";\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 containerClassName?: 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 /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} data-testid={dataTestId} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","noColGap","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/grid.es.js
CHANGED
|
@@ -1,46 +1,49 @@
|
|
|
1
1
|
import { jsx as g } from "react/jsx-runtime";
|
|
2
|
-
import { isValidElement as
|
|
3
|
-
function
|
|
2
|
+
import { isValidElement as C, Children as z } from "react";
|
|
3
|
+
function w(p) {
|
|
4
4
|
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
|
|
5
5
|
}
|
|
6
|
-
var
|
|
6
|
+
var s = { exports: {} };
|
|
7
7
|
/*!
|
|
8
8
|
Copyright (c) 2018 Jed Watson.
|
|
9
9
|
Licensed under the MIT License (MIT), see
|
|
10
10
|
http://jedwatson.github.io/classnames
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
var v;
|
|
13
|
+
function I() {
|
|
14
|
+
return v || (v = 1, function(p) {
|
|
15
|
+
(function() {
|
|
16
|
+
var d = {}.hasOwnProperty;
|
|
17
|
+
function u() {
|
|
18
|
+
for (var r = "", i = 0; i < arguments.length; i++) {
|
|
19
|
+
var _ = arguments[i];
|
|
20
|
+
_ && (r = e(r, t.call(this, _)));
|
|
21
|
+
}
|
|
22
|
+
return r;
|
|
19
23
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const x = /* @__PURE__ */ C(w), I = {
|
|
24
|
+
function t(r) {
|
|
25
|
+
if (typeof r == "string" || typeof r == "number")
|
|
26
|
+
return this && this[r] || r;
|
|
27
|
+
if (typeof r != "object")
|
|
28
|
+
return "";
|
|
29
|
+
if (Array.isArray(r))
|
|
30
|
+
return u.apply(this, r);
|
|
31
|
+
if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
|
|
32
|
+
return r.toString();
|
|
33
|
+
var i = "";
|
|
34
|
+
for (var _ in r)
|
|
35
|
+
d.call(r, _) && r[_] && (i = e(i, this && this[_] || _));
|
|
36
|
+
return i;
|
|
37
|
+
}
|
|
38
|
+
function e(r, i) {
|
|
39
|
+
return i ? r ? r + " " + i : r + i : r;
|
|
40
|
+
}
|
|
41
|
+
p.exports ? (u.default = u, p.exports = u) : window.classNames = u;
|
|
42
|
+
})();
|
|
43
|
+
}(s)), s.exports;
|
|
44
|
+
}
|
|
45
|
+
var O = I();
|
|
46
|
+
const x = /* @__PURE__ */ w(O), S = {
|
|
44
47
|
"purpur-grid-item": "_purpur-grid-item_zx9tz_1",
|
|
45
48
|
"purpur-grid-item--no-col-gap": "_purpur-grid-item--no-col-gap_zx9tz_6",
|
|
46
49
|
"purpur-grid-item-colspan-sm-4": "_purpur-grid-item-colspan-sm-4_zx9tz_24",
|
|
@@ -67,29 +70,29 @@ const x = /* @__PURE__ */ C(w), I = {
|
|
|
67
70
|
"purpur-grid-item-colspan-lg-3": "_purpur-grid-item-colspan-lg-3_zx9tz_122",
|
|
68
71
|
"purpur-grid-item-colspan-lg-2": "_purpur-grid-item-colspan-lg-2_zx9tz_127",
|
|
69
72
|
"purpur-grid-item-colspan-lg-1": "_purpur-grid-item-colspan-lg-1_zx9tz_77"
|
|
70
|
-
},
|
|
73
|
+
}, A = x.bind(S), o = "purpur-grid-item", c = ({
|
|
71
74
|
children: p,
|
|
72
75
|
className: d,
|
|
73
76
|
["data-testid"]: u,
|
|
74
|
-
colSpanSm:
|
|
77
|
+
colSpanSm: t = 4,
|
|
75
78
|
colSpanMd: e = 8,
|
|
76
79
|
colSpanLg: r = 12,
|
|
77
80
|
noColGap: i = !1
|
|
78
81
|
}) => {
|
|
79
|
-
const _ =
|
|
82
|
+
const _ = A([
|
|
80
83
|
d,
|
|
81
84
|
o,
|
|
82
85
|
{
|
|
83
86
|
[`${o}--no-col-gap`]: i,
|
|
84
|
-
[`${o}-colspan-sm-${
|
|
87
|
+
[`${o}-colspan-sm-${t}`]: t,
|
|
85
88
|
[`${o}-colspan-md-${e}`]: e,
|
|
86
89
|
[`${o}-colspan-lg-${r}`]: r
|
|
87
90
|
}
|
|
88
91
|
]);
|
|
89
92
|
return /* @__PURE__ */ g("div", { className: _, "data-testid": u, children: p });
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
const
|
|
93
|
+
}, E = (p) => !!p && C(p) && (!!p.props.colSpanSm || !!p.props.colSpanMd || !!p.props.colSpanLg);
|
|
94
|
+
c.displayName = "Grid.Item";
|
|
95
|
+
const q = {
|
|
93
96
|
"purpur-grid": "_purpur-grid_8kjv6_1",
|
|
94
97
|
"purpur-grid__inner": "_purpur-grid__inner_8kjv6_27",
|
|
95
98
|
"purpur-grid__inner--no-gap": "_purpur-grid__inner--no-gap_8kjv6_32",
|
|
@@ -118,38 +121,38 @@ const A = {
|
|
|
118
121
|
"purpur-grid__inner-col-lg-3": "_purpur-grid__inner-col-lg-3_8kjv6_147",
|
|
119
122
|
"purpur-grid__inner-col-lg-2": "_purpur-grid__inner-col-lg-2_8kjv6_152",
|
|
120
123
|
"purpur-grid__inner--flex": "_purpur-grid__inner--flex_8kjv6_156"
|
|
121
|
-
},
|
|
124
|
+
}, f = x.bind(q), B = "purpur-grid", n = "purpur-grid__inner", j = ({
|
|
122
125
|
children: p,
|
|
123
126
|
className: d,
|
|
124
127
|
containerClassName: u,
|
|
125
|
-
["data-testid"]:
|
|
128
|
+
["data-testid"]: t,
|
|
126
129
|
colsSm: e = 1,
|
|
127
130
|
colsMd: r = 1,
|
|
128
131
|
colsLg: i = 1,
|
|
129
132
|
noGap: _ = !1,
|
|
130
|
-
noColGap:
|
|
131
|
-
noRowGap:
|
|
132
|
-
|
|
133
|
+
noColGap: m = !1,
|
|
134
|
+
noRowGap: k = !1,
|
|
135
|
+
...$
|
|
133
136
|
}) => {
|
|
134
|
-
const
|
|
137
|
+
const a = z.toArray(p).filter(E), l = a.length, h = f([u, B]), y = f([
|
|
135
138
|
d,
|
|
136
139
|
n,
|
|
137
140
|
{
|
|
138
|
-
[`${n}--grid`]: !
|
|
139
|
-
[`${n}--flex`]:
|
|
141
|
+
[`${n}--grid`]: !l,
|
|
142
|
+
[`${n}--flex`]: l,
|
|
140
143
|
[`${n}--no-gap`]: _,
|
|
141
|
-
[`${n}--no-col-gap`]:
|
|
142
|
-
[`${n}--no-row-gap`]:
|
|
143
|
-
[`${n}-col-sm-${e}`]: e > 1 && !
|
|
144
|
-
[`${n}-col-md-${r}`]: r > 1 && !
|
|
145
|
-
[`${n}-col-lg-${i}`]: i > 1 && !
|
|
144
|
+
[`${n}--no-col-gap`]: m,
|
|
145
|
+
[`${n}--no-row-gap`]: k,
|
|
146
|
+
[`${n}-col-sm-${e}`]: e > 1 && !l,
|
|
147
|
+
[`${n}-col-md-${r}`]: r > 1 && !l,
|
|
148
|
+
[`${n}-col-lg-${i}`]: i > 1 && !l
|
|
146
149
|
}
|
|
147
150
|
]);
|
|
148
|
-
return /* @__PURE__ */ g("div", { className:
|
|
151
|
+
return /* @__PURE__ */ g("div", { className: h, "data-testid": t, ...$, children: /* @__PURE__ */ g("div", { className: y, children: l ? z.map(a, ({ props: { children: N, ...b } }) => /* @__PURE__ */ g(c, { ...b, noColGap: _ || m, children: N })) : p }) });
|
|
149
152
|
};
|
|
150
|
-
|
|
151
|
-
|
|
153
|
+
j.displayName = "Grid";
|
|
154
|
+
j.Item = c;
|
|
152
155
|
export {
|
|
153
|
-
|
|
156
|
+
j as Grid
|
|
154
157
|
};
|
|
155
158
|
//# 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.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, { isValidElement, ReactElement, ReactNode } 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 /** This will be passed from the parent component. */\n noColGap?: boolean;\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 noColGap = false,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\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 = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n\nItem.displayName = \"Grid.Item\";\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 containerClassName?: 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 /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} data-testid={dataTestId} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","noColGap","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":"
|
|
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, { isValidElement, ReactElement, ReactNode } 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 /** This will be passed from the parent component. */\n noColGap?: boolean;\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 noColGap = false,\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\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 = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child &&\n isValidElement<ItemProps>(child) &&\n (!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);\n\nItem.displayName = \"Grid.Item\";\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 containerClassName?: 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 /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n [\"data-testid\"]: dataTestId,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} data-testid={dataTestId} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","dataTestId","colSpanSm","colSpanMd","colSpanLg","noColGap","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":";;;;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAEL,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAIC,IAAM,UAAU,CAAC;AACrB,UAAIA,MACHD,IAAUE,EAAYF,GAASG,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOD;AAAA,MACT;AAEC,eAASG,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOF,EAAW,MAAM,MAAME,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAID,IAAU;AAEd,iBAASI,KAAOH;AACf,UAAIH,EAAO,KAAKG,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCJ,IAAUE,EAAYF,GAAS,QAAQ,KAAKI,CAAG,KAAKA,CAAG;AAIzD,eAAOJ;AAAA,MACT;AAEC,eAASE,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CR,EAAW,UAAUA,GACrBQ,YAAiBR,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCvEMS,IAAKC,EAAE,KAAKC,CAAM,GAgBlBC,IAAgB,oBAETC,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AACb,MAAiB;AACf,QAAMnB,IAAUQ,EAAG;AAAA,IACjBM;AAAA,IACAH;AAAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAa,cAAc,GAAGQ;AAAA,MAClC,CAAC,GAAGR,CAAa,eAAeK,CAAS,EAAE,GAAGA;AAAA,MAC9C,CAAC,GAAGL,CAAa,eAAeM,CAAS,EAAE,GAAGA;AAAA,MAC9C,CAAC,GAAGN,CAAa,eAAeO,CAAS,EAAE,GAAGA;AAAA,IAAA;AAAA,EAChD,CACD;AAED,2BACG,OAAI,EAAA,WAAWlB,GAAS,eAAae,GACnC,UAAAF,GACH;AAEJ,GAEaO,IAAS,CAACC,MACrB,CAAC,CAACA,KACFC,EAA0BD,CAAK,MAC9B,CAAC,CAACA,EAAM,MAAM,aAAa,CAAC,CAACA,EAAM,MAAM,aAAa,CAAC,CAACA,EAAM,MAAM;AAEvET,EAAK,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCjDbJ,IAAKC,EAAE,KAAKC,CAAM,GAyBlBC,IAAgB,eAChBY,IAAiB,sBAEVC,IAAO,CAAC;AAAA,EACnB,UAAAX;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAW;AAAA,EACA,CAAC,gBAAgBV;AAAA,EACjB,QAAAW,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAV,IAAW;AAAA,EACX,UAAAW,IAAW;AAAA,EACX,GAAGC;AACL,MAAiB;AACf,QAAMC,IAAmBC,EAAS,QAAQpB,CAAQ,EAAE,OAAOO,CAAM,GAC3Dc,IAAkBF,EAAiB,QAEnCG,IAAmB3B,EAAG,CAACiB,GAAoBd,CAAa,CAAC,GAEzDX,IAAUQ,EAAG;AAAA,IACjBM;AAAA,IACAS;AAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAc,QAAQ,GAAG,CAACW;AAAA,MAC9B,CAAC,GAAGX,CAAc,QAAQ,GAAGW;AAAA,MAC7B,CAAC,GAAGX,CAAc,UAAU,GAAGM;AAAA,MAC/B,CAAC,GAAGN,CAAc,cAAc,GAAGJ;AAAA,MACnC,CAAC,GAAGI,CAAc,cAAc,GAAGO;AAAA,MACnC,CAAC,GAAGP,CAAc,WAAWG,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACQ;AAAA,MACvD,CAAC,GAAGX,CAAc,WAAWI,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACO;AAAA,MACvD,CAAC,GAAGX,CAAc,WAAWK,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACM;AAAA,IAAA;AAAA,EACzD,CACD;AAED,2BACG,OAAI,EAAA,WAAWC,GAAkB,eAAapB,GAAa,GAAGgB,GAC7D,UAAC,gBAAAK,EAAA,OAAA,EAAI,WAAWpC,GACb,UAAAkC,IACGD,EAAS,IAAID,GAAkB,CAAC,EAAE,OAAO,EAAE,UAAAnB,GAAU,GAAGwB,EAAA,0BACrDzB,GAAM,EAAA,GAAGyB,GAAU,UAAUR,KAASV,GACpC,UAAAN,GACH,CACD,IACDA,EACN,CAAA,GACF;AAEJ;AAEAW,EAAK,cAAc;AAEnBA,EAAK,OAAOZ;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/grid",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/grid.cjs.js",
|
|
6
6
|
"types": "./dist/grid.d.ts",
|
|
@@ -16,18 +16,18 @@
|
|
|
16
16
|
"source": "src/grid.tsx",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/tokens": "6.
|
|
19
|
+
"@purpurds/tokens": "6.4.0"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
23
|
-
"@storybook/blocks": "^8.
|
|
24
|
-
"@storybook/react": "^8.
|
|
25
|
-
"storybook": "^8.
|
|
23
|
+
"@storybook/blocks": "^8.6.4",
|
|
24
|
+
"@storybook/react": "^8.6.4",
|
|
25
|
+
"storybook": "^8.6.4",
|
|
26
26
|
"@telia/base-rig": "~8.2.0",
|
|
27
27
|
"@telia/react-rig": "~3.2.0",
|
|
28
28
|
"@testing-library/dom": "~10.4.0",
|
|
29
29
|
"@testing-library/jest-dom": "~6.4.0",
|
|
30
|
-
"@testing-library/react": "~
|
|
30
|
+
"@testing-library/react": "~16.2.0",
|
|
31
31
|
"@types/node": "20.12.12",
|
|
32
32
|
"@types/react-dom": "^19.0.4",
|
|
33
33
|
"@types/react": "^19.0.10",
|
|
@@ -40,10 +40,11 @@
|
|
|
40
40
|
"react-dom": "^19.0.0",
|
|
41
41
|
"react": "^19.0.0",
|
|
42
42
|
"typescript": "^5.6.3",
|
|
43
|
-
"vite": "
|
|
43
|
+
"vite": "^6.2.1",
|
|
44
44
|
"vitest": "^2.1.2",
|
|
45
45
|
"@purpurds/component-rig": "1.0.0",
|
|
46
|
-
"@purpurds/link": "6.
|
|
46
|
+
"@purpurds/link": "6.4.0",
|
|
47
|
+
"@purpurds/paragraph": "6.4.0"
|
|
47
48
|
},
|
|
48
49
|
"peerDependencies": {
|
|
49
50
|
"@types/react": "^18 || ^19",
|
package/src/grid.stories.tsx
CHANGED
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
import type { ReactNode } from "react";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { Link } from "@purpurds/link";
|
|
5
|
+
import { Paragraph } from "@purpurds/paragraph";
|
|
5
6
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
6
7
|
|
|
8
|
+
import "@purpurds/paragraph/styles";
|
|
7
9
|
import { Grid } from "./grid";
|
|
8
10
|
|
|
9
11
|
const meta = {
|
|
@@ -49,7 +51,7 @@ type Story = StoryObj<typeof Grid>;
|
|
|
49
51
|
const Column = ({ number, children }: { number: number; children?: ReactNode }) => {
|
|
50
52
|
return (
|
|
51
53
|
<div style={{ border: "1px solid lightgray", padding: ".5rem" }}>
|
|
52
|
-
<
|
|
54
|
+
<Paragraph>Column {number}</Paragraph>
|
|
53
55
|
{children}
|
|
54
56
|
</div>
|
|
55
57
|
);
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/* eslint-disable react/prop-types */
|
|
2
2
|
import React from "react";
|
|
3
|
+
import { Paragraph } from "@purpurds/paragraph";
|
|
3
4
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
4
5
|
|
|
6
|
+
import "@purpurds/paragraph/styles";
|
|
5
7
|
import { Grid } from "./grid";
|
|
6
8
|
|
|
7
9
|
const meta = {
|
|
@@ -35,7 +37,7 @@ const meta = {
|
|
|
35
37
|
render: ({ children, ...args }) => (
|
|
36
38
|
<Grid.Item {...args}>
|
|
37
39
|
<div style={{ border: "1px solid lightgray", padding: ".5rem" }}>
|
|
38
|
-
<
|
|
40
|
+
<Paragraph>Column</Paragraph>
|
|
39
41
|
{children}
|
|
40
42
|
</div>
|
|
41
43
|
</Grid.Item>
|