@purpurds/paragraph 5.11.0 → 5.11.2
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/paragraph.cjs.js +2 -2
- package/dist/paragraph.cjs.js.map +1 -1
- package/dist/paragraph.d.ts +4 -1
- package/dist/paragraph.d.ts.map +1 -1
- package/dist/paragraph.es.js +4 -3
- package/dist/paragraph.es.js.map +1 -1
- package/package.json +11 -11
- package/src/paragraph.stories.tsx +30 -2
- package/src/paragraph.tsx +3 -1
- package/readme.mdx +0 -69
package/dist/paragraph.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime");function c(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var o={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 i={}.hasOwnProperty;function u(){for(var r="",a=0;a<arguments.length;a++){var e=arguments[a];e&&(r=h(r,s(e)))}return r}function s(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var e in r)i.call(r,e)&&r[e]&&(a=h(a,e));return a}function h(r,a){return a?r?r+" "+a:r+a:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()})(o);var
|
|
5
|
+
*/(function(p){(function(){var i={}.hasOwnProperty;function u(){for(var r="",a=0;a<arguments.length;a++){var e=arguments[a];e&&(r=h(r,s(e)))}return r}function s(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var e in r)i.call(r,e)&&r[e]&&(a=h(a,e));return a}function h(r,a){return a?r?r+" "+a:r+a:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()})(o);var m=o.exports;const f=c(m),t={"purpur-paragraph":"_purpur-paragraph_1rh57_1","purpur-paragraph--disabled":"_purpur-paragraph--disabled_1rh57_7","purpur-paragraph--hyphens":"_purpur-paragraph--hyphens_1rh57_10","purpur-paragraph--negative":"_purpur-paragraph--negative_1rh57_13","purpur-paragraph--paragraph-100":"_purpur-paragraph--paragraph-100_1rh57_16","purpur-paragraph--paragraph-100-medium":"_purpur-paragraph--paragraph-100-medium_1rh57_22","purpur-paragraph--paragraph-100-bold":"_purpur-paragraph--paragraph-100-bold_1rh57_29","purpur-paragraph--paragraph-200":"_purpur-paragraph--paragraph-200_1rh57_36","purpur-paragraph--preamble-100":"_purpur-paragraph--preamble-100_1rh57_42","purpur-paragraph--preamble-200":"_purpur-paragraph--preamble-200_1rh57_48","purpur-paragraph--additional-100":"_purpur-paragraph--additional-100_1rh57_54","purpur-paragraph--additional-100-medium":"_purpur-paragraph--additional-100-medium_1rh57_60","purpur-paragraph--overline-100":"_purpur-paragraph--overline-100_1rh57_67","purpur-paragraph--overline-200":"_purpur-paragraph--overline-200_1rh57_75"},l={PARAGRAPH100:"paragraph-100",PARAGRAPH100MEDIUM:"paragraph-100-medium",PARAGRAPH100BOLD:"paragraph-100-bold",PARAGRAPH200:"paragraph-200",PREAMBLE100:"preamble-100",PREAMBLE200:"preamble-200",ADDITIONAL100:"additional-100",ADDITIONAL100MEDIUM:"additional-100-medium",OVERLINE100:"overline-100",OVERLINE200:"overline-200"},n="purpur-paragraph",g=({["data-testid"]:p,children:i,className:u,disabled:s,enableHyphenation:h=!1,negative:r=!1,variant:a=l.PARAGRAPH100,...e})=>{const _=f([u,t[n],t[`${n}--${a}`],{[t[`${n}--hyphens`]]:h,[t[`${n}--disabled`]]:s,[t[`${n}--negative`]]:r}]);return d.jsx("p",{...e,className:_,"data-testid":p,children:i})};g.displayName="Paragraph";exports.Paragraph=g;exports.ParagraphVariant=l;
|
|
6
6
|
//# sourceMappingURL=paragraph.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paragraph.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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(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 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(null, 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, 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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n PARAGRAPH100: \"paragraph-100\",\n PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n PARAGRAPH100BOLD: \"paragraph-100-bold\",\n PARAGRAPH200: \"paragraph-200\",\n PREAMBLE100: \"preamble-100\",\n PREAMBLE200: \"preamble-200\",\n ADDITIONAL100: \"additional-100\",\n ADDITIONAL100MEDIUM: \"additional-100-medium\",\n OVERLINE100: \"overline-100\",\n OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n [\"data-testid\"]?: string;\n children: ReactNode;\n className?: string;\n enableHyphenation?: boolean;\n negative?: boolean;\n disabled?: boolean;\n variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n [\"data-testid\"]: dataTestid,\n children,\n className
|
|
1
|
+
{"version":3,"file":"paragraph.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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(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 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(null, 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, 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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n PARAGRAPH100: \"paragraph-100\",\n PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n PARAGRAPH100BOLD: \"paragraph-100-bold\",\n PARAGRAPH200: \"paragraph-200\",\n PREAMBLE100: \"preamble-100\",\n PREAMBLE200: \"preamble-200\",\n ADDITIONAL100: \"additional-100\",\n ADDITIONAL100MEDIUM: \"additional-100-medium\",\n OVERLINE100: \"overline-100\",\n OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n [\"data-testid\"]?: string;\n children: ReactNode;\n className?: string;\n enableHyphenation?: boolean;\n negative?: boolean;\n disabled?: boolean;\n variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n [\"data-testid\"]: dataTestid,\n children,\n className,\n disabled,\n enableHyphenation = false,\n negative = false,\n variant = ParagraphVariant.PARAGRAPH100,\n ...props\n}: ParagraphProps) => {\n const classes = c([\n className,\n styles[rootClassName],\n styles[`${rootClassName}--${variant}`],\n {\n [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n [styles[`${rootClassName}--disabled`]]: disabled,\n [styles[`${rootClassName}--negative`]]: negative,\n },\n ]);\n\n return (\n <p {...props} className={classes} data-testid={dataTestid}>\n {children}\n </p>\n );\n};\n\nParagraph.displayName = \"Paragraph\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","ParagraphVariant","rootClassName","Paragraph","dataTestid","children","className","disabled","enableHyphenation","negative","variant","props","c","styles","jsx"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAWF,CAAG,CAAC,EAE/C,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAOA,EAGR,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAASK,CAAG,GAIpC,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,ilCCvEaU,EAAmB,CAC9B,aAAc,gBACd,mBAAoB,uBACpB,iBAAkB,qBAClB,aAAc,gBACd,YAAa,eACb,YAAa,eACb,cAAe,iBACf,oBAAqB,wBACrB,YAAa,eACb,YAAa,cACf,EAcMC,EAAgB,mBAETC,EAAY,CAAC,CACxB,CAAC,eAAgBC,EACjB,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,kBAAAC,EAAoB,GACpB,SAAAC,EAAW,GACX,QAAAC,EAAUT,EAAiB,aAC3B,GAAGU,CACL,IAAsB,CACpB,MAAMnB,EAAUoB,EAAE,CAChBN,EACAO,EAAOX,CAAa,EACpBW,EAAO,GAAGX,CAAa,KAAKQ,CAAO,EAAE,EACrC,CACE,CAACG,EAAO,GAAGX,CAAa,WAAW,CAAC,EAAGM,EACvC,CAACK,EAAO,GAAGX,CAAa,YAAY,CAAC,EAAGK,EACxC,CAACM,EAAO,GAAGX,CAAa,YAAY,CAAC,EAAGO,CAC1C,CAAA,CACD,EAGC,OAAAK,MAAC,KAAG,GAAGH,EAAO,UAAWnB,EAAS,cAAaY,EAC5C,SAAAC,CACH,CAAA,CAEJ,EAEAF,EAAU,YAAc","x_google_ignoreList":[0]}
|
package/dist/paragraph.d.ts
CHANGED
|
@@ -22,5 +22,8 @@ export type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {
|
|
|
22
22
|
disabled?: boolean;
|
|
23
23
|
variant?: ParagraphVariant;
|
|
24
24
|
};
|
|
25
|
-
export declare const Paragraph:
|
|
25
|
+
export declare const Paragraph: {
|
|
26
|
+
({ ["data-testid"]: dataTestid, children, className, disabled, enableHyphenation, negative, variant, ...props }: ParagraphProps): React.JSX.Element;
|
|
27
|
+
displayName: string;
|
|
28
|
+
};
|
|
26
29
|
//# sourceMappingURL=paragraph.d.ts.map
|
package/dist/paragraph.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../src/paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAWnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,GAAG;IACvE,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../src/paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAWnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,GAAG;IACvE,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,SAAS;qHASnB,cAAc;;CAiBhB,CAAC"}
|
package/dist/paragraph.es.js
CHANGED
|
@@ -65,10 +65,10 @@ const m = /* @__PURE__ */ _(d), t = {
|
|
|
65
65
|
ADDITIONAL100MEDIUM: "additional-100-medium",
|
|
66
66
|
OVERLINE100: "overline-100",
|
|
67
67
|
OVERLINE200: "overline-200"
|
|
68
|
-
}, h = "purpur-paragraph",
|
|
68
|
+
}, h = "purpur-paragraph", f = ({
|
|
69
69
|
["data-testid"]: p,
|
|
70
70
|
children: s,
|
|
71
|
-
className: u
|
|
71
|
+
className: u,
|
|
72
72
|
disabled: i,
|
|
73
73
|
enableHyphenation: n = !1,
|
|
74
74
|
negative: r = !1,
|
|
@@ -87,8 +87,9 @@ const m = /* @__PURE__ */ _(d), t = {
|
|
|
87
87
|
]);
|
|
88
88
|
return /* @__PURE__ */ g("p", { ...e, className: l, "data-testid": p, children: s });
|
|
89
89
|
};
|
|
90
|
+
f.displayName = "Paragraph";
|
|
90
91
|
export {
|
|
91
|
-
|
|
92
|
+
f as Paragraph,
|
|
92
93
|
c as ParagraphVariant
|
|
93
94
|
};
|
|
94
95
|
//# sourceMappingURL=paragraph.es.js.map
|
package/dist/paragraph.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paragraph.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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(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 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(null, 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, 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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n PARAGRAPH100: \"paragraph-100\",\n PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n PARAGRAPH100BOLD: \"paragraph-100-bold\",\n PARAGRAPH200: \"paragraph-200\",\n PREAMBLE100: \"preamble-100\",\n PREAMBLE200: \"preamble-200\",\n ADDITIONAL100: \"additional-100\",\n ADDITIONAL100MEDIUM: \"additional-100-medium\",\n OVERLINE100: \"overline-100\",\n OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n [\"data-testid\"]?: string;\n children: ReactNode;\n className?: string;\n enableHyphenation?: boolean;\n negative?: boolean;\n disabled?: boolean;\n variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n [\"data-testid\"]: dataTestid,\n children,\n className
|
|
1
|
+
{"version":3,"file":"paragraph.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js","../src/paragraph.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(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 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(null, 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, 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, { ParamHTMLAttributes, ReactNode } from \"react\";\nimport c from \"classnames\";\n\nimport styles from \"./paragraph.module.scss\";\n\nexport const ParagraphVariant = {\n PARAGRAPH100: \"paragraph-100\",\n PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n PARAGRAPH100BOLD: \"paragraph-100-bold\",\n PARAGRAPH200: \"paragraph-200\",\n PREAMBLE100: \"preamble-100\",\n PREAMBLE200: \"preamble-200\",\n ADDITIONAL100: \"additional-100\",\n ADDITIONAL100MEDIUM: \"additional-100-medium\",\n OVERLINE100: \"overline-100\",\n OVERLINE200: \"overline-200\",\n} as const;\n\nexport type ParagraphVariant = (typeof ParagraphVariant)[keyof typeof ParagraphVariant];\n\nexport type ParagraphProps = ParamHTMLAttributes<HTMLParagraphElement> & {\n [\"data-testid\"]?: string;\n children: ReactNode;\n className?: string;\n enableHyphenation?: boolean;\n negative?: boolean;\n disabled?: boolean;\n variant?: ParagraphVariant;\n};\n\nconst rootClassName = \"purpur-paragraph\";\n\nexport const Paragraph = ({\n [\"data-testid\"]: dataTestid,\n children,\n className,\n disabled,\n enableHyphenation = false,\n negative = false,\n variant = ParagraphVariant.PARAGRAPH100,\n ...props\n}: ParagraphProps) => {\n const classes = c([\n className,\n styles[rootClassName],\n styles[`${rootClassName}--${variant}`],\n {\n [styles[`${rootClassName}--hyphens`]]: enableHyphenation,\n [styles[`${rootClassName}--disabled`]]: disabled,\n [styles[`${rootClassName}--negative`]]: negative,\n },\n ]);\n\n return (\n <p {...props} className={classes} data-testid={dataTestid}>\n {children}\n </p>\n );\n};\n\nParagraph.displayName = \"Paragraph\";\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","ParagraphVariant","rootClassName","Paragraph","dataTestid","children","className","disabled","enableHyphenation","negative","variant","props","c","styles","jsx"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAWF,CAAG,CAAC;AAAA,MAE/C;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAOA;AAGR,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAASK,CAAG;AAIpC,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;;;;;;;;;GCvEaU,IAAmB;AAAA,EAC9B,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,aAAa;AACf,GAcMC,IAAgB,oBAETC,IAAY,CAAC;AAAA,EACxB,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAUT,EAAiB;AAAA,EAC3B,GAAGU;AACL,MAAsB;AACpB,QAAMnB,IAAUoB,EAAE;AAAA,IAChBN;AAAA,IACAO,EAAOX,CAAa;AAAA,IACpBW,EAAO,GAAGX,CAAa,KAAKQ,CAAO,EAAE;AAAA,IACrC;AAAA,MACE,CAACG,EAAO,GAAGX,CAAa,WAAW,CAAC,GAAGM;AAAA,MACvC,CAACK,EAAO,GAAGX,CAAa,YAAY,CAAC,GAAGK;AAAA,MACxC,CAACM,EAAO,GAAGX,CAAa,YAAY,CAAC,GAAGO;AAAA,IAC1C;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAK,EAAC,OAAG,GAAGH,GAAO,WAAWnB,GAAS,eAAaY,GAC5C,UAAAC,EACH,CAAA;AAEJ;AAEAF,EAAU,cAAc;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/paragraph",
|
|
3
|
-
"version": "5.11.
|
|
3
|
+
"version": "5.11.2",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/paragraph.cjs.js",
|
|
6
6
|
"types": "./dist/paragraph.d.ts",
|
|
@@ -16,29 +16,29 @@
|
|
|
16
16
|
"source": "src/paragraph.tsx",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/tokens": "5.11.
|
|
19
|
+
"@purpurds/tokens": "5.11.2"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
23
|
-
"@storybook/
|
|
24
|
-
"
|
|
23
|
+
"@storybook/react": "^8.2.6",
|
|
24
|
+
"storybook": "^8.2.6",
|
|
25
25
|
"@telia/base-rig": "~8.2.0",
|
|
26
26
|
"@telia/react-rig": "~3.2.0",
|
|
27
27
|
"@testing-library/dom": "~9.3.3",
|
|
28
28
|
"@testing-library/jest-dom": "~6.4.0",
|
|
29
29
|
"@testing-library/react": "~14.3.0",
|
|
30
30
|
"@types/node": "20.12.12",
|
|
31
|
-
"@types/react-dom": "
|
|
32
|
-
"@types/react": "
|
|
31
|
+
"@types/react-dom": "^18.3.0",
|
|
32
|
+
"@types/react": "^18.3.3",
|
|
33
33
|
"eslint-plugin-testing-library": "~6.2.0",
|
|
34
|
-
"eslint": "
|
|
34
|
+
"eslint": "^8.57.0",
|
|
35
35
|
"jsdom": "~22.1.0",
|
|
36
36
|
"lint-staged": "~10.5.3",
|
|
37
37
|
"prettier": "~2.8.8",
|
|
38
|
-
"react-dom": "
|
|
39
|
-
"react": "
|
|
40
|
-
"typescript": "
|
|
41
|
-
"vite": "
|
|
38
|
+
"react-dom": "^18.3.1",
|
|
39
|
+
"react": "^18.3.1",
|
|
40
|
+
"typescript": "^5.5.4",
|
|
41
|
+
"vite": "5.3.4",
|
|
42
42
|
"vitest": "~1.5.0",
|
|
43
43
|
"@purpurds/component-rig": "1.0.0"
|
|
44
44
|
},
|
|
@@ -3,10 +3,30 @@ import type { Meta, StoryObj } from "@storybook/react";
|
|
|
3
3
|
|
|
4
4
|
import { Paragraph, ParagraphVariant } from "./paragraph";
|
|
5
5
|
|
|
6
|
-
const meta
|
|
6
|
+
const meta = {
|
|
7
7
|
title: "Components/Paragraph",
|
|
8
8
|
component: Paragraph,
|
|
9
9
|
parameters: {
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component: `>Note that the responsive behaviour of this component is more fluid than the specification in Figma,
|
|
13
|
+
meaning that it adheres to the min and max sizes specified, but in viewports in-between in will be a
|
|
14
|
+
ratio to the viewport with rather than a fixed size.
|
|
15
|
+
|
|
16
|
+
Create a block level element with text content styled as a paragraph.
|
|
17
|
+
|
|
18
|
+
- paragraph-100 the default paragraph style for body texts
|
|
19
|
+
- paragraph-200 has extended line height for long texts, e.g. blog or article texts
|
|
20
|
+
|
|
21
|
+
### Accessibility
|
|
22
|
+
|
|
23
|
+
Paragraphs make a page more accessible and physically separated from adjacent blocks through blank lines. Assistive technology supports shortcuts to navigate through next and previous paragraph. For more detailed accessibilty guidelines See [W3Cs information about p element](https://www.w3.org/TR/2010/WD-html5-20101019/grouping-content.html#the-p-element).
|
|
24
|
+
|
|
25
|
+
### Inline elements
|
|
26
|
+
|
|
27
|
+
Inline elements can be used inside paragraph to highlight a specific part of text. They add an effect on the text, for example bolding or italics, and for screen reader the pronounciation is be different. Tags marking an inline element can be placed inside the paragraph tags without breaking the flow of the content.`,
|
|
28
|
+
},
|
|
29
|
+
},
|
|
10
30
|
design: [
|
|
11
31
|
{
|
|
12
32
|
name: "Paragraph",
|
|
@@ -19,6 +39,13 @@ const meta: Meta<typeof Paragraph> = {
|
|
|
19
39
|
variant: {
|
|
20
40
|
options: Object.values(ParagraphVariant),
|
|
21
41
|
control: { type: "select" },
|
|
42
|
+
table: {
|
|
43
|
+
type: {
|
|
44
|
+
summary: Object.values(ParagraphVariant)
|
|
45
|
+
.map((x) => `"${x}"`)
|
|
46
|
+
.join(" | "),
|
|
47
|
+
},
|
|
48
|
+
},
|
|
22
49
|
},
|
|
23
50
|
enableHyphenation: {
|
|
24
51
|
control: { type: "boolean" },
|
|
@@ -31,7 +58,8 @@ const meta: Meta<typeof Paragraph> = {
|
|
|
31
58
|
children: { control: { type: "text" } },
|
|
32
59
|
},
|
|
33
60
|
args: { negative: false },
|
|
34
|
-
}
|
|
61
|
+
} satisfies Meta<typeof Paragraph>;
|
|
62
|
+
|
|
35
63
|
export default meta;
|
|
36
64
|
type Story = StoryObj<typeof Paragraph>;
|
|
37
65
|
|
package/src/paragraph.tsx
CHANGED
|
@@ -33,7 +33,7 @@ const rootClassName = "purpur-paragraph";
|
|
|
33
33
|
export const Paragraph = ({
|
|
34
34
|
["data-testid"]: dataTestid,
|
|
35
35
|
children,
|
|
36
|
-
className
|
|
36
|
+
className,
|
|
37
37
|
disabled,
|
|
38
38
|
enableHyphenation = false,
|
|
39
39
|
negative = false,
|
|
@@ -57,3 +57,5 @@ export const Paragraph = ({
|
|
|
57
57
|
</p>
|
|
58
58
|
);
|
|
59
59
|
};
|
|
60
|
+
|
|
61
|
+
Paragraph.displayName = "Paragraph";
|
package/readme.mdx
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
|
|
2
|
-
|
|
3
|
-
import * as ParagraphStories from "./src/paragraph.stories";
|
|
4
|
-
import packageInfo from "./package.json";
|
|
5
|
-
|
|
6
|
-
<Meta name="Docs" title="Components/Paragraph" of={ParagraphStories} />
|
|
7
|
-
|
|
8
|
-
# Paragraph
|
|
9
|
-
|
|
10
|
-
<Subtitle>Version {packageInfo.version}</Subtitle>
|
|
11
|
-
>Note that the responsive behaviour of this component is more fluid than the specification in Figma,
|
|
12
|
-
meaning that it adheres to the min and max sizes specified, but in viewports in-between in will be a
|
|
13
|
-
ratio to the viewport with rather than a fixed size.
|
|
14
|
-
|
|
15
|
-
Create a block level element with text content styled as a paragraph.
|
|
16
|
-
|
|
17
|
-
- `paragraph-100` the default paragraph style for body texts
|
|
18
|
-
- `paragraph-200` has extended line height for long texts, e.g. blog or article texts
|
|
19
|
-
|
|
20
|
-
### Accessibility
|
|
21
|
-
|
|
22
|
-
Paragraphs make a page more accessible and physically separated from adjacent blocks through blank lines. Assistive technology supports shortcuts to navigate through next and previous paragraph. For more detailed accessibilty guidelines See [W3Cs information about p element](https://www.w3.org/TR/2010/WD-html5-20101019/grouping-content.html#the-p-element).
|
|
23
|
-
|
|
24
|
-
### Inline elements
|
|
25
|
-
|
|
26
|
-
Inline elements can be used inside paragraph to highlight a specific part of text. They add an effect on the text, for example bolding or italics, and for screen reader the pronounciation is be different. Tags marking an inline element can be placed inside the paragraph tags without breaking the flow of the content. The most commonly used inline elements are presented below.
|
|
27
|
-
|
|
28
|
-
| Element | Tag | Description |
|
|
29
|
-
| ------------------ | ---------- | -------------------------------------------------------------------------------- |
|
|
30
|
-
| Bring Attention To | `<b>` | Used to draw the reader's attention to the element's contents. |
|
|
31
|
-
| Citation | `<cite>` | Used to describe a reference to a cited creative work. |
|
|
32
|
-
| Emphasis | `<em>` | Marks text that has stress emphasis. |
|
|
33
|
-
| Idiomatic Text | `<i>` | Represents a range of text that is set off from the normal text for some reason. |
|
|
34
|
-
| Strong Importance | `<strong>` | Indicates that its contents have strong importance, seriousness, or urgency. |
|
|
35
|
-
| Time | `<time>` | Represents a specific period in time. |
|
|
36
|
-
|
|
37
|
-
### Showcase
|
|
38
|
-
|
|
39
|
-
<Primary />
|
|
40
|
-
|
|
41
|
-
### Properties
|
|
42
|
-
|
|
43
|
-
<ArgTypes />
|
|
44
|
-
|
|
45
|
-
### Installation
|
|
46
|
-
|
|
47
|
-
#### Via NPM
|
|
48
|
-
|
|
49
|
-
Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
|
|
50
|
-
|
|
51
|
-
In MyApp.tsx
|
|
52
|
-
|
|
53
|
-
```tsx
|
|
54
|
-
import "@purpurds/purpur/styles";
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
In MyComponent.tsx
|
|
58
|
-
|
|
59
|
-
```tsx
|
|
60
|
-
import { Paragraph } from "@purpurds/purpur";
|
|
61
|
-
|
|
62
|
-
export const MyComponent = () => {
|
|
63
|
-
return (
|
|
64
|
-
<div>
|
|
65
|
-
<Paragraph {...someProps}>Some content</Paragraph>
|
|
66
|
-
</div>
|
|
67
|
-
);
|
|
68
|
-
};
|
|
69
|
-
```
|