@ltht-react/icon - npm Package Compare versions

Comparing version 0.1.28 to 0.2.0

CHANGELOG.md

@@ -6,18 +6,2 @@ # Change Log
 
-## [0.1.28](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/icon@0.1.26...@ltht-react/icon@0.1.28) (2020-11-19)
-
-**Note:** Version bump only for package @ltht-react/icon
-
-
-
-
-
-## [0.1.27](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/icon@0.1.26...@ltht-react/icon@0.1.27) (2020-10-29)
-
-**Note:** Version bump only for package @ltht-react/icon
-
-
-
-
-
 ## [0.1.26](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/icon@0.1.25...@ltht-react/icon@0.1.26) (2020-09-10)
@@ -24,0 +8,0 @@

lib/atoms/chevron-icon.d.ts

 /** @jsx jsx */
 import React from 'react';
 import { IconSizes } from '@ltht-react/styles';
+declare const ChevronCircleIcon: React.FC<Props>;
 declare const ChevronIcon: React.FC<Props>;
@@ -11,2 +12,2 @@ declare type IconDirection = 'up' | 'down' | 'left' | 'right';
 }
-export default ChevronIcon;
+export { ChevronIcon, ChevronCircleIcon };

lib/atoms/chevron-icon.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronCircleIcon = exports.ChevronIcon = void 0;
 var core_1 = require("@emotion/core");
@@ -7,15 +12,25 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
-var calculateIconType = function (direction) {
+var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), styles_1.ICON_COLOURS.DEFAULT);
+var calculateIconType = function (direction, circleIcon) {
     switch (direction) {
         default:
         case 'up':
-            return free_solid_svg_icons_1.faChevronUp;
+            return circleIcon ? free_solid_svg_icons_1.faChevronCircleUp : free_solid_svg_icons_1.faChevronUp;
         case 'down':
-            return free_solid_svg_icons_1.faChevronDown;
+            return circleIcon ? free_solid_svg_icons_1.faChevronCircleDown : free_solid_svg_icons_1.faChevronDown;
         case 'left':
-            return free_solid_svg_icons_1.faChevronLeft;
+            return circleIcon ? free_solid_svg_icons_1.faChevronCircleLeft : free_solid_svg_icons_1.faChevronLeft;
         case 'right':
-            return free_solid_svg_icons_1.faChevronRight;
+            return circleIcon ? free_solid_svg_icons_1.faChevronCircleRight : free_solid_svg_icons_1.faChevronRight;
     }
 };
+var ChevronCircleIcon = function (_a) {
+    var size = _a.size, direction = _a.direction, clickHandler = _a.clickHandler;
+    var handleClick = function (e) {
+        e.preventDefault();
+        clickHandler && clickHandler();
+    };
+    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: calculateIconType(direction, true), size: styles_1.calculateIconSize(size), onClick: clickHandler && handleClick }));
+};
+exports.ChevronCircleIcon = ChevronCircleIcon;
 var ChevronIcon = function (_a) {
@@ -25,8 +40,8 @@ var size = _a.size, direction = _a.direction, clickHandler = _a.clickHandler;
         e.preventDefault();
-        e.stopPropagation();
         clickHandler && clickHandler();
     };
-    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__chevron", icon: calculateIconType(direction), size: styles_1.calculateIconSize(size), onClick: clickHandler && handleClick }));
+    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: calculateIconType(direction, false), size: styles_1.calculateIconSize(size), onClick: clickHandler && handleClick }));
 };
-exports.default = ChevronIcon;
+exports.ChevronIcon = ChevronIcon;
+var templateObject_1;
 //# sourceMappingURL=chevron-icon.js.map

lib/atoms/circle-icon.d.ts

 /** @jsx jsx */
 import React from 'react';
 import { IconSizes } from '@ltht-react/styles';
-declare const CircleIcon: React.FC<IconProps>;
+declare const TableIcon: React.FC<IconProps>;
 declare type IconProps = {
-    status: 'red' | 'green' | 'amber' | 'info' | 'default';
+    status: 'green' | 'default';
     size: IconSizes;
 };
-export default CircleIcon;
+export default TableIcon;

lib/atoms/circle-icon.js

@@ -11,9 +11,9 @@ "use strict";
 var styles_1 = require("@ltht-react/styles");
-var CircleIcon = function (_a) {
+var TableIcon = function (_a) {
     var status = _a.status, size = _a.size;
-    var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["    \n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["    \n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS + ";", status === 'amber' && "color: " + styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && "color: " + styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
-    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__circle", css: styles, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
+    var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT.VALUE + ";");
+    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } });
 };
-exports.default = CircleIcon;
+exports.default = TableIcon;
 var templateObject_1;
 //# sourceMappingURL=circle-icon.js.map

lib/atoms/column-icon.js

@@ -14,3 +14,3 @@ "use strict";
     var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && "color: " + styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && "color: " + styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT.VALUE + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
-    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__column", css: styles, icon: free_solid_svg_icons_1.faColumns, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
+    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: free_solid_svg_icons_1.faColumns, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } });
 };
@@ -17,0 +17,0 @@ exports.default = ColumnIcon;

lib/atoms/counter-icon.js

@@ -16,3 +16,3 @@ "use strict";
     return (core_1.jsx("span", { className: "fa-layers fa-fw" },
-        core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__counter", css: styles, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size) }),
+        core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size) }),
         core_1.jsx("span", { className: "fa-layers-text fa-inverse fa-xs", css: numberStyles }, value)));
@@ -19,0 +19,0 @@ };

