@purpurds/container 8.19.0 → 8.20.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/container.cjs.js +1 -1
- package/dist/container.cjs.js.map +1 -1
- package/dist/container.d.ts +3 -3
- package/dist/container.d.ts.map +1 -1
- package/dist/container.es.js +2 -8
- package/dist/container.es.js.map +1 -1
- package/dist/metadata.js +2 -2
- package/dist/styles.css +1 -1
- package/package.json +4 -4
- package/src/container.stories.tsx +3 -3
- package/src/container.test.tsx +10 -10
- package/src/container.tsx +5 -11
package/dist/container.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),x=require("react");function d(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),x=require("react");function d(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var a={exports:{}};var p;function _(){return p||(p=1,(function(n){(function(){var s={}.hasOwnProperty;function e(){for(var r="",t=0;t<arguments.length;t++){var i=arguments[t];i&&(r=o(r,u.call(this,i)))}return r}function u(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return e.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var t="";for(var i in r)s.call(r,i)&&r[i]&&(t=o(t,this&&this[i]||i));return t}function o(r,t){return t?r?r+" "+t:r+t:r}n.exports?(e.default=e,n.exports=e):window.classNames=e})()})(a)),a.exports}var m=_();const h=d(m),S={"purpur-container":"_purpur-container_1t9gx_1","purpur-container--xs":"_purpur-container--xs_1t9gx_13","purpur-container--sm":"_purpur-container--sm_1t9gx_24","purpur-container--md":"_purpur-container--md_1t9gx_39","purpur-container--lg":"_purpur-container--lg_1t9gx_42","purpur-container--xl":"_purpur-container--xl_1t9gx_45","purpur-container--xxl":"_purpur-container--xxl_1t9gx_48"},v=h.bind(S),y={XS:"xs",SM:"sm",MD:"md",LG:"lg",XL:"xl",XXL:"xxl"},E={ARTICLE:"article",ASIDE:"aside",DIV:"div",FOOTER:"footer",HEADER:"header",MAIN:"main",NAV:"nav",SECTION:"section",SPAN:"span"},c="purpur-container",l=x.forwardRef(({children:n,className:s,width:e="xxl",element:u="div",...o},r)=>{const t=v([c,`${c}--${e}`,s]);return f.jsx(u,{className:t,ref:r,...o,children:n})});l.displayName="Container";exports.Container=l;exports.ContainerElement=E;exports.Width=y;
|
|
2
2
|
//# sourceMappingURL=container.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n XS: \"xs\",\n SM: \"sm\",\n MD: \"md\",\n LG: \"lg\",\n XL: \"xl\",\n XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const
|
|
1
|
+
{"version":3,"file":"container.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { type ElementType, forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n XS: \"xs\",\n SM: \"sm\",\n MD: \"md\",\n LG: \"lg\",\n XL: \"xl\",\n XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const ContainerElement = {\n ARTICLE: \"article\",\n ASIDE: \"aside\",\n DIV: \"div\",\n FOOTER: \"footer\",\n HEADER: \"header\",\n MAIN: \"main\",\n NAV: \"nav\",\n SECTION: \"section\",\n SPAN: \"span\",\n} as const;\n\nexport type ContainerElementType = (typeof ContainerElement)[keyof typeof ContainerElement];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n width?: WidthType;\n element?: ContainerElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n (\n { children, className, width = \"xxl\", element: ElementTag = \"div\" as ElementType, ...props },\n ref\n ) => {\n const classes = cx([rootClassName, `${rootClassName}--${width}`, className]);\n\n return (\n <ElementTag className={classes} ref={ref} {...props}>\n {children}\n </ElementTag>\n );\n }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","ContainerElement","rootClassName","Container","forwardRef","children","className","width","ElementTag","props","ref"],"mappings":"+SAOC,UAAY,CAGZ,IAAIA,EAAS,CAAA,EAAG,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE7D,CAEE,OAAOF,CACT,CAEC,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,SAAQ,EAGpB,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACT,CAEC,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,UAAiBT,GAOjB,OAAO,WAAaA,CAEtB,ibCtEMU,EAAKC,EAAE,KAAKC,CAAM,EAEXC,EAAQ,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,KACP,EAIaC,EAAmB,CAC9B,QAAS,UACT,MAAO,QACP,IAAK,MACL,OAAQ,SACR,OAAQ,SACR,KAAM,OACN,IAAK,MACL,QAAS,UACT,KAAM,MACR,EAUMC,EAAgB,mBAETC,EAAYC,EAAAA,WACvB,CACE,CAAE,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,MAAO,QAASC,EAAa,MAAsB,GAAGC,CAAA,EACrFC,IACG,CACH,MAAMtB,EAAUS,EAAG,CAACK,EAAe,GAAGA,CAAa,KAAKK,CAAK,GAAID,CAAS,CAAC,EAE3E,aACGE,EAAA,CAAW,UAAWpB,EAAS,IAAAsB,EAAW,GAAGD,EAC3C,SAAAJ,EACH,CAEJ,CACF,EAEAF,EAAU,YAAc","x_google_ignoreList":[0]}
|
package/dist/container.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export declare const Width: {
|
|
|
9
9
|
readonly XXL: "xxl";
|
|
10
10
|
};
|
|
11
11
|
export type WidthType = (typeof Width)[keyof typeof Width];
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const ContainerElement: {
|
|
13
13
|
readonly ARTICLE: "article";
|
|
14
14
|
readonly ASIDE: "aside";
|
|
15
15
|
readonly DIV: "div";
|
|
@@ -20,11 +20,11 @@ export declare const Element: {
|
|
|
20
20
|
readonly SECTION: "section";
|
|
21
21
|
readonly SPAN: "span";
|
|
22
22
|
};
|
|
23
|
-
export type
|
|
23
|
+
export type ContainerElementType = (typeof ContainerElement)[keyof typeof ContainerElement];
|
|
24
24
|
export type ContainerProps = Omit<BaseProps, "children"> & {
|
|
25
25
|
children: ReactNode;
|
|
26
26
|
width?: WidthType;
|
|
27
|
-
element?:
|
|
27
|
+
element?: ContainerElementType;
|
|
28
28
|
};
|
|
29
29
|
export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
30
30
|
//# sourceMappingURL=container.d.ts.map
|
package/dist/container.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../src/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../src/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAE5F,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAIF,eAAO,MAAM,SAAS,iGAarB,CAAC"}
|
package/dist/container.es.js
CHANGED
|
@@ -64,13 +64,7 @@ const m = /* @__PURE__ */ x(_), h = {
|
|
|
64
64
|
SECTION: "section",
|
|
65
65
|
SPAN: "span"
|
|
66
66
|
}, c = "purpur-container", S = f(
|
|
67
|
-
({
|
|
68
|
-
children: n,
|
|
69
|
-
className: s,
|
|
70
|
-
width: e = "xxl",
|
|
71
|
-
element: u = "div",
|
|
72
|
-
...i
|
|
73
|
-
}, r) => {
|
|
67
|
+
({ children: n, className: s, width: e = "xxl", element: u = "div", ...i }, r) => {
|
|
74
68
|
const t = v([c, `${c}--${e}`, s]);
|
|
75
69
|
return /* @__PURE__ */ l(u, { className: t, ref: r, ...i, children: n });
|
|
76
70
|
}
|
|
@@ -78,7 +72,7 @@ const m = /* @__PURE__ */ x(_), h = {
|
|
|
78
72
|
S.displayName = "Container";
|
|
79
73
|
export {
|
|
80
74
|
S as Container,
|
|
81
|
-
A as
|
|
75
|
+
A as ContainerElement,
|
|
82
76
|
N as Width
|
|
83
77
|
};
|
|
84
78
|
//# sourceMappingURL=container.es.js.map
|
package/dist/container.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n XS: \"xs\",\n SM: \"sm\",\n MD: \"md\",\n LG: \"lg\",\n XL: \"xl\",\n XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const
|
|
1
|
+
{"version":3,"file":"container.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/container.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, { type ElementType, forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./container.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport const Width = {\n XS: \"xs\",\n SM: \"sm\",\n MD: \"md\",\n LG: \"lg\",\n XL: \"xl\",\n XXL: \"xxl\",\n} as const;\n\nexport type WidthType = (typeof Width)[keyof typeof Width];\n\nexport const ContainerElement = {\n ARTICLE: \"article\",\n ASIDE: \"aside\",\n DIV: \"div\",\n FOOTER: \"footer\",\n HEADER: \"header\",\n MAIN: \"main\",\n NAV: \"nav\",\n SECTION: \"section\",\n SPAN: \"span\",\n} as const;\n\nexport type ContainerElementType = (typeof ContainerElement)[keyof typeof ContainerElement];\n\nexport type ContainerProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n width?: WidthType;\n element?: ContainerElementType;\n};\n\nconst rootClassName = \"purpur-container\";\n\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n (\n { children, className, width = \"xxl\", element: ElementTag = \"div\" as ElementType, ...props },\n ref\n ) => {\n const classes = cx([rootClassName, `${rootClassName}--${width}`, className]);\n\n return (\n <ElementTag className={classes} ref={ref} {...props}>\n {children}\n </ElementTag>\n );\n }\n);\n\nContainer.displayName = \"Container\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","Width","ContainerElement","rootClassName","Container","forwardRef","children","className","width","ElementTag","props","ref"],"mappings":";;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,cAAIC,IAAM,UAAUD,CAAC;AACrB,UAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOF;AAAA,MACT;AAEC,eAASI,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,iBAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAQ;AAGpB,YAAIF,IAAU;AAEd,iBAASK,KAAOH;AACf,UAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,eAAOL;AAAA,MACT;AAEC,eAASG,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,YAAiBT,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;GCtEMU,IAAKC,EAAE,KAAKC,CAAM,GAEXC,IAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAIaC,IAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AACR,GAUMC,IAAgB,oBAETC,IAAYC;AAAA,EACvB,CACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,IAAQ,OAAO,SAASC,IAAa,OAAsB,GAAGC,EAAA,GACrFC,MACG;AACH,UAAMtB,IAAUS,EAAG,CAACK,GAAe,GAAGA,CAAa,KAAKK,CAAK,IAAID,CAAS,CAAC;AAE3E,6BACGE,GAAA,EAAW,WAAWpB,GAAS,KAAAsB,GAAW,GAAGD,GAC3C,UAAAJ,GACH;AAAA,EAEJ;AACF;AAEAF,EAAU,cAAc;","x_google_ignoreList":[0]}
|
package/dist/metadata.js
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-container_1t9gx_1{display:block;box-sizing:border-box;width:100%;margin:0 auto;padding:0 var(--padding);--padding: var(--purpur-spacing-page-padding-sm)}@media screen and (min-width:
|
|
1
|
+
._purpur-container_1t9gx_1{display:block;box-sizing:border-box;width:100%;margin:0 auto;padding:0 var(--padding);--padding: var(--purpur-spacing-page-padding-sm)}@media screen and (min-width:600px){._purpur-container_1t9gx_1{--padding: var(--purpur-spacing-page-padding-md)}._purpur-container--xs_1t9gx_13{--padding: var(--purpur-spacing-page-padding-sm)}}@media screen and (min-width:1024px){._purpur-container_1t9gx_1{--padding: var(--purpur-spacing-page-padding-lg)}._purpur-container--xs_1t9gx_13{--padding: var(--purpur-spacing-page-padding-sm)}._purpur-container--sm_1t9gx_24{--padding: var(--purpur-spacing-page-padding-md)}}@media screen and (min-width:1440px){._purpur-container_1t9gx_1{--padding: var(--purpur-spacing-page-padding-xl)}}._purpur-container--xs_1t9gx_13{max-width:480px}._purpur-container--sm_1t9gx_24{max-width:660px}._purpur-container--md_1t9gx_39{max-width:880px}._purpur-container--lg_1t9gx_42{max-width:1024px}._purpur-container--xl_1t9gx_45{max-width:1280px}._purpur-container--xxl_1t9gx_48{max-width:var(--purpur-breakpoint-xl)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/container",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.20.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/container.cjs.js",
|
|
6
6
|
"types": "./dist/container.d.ts",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
"source": "src/container.tsx",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"classnames": "~2.5.1",
|
|
19
|
-
"@purpurds/common-types": "8.
|
|
20
|
-
"@purpurds/tokens": "8.
|
|
19
|
+
"@purpurds/common-types": "8.20.0",
|
|
20
|
+
"@purpurds/tokens": "8.20.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@storybook/react-vite": "10.1.11",
|
|
24
24
|
"@testing-library/dom": "~10.4.1",
|
|
25
25
|
"@testing-library/jest-dom": "~6.9.1",
|
|
26
26
|
"@testing-library/react": "~16.3.0",
|
|
27
|
-
"@types/node": "
|
|
27
|
+
"@types/node": "24.10.9",
|
|
28
28
|
"@types/react-dom": "^19.2.3",
|
|
29
29
|
"@types/react": "^19.2.6",
|
|
30
30
|
"eslint": "9.39.2",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
3
3
|
|
|
4
|
-
import { Container,
|
|
4
|
+
import { Container, ContainerElement, Width } from "./container";
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
7
|
title: "Layout and Structure/Container",
|
|
@@ -34,10 +34,10 @@ const meta = {
|
|
|
34
34
|
},
|
|
35
35
|
element: {
|
|
36
36
|
control: { type: "select" },
|
|
37
|
-
options: Object.values(
|
|
37
|
+
options: Object.values(ContainerElement),
|
|
38
38
|
table: {
|
|
39
39
|
type: {
|
|
40
|
-
summary: Object.values(
|
|
40
|
+
summary: Object.values(ContainerElement)
|
|
41
41
|
.map((x) => `"${x}"`)
|
|
42
42
|
.join(" | "),
|
|
43
43
|
},
|
package/src/container.test.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import * as matchers from "@testing-library/jest-dom/matchers";
|
|
|
3
3
|
import { render, screen } from "@testing-library/react";
|
|
4
4
|
import { describe, expect, it } from "vitest";
|
|
5
5
|
|
|
6
|
-
import { Container,
|
|
6
|
+
import { Container, ContainerElement } from "./container";
|
|
7
7
|
|
|
8
8
|
expect.extend(matchers);
|
|
9
9
|
|
|
@@ -22,7 +22,7 @@ describe("Container", () => {
|
|
|
22
22
|
|
|
23
23
|
it("should render as article element", () => {
|
|
24
24
|
render(
|
|
25
|
-
<Container element={
|
|
25
|
+
<Container element={ContainerElement.ARTICLE} data-testid="container-article">
|
|
26
26
|
Content
|
|
27
27
|
</Container>
|
|
28
28
|
);
|
|
@@ -32,7 +32,7 @@ describe("Container", () => {
|
|
|
32
32
|
|
|
33
33
|
it("should render as aside element", () => {
|
|
34
34
|
render(
|
|
35
|
-
<Container element={
|
|
35
|
+
<Container element={ContainerElement.ASIDE} data-testid="container-aside">
|
|
36
36
|
Content
|
|
37
37
|
</Container>
|
|
38
38
|
);
|
|
@@ -42,7 +42,7 @@ describe("Container", () => {
|
|
|
42
42
|
|
|
43
43
|
it("should render as div element", () => {
|
|
44
44
|
render(
|
|
45
|
-
<Container element={
|
|
45
|
+
<Container element={ContainerElement.DIV} data-testid="container-div">
|
|
46
46
|
Content
|
|
47
47
|
</Container>
|
|
48
48
|
);
|
|
@@ -52,7 +52,7 @@ describe("Container", () => {
|
|
|
52
52
|
|
|
53
53
|
it("should render as footer element", () => {
|
|
54
54
|
render(
|
|
55
|
-
<Container element={
|
|
55
|
+
<Container element={ContainerElement.FOOTER} data-testid="container-footer">
|
|
56
56
|
Content
|
|
57
57
|
</Container>
|
|
58
58
|
);
|
|
@@ -62,7 +62,7 @@ describe("Container", () => {
|
|
|
62
62
|
|
|
63
63
|
it("should render as header element", () => {
|
|
64
64
|
render(
|
|
65
|
-
<Container element={
|
|
65
|
+
<Container element={ContainerElement.HEADER} data-testid="container-header">
|
|
66
66
|
Content
|
|
67
67
|
</Container>
|
|
68
68
|
);
|
|
@@ -72,7 +72,7 @@ describe("Container", () => {
|
|
|
72
72
|
|
|
73
73
|
it("should render as main element", () => {
|
|
74
74
|
render(
|
|
75
|
-
<Container element={
|
|
75
|
+
<Container element={ContainerElement.MAIN} data-testid="container-main">
|
|
76
76
|
Content
|
|
77
77
|
</Container>
|
|
78
78
|
);
|
|
@@ -82,7 +82,7 @@ describe("Container", () => {
|
|
|
82
82
|
|
|
83
83
|
it("should render as nav element", () => {
|
|
84
84
|
render(
|
|
85
|
-
<Container element={
|
|
85
|
+
<Container element={ContainerElement.NAV} data-testid="container-nav">
|
|
86
86
|
Content
|
|
87
87
|
</Container>
|
|
88
88
|
);
|
|
@@ -92,7 +92,7 @@ describe("Container", () => {
|
|
|
92
92
|
|
|
93
93
|
it("should render as section element", () => {
|
|
94
94
|
render(
|
|
95
|
-
<Container element={
|
|
95
|
+
<Container element={ContainerElement.SECTION} data-testid="container-section">
|
|
96
96
|
Content
|
|
97
97
|
</Container>
|
|
98
98
|
);
|
|
@@ -102,7 +102,7 @@ describe("Container", () => {
|
|
|
102
102
|
|
|
103
103
|
it("should render as span element", () => {
|
|
104
104
|
render(
|
|
105
|
-
<Container element={
|
|
105
|
+
<Container element={ContainerElement.SPAN} data-testid="container-span">
|
|
106
106
|
Content
|
|
107
107
|
</Container>
|
|
108
108
|
);
|
package/src/container.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef, type ReactNode } from "react";
|
|
1
|
+
import React, { type ElementType, forwardRef, type ReactNode } from "react";
|
|
2
2
|
import type { BaseProps } from "@purpurds/common-types";
|
|
3
3
|
import c from "classnames/bind";
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@ export const Width = {
|
|
|
17
17
|
|
|
18
18
|
export type WidthType = (typeof Width)[keyof typeof Width];
|
|
19
19
|
|
|
20
|
-
export const
|
|
20
|
+
export const ContainerElement = {
|
|
21
21
|
ARTICLE: "article",
|
|
22
22
|
ASIDE: "aside",
|
|
23
23
|
DIV: "div",
|
|
@@ -29,25 +29,19 @@ export const Element = {
|
|
|
29
29
|
SPAN: "span",
|
|
30
30
|
} as const;
|
|
31
31
|
|
|
32
|
-
export type
|
|
32
|
+
export type ContainerElementType = (typeof ContainerElement)[keyof typeof ContainerElement];
|
|
33
33
|
|
|
34
34
|
export type ContainerProps = Omit<BaseProps, "children"> & {
|
|
35
35
|
children: ReactNode;
|
|
36
36
|
width?: WidthType;
|
|
37
|
-
element?:
|
|
37
|
+
element?: ContainerElementType;
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
const rootClassName = "purpur-container";
|
|
41
41
|
|
|
42
42
|
export const Container = forwardRef<HTMLElement, ContainerProps>(
|
|
43
43
|
(
|
|
44
|
-
{
|
|
45
|
-
children,
|
|
46
|
-
className,
|
|
47
|
-
width = "xxl",
|
|
48
|
-
element: ElementTag = "div" as React.ElementType,
|
|
49
|
-
...props
|
|
50
|
-
},
|
|
44
|
+
{ children, className, width = "xxl", element: ElementTag = "div" as ElementType, ...props },
|
|
51
45
|
ref
|
|
52
46
|
) => {
|
|
53
47
|
const classes = cx([rootClassName, `${rootClassName}--${width}`, className]);
|