@dxc-technology/halstack-react 0.0.0-c7d5596 → 0.0.0-c7ec4d1

package/dist/toggle-group/readme.md

@@ -1,82 +0,0 @@
-# DXC Toggle Group Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>value: any | any[]</td>
-        <td></td>
-        <td>
-          The key(s) of the selected value(s). If the toggle group component
-          doesn't allow multiple selection, it must be one unique value. If the
-          component allows multiple selection, value must be an array. If
-          undefined, the component will be uncontrolled and the value will be
-          managed internally by the component.
-        </td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>
-            This function will be called every time the selection changes. The
-            number with the key of the selected value will be passed as a
-            parameter to this function. If multiple selection is allowed, an array
-            of keys will be passed
-        </td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>multiple: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>
-            If true, the toggle group will support multiple selection. In that
-            case, value must be an array of numbers with the keys of the selected
-            values.
-        </td>
-    </tr>
-    <tr>
-        <td>options: object[]</td>
-        <td>
-            <code>[]</code>
-        </td>
-        <td>
-            An array of objects representing the selectable options. Each object
-            has the following properties:
-            <ul>
-            <li>
-                <b>value</b>: Number with the option inner value.
-            </li>
-            <li>
-                <b>label</b>: String with the option display value.
-            </li>
-            <li>
-                <b>iconSrc</b>: URL of the icon that will be placed. IconSrc and
-                label can't be used at same time.
-            </li>
-            </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>margin: string | object</td>
-        <td></td>
-        <td>
-            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.
-        </td>
-    </tr>
-</table>

package/dist/upload/Upload.stories.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Upload = _interopRequireDefault(require("./Upload"));
-
-function callbackFunc() {
-  return _callbackFunc.apply(this, arguments);
-}
-
-function _callbackFunc() {
-  _callbackFunc = (0, _asyncToGenerator2["default"])(
-  /*#__PURE__*/
-  _regenerator["default"].mark(function _callee() {
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            return _context.abrupt("return", new Promise(function (resolve) {
-              return setTimeout(resolve, 1000);
-            }));
-
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return _callbackFunc.apply(this, arguments);
-}
-
-(0, _react2.storiesOf)("Form Components|Upload", module).add("Component", function () {
-  return _react["default"].createElement("div", {
-    style: {
-      marginTop: "80px"
-    }
-  }, _react["default"].createElement(_Upload["default"], {
-    callbackUpload: callbackFunc
-  }));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {};
-};
-
-(0, _react2.storiesOf)("Form Components|Upload", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement(_Upload["default"], (0, _extends2["default"])({}, props, {
-    callbackUpload: callbackFunc
-  }));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/upload/buttons-upload/drag-drop-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
-</svg>

package/dist/upload/buttons-upload/upload-button.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>

package/dist/upload/dragAndDropArea/upload_drop.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="74.5" height="74.5" viewBox="0 0 24 24" fill="#666666">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"/>
-</svg>

package/dist/upload/dragAndDropArea/upload_file.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="43.5" height="43.5" viewBox="0 0 24 24">
-    <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/file-upload/audio-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/file-upload/close.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/file-upload/file-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
-</svg>

package/dist/upload/file-upload/video-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/readme.md

@@ -1,37 +0,0 @@
-# DXC Upload Component
-
-## Usage
-
-```js
-import { DxcUpload } from "@dxc-technology/halstack-react";
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>onUpload: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the 'Upload' button for every file to be uploaded, we will send as a parameter the File object; apart from that this function should return one promise on which we should make 'then'(here we should show a Success alert) or 'catch' (in this case we would receive the error message as a string)</td>
-    </tr>
-
-</table>
-
-## Examples
-
-```js
-import React from "react";
-
-import { DxcUpload } from "@dxc-technology/halstack-react";
-
-function App() {
-  return <Upload callbackUpload={callbackFunc} />;
-}
-
-export default App;
-```

package/dist/upload/transaction/audio-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/transaction/audio-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path fill="none" d="M0 0h24v24H0V0z"/>
-    <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
-</svg>

package/dist/upload/transaction/error-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/file-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/file-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/image-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/image-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/success-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#50B50F">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-</svg>

package/dist/upload/transaction/video-icon-err.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/upload/transaction/video-icon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
-    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/wizard/invalid_icon.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
-  <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
-    <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
-    <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
-  </g>
-</svg>

package/dist/wizard/valid_icon.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
-  <g id="Group_2914" data-name="Group 2914" transform="translate(4677 3925)">
-    <path id="Path_2822" data-name="Path 2822" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-4669 -3917)" fill="#dbf1c4"/>
-    <path id="check-circle-regular" d="M256,8C119.033,8,8,119.033,8,256S119.033,504,256,504,504,392.967,504,256,392.967,8,256,8Zm0,48A200,200,0,1,1,56,256,199.893,199.893,0,0,1,256,56M396.2,186.267l-22.536-22.718a12,12,0,0,0-16.97-.068L215.346,303.7,155.554,243.42a12,12,0,0,0-16.97-.069l-22.719,22.536a12,12,0,0,0-.068,16.971l90.781,91.516a12,12,0,0,0,16.97.068l172.589-171.2a12,12,0,0,0,.067-16.971Z" transform="translate(-4685 -3933)" fill="#7ed321"/>
-  </g>
-</svg>

package/dist/wizard/validation-wrong.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
-  <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
-    <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
-    <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
-  </g>
-</svg>

package/test/TabsForSections.test.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import DxcTabsForSections from "../src/tabs-for-sections/TabsForSections";
-
-const sections = [
-  {
-    tabLabel: "S1",
-    section: () => <div>test-section-1</div>,
-  },
-  {
-    tabLabel: "S2",
-    section: () => <div>test-section-2</div>,
-  },
-  {
-    tabLabel: "S3",
-    section: () => <div>test-section-3</div>,
-  },
-];
-
-describe("TabsForSections component tests", () => {
-  test("TabsForSections renders with correct sections label", () => {
-    const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
-    expect(getByText("S1")).toBeTruthy();
-    expect(getByText("S2")).toBeTruthy();
-    expect(getByText("S3")).toBeTruthy();
-  });
-
-  test("TabsForSections renders with correct sections content", () => {
-    const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
-    expect(getByText("test-section-1")).toBeTruthy();
-    expect(getByText("test-section-2")).toBeTruthy();
-    expect(getByText("test-section-3")).toBeTruthy();
-  });
-});

package/test/Toggle.test.js

@@ -1,43 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcToggle from "../src/toggle/Toggle";
-
-describe("Toggle component tests", () => {
-  test("Toggle renders with correct text", () => {
-    const { getByText } = render(<DxcToggle label="Toggle" />);
-    expect(getByText("Toggle")).toBeTruthy();
-  });
-
-  test("Calls correct function on click", () => {
-    const onClick = jest.fn();
-    const { getByText} = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test("Calls correct function on click with the correct value.", () => {
-    const onClick = jest.fn();
-    const { getByText, rerender } = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    rerender(<DxcToggle label="ToggleTest" onClick={onClick} selected={true} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick.mock.calls[0][0]).toBe(true);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-  });
-
-
-  test("Calls correct function on click with the correct value, if it´s controlled and the user doesn´t change the value the function always receives the same", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<DxcToggle label="ToggleTest" selected={true} onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalledTimes(3);
-    expect(onClick.mock.calls[0][0]).toBe(false);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-    expect(onClick.mock.calls[2][0]).toBe(false);
-  });
-
-});