lib/atoms/exclamation-icon.d.ts

@@ -6,5 +6,5 @@ /** @jsx jsx */
 declare type ExclamationIconProps = {
-    status?: 'red' | 'green' | 'amber' | 'info' | 'default';
+    status: 'red' | 'green' | 'amber' | 'info' | 'default';
     size: IconSizes;
 };
 export default ExclamationIcon;

lib/atoms/exclamation-icon.js

@@ -13,4 +13,4 @@ "use strict";
     var status = _a.status, size = _a.size;
-    var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: inherit;\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    color: inherit;\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS + ";", status === 'amber' && "color: " + styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && "color: " + styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
-    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__exclamation", css: styles, icon: free_solid_svg_icons_1.faExclamationTriangle, size: styles_1.calculateIconSize(size) }));
+    var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS + ";", status === 'amber' && "color: " + styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && "color: " + styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
+    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: free_solid_svg_icons_1.faExclamationTriangle, size: styles_1.calculateIconSize(size) });
 };
@@ -17,0 +17,0 @@ exports.default = ExclamationIcon;

lib/atoms/index.d.ts

@@ -1,3 +0,2 @@
-export { default as ChevronCircleIcon } from './chevron-circle-icon';
-export { default as ChevronIcon } from './chevron-icon';
+export { ChevronIcon, ChevronCircleIcon } from './chevron-icon';
 export { default as CircleIcon } from './circle-icon';
@@ -9,2 +8,1 @@ export { default as ColumnIcon } from './column-icon';
 export { default as TableIcon } from './table-icon';
-export { default as InfoCircleIcon } from './info-circle-icon';

lib/atoms/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var chevron_circle_icon_1 = require("./chevron-circle-icon");
-Object.defineProperty(exports, "ChevronCircleIcon", { enumerable: true, get: function () { return chevron_circle_icon_1.default; } });
 var chevron_icon_1 = require("./chevron-icon");
-Object.defineProperty(exports, "ChevronIcon", { enumerable: true, get: function () { return chevron_icon_1.default; } });
+Object.defineProperty(exports, "ChevronIcon", { enumerable: true, get: function () { return chevron_icon_1.ChevronIcon; } });
+Object.defineProperty(exports, "ChevronCircleIcon", { enumerable: true, get: function () { return chevron_icon_1.ChevronCircleIcon; } });
 var circle_icon_1 = require("./circle-icon");
@@ -19,4 +18,2 @@ Object.defineProperty(exports, "CircleIcon", { enumerable: true, get: function () { return circle_icon_1.default; } });
 Object.defineProperty(exports, "TableIcon", { enumerable: true, get: function () { return table_icon_1.default; } });
-var info_circle_icon_1 = require("./info-circle-icon");
-Object.defineProperty(exports, "InfoCircleIcon", { enumerable: true, get: function () { return info_circle_icon_1.default; } });
 //# sourceMappingURL=index.js.map

lib/atoms/spinner-icon.js

@@ -14,3 +14,3 @@ "use strict";
     var size = _a.size;
-    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "fa-spin icon__spinner", css: styles, icon: free_solid_svg_icons_1.faSync, size: styles_1.calculateIconSize(size) });
+    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "fa-spin", css: styles, icon: free_solid_svg_icons_1.faSync, size: styles_1.calculateIconSize(size) });
 };
@@ -17,0 +17,0 @@ exports.default = SpinnerIcon;

lib/atoms/table-icon.js

@@ -14,3 +14,3 @@ "use strict";
     var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), status === 'green' && "color: " + styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && "color: " + styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && "color: " + styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT.VALUE + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
-    return (core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { className: "icon__table", css: styles, icon: free_solid_svg_icons_1.faTable, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
+    return core_1.jsx(react_fontawesome_1.FontAwesomeIcon, { css: styles, icon: free_solid_svg_icons_1.faTable, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } });
 };
@@ -17,0 +17,0 @@ exports.default = TableIcon;

package.json

 {
   "name": "@ltht-react/icon",
-  "version": "0.1.28",
+  "version": "0.2.0",
   "description": "ltht-react styled Icon component.",
@@ -33,9 +33,9 @@ "author": "LTHT",
     "@fortawesome/react-fontawesome": "^0.1.8",
-    "@ltht-react/styles": "^0.1.20",
-    "@ltht-react/types": "^0.0.27",
-    "@ltht-react/utils": "^0.1.20",
+    "@ltht-react/styles": "^0.2.0",
+    "@ltht-react/types": "^0.1.0",
+    "@ltht-react/utils": "^0.2.0",
     "emotion": "^10.0.27",
     "react": "^16.12.0"
   },
-  "gitHead": "bed644100b6acf8597d480e640131a2ebb74f7ba"
+  "gitHead": "130d29ad7089f9d9f0f48cdfa217205a2a1b9c0d"
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33189

increased by0.77%

Lines of code

325

increased by3.17%

Dependency changes

• + Added@ltht-react/styles@0.2.1(transitive)

• + Added@ltht-react/types@0.1.1(transitive)

• + Added@ltht-react/utils@0.2.1(transitive)

• - Removed@emotion/core@10.0.35(transitive)

• - Removed@ltht-react/styles@0.1.20(transitive)

• - Removed@ltht-react/types@0.0.27(transitive)

• - Removed@ltht-react/utils@0.1.20(transitive)

• Updated@ltht-react/styles@^0.2.0

• Updated@ltht-react/types@^0.1.0

• Updated@ltht-react/utils@^0.2.0