@littlespoon/icons - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

lib/ArrowBase.js

@@ -12,28 +12,37 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-function getSvgSizeCss(props) {
+function getTransformCss(props) {
+    var scale = 1;
     switch (props.size) {
         case 'xsmall':
-            return 'transform: scale(0.5);';
+            scale = 0.5;
+            break;
         case 'medium':
-            return 'transform: scale(2);';
+            scale = 2;
+            break;
         case 'large':
-            return 'transform: scale(3.2);';
+            scale = 3.2;
+            break;
+        case 'small':
         default:
-            return 'transform: scale(1);';
+            break;
     }
-}
-function getSvgDirectionCss(props) {
+    var rotate = 0;
     switch (props.direction) {
         case 'up':
-            return 'transform: rotate(180deg);';
+            rotate = 180;
+            break;
         case 'left':
-            return 'transform: rotate(90deg);';
+            rotate = 90;
+            break;
         case 'right':
-            return 'transform: rotate(-90deg);';
+            rotate = -90;
+            break;
+        case 'down':
         default:
-            return 'transform: rotate(0deg);';
+            break;
     }
+    return "transform: scale(" + scale + ") rotate(" + rotate + "deg);";
 }
-exports.ArrowBase = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 1rem;\n  cursor: pointer;\n  transition: transform 0.4s;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 1rem;\n  cursor: pointer;\n  transition: transform 0.4s;\n  ", "\n  ", "\n"])), getSvgSizeCss, getSvgDirectionCss);
+exports.ArrowBase = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform 0.4s;\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform 0.4s;\n  ", "\n"])), getTransformCss);
 var templateObject_1;
 //# sourceMappingURL=ArrowBase.js.map

lib/ArrowIcon.d.ts

 /// <reference types="react" />
 export interface ArrowIconProps extends React.SVGAttributes<SVGElement> {
     /**
-     * The fill of the component. Defaults to "black".
+     * The fill of the component. Defaults to black.
      */
     fill?: string;
     /**
+     * The direction of the component. Defaults to "down".
+     */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /**
      * The size of the component. Defaults to "small".
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large';
-    /**
-     * The direction of the component. Defaults to "down".
-     */
-    direction?: 'up' | 'down' | 'left' | 'right';
 }
-export default function ArrowIcon({ size, direction, fill, ...other }: ArrowIconProps): React.ReactElement;
+export default function ArrowIcon({ direction, fill, size, ...other }: ArrowIconProps): React.ReactElement;
 //# sourceMappingURL=ArrowIcon.d.ts.map

lib/ArrowIcon.js

@@ -29,3 +29,3 @@ "use strict";
 function ArrowIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.direction, direction = _c === void 0 ? 'down' : _c, _d = _a.fill, fill = _d === void 0 ? token_1.shadeBlack : _d, other = __rest(_a, ["size", "direction", "fill"]);
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fill, fill = _c === void 0 ? token_1.shadeBlack : _c, _d = _a.size, size = _d === void 0 ? 'small' : _d, other = __rest(_a, ["direction", "fill", "size"]);
     return ((0, jsx_runtime_1.jsxs)(ArrowBase_1.ArrowBase, __assign({ xmlns: "http://www.w3.org/2000/svg", width: "15", height: "10", viewBox: "0 0 15 10", size: size, direction: direction }, other, { children: [(0, jsx_runtime_1.jsx)("title", { children: "Arrow icon" }, void 0), (0, jsx_runtime_1.jsx)("desc", { children: "Arrow icon" }, void 0), (0, jsx_runtime_1.jsx)("path", { fill: fill, fillRule: "evenodd", d: "M7.754 9.392l6.644-6.861a.365.365 0 000-.507L13.027.608a.353.353 0 00-.508 0L7.5 5.791 2.481.608a.353.353 0 00-.508 0L.603 2.024a.365.365 0 000 .507l6.643 6.86c.14.145.368.145.508 0z" }, void 0)] }), void 0));
@@ -32,0 +32,0 @@ }

