storybook-color-picker - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

 # Changelog
 
+### v2.0.2
+
+29.06.2021.
+
+**Added**
+
+* Default names.
+
+-----
+
 ### v2.0.1
@@ -4,0 +14,0 @@

dist/cjs/colorPicker/colors.js

@@ -21,4 +21,4 @@ "use strict";
 var Colors = function Colors(props) {
-  var getShades = function getShades(shades) {
-    return shades.map(function (shade, i) {
+  var getShades = function getShades() {
+    return props.colors.values.map(function (shade, i) {
       return (0, _react2.jsx)(_shade["default"], {
@@ -35,5 +35,5 @@ shade: shade,
     css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                    flex-shrink: 0;\n                    font-size: 1.1em;\n                    width: 70px;\n                    margin-right: .5em;\n                    overflow-wrap: anywhere;\n                    text-transform: capitalize;\n                "])))
-  }, props.colors.label), (0, _react2.jsx)("div", {
+  }, props.colors.label || 'Unnamed'), (0, _react2.jsx)("div", {
     css: (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                    display: flex;\n                    flex-wrap: wrap;\n                "])))
-  }, getShades(props.colors.values)));
+  }, getShades()));
 };
@@ -40,0 +40,0 @@

dist/cjs/colorPicker/palettesList/list.js

@@ -38,3 +38,3 @@ "use strict";
         css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        margin: 0;\n                        transition: transform .25s;\n                        border-bottom: 1px solid #eee;\n                    "])))
-      }, palette.name));
+      }, palette.name || "Palette No".concat(i + 1)));
     });
@@ -41,0 +41,0 @@ };

dist/cjs/colorPicker/shadeTooltip.js

@@ -19,2 +19,3 @@ "use strict";
 var ShadeTooltip = function ShadeTooltip(props) {
+  var text = props.shade.label ? "".concat(props.shade.label, ": ").concat(props.shade.value) : props.shade.value;
   return (0, _react2.jsx)("div", {
@@ -24,3 +25,3 @@ css: (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            padding: .2em .5em;\n            border-radius: .3em;\n            background-color: ", ";\n        "])), props.shade.value)
     css: (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                white-space: nowrap;\n                font-size: 1.2em;\n                line-height: 0;\n                color: ", ";\n                filter: saturate(0) grayscale(1) brightness(1) contrast(100000%) invert(1);\n            "])), props.shade.value)
-  }, props.copied ? 'Copied' : "".concat(props.shade.label, ": ").concat(props.shade.value)));
+  }, props.copied ? 'Copied' : text));
 };
@@ -27,0 +28,0 @@

dist/esm/colorPicker/colors.js

@@ -11,4 +11,4 @@ var _templateObject, _templateObject2, _templateObject3;
 var Colors = function Colors(props) {
-  var getShades = function getShades(shades) {
-    return shades.map(function (shade, i) {
+  var getShades = function getShades() {
+    return props.colors.values.map(function (shade, i) {
       return jsx(Shade, {
@@ -25,7 +25,7 @@ shade: shade,
     css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                    flex-shrink: 0;\n                    font-size: 1.1em;\n                    width: 70px;\n                    margin-right: .5em;\n                    overflow-wrap: anywhere;\n                    text-transform: capitalize;\n                "])))
-  }, props.colors.label), jsx("div", {
+  }, props.colors.label || 'Unnamed'), jsx("div", {
     css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                    display: flex;\n                    flex-wrap: wrap;\n                "])))
-  }, getShades(props.colors.values)));
+  }, getShades()));
 };
 
 export default Colors;

dist/esm/colorPicker/palettesList/list.js

@@ -21,3 +21,3 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
         css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        margin: 0;\n                        transition: transform .25s;\n                        border-bottom: 1px solid #eee;\n                    "])))
-      }, palette.name));
+      }, palette.name || "Palette No".concat(i + 1)));
     });
@@ -24,0 +24,0 @@ };

dist/esm/colorPicker/shadeTooltip.js

@@ -9,2 +9,3 @@ var _templateObject, _templateObject2;
 var ShadeTooltip = function ShadeTooltip(props) {
+  var text = props.shade.label ? "".concat(props.shade.label, ": ").concat(props.shade.value) : props.shade.value;
   return jsx("div", {
@@ -14,5 +15,5 @@ css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            padding: .2em .5em;\n            border-radius: .3em;\n            background-color: ", ";\n        "])), props.shade.value)
     css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                white-space: nowrap;\n                font-size: 1.2em;\n                line-height: 0;\n                color: ", ";\n                filter: saturate(0) grayscale(1) brightness(1) contrast(100000%) invert(1);\n            "])), props.shade.value)
-  }, props.copied ? 'Copied' : "".concat(props.shade.label, ": ").concat(props.shade.value)));
+  }, props.copied ? 'Copied' : text));
 };
 
 export default ShadeTooltip;

package.json

 {
   "name": "storybook-color-picker",
   "description": "Choose a color from custom color palette and copy it to clipboard with a simple click.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Adrian_Bielawski",
@@ -6,0 +6,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -9,2 +9,3 @@ # storybook-color-picker
 
+
 ![storybook-color-picker](./assets/presentation.gif)
@@ -18,3 +19,3 @@
 
-To migrate from v1 to v2 adjust `parameters` in `preview.js` to match the pattern shown in [Usage section](#usage) below.
+To migrate from v1 to v2 adjust `parameters` in `preview.js` to match the pattern shown in [Add palettes](#add-palettes) in usage section below.
 
@@ -21,0 +22,0 @@ ## Usage

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76540

increased by0.36%

Lines of code

1021

increased by0.2%

Number of lines in readme file

180

increased by0.56%

No dependency changes