@dxc-technology/halstack-react 0.0.0-3a65d35 → 0.0.0-3a698b0

package/tabs/Tabs.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -193,7 +193,7 @@ var DxcTabs = function DxcTabs(_ref) {
     var _refTabList$current3;
 
     var scrollWidth = (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current3 = refTabList.current) === null || _refTabList$current3 === void 0 ? void 0 : _refTabList$current3.offsetWidth) * 0.75;
-    var moveX;
+    var moveX = 0;
 
     if (countClick <= scrollWidth) {
       moveX = 0;
@@ -213,7 +213,7 @@ var DxcTabs = function DxcTabs(_ref) {
     var _refTabList$current4, _refTabList$current5;
 
     var scrollWidth = (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current4 = refTabList.current) === null || _refTabList$current4 === void 0 ? void 0 : _refTabList$current4.offsetWidth) * 0.75;
-    var moveX;
+    var moveX = 0;
 
     if (countClick + scrollWidth + (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current5 = refTabList.current) === null || _refTabList$current5 === void 0 ? void 0 : _refTabList$current5.offsetWidth) >= totalTabsWidth) {
       var _refTabList$current6;
@@ -343,9 +343,8 @@ var DxcTabs = function DxcTabs(_ref) {
     iconPosition: iconPosition
   }, /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollLeft,
-    scrollLeftEnabled: scrollLeftEnabled,
     enabled: enabledIndicator,
-    "aria-disabled": !scrollLeftEnabled,
+    disabled: !scrollLeftEnabled,
     "aria-label": translatedLabels.tabs.scrollLeft,
     tabIndex: scrollLeftEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
@@ -386,16 +385,15 @@ var DxcTabs = function DxcTabs(_ref) {
     "aria-disabled": isActiveIndicatorDisabled
   }))), /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollRight,
-    scrollRightEnabled: scrollRightEnabled,
     enabled: enabledIndicator,
-    "aria-disabled": !scrollRightEnabled,
+    disabled: !scrollRightEnabled,
     "aria-label": translatedLabels.tabs.scrollRight,
     tabIndex: scrollRightEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
   }, arrowIcons.right))));
 };
 
-var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  height: ", ";\n  background-color: ", ";\n  z-index: 1;\n"])), function (props) {
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.theme.dividerThickness;
 }, function (props) {
   return props.theme.dividerColor;
@@ -421,16 +419,12 @@ var Tabs = _styledComponents["default"].div(_templateObject3 || (_templateObject
   return props.theme.unselectedBackgroundColor;
 });
 
-var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  justify-content: center;\n  cursor: pointer;\n  border-bottom: solid ", " ", ";\n  box-sizing: border-box;\n  border: none;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  svg {\n    height: 20px;\n    width: 20px;\n    align-self: center;\n    fill: ", ";\n    visibility: visible;\n  }\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n    cursor: default;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n"])), function (props) {
+var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: center;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    cursor: default;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n\n  svg {\n    align-self: center;\n    height: 20px;\n    width: 20px;\n    fill: ", ";\n  }\n"])), function (props) {
   return props.enabled ? "flex" : "none";
 }, function (props) {
   return props.theme.scrollButtonsWidth;
 }, function (props) {
   return props.minHeightTabs - 1;
-}, function (props) {
-  return props.theme.dividerThickness;
-}, function (props) {
-  return props.theme.dividerColor;
 }, function (props) {
   return "".concat(props.theme.hoverBackgroundColor, " !important");
 }, function (props) {
@@ -441,19 +435,19 @@ var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_
   return props.theme.unselectedFontColor;
 });
 
-var ActiveIndicator = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  left: ", ";\n  width: ", ";\n  z-index: 2;\n  background-color: ", ";\n  bottom: 0;\n  height: ", ";\n  position: absolute;\n  &[aria-disabled=\"true\"] {\n    background-color: ", ";\n    display: none;\n  }\n"])), function (props) {
+var ActiveIndicator = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  &[aria-disabled=\"true\"] {\n    background-color: ", ";\n    display: none;\n  }\n"])), function (props) {
   return "".concat(props.tabLeft, "px");
 }, function (props) {
   return "".concat(props.tabWidth, "px");
-}, function (props) {
-  return props.theme.selectedUnderlineColor;
 }, function (props) {
   return props.theme.selectedUnderlineThickness;
+}, function (props) {
+  return props.theme.selectedUnderlineColor;
 }, function (props) {
   return props.theme.disabledFontColor;
 });
 
