@dxc-technology/halstack-react 0.0.0-f4bae62 → 0.0.0-f53e801

package/tag/Tag.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("./Tag"));
+
+describe("Tag component tests", function () {
+  test("Tag renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct label before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      labelPosition: "before"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct icon", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      icon: "/test-icon.jpg"
+    })),
+        getByRole = _render3.getByRole;
+
+    expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
+  });
+  test("Tag renders with link href", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      linkHref: "/test/page"
+    })),
+        getByRole = _render4.getByRole;
+
+    expect(getByRole("link").getAttribute("href")).toBe("/test/page");
+  });
+  test("Call correct function on click", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      onClick: onClick
+    })),
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.click(getByText("tag-test"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/tag/types.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+declare type TagCommonProps = {
+    /**
+     * If defined, the tag will be displayed as an anchor, using this prop as "href".
+     * Component will show some visual feedback on hover.
+     */
+    linkHref?: string;
+    /**
+     * If defined, the tag will be displayed as a button. This function will
+     * be called when the user clicks the tag. Component will show some
+     * visual feedback on hover.
+     */
+    onClick?: () => void;
+    /**
+     * Background color of the icon section of the tag.
+     */
+    iconBgColor?: string;
+    /**
+     * Whether the label should appear after or before the icon.
+     */
+    labelPosition?: "before" | "after";
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+declare type TagLabelProps = TagCommonProps & {
+    /**
+     * Element or path used as the icon that will be placed next to the label.
+     */
+    icon?: string | SVG;
+    /**
+     * Text to be placed next inside the tag.
+     */
+    label: string;
+};
+declare type TagIconProps = TagCommonProps & {
+    /**
+     * Element or path used as the icon that will be placed next to the label.
+     */
+    icon: string | SVG;
+    /**
+     * Text to be placed next inside the tag.
+     */
+    label?: string;
+};
+declare type Props = TagLabelProps | TagIconProps;
+export default Props;

package/tag/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/text-input/Suggestion.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SuggestionProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ id, value, onClick, suggestion, isLast, visuallyFocused, highlighted, }: SuggestionProps) => JSX.Element>;
+export default _default;

package/text-input/Suggestion.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Suggestion = function Suggestion(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      suggestion = _ref.suggestion,
+      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, "");
+  return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
+    id: id,
+    onClick: onClick,
+    visuallyFocused: visuallyFocused,
+    role: "option",
+    "aria-selected": visuallyFocused ? "true" : undefined
+  }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
+    last: isLast,
+    visuallyFocused: visuallyFocused
+  }, highlighted ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
+};
+
+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\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent";
+}, function (props) {
+  return props.theme.hoverListOptionBackgroundColor;
+}, function (props) {
+  return props.theme.activeListOptionBackgroundColor;
+});
+
+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);
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(Suggestion);
+
+exports["default"] = _default;

package/text-input/TextInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import TextInputPropsType from "./types";
+declare const DxcTextInput: React.ForwardRefExoticComponent<TextInputPropsType & React.RefAttributes<HTMLDivElement>>;
+export default DxcTextInput;