@ltht-react/icon - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0

CHANGELOG.md

@@ -6,14 +6,18 @@ # Change Log
 
-## [0.2.1](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/icon@0.1.28...@ltht-react/icon@0.2.1) (2021-01-22)
+## [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
 
-### Reverts
 
-* Revert "refactor components and fix styles" ([b0c5fd8](https://github.com/ltht-epr/ltht-react/commit/b0c5fd89836aa7c47afe96aeccefd955a06dd50b))
-* Revert "Publish" ([833cdd7](https://github.com/ltht-epr/ltht-react/commit/833cdd729f74c9fee22fa55530a6ec5552f438ea))
 
 
 
+## [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)
@@ -20,0 +24,0 @@

lib/atoms/chevron-icon.d.ts

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

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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChevronCircleIcon = exports.ChevronIcon = void 0;
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var styles_1 = require("@ltht-react/styles");
-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) {
+var calculateIconType = function (direction) {
     switch (direction) {
         default:
         case 'up':
-            return circleIcon ? free_solid_svg_icons_1.faChevronCircleUp : free_solid_svg_icons_1.faChevronUp;
+            return free_solid_svg_icons_1.faChevronUp;
         case 'down':
-            return circleIcon ? free_solid_svg_icons_1.faChevronCircleDown : free_solid_svg_icons_1.faChevronDown;
+            return free_solid_svg_icons_1.faChevronDown;
         case 'left':
-            return circleIcon ? free_solid_svg_icons_1.faChevronCircleLeft : free_solid_svg_icons_1.faChevronLeft;
+            return free_solid_svg_icons_1.faChevronLeft;
         case 'right':
-            return circleIcon ? free_solid_svg_icons_1.faChevronCircleRight : free_solid_svg_icons_1.faChevronRight;
+            return 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) {
@@ -39,8 +27,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, { css: styles, icon: calculateIconType(direction, false), size: styles_1.calculateIconSize(size), onClick: clickHandler && handleClick }));
+    return (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: "icon__chevron", icon: calculateIconType(direction), size: styles_1.calculateIconSize(size), onClick: clickHandler && handleClick }));
 };
-exports.ChevronIcon = ChevronIcon;
-var templateObject_1;
+exports.default = ChevronIcon;
 //# sourceMappingURL=chevron-icon.js.map

lib/atoms/circle-icon.d.ts

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

lib/atoms/circle-icon.js

@@ -6,3 +6,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
@@ -12,9 +17,13 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
-var TableIcon = function (_a) {
+var calculateIconColor = function (status) { return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), status === 'green' && styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && styles_1.ICON_COLOURS.INFO + ";"); };
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var status = _a.status;
+    return calculateIconColor(status);
+});
+var CircleIcon = 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  "])), 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 } });
+    return (react_1.default.createElement(StyledFontAwesomeIcon, { className: "icon__circle", status: status, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
 };
-exports.default = TableIcon;
-var templateObject_1;
+exports.default = CircleIcon;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=circle-icon.js.map

lib/atoms/column-icon.d.ts

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

lib/atoms/column-icon.js

@@ -6,3 +6,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
@@ -12,9 +17,13 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
+var calculateIconColor = function (status) { return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), status === 'green' && styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && styles_1.ICON_COLOURS.DEFAULT.VALUE + ";", status === 'info' && styles_1.ICON_COLOURS.INFO + ";"); };
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var status = _a.status;
+    return calculateIconColor(status);
+});
 var ColumnIcon = 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.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, { css: styles, icon: free_solid_svg_icons_1.faColumns, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } });
