@purpurds/color-dot 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/color-dot.cjs.js +2 -2
- package/dist/color-dot.cjs.js.map +1 -1
- package/dist/color-dot.d.ts +2 -8
- package/dist/color-dot.d.ts.map +1 -1
- package/dist/color-dot.es.js +11 -17
- package/dist/color-dot.es.js.map +1 -1
- package/package.json +11 -11
- package/src/color-dot.stories.tsx +11 -11
- package/src/color-dot.tsx +2 -8
- package/readme.mdx +0 -40
package/dist/color-dot.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 l=require("react/jsx-runtime");function d(o){return o&&o.__esModule&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o}var i={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(
|
|
5
|
+
*/(function(o){(function(){var u={}.hasOwnProperty;function s(){for(var t="",r=0;r<arguments.length;r++){var n=arguments[r];n&&(t=e(t,p.call(this,n)))}return t}function p(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return s.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var r="";for(var n in t)u.call(t,n)&&t[n]&&(r=e(r,this&&this[n]||n));return r}function e(t,r){return r?t?t+" "+r:t+r:t}o.exports?(s.default=s,o.exports=s):window.classNames=s})()})(i);var a=i.exports;const f=d(a),_={"purpur-color-dot":"_purpur-color-dot_1n98k_1","purpur-color-dot--xs":"_purpur-color-dot--xs_1n98k_6","purpur-color-dot--sm":"_purpur-color-dot--sm_1n98k_9","purpur-color-dot--md":"_purpur-color-dot--md_1n98k_12","purpur-color-dot--lg":"_purpur-color-dot--lg_1n98k_15","purpur-color-dot--with-border":"_purpur-color-dot--with-border_1n98k_18"},m=f.bind(_),c="purpur-color-dot",b=["xs","sm","md","lg"],h=({color:o,["data-testid"]:u,size:s,withBorder:p,className:e,...t})=>l.jsx("div",{...t,className:m([e,c,`${c}--${s}`,{[`${c}--with-border`]:p}]),"data-testid":u,style:{backgroundColor:o}});exports.COLOR_DOT_SIZE=b;exports.ColorDot=h;
|
|
6
6
|
//# sourceMappingURL=color-dot.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-dot.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/color-dot.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, { DetailedHTMLProps, HTMLAttributes } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE =
|
|
1
|
+
{"version":3,"file":"color-dot.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/color-dot.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, { DetailedHTMLProps, HTMLAttributes } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE = [\"xs\", \"sm\", \"md\", \"lg\"] as const;\n\nexport type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];\n\ntype InheritedProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\nexport type ColorDotProps = {\n color: string;\n [\"data-testid\"]?: string;\n size: ColorDotSize;\n withBorder?: boolean;\n} & InheritedProps;\n\nexport const ColorDot = ({\n color,\n [\"data-testid\"]: dataTestid,\n size,\n withBorder,\n className,\n ...props\n}: ColorDotProps) => (\n <div\n {...props}\n className={cx([\n className,\n rootClassName,\n `${rootClassName}--${size}`,\n { [`${rootClassName}--with-border`]: withBorder },\n ])}\n data-testid={dataTestid}\n style={{\n backgroundColor: color,\n }}\n />\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","COLOR_DOT_SIZE","ColorDot","color","dataTestid","size","withBorder","className","props","jsx"],"mappings":";;;;gBAOC,UAAY,CAGZ,IAAIA,EAAS,CAAE,EAAC,eAEhB,SAASC,GAAc,CAGtB,QAFIC,EAAU,GAELC,EAAI,EAAGA,EAAI,UAAU,OAAQA,IAAK,CAC1C,IAAIC,EAAM,UAAUD,CAAC,EACjBC,IACHF,EAAUG,EAAYH,EAASI,EAAW,KAAK,KAAMF,CAAG,CAAC,EAE1D,CAED,OAAOF,CACP,CAED,SAASI,EAAYF,EAAK,CACzB,GAAI,OAAOA,GAAQ,UAAY,OAAOA,GAAQ,SAC7C,OAAO,MAAQ,KAAKA,CAAG,GAAKA,EAG7B,GAAI,OAAOA,GAAQ,SAClB,MAAO,GAGR,GAAI,MAAM,QAAQA,CAAG,EACpB,OAAOH,EAAW,MAAM,KAAMG,CAAG,EAGlC,GAAIA,EAAI,WAAa,OAAO,UAAU,UAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe,EAClG,OAAOA,EAAI,WAGZ,IAAIF,EAAU,GAEd,QAASK,KAAOH,EACXJ,EAAO,KAAKI,EAAKG,CAAG,GAAKH,EAAIG,CAAG,IACnCL,EAAUG,EAAYH,EAAS,MAAQ,KAAKK,CAAG,GAAKA,CAAG,GAIzD,OAAOL,CACP,CAED,SAASG,EAAaG,EAAOC,EAAU,CACtC,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAO,SAC3CT,EAAW,QAAUA,EACrBS,EAAA,QAAiBT,GAOjB,OAAO,WAAaA,CAEtB,kYCvEMU,EAAKC,EAAE,KAAKC,CAAM,EAClBC,EAAgB,mBAETC,EAAiB,CAAC,KAAM,KAAM,KAAM,IAAI,EAaxCC,EAAW,CAAC,CACvB,MAAAC,EACA,CAAC,eAAgBC,EACjB,KAAAC,EACA,WAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IACEC,EAAA,IAAC,MAAA,CACE,GAAGD,EACJ,UAAWX,EAAG,CACZU,EACAP,EACA,GAAGA,CAAa,KAAKK,CAAI,GACzB,CAAE,CAAC,GAAGL,CAAa,eAAe,EAAGM,CAAW,CAAA,CACjD,EACD,cAAaF,EACb,MAAO,CACL,gBAAiBD,CACnB,CAAA,CACF","x_google_ignoreList":[0]}
|
package/dist/color-dot.d.ts
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import { default as React, DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
2
2
|
|
|
3
|
-
export declare const COLOR_DOT_SIZE:
|
|
4
|
-
|
|
5
|
-
readonly SM: "sm";
|
|
6
|
-
readonly MD: "md";
|
|
7
|
-
readonly LG: "lg";
|
|
8
|
-
};
|
|
9
|
-
export declare const colorDotSizes: ("xs" | "sm" | "md" | "lg")[];
|
|
10
|
-
export type ColorDotSize = (typeof COLOR_DOT_SIZE)[keyof typeof COLOR_DOT_SIZE];
|
|
3
|
+
export declare const COLOR_DOT_SIZE: readonly ["xs", "sm", "md", "lg"];
|
|
4
|
+
export type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];
|
|
11
5
|
type InheritedProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
12
6
|
export type ColorDotProps = {
|
|
13
7
|
color: string;
|
package/dist/color-dot.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-dot.d.ts","sourceRoot":"","sources":["../src/color-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQjE,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"color-dot.d.ts","sourceRoot":"","sources":["../src/color-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQjE,eAAO,MAAM,cAAc,mCAAoC,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,KAAK,cAAc,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,QAAQ,kFAOlB,aAAa,sBAcf,CAAC"}
|
package/dist/color-dot.es.js
CHANGED
|
@@ -10,11 +10,11 @@ var i = { exports: {} };
|
|
|
10
10
|
*/
|
|
11
11
|
(function(o) {
|
|
12
12
|
(function() {
|
|
13
|
-
var
|
|
13
|
+
var e = {}.hasOwnProperty;
|
|
14
14
|
function s() {
|
|
15
15
|
for (var r = "", t = 0; t < arguments.length; t++) {
|
|
16
16
|
var n = arguments[t];
|
|
17
|
-
n && (r =
|
|
17
|
+
n && (r = u(r, p.call(this, n)));
|
|
18
18
|
}
|
|
19
19
|
return r;
|
|
20
20
|
}
|
|
@@ -29,10 +29,10 @@ var i = { exports: {} };
|
|
|
29
29
|
return r.toString();
|
|
30
30
|
var t = "";
|
|
31
31
|
for (var n in r)
|
|
32
|
-
|
|
32
|
+
e.call(r, n) && r[n] && (t = u(t, this && this[n] || n));
|
|
33
33
|
return t;
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function u(r, t) {
|
|
36
36
|
return t ? r ? r + " " + t : r + t : r;
|
|
37
37
|
}
|
|
38
38
|
o.exports ? (s.default = s, o.exports = s) : window.classNames = s;
|
|
@@ -46,37 +46,31 @@ const f = /* @__PURE__ */ d(a), _ = {
|
|
|
46
46
|
"purpur-color-dot--md": "_purpur-color-dot--md_1n98k_12",
|
|
47
47
|
"purpur-color-dot--lg": "_purpur-color-dot--lg_1n98k_15",
|
|
48
48
|
"purpur-color-dot--with-border": "_purpur-color-dot--with-border_1n98k_18"
|
|
49
|
-
}, m = f.bind(_), c = "purpur-color-dot",
|
|
50
|
-
XS: "xs",
|
|
51
|
-
SM: "sm",
|
|
52
|
-
MD: "md",
|
|
53
|
-
LG: "lg"
|
|
54
|
-
}, y = Object.values(h), O = ({
|
|
49
|
+
}, m = f.bind(_), c = "purpur-color-dot", b = ["xs", "sm", "md", "lg"], y = ({
|
|
55
50
|
color: o,
|
|
56
|
-
["data-testid"]:
|
|
51
|
+
["data-testid"]: e,
|
|
57
52
|
size: s,
|
|
58
53
|
withBorder: p,
|
|
59
|
-
className:
|
|
54
|
+
className: u,
|
|
60
55
|
...r
|
|
61
56
|
}) => /* @__PURE__ */ l(
|
|
62
57
|
"div",
|
|
63
58
|
{
|
|
64
59
|
...r,
|
|
65
60
|
className: m([
|
|
66
|
-
|
|
61
|
+
u,
|
|
67
62
|
c,
|
|
68
63
|
`${c}--${s}`,
|
|
69
64
|
{ [`${c}--with-border`]: p }
|
|
70
65
|
]),
|
|
71
|
-
"data-testid":
|
|
66
|
+
"data-testid": e,
|
|
72
67
|
style: {
|
|
73
68
|
backgroundColor: o
|
|
74
69
|
}
|
|
75
70
|
}
|
|
76
71
|
);
|
|
77
72
|
export {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
y as colorDotSizes
|
|
73
|
+
b as COLOR_DOT_SIZE,
|
|
74
|
+
y as ColorDot
|
|
81
75
|
};
|
|
82
76
|
//# sourceMappingURL=color-dot.es.js.map
|
package/dist/color-dot.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-dot.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/color-dot.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, { DetailedHTMLProps, HTMLAttributes } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE =
|
|
1
|
+
{"version":3,"file":"color-dot.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/color-dot.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, { DetailedHTMLProps, HTMLAttributes } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./color-dot.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-color-dot\";\n\nexport const COLOR_DOT_SIZE = [\"xs\", \"sm\", \"md\", \"lg\"] as const;\n\nexport type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];\n\ntype InheritedProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\nexport type ColorDotProps = {\n color: string;\n [\"data-testid\"]?: string;\n size: ColorDotSize;\n withBorder?: boolean;\n} & InheritedProps;\n\nexport const ColorDot = ({\n color,\n [\"data-testid\"]: dataTestid,\n size,\n withBorder,\n className,\n ...props\n}: ColorDotProps) => (\n <div\n {...props}\n className={cx([\n className,\n rootClassName,\n `${rootClassName}--${size}`,\n { [`${rootClassName}--with-border`]: withBorder },\n ])}\n data-testid={dataTestid}\n style={{\n backgroundColor: color,\n }}\n />\n);\n"],"names":["hasOwn","classNames","classes","i","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","COLOR_DOT_SIZE","ColorDot","color","dataTestid","size","withBorder","className","props","jsx"],"mappings":";;;;;;;;;;;AAOA,GAAC,WAAY;AAGZ,QAAIA,IAAS,CAAE,EAAC;AAEhB,aAASC,IAAc;AAGtB,eAFIC,IAAU,IAELC,IAAI,GAAGA,IAAI,UAAU,QAAQA,KAAK;AAC1C,YAAIC,IAAM,UAAUD,CAAC;AACrB,QAAIC,MACHF,IAAUG,EAAYH,GAASI,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,MAE1D;AAED,aAAOF;AAAA,IACP;AAED,aAASI,EAAYF,GAAK;AACzB,UAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,eAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,UAAI,OAAOA,KAAQ;AAClB,eAAO;AAGR,UAAI,MAAM,QAAQA,CAAG;AACpB,eAAOH,EAAW,MAAM,MAAMG,CAAG;AAGlC,UAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,eAAOA,EAAI;AAGZ,UAAIF,IAAU;AAEd,eAASK,KAAOH;AACf,QAAIJ,EAAO,KAAKI,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCL,IAAUG,EAAYH,GAAS,QAAQ,KAAKK,CAAG,KAAKA,CAAG;AAIzD,aAAOL;AAAA,IACP;AAED,aAASG,EAAaG,GAAOC,GAAU;AACtC,aAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,IAQR;AAED,IAAqCE,EAAO,WAC3CT,EAAW,UAAUA,GACrBS,EAAA,UAAiBT,KAOjB,OAAO,aAAaA;AAAA,EAEtB;;;;;;;;;;GCvEMU,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,oBAETC,IAAiB,CAAC,MAAM,MAAM,MAAM,IAAI,GAaxCC,IAAW,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,CAAC,gBAAgBC;AAAA,EACjB,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWX,EAAG;AAAA,MACZU;AAAA,MACAP;AAAA,MACA,GAAGA,CAAa,KAAKK,CAAI;AAAA,MACzB,EAAE,CAAC,GAAGL,CAAa,eAAe,GAAGM,EAAW;AAAA,IAAA,CACjD;AAAA,IACD,eAAaF;AAAA,IACb,OAAO;AAAA,MACL,iBAAiBD;AAAA,IACnB;AAAA,EAAA;AACF;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/color-dot",
|
|
3
|
-
"version": "5.11.
|
|
3
|
+
"version": "5.11.2",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/color-dot.cjs.js",
|
|
6
6
|
"types": "./dist/color-dot.d.ts",
|
|
@@ -15,29 +15,29 @@
|
|
|
15
15
|
"source": "src/color-dot.tsx",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"classnames": "~2.5.0",
|
|
18
|
-
"@purpurds/tokens": "5.11.
|
|
18
|
+
"@purpurds/tokens": "5.11.2"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
22
|
-
"@storybook/
|
|
23
|
-
"
|
|
22
|
+
"@storybook/react": "^8.2.6",
|
|
23
|
+
"storybook": "^8.2.6",
|
|
24
24
|
"@telia/base-rig": "~8.2.0",
|
|
25
25
|
"@telia/react-rig": "~3.2.0",
|
|
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
29
|
"@types/node": "20.12.12",
|
|
30
|
-
"@types/react-dom": "
|
|
31
|
-
"@types/react": "
|
|
30
|
+
"@types/react-dom": "^18.3.0",
|
|
31
|
+
"@types/react": "^18.3.3",
|
|
32
32
|
"eslint-plugin-testing-library": "~6.2.0",
|
|
33
|
-
"eslint": "
|
|
33
|
+
"eslint": "^8.57.0",
|
|
34
34
|
"jsdom": "~22.1.0",
|
|
35
35
|
"lint-staged": "~10.5.3",
|
|
36
36
|
"prettier": "~2.8.8",
|
|
37
|
-
"react-dom": "
|
|
38
|
-
"react": "
|
|
39
|
-
"typescript": "
|
|
40
|
-
"vite": "
|
|
37
|
+
"react-dom": "^18.3.1",
|
|
38
|
+
"react": "^18.3.1",
|
|
39
|
+
"typescript": "^5.5.4",
|
|
40
|
+
"vite": "5.3.4",
|
|
41
41
|
"vitest": "~1.5.0",
|
|
42
42
|
"@purpurds/component-rig": "1.0.0"
|
|
43
43
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { COLOR_DOT_SIZE, ColorDot } from "./color-dot";
|
|
4
4
|
|
|
5
|
-
const meta
|
|
5
|
+
const meta = {
|
|
6
6
|
title: "Components/ColorDot",
|
|
7
7
|
component: ColorDot,
|
|
8
8
|
parameters: {
|
|
@@ -10,27 +10,27 @@ const meta: Meta<typeof ColorDot> = {
|
|
|
10
10
|
{
|
|
11
11
|
name: "ColorDot",
|
|
12
12
|
type: "figma",
|
|
13
|
-
url:
|
|
14
|
-
"https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-Library?type=design&node-id=15231%3A11910&mode=design&t=TTWh3P41D9X0QeNO-1",
|
|
13
|
+
url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-Library?type=design&node-id=15231%3A11910&mode=design&t=TTWh3P41D9X0QeNO-1",
|
|
15
14
|
},
|
|
16
15
|
],
|
|
17
16
|
},
|
|
18
17
|
argTypes: {
|
|
19
18
|
color: {
|
|
20
|
-
control:
|
|
19
|
+
control: "color",
|
|
21
20
|
},
|
|
22
21
|
size: {
|
|
23
|
-
control:
|
|
24
|
-
options:
|
|
22
|
+
control: "select",
|
|
23
|
+
options: COLOR_DOT_SIZE,
|
|
24
|
+
table: { type: { summary: COLOR_DOT_SIZE.map((x) => `"${x}"`).join(" | ") } },
|
|
25
25
|
},
|
|
26
26
|
withBorder: {
|
|
27
|
-
control:
|
|
27
|
+
control: "boolean",
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
}
|
|
31
|
-
export default meta;
|
|
30
|
+
} satisfies Meta<typeof ColorDot>;
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
export default meta;
|
|
33
|
+
type Story = StoryObj<typeof meta>;
|
|
34
34
|
|
|
35
35
|
export const Showcase: Story = {
|
|
36
36
|
args: {
|
package/src/color-dot.tsx
CHANGED
|
@@ -6,15 +6,9 @@ import styles from "./color-dot.module.scss";
|
|
|
6
6
|
const cx = c.bind(styles);
|
|
7
7
|
const rootClassName = "purpur-color-dot";
|
|
8
8
|
|
|
9
|
-
export const COLOR_DOT_SIZE =
|
|
10
|
-
XS: "xs",
|
|
11
|
-
SM: "sm",
|
|
12
|
-
MD: "md",
|
|
13
|
-
LG: "lg",
|
|
14
|
-
} as const;
|
|
9
|
+
export const COLOR_DOT_SIZE = ["xs", "sm", "md", "lg"] as const;
|
|
15
10
|
|
|
16
|
-
export
|
|
17
|
-
export type ColorDotSize = (typeof COLOR_DOT_SIZE)[keyof typeof COLOR_DOT_SIZE];
|
|
11
|
+
export type ColorDotSize = (typeof COLOR_DOT_SIZE)[number];
|
|
18
12
|
|
|
19
13
|
type InheritedProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
20
14
|
|
package/readme.mdx
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Meta, Stories, ArgTypes, Primary, Title, Subtitle } from "@storybook/blocks";
|
|
2
|
-
|
|
3
|
-
import * as ColorDotStories from "./src/color-dot.stories";
|
|
4
|
-
import packageInfo from "./package.json";
|
|
5
|
-
|
|
6
|
-
<Meta name="Docs" title="Components/ColorDot" of={ColorDotStories} />
|
|
7
|
-
|
|
8
|
-
# ColorDot
|
|
9
|
-
|
|
10
|
-
<Subtitle>Version {packageInfo.version}</Subtitle>
|
|
11
|
-
|
|
12
|
-
### Showcase
|
|
13
|
-
|
|
14
|
-
<Primary />
|
|
15
|
-
|
|
16
|
-
### Properties
|
|
17
|
-
|
|
18
|
-
<ArgTypes />
|
|
19
|
-
|
|
20
|
-
### Installation
|
|
21
|
-
|
|
22
|
-
#### Via NPM
|
|
23
|
-
|
|
24
|
-
Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
|
|
25
|
-
|
|
26
|
-
In MyApp.tsx
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import "@purpurds/purpur/styles";
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
In MyComponent.tsx
|
|
33
|
-
|
|
34
|
-
```tsx
|
|
35
|
-
import { ColorDot } from "@purpurds/purpur";
|
|
36
|
-
|
|
37
|
-
export const MyComponent = () => {
|
|
38
|
-
return <ColorDot color="#000000" size="sm" withBorder />;
|
|
39
|
-
};
|
|
40
|
-
```
|