lib/CloseIcon.d.ts

 /// <reference types="react" />
-export default function CloseIcon(): JSX.Element;
+export interface CloseIconProps extends React.SVGAttributes<SVGElement> {
+    /**
+     * The fill of the component. Defaults to white.
+     */
+    fill?: string;
+    /**
+     * The stroke of the component. Defaults to black.
+     */
+    stroke?: string;
+}
+export default function CloseIcon({ fill, stroke, ...other }: {
+    [x: string]: any;
+    fill?: string | undefined;
+    stroke?: string | undefined;
+}): JSX.Element;
 //# sourceMappingURL=CloseIcon.d.ts.map

lib/CloseIcon.js

@@ -13,9 +13,21 @@ "use strict";
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var token_1 = require("@littlespoon/theme/lib/colors/token");
-function CloseIcon() {
-    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: token_1.shadeWhite }, void 0), (0, jsx_runtime_1.jsx)("title", { children: "Close icon" }, void 0), (0, jsx_runtime_1.jsx)("desc", { children: "Close icon" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M7.56567 7.56583L16.4342 16.4343M7.56568 16.4343L16.4342 7.56583", stroke: token_1.shadeBlack, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+function CloseIcon(_a) {
+    var _b = _a.fill, fill = _b === void 0 ? token_1.shadeWhite : _b, _c = _a.stroke, stroke = _c === void 0 ? token_1.shadeBlack : _c, other = __rest(_a, ["fill", "stroke"]);
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, other, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: fill }, void 0), (0, jsx_runtime_1.jsx)("title", { children: "Close icon" }, void 0), (0, jsx_runtime_1.jsx)("desc", { children: "Close icon" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M7.56567 7.56583L16.4342 16.4343M7.56568 16.4343L16.4342 7.56583", stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
 }
 exports.default = CloseIcon;
 //# sourceMappingURL=CloseIcon.js.map

lib/FilterBase.js

@@ -11,16 +11,22 @@ "use strict";
 exports.FilterBase = void 0;
+var utils_1 = require("@littlespoon/theme/lib/utils");
 var styled_components_1 = __importDefault(require("styled-components"));
-var BASE_HEIGHT = 4.4;
-var BASE_WIDTH = 4.4;
+var BASE_WIDTH_AND_HEIGHT = 4.4;
 function getSvgSizeCss(props) {
+    var size = (0, utils_1.rem)(BASE_WIDTH_AND_HEIGHT);
     switch (props.size) {
         case 'xsmall':
-            return "height: " + BASE_HEIGHT * 0.5 + "rem; width: " + BASE_WIDTH * 0.5 + "rem;";
+            size = (0, utils_1.rem)(BASE_WIDTH_AND_HEIGHT * 0.5);
+            break;
         case 'medium':
-            return "height: " + BASE_HEIGHT * 2 + "rem; width: " + BASE_WIDTH * 2 + "rem;";
+            size = (0, utils_1.rem)(BASE_WIDTH_AND_HEIGHT * 2);
+            break;
         case 'large':
-            return "height: " + BASE_HEIGHT * 3.2 + "rem; width: " + BASE_WIDTH * 3.2 + "rem;";
+            size = (0, utils_1.rem)(BASE_WIDTH_AND_HEIGHT * 3.2);
+            break;
+        case 'small':
         default:
-            return "height: " + BASE_HEIGHT + "rem; width: " + BASE_WIDTH + "rem;";
+            break;
     }
+    return "height: " + size + "; width: " + size + ";";
 }
@@ -27,0 +33,0 @@ exports.FilterBase = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform 0.4s;\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: transform 0.4s;\n  ", "\n"])), getSvgSizeCss);

lib/FilterIcon.d.ts

 /// <reference types="react" />
 export interface FilterIconProps extends React.SVGAttributes<SVGElement> {
     /**
+     * The fill of the component. Defaults to white.
+     */
+    fill?: string;
+    /**
      * The size of the component. Defaults to "small".
@@ -8,7 +12,7 @@ */
     /**
-     * The stroke of the component. Defaults to "black".
+     * The stroke of the component. Defaults to black.
      */
     stroke?: string;
 }
-export default function FilterIcon({ size, stroke, ...other }: FilterIconProps): React.ReactElement;
+export default function FilterIcon({ fill, size, stroke, ...other }: FilterIconProps): React.ReactElement;
 //# sourceMappingURL=FilterIcon.d.ts.map

lib/FilterIcon.js

@@ -29,7 +29,6 @@ "use strict";
 function FilterIcon(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.stroke, stroke = _c === void 0 ? token_1.shadeBlack : _c, other = __rest(_a, ["size", "stroke"]);
-    var fill = token_1.shadeWhite;
-    return ((0, jsx_runtime_1.jsxs)(FilterBase_1.FilterBase, __assign({ xmlns: "http://www.w3.org/2000/svg", size: size, viewBox: "0 0 44 44" }, other, { children: [(0, jsx_runtime_1.jsx)("title", { children: "Filter icon" }, void 0), (0, jsx_runtime_1.jsx)("desc", { children: "Filter icon" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M0 5a5 5 0 0 1 5-5h34a5 5 0 0 1 5 5v34a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5Z", fill: fill }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.584 28.38h16.833" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "27.562", cy: "28.666", r: "1.583", fill: fill, stroke: stroke, "stroke-width": "1.5" }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.584 15.047h16.833" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M27.562 16.917a1.583 1.583 0 1 0 0-3.167 1.583 1.583 0 0 0 0 3.167Z", fill: fill, stroke: stroke, "stroke-width": "1.5" }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M30.418 21.714H13.585" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M16.44 23.584a1.583 1.583 0 1 1 0-3.167 1.583 1.583 0 0 1 0 3.167Z", fill: fill, stroke: stroke, "stroke-width": "1.5" }, void 0)] }), void 0));
+    var _b = _a.fill, fill = _b === void 0 ? token_1.shadeWhite : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.stroke, stroke = _d === void 0 ? token_1.shadeBlack : _d, other = __rest(_a, ["fill", "size", "stroke"]);
+    return ((0, jsx_runtime_1.jsxs)(FilterBase_1.FilterBase, __assign({ xmlns: "http://www.w3.org/2000/svg", size: size, viewBox: "0 0 44 44" }, other, { children: [(0, jsx_runtime_1.jsx)("title", { children: "Filter icon" }, void 0), (0, jsx_runtime_1.jsx)("desc", { children: "Filter icon" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M0 5a5 5 0 0 1 5-5h34a5 5 0 0 1 5 5v34a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5Z", fill: fill }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", d: "M13.584 28.38h16.833" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "27.562", cy: "28.666", r: "1.583", fill: fill, stroke: stroke, strokeWidth: "1.5" }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", d: "M13.584 15.047h16.833" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M27.562 16.917a1.583 1.583 0 1 0 0-3.167 1.583 1.583 0 0 0 0 3.167Z", fill: fill, stroke: stroke, strokeWidth: "1.5" }, void 0), (0, jsx_runtime_1.jsx)("path", { stroke: stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", d: "M30.418 21.714H13.585" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M16.44 23.584a1.583 1.583 0 1 1 0-3.167 1.583 1.583 0 0 1 0 3.167Z", fill: fill, stroke: stroke, strokeWidth: "1.5" }, void 0)] }), void 0));
 }
 exports.default = FilterIcon;
 //# sourceMappingURL=FilterIcon.js.map

package.json

 {
   "name": "@littlespoon/icons",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Little Spoon icons",
@@ -41,3 +41,3 @@ "main": "lib/index.js",
   "license": "UNLICENSED",
-  "gitHead": "f3f3de15936cceaa3ec0794630db541489e061fa"
+  "gitHead": "a817e65097dc6b9c91fc9f3e83d9955d4b4a4ef9"
 }

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

24067

increased by10.37%

Lines of code

263

increased by20.09%

No dependency changes