-var TabsContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  z-index: 1;\n  flex: 1 1 auto;\n  display: inline-block;\n  position: relative;\n  white-space: nowrap;\n  overflow-x: scroll;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var TabsContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  display: inline-block;\n  position: relative;\n  white-space: nowrap;\n  overflow-x: scroll;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 
 var TabList = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  min-height: ", "px;\n"])), function (props) {
   return props.minHeightTabs;

package/tabs/Tabs.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import DxcTabs from "./Tabs";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Tabs",
@@ -9,9 +10,8 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20" fill="currentColor">
+    <path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
   </svg>
 );
 
@@ -74,10 +74,20 @@ const tabsNotification = tabs.map((tab, index) => ({
   notificationNumber: (index === 0 && true) || (index === 1 && 5) || (index === 2 && 200),
 }));
 
-const tabsIcon = tabs.map((tab) => ({ ...tab, icon: iconSVG }));
+const tabsIcon = tabs.map((tab, index) =>
+  index <= tabs.length / 2
+    ? { ...tab, icon: "https://cdn-icons-png.flaticon.com/512/5039/5039041.png" }
+    : { ...tab, icon: iconSVG }
+);
 
 const tabsNotificationIcon = tabsNotification.map((tab) => ({ ...tab, icon: iconSVG }));
 
