@dxc-technology/halstack-react 0.0.0-0bd2807 → 0.0.0-0d50ab3

package/date-input/DateInput.test.js

@@ -0,0 +1,469 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _DateInput = _interopRequireDefault(require("./DateInput"));
+
+describe("DateInput component tests", function () {
+  test("Renders with correct label, helper text, optional, placeholder and clearable action", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Example label",
+      helperText: "Example of helper text",
+      placeholder: true,
+      optional: true,
+      clearable: true
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole,
+        getAllByRole = _render.getAllByRole;
+
+    var input = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("Example of helper text")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
+
+    _userEvent["default"].type(input, "10/10/2010");
+
+    var closeAction = getAllByRole("button")[0];
+
+    _userEvent["default"].click(closeAction);
+
+    expect(input.value).toBe("");
+  });
+  test("Renders with personalized error", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      error: "Personalized error."
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Personalized error.")).toBeTruthy();
+  });
+  test("Renders with correct format: user typed date but it's invalid, onBlur error", function () {
+    var onBlur = jest.fn(function (_ref) {
+      var value = _ref.value,
+          error = _ref.error;
+      expect(value).toBe("10/90/2010");
+      expect(error).toBe("Invalid date.");
+    });
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format MM/dd/yyyy",
+      format: "MM/dd/yyyy",
+      onBlur: onBlur
+    })),
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10/90/2010");
+
+    _react2.fireEvent.blur(input);
+  });
+  test("Renders with correct format: user typed date but it's invalid, onChange error", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format MM/dd/yyyy",
+      format: "MM/dd/yyyy",
+      onChange: onChange
+    })),
+        getByRole = _render4.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10/90/2010");
+
+    expect(onChange).toHaveBeenCalledTimes(10);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10/90/2010",
+      error: "Invalid date.",
+      date: null
+    });
+  });
+  test("Calendar renders with correct date: today's date", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: value prop", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      value: "20-10-2019"
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date(2019, 9, 20);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: user typed value", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date(2010, 0, 1);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-2010");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Calendar renders with correct date: invalid date, renders with today's date", function () {
+    var onBlur = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur
+    })),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-xxxx");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "01-01-xxxx",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
+  test("Selecting a date from the calendar with an specific format", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "With format M-dd-yyyy",
+      format: "M-dd-yyyy"
+    })),
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("button");
+
+    _userEvent["default"].click(calendarAction);
+
+    var dayButton = getByText("10").closest("button");
+
+    _react2.fireEvent.click(dayButton);
+
+    var d = new Date();
+    d.setDate(10);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("".concat(d.getMonth() + 1, "-10-").concat(d.getFullYear()));
+  });
+  test("Selecting a date from the calendar (using keyboard presses)", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render10.getByRole;
+
+    var calendarAction = getByRole("button");
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-2010");
+
+    _userEvent["default"].click(calendarAction);
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "ArrowLeft",
+      code: "ArrowLeft",
+      keyCode: 37,
+      charCode: 37
+    });
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("03-01-2010");
+  });
+  test("onChange & onBlur functions are called correctly", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render11.getByRole;
+
+    var input = getByRole("textbox");
+    var d = new Date(2011, 9, 10);
+
+    _userEvent["default"].type(input, "10-10-2011");
+
+    expect(input.value).toBe("10-10-2011");
+    expect(onChange).toHaveBeenCalledTimes(10);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10-10-2011",
+      error: null,
+      date: d
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "10-10-2011",
+      error: null,
+      date: d
+    });
+  });
+  test("onChange & onBlur functions are called correctly, also with errors", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render12.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "10-10-");
+
+    expect(input.value).toBe("10-10-");
+    expect(onChange).toHaveBeenCalledTimes(6);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "10-10-",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "10-10-",
+      error: "Invalid date.",
+      date: null
+    });
+  });
+  test("onBlur function removes the error when it is fixed", function () {
+    var onBlur = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur
+    })),
+        getByRole = _render13.getByRole;
+
+    var input = getByRole("textbox");
+    var d = new Date(2002, 1, 20);
+
+    _userEvent["default"].type(input, "test");
+
+    expect(input.value).toBe("test");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].clear(input);
+
+    _userEvent["default"].type(input, "20-02-2002");
+
+    expect(input.value).toBe("20-02-2002");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "20-02-2002",
+      error: null,
+      date: d
+    });
+  });
+  test("onBlur function removes the error when the input is empty", function () {
+    var onBlur = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur,
+      optional: true
+    })),
+        getByRole = _render14.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "test");
+
+    expect(input.value).toBe("test");
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Invalid date.",
+      date: null
+    });
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: null,
+      date: null
+    });
+  });
+  test("onBlur & onChange functions error: required field (not optional)", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByRole = _render15.getByRole;
+
+    var date = getByRole("textbox");
+
+    _userEvent["default"].type(date, "t");
+
+    expect(date.value).toBe("t");
+
+    _userEvent["default"].clear(date);
+
+    _react2.fireEvent.blur(date);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value.",
+      date: null
+    });
+  });
+  test("Disabled date input (calendar action must be shown but not clickable)", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      disabled: true
+    })),
+        getByRole = _render16.getByRole,
+        queryByText = _render16.queryByText;
+
+    var calendarAction = getByRole("button");
+    var d = new Date();
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(getByRole("textbox").disabled).toBeTruthy();
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
+  });
+  test("Input has correct accesibility attributes", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Date input label"
+    })),
+        getByRole = _render17.getByRole;
+
+    var input = getByRole("textbox");
+    expect(input.getAttribute("aria-autocomplete")).toBeNull();
+    expect(input.getAttribute("aria-controls")).toBeNull();
+    expect(input.getAttribute("aria-expanded")).toBeNull();
+    var calendarAction = getByRole("button");
+
+    _userEvent["default"].click(calendarAction);
+
+    var datePicker = getByRole("dialog");
+    expect(datePicker.getAttribute("aria-modal")).toBe("true");
+  });
+});

