@dxc-technology/halstack-react 0.0.0-18817c1 → 0.0.0-18bcda5

package/number-input/NumberInput.js

@@ -0,0 +1,76 @@
+"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 _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
+
+var _NumberInputContext = _interopRequireDefault(require("./NumberInputContext"));
+
+var _templateObject;
+
+var DxcNumberInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+      name = _ref.name,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      helperText = _ref.helperText,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      optional = _ref.optional,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      min = _ref.min,
+      max = _ref.max,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      error = _ref.error,
+      autocomplete = _ref.autocomplete,
+      margin = _ref.margin,
+      size = _ref.size,
+      tabIndex = _ref.tabIndex;
+  return /*#__PURE__*/_react["default"].createElement(_NumberInputContext["default"].Provider, {
+    value: {
+      typeNumber: "number",
+      minNumber: min,
+      maxNumber: max,
+      stepNumber: step
+    }
+  }, /*#__PURE__*/_react["default"].createElement(NumberInputContainer, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    label: label,
+    name: name,
+    defaultValue: defaultValue,
+    value: value,
+    helperText: helperText,
+    placeholder: placeholder,
+    disabled: disabled,
+    optional: optional,
+    prefix: prefix,
+    suffix: suffix,
+    error: error,
+    onChange: onChange,
+    onBlur: onBlur,
+    autocomplete: autocomplete,
+    margin: margin,
+    size: size,
+    tabIndex: tabIndex,
+    ref: ref
+  })));
+});
+
+var NumberInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  // Chrome, Safari, Edge, Opera\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  // Firefox\n  input[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n"])));
+
+var _default = DxcNumberInput;
+exports["default"] = _default;

package/number-input/NumberInput.stories.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DarkContainer from "../../.storybook/components/DarkSection";
+import DxcNumberInput from "./NumberInput";
+
+export default {
+  title: "Number input ",
+  component: DxcNumberInput,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcNumberInput />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label and placeholder" theme="light" level={4} />
+      <DxcNumberInput label="Number input" placeholder="Placeholder" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Helper text, optional and value" theme="light" level={4} />
+      <DxcNumberInput label="Number input" defaultValue="12" helperText="Help message" optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled and placeholder" theme="light" level={4} />
+      <DxcNumberInput label="Disabled number input" disabled placeholder="Placeholder" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled, helper text, optional and value" theme="light" level={4} />
+      <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="10" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Prefix" theme="light" level={4} />
+      <DxcNumberInput label="With prefix" prefix="+34" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Suffix" theme="light" level={4} />
+      <DxcNumberInput label="With suffix" suffix="USD" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid" theme="light" level={4} />
+      <DxcNumberInput label="Error number input" helperText="Help message" error="Error message." defaultValue="23" optional />
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <Title title="Dark" theme="dark" level={2} />
+        <ExampleContainer>
+          <Title title="Helper text, placeholder and optional" theme="dark" level={4} />
+          <DxcNumberInput label="Number input" helperText="Help message" placeholder="Placeholder" optional />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Helper text, value and error" theme="dark" level={4} />
+          <DxcNumberInput label="Number input" helperText="Help message" error="Error message." defaultValue="199" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and placeholder" theme="dark" level={4} />
+          <DxcNumberInput label="Disabled number input" disabled placeholder="Placeholder" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled, helper text, optional and value" theme="dark" level={4} />
+          <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="1232454" />
+        </ExampleContainer>
+      </DarkContainer>
+    </BackgroundColorProvider>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcNumberInput label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcNumberInput label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcNumberInput label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcNumberInput label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcNumberInput label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcNumberInput label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcNumberInput label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small size" theme="light" level={4} />
+      <DxcNumberInput label="Small" size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcNumberInput label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcNumberInput label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent size" theme="light" level={4} />
+      <DxcNumberInput label="FillParent" size="fillParent" />
+    </ExampleContainer>
+  </>
+);

package/number-input/NumberInput.test.js