+const opinionatedTheme = {
+  tabs: {
+    baseColor: "#5f249f",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -152,7 +162,37 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTabs tabs={tabs} margin="xxlarge" />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="With icon and notification" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTabs tabs={tabsNotificationIcon} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTabs activeTabIndex={0} tabs={disabledTabs} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTabs tabs={tabs} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTabs tabs={tabs} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTabs tabs={tabs} />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/tabs/Tabs.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _Tabs = _interopRequireDefault(require("./Tabs.tsx"));
 
 var sampleTabs = [{
   label: "Tab-1"
@@ -17,13 +17,13 @@ var sampleTabs = [{
 }];
 var sampleTabsWithBadge = [{
   label: "Tab-1",
-  notificationNumber: "10"
+  notificationNumber: 10
 }, {
   label: "Tab-2",
-  notificationNumber: "20"
+  notificationNumber: 20
 }, {
   label: "Tab-3",
-  notificationNumber: "101"
+  notificationNumber: 101
 }];
 var sampleTabsMiddleDisabled = [{
   label: "Tab-1"
@@ -149,7 +149,6 @@ describe("Tabs component tests", function () {
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render7.getByText,
         getAllByRole = _render7.getAllByRole;
 
     var tabs = getAllByRole("tab");

package/tabs/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/tag/Tag.js

@@ -19,11 +19,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _Box = _interopRequireDefault(require("../box/Box"));
 
@@ -64,9 +64,7 @@ var DxcTag = function DxcTag(_ref) {
   var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     size: size,
     shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
-  }, /*#__PURE__*/_react["default"].createElement(TagContent, {
-    labelPosition: labelPosition
-  }, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(TagContent, null, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     iconBgColor: iconBgColor
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TagIcon, {
     src: icon
@@ -114,16 +112,16 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templat
   return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
 }, function (_ref4) {
   var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
 }, function (_ref5) {
   var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
 }, function (_ref6) {
   var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
 }, function (_ref7) {
   var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.left ? _variables.spaces[margin.left] : "";
 }, function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {

package/tag/Tag.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcTag from "./Tag";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Tag",
@@ -23,6 +24,13 @@ const largeIcon = (
   </svg>
 );
 
+const opinionatedTheme = {
+  tag: {
+    fontColor: "#000000",
+    iconColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -124,7 +132,12 @@ export const Chromatic = () => (
       <Title title="FitContent size" theme="light" level={4} />
       <DxcTag label="FitContent" size="fitContent" icon={icon} />
     </ExampleContainer>
-    <hr />
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTag label="Tag" icon={icon} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 

package/tag/Tag.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Tag = _interopRequireDefault(require("./Tag"));
+var _Tag = _interopRequireDefault(require("./Tag.tsx"));
 
 describe("Tag component tests", function () {
   test("Tag renders with correct label", function () {

package/text-input/Suggestion.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +11,33 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject, _templateObject2;
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var transformSpecialChars = function transformSpecialChars(str) {
+  var specialCharsRegex = /[\\*()\[\]{}+?/]/;
+  var value = str;
+
+  if (specialCharsRegex.test(value)) {
+    var regexAsString = specialCharsRegex.toString().split("");
+    var uniqueSpecialChars = regexAsString.filter(function (item, index) {
+      return regexAsString.indexOf(item) === index;
+    });
+    uniqueSpecialChars.forEach(function (specialChar) {
+      if (str.includes(specialChar)) value = value.replace(specialChar, "\\" + specialChar);
+    });
+  }
+
+  return value;
+};
+
 var Suggestion = function Suggestion(_ref) {
   var id = _ref.id,
       value = _ref.value,
@@ -23,9 +46,13 @@ var Suggestion = function Suggestion(_ref) {
       isLast = _ref.isLast,
       visuallyFocused = _ref.visuallyFocused,
       highlighted = _ref.highlighted;
-  var regEx = new RegExp(value, "i");
-  var matchedWords = suggestion.match(regEx);
-  var noMatchedWords = suggestion.replace(regEx, "");
+  var matchedSuggestion = (0, _react.useMemo)(function () {
+    var regEx = new RegExp(transformSpecialChars(value), "i");
+    return {
+      matchedWords: suggestion.match(regEx),
+      noMatchedWords: suggestion.replace(regEx, "")
+    };
+  }, [value, suggestion]);
   return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
     id: id,
     onClick: function onClick() {
@@ -35,9 +62,9 @@ var Suggestion = function Suggestion(_ref) {
     role: "option",
     "aria-selected": visuallyFocused ? true : undefined
   }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
-    last: isLast,
+    isLast: isLast,
     visuallyFocused: visuallyFocused
-  }, highlighted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords) : suggestion));
+  }, highlighted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedSuggestion.matchedWords), matchedSuggestion.noMatchedWords) : suggestion));
 };
 
 var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n  box-shadow: inset 0 0 0 2px\n    ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
@@ -49,7 +76,7 @@ var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_t
 });
 
 var StyledSuggestion = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
-  return props.last || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
+  return props.isLast || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(Suggestion);

package/text-input/TextInput.js

@@ -23,9 +23,9 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
@@ -39,7 +39,7 @@ var _Icons = _interopRequireDefault(require("./Icons"));
 
 var _uuid = require("uuid");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -547,7 +547,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     backgroundType: backgroundType,
     tabIndex: tabIndex,
     type: "button"
-  }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ActionIcon, {
+  }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: action.icon
   }) : action.icon), suffix && /*#__PURE__*/_react["default"].createElement(Suffix, {
     disabled: disabled,
@@ -559,7 +559,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   }, error)));
 });
 
-var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -635,11 +635,7 @@ var Input = _styledComponents["default"].input(_templateObject6 || (_templateObj
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
 });
 
-var ActionIcon = _styledComponents["default"].img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 16px;\n  height: 16px;\n"])));
-
-var Action = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  margin-left: 0.25rem;\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  svg {\n    line-height: 18px;\n  }\n"])), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
+var Action = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  width: 24px;\n  height: 24px;\n  padding: 3px;\n  margin-left: 0.25rem;\n  ", "\n\n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  img, svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
 }, function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionBackgroundColorOnDark : props.theme.disabledActionBackgroundColor : props.backgroundType === "dark" ? props.theme.actionBackgroundColorOnDark : props.theme.actionBackgroundColor;
@@ -649,25 +645,25 @@ var Action = _styledComponents["default"].button(_templateObject8 || (_templateO
   return !props.disabled && "\n      &:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n      }\n    ");
 });
 