+    return (react_1.default.createElement(StyledFontAwesomeIcon, { className: "icon__column", status: status, icon: free_solid_svg_icons_1.faColumns, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
 };
 exports.default = ColumnIcon;
-var templateObject_1;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=column-icon.js.map

lib/atoms/counter-icon.d.ts

@@ -1,10 +0,10 @@
-/** @jsx jsx */
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import { IconSizes } from '@ltht-react/styles';
 declare const CounterIcon: React.FC<CounterIconProps>;
-declare type CounterIconProps = {
-    status: 'red' | 'green' | 'amber' | 'primary' | 'secondary' | 'default' | 'info';
+declare type StatusValues = 'red' | 'green' | 'amber' | 'primary' | 'secondary' | 'default' | 'info';
+interface CounterIconProps extends HTMLAttributes<HTMLSpanElement> {
+    status: StatusValues;
     size: IconSizes;
     value: number;
-};
+}
 export default CounterIcon;

lib/atoms/counter-icon.js

@@ -6,3 +6,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
@@ -12,12 +17,17 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
+var calculateIconColor = function (status) { return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), status === 'green' && styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && styles_1.ICON_COLOURS.DANGER + ";", status === 'primary' && styles_1.ICON_COLOURS.PRIMARY + ";", status === 'secondary' && styles_1.ICON_COLOURS.SECONDARY + ";", status === 'default' && styles_1.ICON_COLOURS.DEFAULT.VALUE + ";", status === 'info' && styles_1.ICON_COLOURS.INFO + ";"); };
+var StyledCounterIcon = styled_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var status = _a.status;
+    return calculateIconColor(status);
+});
+var StyledCounterValue = styled_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
 var CounterIcon = function (_a) {
     var status = _a.status, size = _a.size, value = _a.value;
-    var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100% !important;\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    width: 100% !important;\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 === 'primary' && "color: " + styles_1.ICON_COLOURS.PRIMARY + ";", status === 'secondary' && "color: " + styles_1.ICON_COLOURS.SECONDARY + ";", status === 'default' && "color: " + styles_1.ICON_COLOURS.DEFAULT.VALUE + ";", status === 'info' && "color: " + styles_1.ICON_COLOURS.INFO + ";");
-    var numberStyles = core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-weight: bold;\n  "], ["\n    font-weight: bold;\n  "])));
-    return (core_1.jsx("span", { className: "fa-layers fa-fw" },
-        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)));
+    return (react_1.default.createElement(StyledCounterIcon, { className: "fa-layers fa-fw" },
+        react_1.default.createElement(StyledFontAwesomeIcon, { className: "icon__counter", status: status, icon: free_solid_svg_icons_1.faCircle, size: styles_1.calculateIconSize(size) }),
+        react_1.default.createElement(StyledCounterValue, { className: "fa-layers-text fa-inverse fa-xs" }, value)));
 };
 exports.default = CounterIcon;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=counter-icon.js.map

lib/atoms/exclamation-icon.d.ts

@@ -1,9 +0,9 @@
-/** @jsx jsx */
 import React from 'react';
 import { IconSizes } from '@ltht-react/styles';
 declare const ExclamationIcon: React.FC<ExclamationIconProps>;
-declare type ExclamationIconProps = {
-    status: 'red' | 'green' | 'amber' | 'info' | 'default';
+declare type StatusValues = 'red' | 'green' | 'amber' | 'info' | 'default';
+interface ExclamationIconProps {
+    status: StatusValues;
     size: IconSizes;
-};
+}
 export default ExclamationIcon;

lib/atoms/exclamation-icon.js

@@ -6,3 +6,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
@@ -12,9 +17,13 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
+var calculateIconColor = function (status) { return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), status === 'green' && styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && styles_1.ICON_COLOURS.INFO + ";"); };
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var status = _a.status;
+    return calculateIconColor(status);
+});
 var ExclamationIcon = 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, { css: styles, icon: free_solid_svg_icons_1.faExclamationTriangle, size: styles_1.calculateIconSize(size) });
+    return (react_1.default.createElement(StyledFontAwesomeIcon, { className: "icon__exclamation", status: status, icon: free_solid_svg_icons_1.faExclamationTriangle, size: styles_1.calculateIconSize(size) }));
 };
 exports.default = ExclamationIcon;
-var templateObject_1;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=exclamation-icon.js.map

lib/atoms/index.d.ts

@@ -1,2 +0,3 @@
-export { ChevronIcon, ChevronCircleIcon } from './chevron-icon';
+export { default as ChevronCircleIcon } from './chevron-circle-icon';
+export { default as ChevronIcon } from './chevron-icon';
 export { default as CircleIcon } from './circle-icon';
