@dxc-technology/halstack-react 0.0.0-01f4ea1 → 0.0.0-0271b6e

package/dropdown/Dropdown.test.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+global.document.createRange = function () {
+  return {
+    setStart: function setStart() {},
+    setEnd: function setEnd() {},
+    commonAncestorContainer: {
+      nodeName: "BODY",
+      ownerDocument: document
+    }
+  };
+};
+
+describe("Dropdown component tests", function () {
+  test("Dropdown renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      label: "dropdown-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("dropdown-test")).toBeTruthy();
+  });
+  test("Dropdown renders with correct icon before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render2.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      icon: "/testIcon",
+      iconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getAllByRole = _render3.getAllByRole;
+
+    var image = getAllByRole("img")[0];
+    expect(image.getAttribute("src")).toEqual("/testIcon");
+  });
+  test("onClick shows and hides option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        queryByText = _render4.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Before clicked is not showed
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+  test("Disabled dropdown is not clickable", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      disabled: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render5.queryByText;
+
+    var dropdown = queryByText("dropdown-test");
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(queryByText("option-test")).toBeFalsy();
+  });
+  test("Dropdown renders with correct icon before option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      label: "dropdown-test"
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with correct icon after option", function () {
+    var options = [{
+      value: 1,
+      label: "option-test",
+      icon: "/testIcon"
+    }];
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      optionsIconPosition: "after",
+      label: "dropdown-test"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    expect(getByRole("img").getAttribute("src")).toEqual("/testIcon");
+  });
+  test("Dropdown renders with caret hidden", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      caretHidden: true,
+      label: "dropdown-test"
+    })),
+        queryByRole = _render8.queryByRole;
+
+    expect(queryByRole("img")).toBeFalsy();
+  });
+  test("onSelectOption fuction is called correctly", function () {
+    var onSelectOption = jest.fn(function (i) {
+      return i;
+    });
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      onSelectOption: onSelectOption,
+      label: "dropdown-test"
+    })),
+        getByText = _render9.getByText;
+
+    var dropdown = getByText("dropdown-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(dropdown);
+    });
+    var option = getByText("option-test");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.click(option);
+    });
+    expect(onSelectOption).toHaveBeenCalledWith(1);
+  });
+  test("expandOnHover shows and hides the option correctly", function () {
+    var options = [{
+      value: 1,
+      label: "option-test"
+    }];
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+      options: options,
+      expandOnHover: true,
+      label: "dropdown-test"
+    })),
+        queryByText = _render10.queryByText;
+
+    var dropdown = queryByText("dropdown-test"); //Verify that is not showed before
+
+    expect(queryByText("option-test")).toBeFalsy();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseOver(dropdown);
+    });
+    expect(queryByText("option-test")).toBeTruthy();
+  });
+});

package/dropdown/types.d.ts

@@ -0,0 +1,80 @@
+/// <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.SVGProps<SVGSVGElement>;
+declare type Option = {
+    /**
+     * Option display value.
+     */
+    label?: string;
+    /**
+     * Element or path used as the icon that will be placed next to the
+     * option label.
+     */
+    icon?: string | SVG;
+    /**
+     * Option inner value.
+     */
+    value: string;
+};
+declare type Props = {
+    /**
+     * An array of objects representing the options.
+     */
+    options: Option[];
+    /**
+     * In case options include icons, whether the icon should appear
+     * after or before the label.
+     */
+    optionsIconPosition?: "before" | "after";
+    /**
+     * Element or path used as the icon that will be placed next to the
+     * dropdown label.
+     */
+    icon?: string | SVG;
+    /**
+     * Whether the icon should appear after or before the label.
+     */
+    iconPosition?: "before" | "after";
+    /**
+     * Text to be placed within the dropdown.
+     */
+    label?: string;
+    /**
+     * Whether the arrow next to the label must be displayed or not.
+     */
+    caretHidden?: boolean;
+    /**
+     * This function will be called every time the selection changes.
+     * The value of the selected option will be passed as a parameter.
+     */
+    onSelectOption: (value: string) => void;
+    /**
+     * If true, the options are showed when the dropdown is hover.
+     */
+    expandOnHover?: boolean;
+    /**
+     * Size of the margin to be applied to the component.
+     * 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.
+     */
+    tabIndex?: number;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+};
+export default Props;

package/dropdown/types.js

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

package/file-input/FileInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FileInputPropsType from "./types";
+declare const DxcFileInput: ({ name, mode, label, buttonLabel, dropAreaLabel, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
+export default DxcFileInput;