-var Prefix = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
+var Prefix = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
   var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPrefixColorOnDark : props.theme.disabledPrefixColor : props.backgroundType === "dark" ? props.theme.prefixColorOnDark : props.theme.prefixColor;
   return "color: ".concat(color, "; border-right: 1px solid ").concat(color, ";");
 }, function (props) {
   return props.theme.fontFamily;
 });
 
-var Suffix = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin: 0 0.25rem;\n  padding: 0 0 0 0.5rem;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
+var Suffix = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin: 0 0.25rem;\n  padding: 0 0 0 0.5rem;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
   var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledSuffixColorOnDark : props.theme.disabledSuffixColor : props.backgroundType === "dark" ? props.theme.suffixColorOnDark : props.theme.suffixColor;
   return "color: ".concat(color, "; border-left: 1px solid ").concat(color, ";");
 }, function (props) {
   return props.theme.fontFamily;
 });
 
-var ErrorIcon = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  margin-left: 0.25rem;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n    font-size: 1.25rem;\n  }\n"])), function (props) {
+var ErrorIcon = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  margin-left: 0.25rem;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n    font-size: 1.25rem;\n  }\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
 });
 
-var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
+var Error = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;

package/text-input/TextInput.stories.tsx

@@ -11,6 +11,7 @@ import DxcFlex from "../flex/Flex";
 import Suggestions from "./Suggestions";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Text input",
@@ -27,7 +28,7 @@ const action = {
   ),
 };
 
-const actionLargeIcon = {
+const actionLargeIconSVG = {
   onClick: () => {},
   icon: (
     <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
@@ -37,6 +38,11 @@ const actionLargeIcon = {
   ),
 };
 
+const actionLargeIconURL = {
+  onClick: () => {},
+  icon: "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+};
+
 const country = ["Afghanistan"];
 const countries = [
   "Afghanistan",
@@ -61,8 +67,16 @@ const countries = [
   "Dominica",
   "Denmark",
   "Djibouti",
+  "*",
 ];
 
+const opinionatedTheme = {
+  textInput: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -98,12 +112,21 @@ export const Chromatic = () => (
       <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Clearable and large icon action" theme="light" level={4} />
+      <Title title="Clearable and large icon action (SVG)" theme="light" level={4} />
       <DxcTextInput
         label="Text input"
         defaultValue="Text text text text text text text text text text"
         clearable
-        action={actionLargeIcon}
+        action={actionLargeIconSVG}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Clearable and large icon action (URL)" theme="light" level={4} />
+      <DxcTextInput
+        label="Text input"
+        defaultValue="Text text text text text text text text text text"
+        clearable
+        action={actionLargeIconURL}
       />
     </ExampleContainer>
     <ExampleContainer>
@@ -297,6 +320,66 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcTextInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered input" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-focus-within">
+          <Title title="Focused input" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" defaultValue="Text" clearable />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Actived action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" action={action} clearable />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Focused action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" action={action} clearable />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Prefix" theme="light" level={4} />
+          <DxcTextInput label="With prefix" prefix="+34" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Suffix and action" theme="light" level={4} />
+          <DxcTextInput label="With suffix" helperText="Help message" suffix="USD" action={action} />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Invalid" theme="light" level={4} />
+          <DxcTextInput
+            label="Error text input"
+            helperText="Help message"
+            error="Error message."
+            defaultValue="Text"
+            clearable
+            optional
+            action={action}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and placeholder" theme="light" level={4} />
+          <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" prefix="+34" suffix="USD" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled, helper text, optional, value and action" theme="light" level={4} />
+          <DxcTextInput
+            label="Disabled text input"
+            helperText="Help message"
+            disabled
+            optional
+            defaultValue="Text"
+            action={action}
+          />
+        </ExampleContainer>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
@@ -308,7 +391,11 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest listbox" theme="light" level={2} />
         <ExampleContainer>
-          <Title title="List dialog uses a Radix Popover to appear over elements with a certain z-index" theme="light" level={3} />
+          <Title
+            title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+            theme="light"
+            level={3}
+          />
           <div
             style={{
               display: "flex",
@@ -322,6 +409,7 @@ const AutosuggestListbox = () => {
               borderRadius: "4px",
               overflow: "auto",
               zIndex: "1300",
+              position: "relative",
             }}
           >
             <DxcTextInput