@dxc-technology/halstack-react 0.0.0-8d633bd → 0.0.0-9196773

package/test/ToggleGroup.test.js

@@ -23,7 +23,11 @@ const options = [
 
 describe("Toggle group component tests", () => {
   test("Toggle group renders with correct labels", () => {
-    const { getByText } = render(<DxcToggleGroup options={options} />);
+    const { getByText } = render(
+      <DxcToggleGroup label="Toggle group label" helperText="Toggle group helper text" options={options} />
+    );
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
     expect(getByText("Amazon")).toBeTruthy();
     expect(getByText("Ebay")).toBeTruthy();
     expect(getByText("Apple")).toBeTruthy();

package/test/Upload.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { render, fireEvent, act, createEvent } from "@testing-library/react";
-import DxcUpload from "../src/upload/Upload";
+import V3DxcUpload from "../src/upload/Upload";
 
 describe("Upload component tests", () => {
   test("Upload renders with correct text", () => {
-    const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
     expect(getByText("There are no files to upload")).toBeTruthy();
     expect(getByText("Drag and drop your files here or choose one from your computer")).toBeTruthy();
     expect(getByText("CHOOSE FILES")).toBeTruthy();
@@ -12,7 +12,7 @@ describe("Upload component tests", () => {
 
   test("Upload shows file information", () => {
     const myfunction = jest.fn();
-    const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small"></V3DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);
@@ -34,9 +34,9 @@ describe("Upload component tests", () => {
   });
 
   test("Calls correct function callbackUpload", () => {
-    const onCallbackUpload = jest.fn(() => new Promise(resolve => setTimeout(resolve, 1000)));
+    const onCallbackUpload = jest.fn(() => new Promise((resolve) => setTimeout(resolve, 1000)));
     const myfunction = jest.fn();
-    const { getByText } = render(<DxcUpload margin="small" callbackUpload={onCallbackUpload}></DxcUpload>);
+    const { getByText } = render(<V3DxcUpload margin="small" callbackUpload={onCallbackUpload}></V3DxcUpload>);
 
     const dropZone = getByText("There are no files to upload");
     const dropEvent = createEvent.drop(dropZone);

package/dist/footer/Footer.stories.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-require("../common/OpenSans.css");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _linkedin = _interopRequireDefault(require("../../.storybook/public/linkedin.svg"));
-
-var _facebook = _interopRequireDefault(require("../../.storybook/public/facebook.svg"));
-
-var _twitter = _interopRequireDefault(require("../../.storybook/public/twitter.svg"));
-
-var _InputText = _interopRequireDefault(require("../input-text/InputText"));
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Footer = _interopRequireDefault(require("./Footer"));
-
-var social = [{
-  href: "https://www.linkedin.com/company/dxctechnology",
-  logoSrc: _linkedin["default"]
-}, {
-  href: "https://twitter.com/dxctechnology",
-  logoSrc: _twitter["default"]
-}, {
-  href: "https://www.facebook.com/DXCTechnology/",
-  logoSrc: _facebook["default"]
-}];
-var bottom = [{
-  href: "https://www.linkedin.com/company/dxctechnology",
-  text: "Linkedin"
-}, {
-  href: "https://twitter.com/dxctechnology",
-  text: "Twitter"
-}, {
-  href: "https://www.facebook.com/DXCTechnology/",
-  text: "Facebook"
-}];
-(0, _react2.storiesOf)("Form Components|Footer", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement(_Footer["default"], {
-    copyright: "\xA9 DXC Technology 2019. All rights reserved.",
-    bottomLinks: bottom,
-    socialLinks: social
-  }), _react["default"].createElement("div", {
-    style: {
-      marginTop: "20px"
-    }
-  }, _react["default"].createElement(_Footer["default"], {
-    copyright: "\xA9 DXC Technology 2019. All rights reserved.",
-    bottomLinks: bottom,
-    socialLinks: social
-  }, _react["default"].createElement(_InputText["default"], {
-    assistiveText: "text input component",
-    label: "Footer Child",
-    theme: "dark"
-  }), _react["default"].createElement(_InputText["default"], {
-    assistiveText: "text input component",
-    label: "Footer Child",
-    theme: "dark"
-  }), _react["default"].createElement(_InputText["default"], {
-    assistiveText: "text input component",
-    label: "Footer Child",
-    theme: "dark"
-  }), _react["default"].createElement(_InputText["default"], {
-    assistiveText: "text input component",
-    label: "Footer Child",
-    theme: "dark"
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {};
-};
-
-(0, _react2.storiesOf)("Form Components|Footer", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", null);
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/input-text/InputText.stories.js

@@ -1,209 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _InputText = _interopRequireDefault(require("./InputText"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-var onBlur = (0, _addonActions.action)("onBlur");
-
-onBlur.toString = function () {
-  return "onBlurHandler";
-};
-
-var onClickIcon = (0, _addonActions.action)("onClickIcon");
-
-onClickIcon.toString = function () {
-  return "onClickIconHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Text", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "Normal Input",
-    error: false,
-    value: "Test Value",
-    onChange: onChange,
-    onBlur: onBlur,
-    required: true,
-    assistiveText: "Assistive Text Here"
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "With Assistive Text",
-    assistiveText: "Assistive Text Here",
-    error: true,
-    onChange: onChange,
-    onBlur: onBlur,
-    required: true
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "With Prefix text",
-    prefijo: "Kg",
-    onChange: onChange,
-    onBlur: onBlur,
-    assistiveText: "Assistive Text Here"
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: true,
-    label: "With Sufix text",
-    sufix: "\u20AC",
-    onChange: onChange,
-    onBlur: onBlur
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: true,
-    label: "With Prefix icon",
-    prefijoIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: true,
-    label: "With Sufix icon",
-    sufixIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "With Sufix icon",
-    sufixIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "Multiline",
-    multiline: true,
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "Normal Input",
-    error: false,
-    value: "Test Value",
-    onChange: onChange,
-    onBlur: onBlur,
-    required: true,
-    assistiveText: "Assistive Text Here"
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "With Assistive Text",
-    assistiveText: "Assistive Text Here",
-    error: true,
-    onChange: onChange,
-    onBlur: onBlur,
-    required: true
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "With Prefix text",
-    prefijo: "Kg",
-    onChange: onChange,
-    onBlur: onBlur,
-    assistiveText: "Assistive Text Here"
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: true,
-    label: "With Sufix text",
-    sufix: "\u20AC",
-    theme: "dark",
-    onChange: onChange,
-    onBlur: onBlur
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "With Prefix icon",
-    prefijoIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "With Sufix icon",
-    sufixIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    theme: "dark",
-    label: "With Sufix icon",
-    sufixIconSrc: _amazon["default"],
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  }), _react["default"].createElement(_InputText["default"], {
-    disabled: false,
-    label: "Multiline",
-    multiline: true,
-    sufix: "\u20AC",
-    prefijo: "Kg",
-    theme: "dark",
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("Label", "Test Label"),
-    theme: (0, _addonKnobs.select)("Theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    assistiveText: (0, _addonKnobs.text)("Assistive text", "Helper text"),
-    disabled: (0, _addonKnobs["boolean"])("Disabled", false),
-    prefijo: (0, _addonKnobs.text)("Prefix word", ""),
-    sufix: (0, _addonKnobs.text)("Sufix word", ""),
-    required: (0, _addonKnobs["boolean"])("Required", false),
-    error: (0, _addonKnobs["boolean"])("Error", false),
-    multiline: (0, _addonKnobs["boolean"])("Multiline", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Text", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_InputText["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    onBlur: onBlur,
-    onClickIcon: onClickIcon
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/password/styles.css

@@ -1,3 +0,0 @@
-::-ms-reveal {
-  display: none;
-}

package/dist/slider/Slider.stories.js

@@ -1,241 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Slider = _interopRequireDefault(require("./Slider"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-var onDragEnd = (0, _addonActions.action)("onDragEnd");
-
-onDragEnd.toString = function () {
-  return "onDragEnd";
-};
-
-var onChangeInput = (0, _addonActions.action)("onChangeInput");
-
-onChangeInput.toString = function () {
-  return "onChangeInputHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    minValue: (0, _addonKnobs.number)("minvalue", 0),
-    maxValue: (0, _addonKnobs.number)("maxvalue", 100),
-    showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
-    showInput: (0, _addonKnobs["boolean"])("showInput", true),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    step: (0, _addonKnobs.number)("step", 1),
-    marks: (0, _addonKnobs["boolean"])("marks", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput,
-    name: "sliderImput"
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/test/Password.test.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import DxcPassword from "../src/password/Password";
-
-describe("Password component tests", () => {
-  test("Password renders with label", () => {
-    const { getByText } = render(<DxcPassword label="Password label" />);
-    expect(getByText("Password label")).toBeTruthy();
-  });
-
-  test("Password renders with helper text", () => {
-    const { getByText } = render(<DxcPassword helperText="Helper text" />);
-    expect(getByText("Helper text")).toBeTruthy();
-  });
-
-  test("Password renders error", () => {
-    const { getByText } = render(<DxcPassword error="Error message." />);
-    expect(getByText("Error message.")).toBeTruthy();
-  });
-
-  test("onChange function is called correctly", () => {
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
-    const password = getByRole("textbox");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(onChange).toHaveBeenCalledWith("P");
-    expect(password.value).toBe("Pa$$w0rd");
-  });
-
-  test("Clear password value", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} clearable />);
-    const password = getByRole("textbox");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    const clearButton = getAllByRole("button")[0];
-    userEvent.click(clearButton);
-    expect(password.value).toBe("");
-  });
-
-  test("Non clearable password has no clear icon", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
-    const password = getByRole("textbox");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    const buttons = getAllByRole("button");
-    expect(buttons.length).toBe(1);
-  });
-
-  test("Show/hide password button works correctly", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByRole } = render(<DxcPassword label="Password" clearable onChange={onChange} />);
-    const password = getByRole("textbox");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    expect(password.type).toBe("password");
-    const showButton = getAllByRole("button")[1];
-    userEvent.click(showButton);
-    expect(password.type).toBe("text");
-  });
-
-  test("Password has correct accesibility attributes", () => {
-    const { getByRole } = render(<DxcPassword label="Password" />);
-    const password = getByRole("textbox");
-    expect(password.getAttribute("aria-autocomplete")).toBeNull();
-    expect(password.getAttribute("aria-controls")).toBeNull();
-    const showButton = getByRole("button");
-    expect(showButton.getAttribute("aria-expanded")).toBe("false");
-    expect(showButton.getAttribute("aria-label")).toBe("Show");
-    userEvent.click(showButton);
-    expect(showButton.getAttribute("aria-expanded")).toBe("true");
-    expect(showButton.getAttribute("aria-label")).toBe("Hide");
-  });
-});