package/dialog/Dialog.js

@@ -23,9 +23,9 @@ var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -41,7 +41,8 @@ var DxcDialog = function DxcDialog(_ref) {
       _ref$overlay = _ref.overlay,
       overlay = _ref$overlay === void 0 ? true : _ref$overlay,
       onBackgroundClick = _ref.onBackgroundClick,
-      padding = _ref.padding,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "small" : _ref$padding,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 

package/dialog/Dialog.test.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+
+describe("Dialog component tests", function () {
+  test("Dialog renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
+        getByText = _render.getByText;
+
+    expect(getByText("dialog-text")).toBeTruthy();
+  });
+  test("Dialog renders without close button", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      isCloseVisible: false
+    }, "dialog-text")),
+        queryByRole = _render2.queryByRole;
+
+    expect(queryByRole("button")).toBeFalsy();
+  });
+  test("Calls correct function onCloseClick", function () {
+    var onCloseClick = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      onCloseClick: onCloseClick
+    }, "dialog-text")),
+        getByRole = _render3.getByRole;
+
+    var closeButton = getByRole("button");
+
+    _react2.fireEvent.click(closeButton);
+
+    expect(onCloseClick).toHaveBeenCalled();
+  });
+});

package/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import DropdownPropsType from "./types";
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconSrc, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
 export default DxcDropdown;

package/dropdown/Dropdown.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -35,7 +35,7 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
@@ -48,8 +48,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       _ref$optionsIconPosit = _ref.optionsIconPosition,
       optionsIconPosition = _ref$optionsIconPosit === void 0 ? "before" : _ref$optionsIconPosit,
       icon = _ref.icon,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
       _ref$label = _ref.label,
@@ -164,15 +162,13 @@ var DxcDropdown = function DxcDropdown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContainer, {
     iconPosition: iconPosition,
     caretHidden: caretHidden
-  }, icon ? /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
+  }, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
     label: label,
     iconPosition: iconPosition,
     disabled: disabled
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
-    label: label,
-    src: iconSrc,
-    iconPosition: iconPosition
-  }), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
+    src: icon
+  }) : icon), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
     iconPosition: iconPosition,
     label: label
   }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
@@ -213,14 +209,12 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon ? /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
-        label: option.label,
-        iconPosition: optionsIconPosition
-      }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : /*#__PURE__*/_react["default"].createElement(option.icon)) : option.iconSrc && /*#__PURE__*/_react["default"].createElement(ListIcon, {
+      }, option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
-        src: option.iconSrc,
         iconPosition: optionsIconPosition
-      }), /*#__PURE__*/_react["default"].createElement("span", {
+      }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
+        src: option.icon
+      }) : option.icon), /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -357,15 +351,7 @@ var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject
   return props.caretHidden ? "100%" : "calc(100% - 36px)";
 });
 
-var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-});
+var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.buttonIconSize;
@@ -379,15 +365,7 @@ var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (
   return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
 });
 
-var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-});
+var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ListIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.optionIconSize;