@@ -0,0 +1,506 @@
+"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 _NumberInput = _interopRequireDefault(require("./NumberInput"));
+
+describe("Number input component tests", function () {
+  test("Number input renders with label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Number input label")).toBeTruthy();
+  });
+  test("Number input renders with helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      helperText: "Helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Helper text")).toBeTruthy();
+  });
+  test("Number input renders with placeholder", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number label",
+      placeholder: "Placeholder"
+    })),
+        getByLabelText = _render3.getByLabelText;
+
+    var number = getByLabelText("Number label");
+    expect(number.getAttribute("placeholder")).toBe("Placeholder");
+  });
+  test("Number input renders increment and decrement buttons", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number label"
+    })),
+        queryAllByRole = _render4.queryAllByRole;
+
+    expect(queryAllByRole("button").length).toBe(2);
+  });
+  test("Number input buttons' tooltip is correct", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number label"
+    })),
+        getByTitle = _render5.getByTitle;
+
+    expect(getByTitle("Decrement value")).toBeTruthy();
+    expect(getByTitle("Increment value")).toBeTruthy();
+  });
+  test("Number input is disabled", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number label",
+      disabled: true
+    })),
+        getByLabelText = _render6.getByLabelText;
+
+    var number = getByLabelText("Number label");
+    expect(number.disabled).toBeTruthy();
+  });
+  test("Number input is optional", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number label",
+      optional: true
+    })),
+        getByText = _render7.getByText;
+
+    expect(getByText("(Optional)")).toBeTruthy();
+  });
+  test("Number input is not optional: required field, displays error if not filled in", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByRole = _render8.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "1");
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Suffix and prefix must be shown)", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      prefix: "+34",
+      suffix: "USD"
+    })),
+        getByText = _render9.getByText;
+
+    expect(getByText("+34")).toBeTruthy();
+    expect(getByText("USD")).toBeTruthy();
+  });
+  test("Invalid number input renders error", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      error: "Error message."
+    })),
+        getByText = _render10.getByText;
+
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      onChange: onChange
+    })),
+        getByLabelText = _render11.getByLabelText;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "t");
+
+    expect(onChange).not.toHaveBeenCalledWith({
+      value: "t"
+    });
+    expect(number.value).toBe("");
+
+    _userEvent["default"].type(number, "1");
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "1"
+    });
+    expect(number.value).toBe("1");
+  });
+  test("Error message is shown if the value is less than the min value", function () {
+    var onChange = jest.fn(function (_ref) {
+      var value = _ref.value,
+          error = _ref.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+    var onBlur = jest.fn(function (_ref2) {
+      var value = _ref2.value,
+          error = _ref2.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5,
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByLabelText = _render12.getByLabelText;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+  });
+  test("Cannot decrement the value if it is less than the min value", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5
+    })),
+        getByLabelText = _render13.getByLabelText,
+        getAllByRole = _render13.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("1");
+    var decrement = getAllByRole("button")[0];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("1");
+  });
+  test("Increment the value when it is less than the min value", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5
+    })),
+        getByLabelText = _render14.getByLabelText,
+        getAllByRole = _render14.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("1");
+    var increment = getAllByRole("button")[1];
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("5");
+  });
+  test("Error message is shown if the value is greater than the max value", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      max: 10,
+      onBlur: onBlur,
+      onChange: onChange
+    })),
+        getByLabelText = _render15.getByLabelText;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "12");
+
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith({
+      value: "12",
+      error: "Value must be less than or equal to 10."
+    });
+
+    _react2.fireEvent.blur(number);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "12",
+      error: "Value must be less than or equal to 10."
+    });
+  });
+  test("Cannot increment the value if it is greater than the max value", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      max: 10
+    })),
+        getByLabelText = _render16.getByLabelText,
+        getAllByRole = _render16.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "12");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("12");
+    var decrement = getAllByRole("button")[1];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("12");
+  });
+  test("Decrement the value when it is greater than the max value", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      max: 10
+    })),
+        getByLabelText = _render17.getByLabelText,
+        getAllByRole = _render17.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "12");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("12");
+    var decrement = getAllByRole("button")[0];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min and max values", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5,
+      max: 10
+    })),
+        getByLabelText = _render18.getByLabelText,
+        getAllByRole = _render18.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("1");
+    var decrement = getAllByRole("button")[0];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("1");
+    var increment = getAllByRole("button")[1];
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("5");
+
+    _userEvent["default"].click(increment);
+
+    _userEvent["default"].click(increment);
+
+    _userEvent["default"].click(increment);
+
+    _userEvent["default"].click(increment);
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("10");
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with step", function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      step: 5
+    })),
+        getByLabelText = _render19.getByLabelText,
+        getAllByRole = _render19.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "10");
+
+    _react2.fireEvent.blur(number);
+
+    expect(number.value).toBe("10");
+    var increment = getAllByRole("button")[1];
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("15");
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("20");
+    var decrement = getAllByRole("button")[0];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("15");
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("10");
+  });
+  test("Increment and decrement the value with min, max and step", function () {
+    var onBlur = jest.fn(function (_ref3) {
+      var value = _ref3.value,
+          error = _ref3.error;
+      expect(value).toBe("1");
+      expect(error).toBe("Value must be greater than or equal to 5.");
+    });
+
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5,
+      max: 20,
+      step: 8,
+      onBlur: onBlur
+    })),
+        getByLabelText = _render20.getByLabelText,
+        getAllByRole = _render20.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.blur(number);
+
+    var increment = getAllByRole("button")[1];
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("5");
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("13");
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("20");
+
+    _userEvent["default"].click(increment);
+
+    expect(number.value).toBe("20");
+    var decrement = getAllByRole("button")[0];
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("12");
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("5");
+
+    _userEvent["default"].click(decrement);
+
+    expect(number.value).toBe("5");
+  });
+  test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label",
+      min: 5,
+      max: 20,
+      step: 5
+    })),
+        getByLabelText = _render21.getByLabelText;
+
+    var number = getByLabelText("Number input label");
+
+    _userEvent["default"].type(number, "1");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+
+    expect(number.value).toBe("5");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+
+    expect(number.value).toBe("10");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+
+    expect(number.value).toBe("15");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+
+    expect(number.value).toBe("20");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 38
+    });
+
+    expect(number.value).toBe("20");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+
+    expect(number.value).toBe("15");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+
+    expect(number.value).toBe("10");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+
+    expect(number.value).toBe("5");
+
+    _react2.fireEvent.keyDown(number, {
+      keyCode: 40
+    });
+
+    expect(number.value).toBe("5");
+  });
+  test("Number has correct accesibility attributes", function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+      label: "Number input label"
+    })),
+        getByLabelText = _render22.getByLabelText,
+        getAllByRole = _render22.getAllByRole;
+
+    var number = getByLabelText("Number input label");
+    expect(number.getAttribute("aria-autocomplete")).toBeNull();
+    expect(number.getAttribute("aria-controls")).toBeNull();
+    expect(number.getAttribute("aria-expanded")).toBeNull();
+    var decrement = getAllByRole("button")[0];
+    expect(decrement.getAttribute("aria-label")).toBe("Decrement value");
+    var increment = getAllByRole("button")[1];
+    expect(increment.getAttribute("aria-label")).toBe("Increment value");
+  });
+});