@@ -8,1 +9,2 @@ 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.ChevronIcon; } });
-Object.defineProperty(exports, "ChevronCircleIcon", { enumerable: true, get: function () { return chevron_icon_1.ChevronCircleIcon; } });
+Object.defineProperty(exports, "ChevronIcon", { enumerable: true, get: function () { return chevron_icon_1.default; } });
 var circle_icon_1 = require("./circle-icon");
@@ -18,2 +19,4 @@ 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.d.ts

@@ -1,2 +0,1 @@
-/** @jsx jsx */
 import React from 'react';
@@ -3,0 +2,0 @@ import { IconSizes } from '@ltht-react/styles';

lib/atoms/spinner-icon.js

@@ -6,11 +6,15 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 var styles_1 = require("@ltht-react/styles");
-var styles = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), styles_1.ICON_COLOURS.PRIMARY);
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), styles_1.ICON_COLOURS.PRIMARY);
 var SpinnerIcon = function (_a) {
     var size = _a.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) });
+    return (react_1.default.createElement(StyledFontAwesomeIcon, { className: "fa-spin icon__spinner", icon: free_solid_svg_icons_1.faSync, size: styles_1.calculateIconSize(size) }));
 };
@@ -17,0 +21,0 @@ exports.default = SpinnerIcon;

lib/atoms/table-icon.d.ts

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

lib/atoms/table-icon.js

@@ -6,3 +6,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
@@ -12,9 +17,13 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var styles_1 = require("@ltht-react/styles");
+var calculateIconColor = function (status) { return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), status === 'green' && styles_1.ICON_COLOURS.SUCCESS.VALUE + ";", status === 'amber' && styles_1.ICON_COLOURS.WARNING + ";", status === 'red' && styles_1.ICON_COLOURS.DANGER + ";", status === 'default' && styles_1.ICON_COLOURS.DEFAULT + ";", status === 'info' && styles_1.ICON_COLOURS.INFO + ";"); };
+var StyledFontAwesomeIcon = styled_1.default(react_fontawesome_1.FontAwesomeIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var status = _a.status;
+    return calculateIconColor(status);
+});
 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.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, { css: styles, icon: free_solid_svg_icons_1.faTable, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } });
+    return (react_1.default.createElement(StyledFontAwesomeIcon, { className: "icon__table", status: status, icon: free_solid_svg_icons_1.faTable, size: styles_1.calculateIconSize(size), transform: { rotate: 180 } }));
 };
 exports.default = TableIcon;
-var templateObject_1;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=table-icon.js.map

package.json

 {
   "name": "@ltht-react/icon",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "ltht-react styled Icon component.",
@@ -33,9 +33,9 @@ "author": "LTHT",
     "@fortawesome/react-fontawesome": "^0.1.8",
-    "@ltht-react/styles": "^0.2.1",
-    "@ltht-react/types": "^0.1.1",
-    "@ltht-react/utils": "^0.2.1",
+    "@ltht-react/styles": "^1.0.0",
+    "@ltht-react/types": "^0.0.27",
+    "@ltht-react/utils": "^1.0.0",
     "emotion": "^10.0.27",
     "react": "^16.12.0"
   },
-  "gitHead": "8ed606fa5eb29a987434481dce1c2fed87966fc7"
+  "gitHead": "ce395cbe99477a620c639ce01b401654510f7f81"
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38002

increased by33.27%

Number of package files

36

increased by20%

Lines of code

377

increased by46.12%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@emotion/babel-plugin@11.11.0(transitive)

• + Added@emotion/cache@11.11.0(transitive)

• + Added@emotion/core@10.0.35(transitive)

• + Added@emotion/hash@0.9.1(transitive)

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/react@11.11.4(transitive)

• + Added@emotion/serialize@1.1.4(transitive)

• + Added@emotion/sheet@1.2.2(transitive)

• + Added@emotion/styled@11.11.5(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.0.1(transitive)

• + Added@emotion/utils@1.2.1(transitive)

• + Added@emotion/weak-memoize@0.3.1(transitive)

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

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

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

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedstylis@4.2.0(transitive)

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

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

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

• Updated@ltht-react/styles@^1.0.0

• Updated@ltht-react/types@^0.0.27

• Updated@ltht-react/utils@^1.0.0