@purpurds/grid 5.2.0 → 5.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.d.ts +8 -2
- package/dist/grid.d.ts.map +1 -1
- package/dist/grid.es.js +97 -85
- package/dist/grid.es.js.map +1 -1
- package/dist/grid.item.d.ts +3 -1
- package/dist/grid.item.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -5
- package/src/grid.item.module.scss +4 -0
- package/src/grid.item.stories.tsx +3 -0
- package/src/grid.item.tsx +4 -0
- package/src/grid.module.scss +16 -0
- package/src/grid.stories.tsx +7 -7
- package/src/grid.tsx +15 -1
package/dist/grid.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("react");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("react");function j(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var m={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 _={}.hasOwnProperty;function
|
|
5
|
+
*/(function(p){(function(){var _={}.hasOwnProperty;function t(){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 t.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=o(u,this&&this[i]||i));return u}function o(r,u){return u?r?r+" "+u:r+u:r}p.exports?(t.default=t,p.exports=t):window.classNames=t})()})(m);var v=m.exports;const a=j(v),w={"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"},C=a.bind(w),s="purpur-grid-item",z=({children:p,className:_,["data-testid"]:t,colSpanSm:d=4,colSpanMd:o=8,colSpanLg:r=12,noColGap:u=!1})=>{const i=C([_,s,{[`${s}--no-col-gap`]:u,[`${s}-colspan-sm-${d}`]:d,[`${s}-colspan-md-${o}`]:o,[`${s}-colspan-lg-${r}`]:r}]);return c.jsx("div",{className:i,"data-testid":t,children:p})},N=p=>!!p&&e.isValidElement(p)&&(!!p.props.colSpanSm||!!p.props.colSpanMd||!!p.props.colSpanLg),O={"purpur-grid":"_purpur-grid_1h3bu_1","purpur-grid--no-gap":"_purpur-grid--no-gap_1h3bu_12","purpur-grid--no-row-gap":"_purpur-grid--no-row-gap_1h3bu_12","purpur-grid--grid":"_purpur-grid--grid_1h3bu_36","purpur-grid--no-col-gap":"_purpur-grid--no-col-gap_1h3bu_40","purpur-grid-col-sm-4":"_purpur-grid-col-sm-4_1h3bu_43","purpur-grid-col-sm-3":"_purpur-grid-col-sm-3_1h3bu_46","purpur-grid-col-sm-2":"_purpur-grid-col-sm-2_1h3bu_49","purpur-grid-col-md-8":"_purpur-grid-col-md-8_1h3bu_53","purpur-grid-col-md-7":"_purpur-grid-col-md-7_1h3bu_58","purpur-grid-col-md-6":"_purpur-grid-col-md-6_1h3bu_63","purpur-grid-col-md-5":"_purpur-grid-col-md-5_1h3bu_68","purpur-grid-col-md-4":"_purpur-grid-col-md-4_1h3bu_73","purpur-grid-col-md-3":"_purpur-grid-col-md-3_1h3bu_78","purpur-grid-col-md-2":"_purpur-grid-col-md-2_1h3bu_83","purpur-grid-col-lg-12":"_purpur-grid-col-lg-12_1h3bu_88","purpur-grid-col-lg-11":"_purpur-grid-col-lg-11_1h3bu_93","purpur-grid-col-lg-10":"_purpur-grid-col-lg-10_1h3bu_98","purpur-grid-col-lg-9":"_purpur-grid-col-lg-9_1h3bu_103","purpur-grid-col-lg-8":"_purpur-grid-col-lg-8_1h3bu_108","purpur-grid-col-lg-7":"_purpur-grid-col-lg-7_1h3bu_113","purpur-grid-col-lg-6":"_purpur-grid-col-lg-6_1h3bu_118","purpur-grid-col-lg-5":"_purpur-grid-col-lg-5_1h3bu_123","purpur-grid-col-lg-4":"_purpur-grid-col-lg-4_1h3bu_128","purpur-grid-col-lg-3":"_purpur-grid-col-lg-3_1h3bu_133","purpur-grid-col-lg-2":"_purpur-grid-col-lg-2_1h3bu_138","purpur-grid--flex":"_purpur-grid--flex_1h3bu_142"},S=a.bind(O),l="purpur-grid",h=({children:p,className:_,["data-testid"]:t,colsSm:d=1,colsMd:o=1,colsLg:r=1,noGap:u=!1,noColGap:i=!1,noRowGap:b=!1,...x})=>{const n=e.Children.toArray(p).filter(N),g=n.length,f=S([_,l,{[`${l}--grid`]:!g,[`${l}--flex`]:g,[`${l}--no-gap`]:u,[`${l}--no-col-gap`]:i,[`${l}--no-row-gap`]:b,[`${l}-col-sm-${d}`]:d>1&&!g,[`${l}-col-md-${o}`]:o>1&&!g,[`${l}-col-lg-${r}`]:r>1&&!g}]);return c.jsx("div",{className:f,"data-testid":t,...x,children:g?e.Children.map(n,({props:{children:$,...y}})=>c.jsx(z,{...y,noColGap:u||i,children:$})):p})};h.Item=z;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.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}
|
|
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 /** 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 = (\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 /** 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\";\n\nexport const Grid = ({\n children,\n className,\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 classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--grid`]: !hasItemChildren,\n [`${rootClassName}--flex`]: hasItemChildren,\n [`${rootClassName}--no-gap`]: noGap,\n [`${rootClassName}--no-col-gap`]: noColGap,\n [`${rootClassName}--no-row-gap`]: noRowGap,\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} noColGap={noGap || noColGap}>\n {children}\n </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","noColGap","isItem","child","isValidElement","Grid","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/grid.d.ts
CHANGED
|
@@ -11,12 +11,18 @@ export type GridProps = {
|
|
|
11
11
|
colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
12
12
|
/** The number of columns on large screens. */
|
|
13
13
|
colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
14
|
+
/** Eliminates gaps between columns and rows. */
|
|
15
|
+
noGap?: boolean;
|
|
16
|
+
/** Eliminates gaps between columns. */
|
|
17
|
+
noColGap?: boolean;
|
|
18
|
+
/** Eliminates gaps between rows. */
|
|
19
|
+
noRowGap?: boolean;
|
|
14
20
|
};
|
|
15
21
|
export type GridCmp<P> = React.FunctionComponent<P> & {
|
|
16
22
|
Item: typeof Item;
|
|
17
23
|
};
|
|
18
24
|
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;
|
|
25
|
+
({ children, className, ["data-testid"]: dataTestId, colsSm, colsMd, colsLg, noGap, noColGap, noRowGap, ...props }: GridProps): React.JSX.Element;
|
|
26
|
+
Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, noColGap, }: import('./grid.item').ItemProps) => React.JSX.Element;
|
|
21
27
|
};
|
|
22
28
|
//# 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,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;
|
|
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;IAC1D,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,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;wHAWd,SAAS;;CA8BX,CAAC"}
|
package/dist/grid.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
-
import { isValidElement as
|
|
3
|
-
function
|
|
2
|
+
import { isValidElement as y, Children as n } from "react";
|
|
3
|
+
function v(p) {
|
|
4
4
|
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
|
|
5
5
|
}
|
|
6
6
|
var m = { exports: {} };
|
|
@@ -12,127 +12,139 @@ var m = { exports: {} };
|
|
|
12
12
|
(function(p) {
|
|
13
13
|
(function() {
|
|
14
14
|
var _ = {}.hasOwnProperty;
|
|
15
|
-
function
|
|
15
|
+
function t() {
|
|
16
16
|
for (var r = "", u = 0; u < arguments.length; u++) {
|
|
17
17
|
var i = arguments[u];
|
|
18
|
-
i && (r =
|
|
18
|
+
i && (r = o(r, g.call(this, i)));
|
|
19
19
|
}
|
|
20
20
|
return r;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
22
|
+
function g(r) {
|
|
23
23
|
if (typeof r == "string" || typeof r == "number")
|
|
24
24
|
return this && this[r] || r;
|
|
25
25
|
if (typeof r != "object")
|
|
26
26
|
return "";
|
|
27
27
|
if (Array.isArray(r))
|
|
28
|
-
return
|
|
28
|
+
return t.apply(this, r);
|
|
29
29
|
if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
|
|
30
30
|
return r.toString();
|
|
31
31
|
var u = "";
|
|
32
32
|
for (var i in r)
|
|
33
|
-
_.call(r, i) && r[i] && (u =
|
|
33
|
+
_.call(r, i) && r[i] && (u = o(u, this && this[i] || i));
|
|
34
34
|
return u;
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function o(r, u) {
|
|
37
37
|
return u ? r ? r + " " + u : r + u : r;
|
|
38
38
|
}
|
|
39
|
-
p.exports ? (
|
|
39
|
+
p.exports ? (t.default = t, p.exports = t) : window.classNames = t;
|
|
40
40
|
})();
|
|
41
41
|
})(m);
|
|
42
|
-
var
|
|
43
|
-
const
|
|
44
|
-
"purpur-grid-item": "_purpur-grid-
|
|
45
|
-
"purpur-grid-item-
|
|
46
|
-
"purpur-grid-item-colspan-sm-
|
|
47
|
-
"purpur-grid-item-colspan-sm-
|
|
48
|
-
"purpur-grid-item-colspan-sm-
|
|
49
|
-
"purpur-grid-item-colspan-
|
|
50
|
-
"purpur-grid-item-colspan-md-
|
|
51
|
-
"purpur-grid-item-colspan-md-
|
|
52
|
-
"purpur-grid-item-colspan-md-
|
|
53
|
-
"purpur-grid-item-colspan-md-
|
|
54
|
-
"purpur-grid-item-colspan-md-
|
|
55
|
-
"purpur-grid-item-colspan-md-
|
|
56
|
-
"purpur-grid-item-colspan-md-
|
|
57
|
-
"purpur-grid-item-colspan-
|
|
58
|
-
"purpur-grid-item-colspan-lg-
|
|
59
|
-
"purpur-grid-item-colspan-lg-
|
|
60
|
-
"purpur-grid-item-colspan-lg-
|
|
61
|
-
"purpur-grid-item-colspan-lg-
|
|
62
|
-
"purpur-grid-item-colspan-lg-
|
|
63
|
-
"purpur-grid-item-colspan-lg-
|
|
64
|
-
"purpur-grid-item-colspan-lg-
|
|
65
|
-
"purpur-grid-item-colspan-lg-
|
|
66
|
-
"purpur-grid-item-colspan-lg-
|
|
67
|
-
"purpur-grid-item-colspan-lg-
|
|
68
|
-
"purpur-grid-item-colspan-lg-
|
|
69
|
-
|
|
42
|
+
var w = m.exports;
|
|
43
|
+
const a = /* @__PURE__ */ v(w), N = {
|
|
44
|
+
"purpur-grid-item": "_purpur-grid-item_zx9tz_1",
|
|
45
|
+
"purpur-grid-item--no-col-gap": "_purpur-grid-item--no-col-gap_zx9tz_6",
|
|
46
|
+
"purpur-grid-item-colspan-sm-4": "_purpur-grid-item-colspan-sm-4_zx9tz_24",
|
|
47
|
+
"purpur-grid-item-colspan-sm-3": "_purpur-grid-item-colspan-sm-3_zx9tz_27",
|
|
48
|
+
"purpur-grid-item-colspan-sm-2": "_purpur-grid-item-colspan-sm-2_zx9tz_30",
|
|
49
|
+
"purpur-grid-item-colspan-sm-1": "_purpur-grid-item-colspan-sm-1_zx9tz_33",
|
|
50
|
+
"purpur-grid-item-colspan-md-8": "_purpur-grid-item-colspan-md-8_zx9tz_37",
|
|
51
|
+
"purpur-grid-item-colspan-md-7": "_purpur-grid-item-colspan-md-7_zx9tz_42",
|
|
52
|
+
"purpur-grid-item-colspan-md-6": "_purpur-grid-item-colspan-md-6_zx9tz_47",
|
|
53
|
+
"purpur-grid-item-colspan-md-5": "_purpur-grid-item-colspan-md-5_zx9tz_52",
|
|
54
|
+
"purpur-grid-item-colspan-md-4": "_purpur-grid-item-colspan-md-4_zx9tz_57",
|
|
55
|
+
"purpur-grid-item-colspan-md-3": "_purpur-grid-item-colspan-md-3_zx9tz_62",
|
|
56
|
+
"purpur-grid-item-colspan-md-2": "_purpur-grid-item-colspan-md-2_zx9tz_67",
|
|
57
|
+
"purpur-grid-item-colspan-md-1": "_purpur-grid-item-colspan-md-1_zx9tz_72",
|
|
58
|
+
"purpur-grid-item-colspan-lg-12": "_purpur-grid-item-colspan-lg-12_zx9tz_77",
|
|
59
|
+
"purpur-grid-item-colspan-lg-11": "_purpur-grid-item-colspan-lg-11_zx9tz_82",
|
|
60
|
+
"purpur-grid-item-colspan-lg-10": "_purpur-grid-item-colspan-lg-10_zx9tz_87",
|
|
61
|
+
"purpur-grid-item-colspan-lg-9": "_purpur-grid-item-colspan-lg-9_zx9tz_92",
|
|
62
|
+
"purpur-grid-item-colspan-lg-8": "_purpur-grid-item-colspan-lg-8_zx9tz_97",
|
|
63
|
+
"purpur-grid-item-colspan-lg-7": "_purpur-grid-item-colspan-lg-7_zx9tz_102",
|
|
64
|
+
"purpur-grid-item-colspan-lg-6": "_purpur-grid-item-colspan-lg-6_zx9tz_107",
|
|
65
|
+
"purpur-grid-item-colspan-lg-5": "_purpur-grid-item-colspan-lg-5_zx9tz_112",
|
|
66
|
+
"purpur-grid-item-colspan-lg-4": "_purpur-grid-item-colspan-lg-4_zx9tz_117",
|
|
67
|
+
"purpur-grid-item-colspan-lg-3": "_purpur-grid-item-colspan-lg-3_zx9tz_122",
|
|
68
|
+
"purpur-grid-item-colspan-lg-2": "_purpur-grid-item-colspan-lg-2_zx9tz_127",
|
|
69
|
+
"purpur-grid-item-colspan-lg-1": "_purpur-grid-item-colspan-lg-1_zx9tz_77"
|
|
70
|
+
}, j = a.bind(N), s = "purpur-grid-item", z = ({
|
|
70
71
|
children: p,
|
|
71
72
|
className: _,
|
|
72
|
-
["data-testid"]:
|
|
73
|
-
colSpanSm:
|
|
74
|
-
colSpanMd:
|
|
75
|
-
colSpanLg: r = 12
|
|
73
|
+
["data-testid"]: t,
|
|
74
|
+
colSpanSm: g = 4,
|
|
75
|
+
colSpanMd: o = 8,
|
|
76
|
+
colSpanLg: r = 12,
|
|
77
|
+
noColGap: u = !1
|
|
76
78
|
}) => {
|
|
77
|
-
const
|
|
79
|
+
const i = j([
|
|
78
80
|
_,
|
|
79
81
|
s,
|
|
80
82
|
{
|
|
81
|
-
[`${s}-
|
|
82
|
-
[`${s}-colspan-
|
|
83
|
+
[`${s}--no-col-gap`]: u,
|
|
84
|
+
[`${s}-colspan-sm-${g}`]: g,
|
|
85
|
+
[`${s}-colspan-md-${o}`]: o,
|
|
83
86
|
[`${s}-colspan-lg-${r}`]: r
|
|
84
87
|
}
|
|
85
88
|
]);
|
|
86
|
-
return /* @__PURE__ */ c("div", { className:
|
|
87
|
-
},
|
|
88
|
-
"purpur-grid": "_purpur-
|
|
89
|
-
"purpur-grid--
|
|
90
|
-
"purpur-grid-
|
|
91
|
-
"purpur-grid
|
|
92
|
-
"purpur-grid-col-
|
|
93
|
-
"purpur-grid-col-
|
|
94
|
-
"purpur-grid-col-
|
|
95
|
-
"purpur-grid-col-
|
|
96
|
-
"purpur-grid-col-md-
|
|
97
|
-
"purpur-grid-col-md-
|
|
98
|
-
"purpur-grid-col-md-
|
|
99
|
-
"purpur-grid-col-md-
|
|
100
|
-
"purpur-grid-col-
|
|
101
|
-
"purpur-grid-col-
|
|
102
|
-
"purpur-grid-col-
|
|
103
|
-
"purpur-grid-col-lg-
|
|
104
|
-
"purpur-grid-col-lg-
|
|
105
|
-
"purpur-grid-col-lg-
|
|
106
|
-
"purpur-grid-col-lg-
|
|
107
|
-
"purpur-grid-col-lg-
|
|
108
|
-
"purpur-grid-col-lg-
|
|
109
|
-
"purpur-grid-col-lg-
|
|
110
|
-
"purpur-grid-col-lg-
|
|
111
|
-
"purpur-grid
|
|
112
|
-
|
|
89
|
+
return /* @__PURE__ */ c("div", { className: i, "data-testid": t, children: p });
|
|
90
|
+
}, C = (p) => !!p && y(p) && (!!p.props.colSpanSm || !!p.props.colSpanMd || !!p.props.colSpanLg), I = {
|
|
91
|
+
"purpur-grid": "_purpur-grid_1h3bu_1",
|
|
92
|
+
"purpur-grid--no-gap": "_purpur-grid--no-gap_1h3bu_12",
|
|
93
|
+
"purpur-grid--no-row-gap": "_purpur-grid--no-row-gap_1h3bu_12",
|
|
94
|
+
"purpur-grid--grid": "_purpur-grid--grid_1h3bu_36",
|
|
95
|
+
"purpur-grid--no-col-gap": "_purpur-grid--no-col-gap_1h3bu_40",
|
|
96
|
+
"purpur-grid-col-sm-4": "_purpur-grid-col-sm-4_1h3bu_43",
|
|
97
|
+
"purpur-grid-col-sm-3": "_purpur-grid-col-sm-3_1h3bu_46",
|
|
98
|
+
"purpur-grid-col-sm-2": "_purpur-grid-col-sm-2_1h3bu_49",
|
|
99
|
+
"purpur-grid-col-md-8": "_purpur-grid-col-md-8_1h3bu_53",
|
|
100
|
+
"purpur-grid-col-md-7": "_purpur-grid-col-md-7_1h3bu_58",
|
|
101
|
+
"purpur-grid-col-md-6": "_purpur-grid-col-md-6_1h3bu_63",
|
|
102
|
+
"purpur-grid-col-md-5": "_purpur-grid-col-md-5_1h3bu_68",
|
|
103
|
+
"purpur-grid-col-md-4": "_purpur-grid-col-md-4_1h3bu_73",
|
|
104
|
+
"purpur-grid-col-md-3": "_purpur-grid-col-md-3_1h3bu_78",
|
|
105
|
+
"purpur-grid-col-md-2": "_purpur-grid-col-md-2_1h3bu_83",
|
|
106
|
+
"purpur-grid-col-lg-12": "_purpur-grid-col-lg-12_1h3bu_88",
|
|
107
|
+
"purpur-grid-col-lg-11": "_purpur-grid-col-lg-11_1h3bu_93",
|
|
108
|
+
"purpur-grid-col-lg-10": "_purpur-grid-col-lg-10_1h3bu_98",
|
|
109
|
+
"purpur-grid-col-lg-9": "_purpur-grid-col-lg-9_1h3bu_103",
|
|
110
|
+
"purpur-grid-col-lg-8": "_purpur-grid-col-lg-8_1h3bu_108",
|
|
111
|
+
"purpur-grid-col-lg-7": "_purpur-grid-col-lg-7_1h3bu_113",
|
|
112
|
+
"purpur-grid-col-lg-6": "_purpur-grid-col-lg-6_1h3bu_118",
|
|
113
|
+
"purpur-grid-col-lg-5": "_purpur-grid-col-lg-5_1h3bu_123",
|
|
114
|
+
"purpur-grid-col-lg-4": "_purpur-grid-col-lg-4_1h3bu_128",
|
|
115
|
+
"purpur-grid-col-lg-3": "_purpur-grid-col-lg-3_1h3bu_133",
|
|
116
|
+
"purpur-grid-col-lg-2": "_purpur-grid-col-lg-2_1h3bu_138",
|
|
117
|
+
"purpur-grid--flex": "_purpur-grid--flex_1h3bu_142"
|
|
118
|
+
}, O = a.bind(I), l = "purpur-grid", S = ({
|
|
113
119
|
children: p,
|
|
114
120
|
className: _,
|
|
115
|
-
["data-testid"]:
|
|
116
|
-
colsSm:
|
|
117
|
-
colsMd:
|
|
121
|
+
["data-testid"]: t,
|
|
122
|
+
colsSm: g = 1,
|
|
123
|
+
colsMd: o = 1,
|
|
118
124
|
colsLg: r = 1,
|
|
119
|
-
|
|
125
|
+
noGap: u = !1,
|
|
126
|
+
noColGap: i = !1,
|
|
127
|
+
noRowGap: h = !1,
|
|
128
|
+
...b
|
|
120
129
|
}) => {
|
|
121
|
-
const
|
|
130
|
+
const e = n.toArray(p).filter(C), d = e.length, x = O([
|
|
122
131
|
_,
|
|
123
|
-
|
|
132
|
+
l,
|
|
124
133
|
{
|
|
125
|
-
[`${
|
|
126
|
-
[`${
|
|
127
|
-
[`${
|
|
128
|
-
[`${
|
|
129
|
-
[`${
|
|
134
|
+
[`${l}--grid`]: !d,
|
|
135
|
+
[`${l}--flex`]: d,
|
|
136
|
+
[`${l}--no-gap`]: u,
|
|
137
|
+
[`${l}--no-col-gap`]: i,
|
|
138
|
+
[`${l}--no-row-gap`]: h,
|
|
139
|
+
[`${l}-col-sm-${g}`]: g > 1 && !d,
|
|
140
|
+
[`${l}-col-md-${o}`]: o > 1 && !d,
|
|
141
|
+
[`${l}-col-lg-${r}`]: r > 1 && !d
|
|
130
142
|
}
|
|
131
143
|
]);
|
|
132
|
-
return /* @__PURE__ */ c("div", { className:
|
|
144
|
+
return /* @__PURE__ */ c("div", { className: x, "data-testid": t, ...b, children: d ? n.map(e, ({ props: { children: f, ...$ } }) => /* @__PURE__ */ c(z, { ...$, noColGap: u || i, children: f })) : p });
|
|
133
145
|
};
|
|
134
|
-
|
|
146
|
+
S.Item = z;
|
|
135
147
|
export {
|
|
136
|
-
|
|
148
|
+
S as Grid
|
|
137
149
|
};
|
|
138
150
|
//# 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, {\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}
|
|
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 /** 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 = (\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 /** 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\";\n\nexport const Grid = ({\n children,\n className,\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 classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--grid`]: !hasItemChildren,\n [`${rootClassName}--flex`]: hasItemChildren,\n [`${rootClassName}--no-gap`]: noGap,\n [`${rootClassName}--no-col-gap`]: noColGap,\n [`${rootClassName}--no-row-gap`]: noRowGap,\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} noColGap={noGap || noColGap}>\n {children}\n </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","noColGap","isItem","child","isValidElement","Grid","colsSm","colsMd","colsLg","noGap","noRowGap","props","gridItemChildren","Children","hasItemChildren","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/grid.item.d.ts
CHANGED
|
@@ -10,7 +10,9 @@ export type ItemProps = {
|
|
|
10
10
|
colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
11
11
|
/** The number of columns that the item spans on large screens. */
|
|
12
12
|
colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
13
|
+
/** This will be passed from the parent component. */
|
|
14
|
+
noColGap?: boolean;
|
|
13
15
|
};
|
|
14
|
-
export declare const Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, }: ItemProps) => React.JSX.Element;
|
|
16
|
+
export declare const Item: ({ children, className, ["data-testid"]: dataTestId, colSpanSm, colSpanMd, colSpanLg, noColGap, }: ItemProps) => React.JSX.Element;
|
|
15
17
|
export declare const isItem: (child: ReactChild | ReactElement | ReactFragment | ReactPortal | string | number | boolean | null | undefined) => child is React.ReactElement<ItemProps, string | React.JSXElementConstructor<any>>;
|
|
16
18
|
//# sourceMappingURL=grid.item.d.ts.map
|
package/dist/grid.item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,IAAI,qGAQd,SAAS,sBAiBX,CAAC;AAEF,eAAO,MAAM,MAAM,UAEb,UAAU,GACV,YAAY,GACZ,aAAa,GACb,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,sFAIkE,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-grid-
|
|
1
|
+
._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-sm) / 2);padding:0 var(--padding);box-sizing:border-box}._purpur-grid-item--no-col-gap_zx9tz_6{padding:0}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-md) / 2)}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-lg) / 2)}}@media screen and (min-width: 1440px){._purpur-grid-item_zx9tz_1{--padding: calc(var(--purpur-spacing-gutter-xl) / 2)}}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-4_zx9tz_24{width:100%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-3_zx9tz_27{width:75%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-2_zx9tz_30{width:50%}._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-sm-1_zx9tz_33{width:25%}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-8_zx9tz_37{width:100%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-7_zx9tz_42{width:87.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-6_zx9tz_47{width:75%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-5_zx9tz_52{width:62.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-4_zx9tz_57{width:50%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-3_zx9tz_62{width:37.5%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-2_zx9tz_67{width:25%}}@media screen and (min-width: 600px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-md-1_zx9tz_72{width:12.5%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-12_zx9tz_77{width:100%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-11_zx9tz_82{width:91.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-10_zx9tz_87{width:83.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-9_zx9tz_92{width:75%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-8_zx9tz_97{width:66.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-7_zx9tz_102{width:58.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-6_zx9tz_107{width:50%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-5_zx9tz_112{width:41.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-4_zx9tz_117{width:33.3333333333%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-3_zx9tz_122{width:25%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-2_zx9tz_127{width:16.6666666667%}}@media screen and (min-width: 1024px){._purpur-grid-item_zx9tz_1._purpur-grid-item-colspan-lg-1_zx9tz_77{width:8.3333333333%}}._purpur-grid_1h3bu_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--no-gap_1h3bu_12,._purpur-grid--no-row-gap_1h3bu_12{row-gap:0}._purpur-grid_1h3bu_1 ._purpur-grid_1h3bu_1{padding:0}@media screen and (min-width: 600px){._purpur-grid_1h3bu_1{--gap: var(--purpur-spacing-gutter-md);--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width: 1024px){._purpur-grid_1h3bu_1{--gap: var(--purpur-spacing-gutter-lg);--padding: var(--purpur-spacing-page-padding-lg)}}@media screen and (min-width: 1440px){._purpur-grid_1h3bu_1{--gap: var(--purpur-spacing-gutter-xl);--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-grid--grid_1h3bu_36{display:grid;column-gap:var(--gap)}._purpur-grid--grid_1h3bu_36._purpur-grid--no-gap_1h3bu_12,._purpur-grid--grid_1h3bu_36._purpur-grid--no-col-gap_1h3bu_40{column-gap:0}._purpur-grid--grid_1h3bu_36._purpur-grid-col-sm-4_1h3bu_43{grid-template-columns:repeat(4,1fr)}._purpur-grid--grid_1h3bu_36._purpur-grid-col-sm-3_1h3bu_46{grid-template-columns:repeat(3,1fr)}._purpur-grid--grid_1h3bu_36._purpur-grid-col-sm-2_1h3bu_49{grid-template-columns:repeat(2,1fr)}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-8_1h3bu_53{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-7_1h3bu_58{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-6_1h3bu_63{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-5_1h3bu_68{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-4_1h3bu_73{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-3_1h3bu_78{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 600px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-md-2_1h3bu_83{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-12_1h3bu_88{grid-template-columns:repeat(12,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-11_1h3bu_93{grid-template-columns:repeat(11,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-10_1h3bu_98{grid-template-columns:repeat(10,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-9_1h3bu_103{grid-template-columns:repeat(9,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-8_1h3bu_108{grid-template-columns:repeat(8,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-7_1h3bu_113{grid-template-columns:repeat(7,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-6_1h3bu_118{grid-template-columns:repeat(6,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-5_1h3bu_123{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-4_1h3bu_128{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-3_1h3bu_133{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1024px){._purpur-grid--grid_1h3bu_36._purpur-grid-col-lg-2_1h3bu_138{grid-template-columns:repeat(2,1fr)}}._purpur-grid--flex_1h3bu_142{--gutter: var(--purpur-spacing-gutter-sm);display:flex;flex-wrap:wrap;width:calc(100% + var(--gutter));margin:0 calc(-1 * var(--gutter) / 2)}._purpur-grid--flex_1h3bu_142._purpur-grid--no-gap_1h3bu_12,._purpur-grid--flex_1h3bu_142._purpur-grid--no-col-gap_1h3bu_40{width:100%;margin:0}@media screen and (min-width: 600px){._purpur-grid--flex_1h3bu_142{--gutter: var(--purpur-spacing-gutter-md)}}@media screen and (min-width: 1024px){._purpur-grid--flex_1h3bu_142{--gutter: var(--purpur-spacing-gutter-lg)}}@media screen and (min-width: 1440px){._purpur-grid--flex_1h3bu_142{--gutter: var(--purpur-spacing-gutter-xl)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/grid",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.4.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/grid.cjs.js",
|
|
6
6
|
"types": "./dist/grid.d.ts",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"source": "src/grid.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/tokens": "5.
|
|
18
|
+
"@purpurds/tokens": "5.4.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@testing-library/dom": "~9.3.3",
|
|
27
27
|
"@testing-library/jest-dom": "~6.4.0",
|
|
28
28
|
"@testing-library/react": "~14.3.0",
|
|
29
|
-
"@types/node": "
|
|
29
|
+
"@types/node": "20.12.12",
|
|
30
30
|
"@types/react-dom": "~18.3.0",
|
|
31
31
|
"@types/react": "~18.3.0",
|
|
32
32
|
"builtin-modules": "~3.3.0",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"typescript": "~5.4.2",
|
|
41
41
|
"vite": "~5.2.2",
|
|
42
42
|
"vitest": "~1.5.0",
|
|
43
|
-
"@purpurds/
|
|
44
|
-
"@purpurds/
|
|
43
|
+
"@purpurds/link": "5.4.0",
|
|
44
|
+
"@purpurds/component-rig": "1.0.0"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build:dev": "vite",
|
|
@@ -15,6 +15,9 @@ const meta: Meta<typeof Grid.Item> = {
|
|
|
15
15
|
url: "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
|
|
16
16
|
},
|
|
17
17
|
],
|
|
18
|
+
controls: {
|
|
19
|
+
exclude: ["noColGap"],
|
|
20
|
+
},
|
|
18
21
|
},
|
|
19
22
|
argTypes: {
|
|
20
23
|
["data-testid"]: { control: { type: "text" } },
|
package/src/grid.item.tsx
CHANGED
|
@@ -22,6 +22,8 @@ export type ItemProps = {
|
|
|
22
22
|
colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
23
23
|
/** The number of columns that the item spans on large screens. */
|
|
24
24
|
colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
25
|
+
/** This will be passed from the parent component. */
|
|
26
|
+
noColGap?: boolean;
|
|
25
27
|
};
|
|
26
28
|
|
|
27
29
|
const rootClassName = "purpur-grid-item";
|
|
@@ -33,11 +35,13 @@ export const Item = ({
|
|
|
33
35
|
colSpanSm = 4,
|
|
34
36
|
colSpanMd = 8,
|
|
35
37
|
colSpanLg = 12,
|
|
38
|
+
noColGap = false,
|
|
36
39
|
}: ItemProps) => {
|
|
37
40
|
const classes = cx([
|
|
38
41
|
className,
|
|
39
42
|
rootClassName,
|
|
40
43
|
{
|
|
44
|
+
[`${rootClassName}--no-col-gap`]: noColGap,
|
|
41
45
|
[`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,
|
|
42
46
|
[`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,
|
|
43
47
|
[`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,
|
package/src/grid.module.scss
CHANGED
|
@@ -13,6 +13,11 @@
|
|
|
13
13
|
margin: 0 auto;
|
|
14
14
|
padding: 0 var(--padding);
|
|
15
15
|
|
|
16
|
+
&--no-gap,
|
|
17
|
+
&--no-row-gap {
|
|
18
|
+
row-gap: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
16
21
|
/* Remove padding for nested grids */
|
|
17
22
|
#{$root} {
|
|
18
23
|
padding: 0;
|
|
@@ -37,6 +42,11 @@
|
|
|
37
42
|
display: grid;
|
|
38
43
|
column-gap: var(--gap);
|
|
39
44
|
|
|
45
|
+
&#{$root}--no-gap,
|
|
46
|
+
&#{$root}--no-col-gap {
|
|
47
|
+
column-gap: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
@for $i from 4 through 2 {
|
|
41
51
|
&#{$root}-col-sm-#{$i} {
|
|
42
52
|
grid-template-columns: repeat($i, 1fr);
|
|
@@ -68,6 +78,12 @@
|
|
|
68
78
|
width: calc(100% + var(--gutter));
|
|
69
79
|
margin: 0 calc(-1 * (var(--gutter) / 2));
|
|
70
80
|
|
|
81
|
+
&#{$root}--no-gap,
|
|
82
|
+
&#{$root}--no-col-gap {
|
|
83
|
+
width: 100%;
|
|
84
|
+
margin: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
71
87
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
72
88
|
--gutter: var(--purpur-spacing-gutter-md);
|
|
73
89
|
}
|
package/src/grid.stories.tsx
CHANGED
|
@@ -64,19 +64,19 @@ export const AdvancedWithNestedGrids: Story = {
|
|
|
64
64
|
exclude: ["colsSm", "colsMd", "colsLg"],
|
|
65
65
|
},
|
|
66
66
|
},
|
|
67
|
-
render: ({ children }) => (
|
|
67
|
+
render: ({ children, ...args }) => (
|
|
68
68
|
<>
|
|
69
|
-
<Grid>
|
|
70
|
-
<Grid colsSm={1} colsMd={3} colsLg={3}>
|
|
69
|
+
<Grid noGap={args.noGap} noColGap={args.noColGap} noRowGap={args.noRowGap}>
|
|
70
|
+
<Grid {...args} colsSm={1} colsMd={3} colsLg={3}>
|
|
71
71
|
<Column number={1}>{children}</Column>
|
|
72
72
|
<Column number={2}>{children}</Column>
|
|
73
73
|
<Column number={3}>{children}</Column>
|
|
74
74
|
</Grid>
|
|
75
|
-
<Grid colsSm={1} colsMd={2} colsLg={2}>
|
|
75
|
+
<Grid {...args} colsSm={1} colsMd={2} colsLg={2}>
|
|
76
76
|
<Column number={4}>{children}</Column>
|
|
77
77
|
<Column number={5}>{children}</Column>
|
|
78
78
|
</Grid>
|
|
79
|
-
<Grid colsSm={1} colsMd={2} colsLg={2}>
|
|
79
|
+
<Grid {...args} colsSm={1} colsMd={2} colsLg={2}>
|
|
80
80
|
<Column number={6}>{children}</Column>
|
|
81
81
|
<Column number={7}>{children}</Column>
|
|
82
82
|
</Grid>
|
|
@@ -99,9 +99,9 @@ export const AdvancedWithGridItems: Story = {
|
|
|
99
99
|
exclude: ["colsSm", "colsMd", "colsLg"],
|
|
100
100
|
},
|
|
101
101
|
},
|
|
102
|
-
render: ({ children }) => (
|
|
102
|
+
render: ({ children, ...args }) => (
|
|
103
103
|
<>
|
|
104
|
-
<Grid>
|
|
104
|
+
<Grid {...args}>
|
|
105
105
|
<Grid.Item colSpanSm={2} colSpanMd={5} colSpanLg={3}>
|
|
106
106
|
<Column number={1}>{children}</Column>
|
|
107
107
|
</Grid.Item>
|
package/src/grid.tsx
CHANGED
|
@@ -16,6 +16,12 @@ export type GridProps = {
|
|
|
16
16
|
colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
17
17
|
/** The number of columns on large screens. */
|
|
18
18
|
colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
19
|
+
/** Eliminates gaps between columns and rows. */
|
|
20
|
+
noGap?: boolean;
|
|
21
|
+
/** Eliminates gaps between columns. */
|
|
22
|
+
noColGap?: boolean;
|
|
23
|
+
/** Eliminates gaps between rows. */
|
|
24
|
+
noRowGap?: boolean;
|
|
19
25
|
};
|
|
20
26
|
|
|
21
27
|
export type GridCmp<P> = React.FunctionComponent<P> & {
|
|
@@ -31,6 +37,9 @@ export const Grid = ({
|
|
|
31
37
|
colsSm = 1,
|
|
32
38
|
colsMd = 1,
|
|
33
39
|
colsLg = 1,
|
|
40
|
+
noGap = false,
|
|
41
|
+
noColGap = false,
|
|
42
|
+
noRowGap = false,
|
|
34
43
|
...props
|
|
35
44
|
}: GridProps) => {
|
|
36
45
|
const gridItemChildren = Children.toArray(children).filter(isItem);
|
|
@@ -42,6 +51,9 @@ export const Grid = ({
|
|
|
42
51
|
{
|
|
43
52
|
[`${rootClassName}--grid`]: !hasItemChildren,
|
|
44
53
|
[`${rootClassName}--flex`]: hasItemChildren,
|
|
54
|
+
[`${rootClassName}--no-gap`]: noGap,
|
|
55
|
+
[`${rootClassName}--no-col-gap`]: noColGap,
|
|
56
|
+
[`${rootClassName}--no-row-gap`]: noRowGap,
|
|
45
57
|
[`${rootClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,
|
|
46
58
|
[`${rootClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,
|
|
47
59
|
[`${rootClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,
|
|
@@ -52,7 +64,9 @@ export const Grid = ({
|
|
|
52
64
|
<div className={classes} data-testid={dataTestId} {...props}>
|
|
53
65
|
{hasItemChildren
|
|
54
66
|
? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (
|
|
55
|
-
<Item {...colProps}
|
|
67
|
+
<Item {...colProps} noColGap={noGap || noColGap}>
|
|
68
|
+
{children}
|
|
69
|
+
</Item>
|
|
56
70
|
))
|
|
57
71
|
: children}
|
|
58
72
|
</div>
|