@dxc-technology/halstack-react 0.0.0-6f13c26 → 0.0.0-6f24944

package/dist/toggle/readme.md

@@ -1,80 +0,0 @@
-# DXC Toggle Component
-
-## Usage
-
-```js
-import { DxcToggle } from "@dxc-technology/halstack-react";
-
-<DxcToggle onClick={handleClick} label="Test Button" />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>selected: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component is selected.</td>
-    </tr>
-    <tr>
-        <td>mode: 'basic' | 'outlined'</td>
-        <td><code>'basic'</code></td>
-        <td>Uses on of the available toggle modes.</td>
-    </tr>
-    <tr>
-        <td>iconPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>Changes the position of the icon.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' |'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td><code>'basic'</code></td>
-        <td>Text to be placed on the toggle.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>URL of the icon that will be placed on the toggle.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onClick: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the button. The new state will be passed as a parameter.</td>
-    </tr>
-
-</table>
-
-## Examples
-
-```js
-import { DxcToggle } from "@dxc-technology/halstack-react";
-<DxcToggle
-  label="Disabled Ripple"
-  disableRipple={true}
-  theme="dark"
-  iconSrc={amazon}
-  mode="outlined"
-  selected={selected}
-  onClick={click}
-></DxcToggle>;
-```

package/dist/upload/Upload.js

@@ -1,205 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _DragAndDropArea = _interopRequireDefault(require("./dragAndDropArea/DragAndDropArea"));
-
-var _FilesToUpload = _interopRequireDefault(require("./files-upload/FilesToUpload"));
-
-var _Transactions = _interopRequireDefault(require("./transactions/Transactions"));
-
-var _variables = require("../common/variables.js");
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100%;\n  height: 400px;\n  box-shadow: 0px 3px 6px #00000029;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var V3DxcUpload = function V3DxcUpload(_ref) {
-  var callbackUpload = _ref.callbackUpload,
-      margin = _ref.margin,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      files = _useState2[0],
-      setFiles = _useState2[1];
-
-  var getFilesToUpload = function getFilesToUpload() {
-    return files.filter(function (file) {
-      return file.status === "pending";
-    }).map(function (file) {
-      var fileInfo = {
-        name: file.name,
-        type: file.type,
-        image: file.image,
-        status: file.status
-      };
-
-      fileInfo.deleteFile = function () {
-        var uploadFiles = [];
-        files.forEach(function (item) {
-          return uploadFiles.push(item);
-        });
-        var fileIndex = uploadFiles.indexOf(file, 0);
-
-        if (fileIndex > -1) {
-          uploadFiles.splice(fileIndex, 1);
-          setFiles(uploadFiles);
-        }
-      };
-
-      return fileInfo;
-    });
-  };
-
-  var getTransactionsFiles = function getTransactionsFiles() {
-    return files.filter(function (file) {
-      return file.status === "success" || file.status === "error" || file.status === "processing";
-    }).map(function (file) {
-      return {
-        name: file.name,
-        type: file.type,
-        image: file.image,
-        status: file.status
-      };
-    });
-  };
-
-  var getFilePreview = function getFilePreview(file) {
-    return new Promise(function (resolve) {
-      var reader = new FileReader();
-      reader.readAsDataURL(file);
-
-      reader.onload = function (e) {
-        resolve(e.target.result);
-      };
-    });
-  };
-
-  var onDragHandler = function onDragHandler(filesToAdd) {
-    setFiles([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd.map(function (file) {
-      var fileToAdd = {
-        status: "pending",
-        name: file.name,
-        type: file.type
-      };
-      return fileToAdd;
-    }))));
-    Promise.all(filesToAdd.map(function (fileToAdd) {
-      return getFilePreview(fileToAdd);
-    })).then(function (previews) {
-      setFiles([].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd.map(function (file, index) {
-        var fileToAdd = {
-          status: "pending",
-          name: file.name,
-          type: file.type,
-          image: previews[index]
-        };
-        return fileToAdd;
-      }))));
-    });
-  };
-
-  var onUploadHandler = function onUploadHandler() {
-    var uploadedFiles = [];
-    files.forEach(function (file) {
-      uploadedFiles = [].concat((0, _toConsumableArray2["default"])(uploadedFiles), [file]);
-    });
-    uploadedFiles.forEach(function (file) {
-      if (file.status === "pending") {
-        file.status = "processing";
-
-        if (typeof callbackUpload === "function") {
-          callbackUpload(file).then(function () {
-            file.status = "success";
-            uploadedFiles = getTransactionsFiles();
-            setFiles(uploadedFiles);
-          })["catch"](function (err) {
-            file.status = "error";
-            file.message = err;
-            uploadedFiles = getTransactionsFiles();
-            setFiles(uploadedFiles);
-          })["finally"]();
-        }
-      }
-
-      setFiles(uploadedFiles);
-    });
-  };
-
-  var filesToUpload = getFilesToUpload();
-  var transactionFiles = getTransactionsFiles();
-  return _react["default"].createElement(DXCUpload, {
-    margin: margin
-  }, transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_Transactions["default"], {
-    tabIndexValue: tabIndex,
-    transactions: transactionFiles
-  }), filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length === 0 && _react["default"].createElement(_DragAndDropArea["default"], {
-    dashed: false,
-    addFile: onDragHandler,
-    tabIndexValue: tabIndex
-  }) || filesToUpload && filesToUpload.length === 0 && transactionFiles && transactionFiles.length !== 0 && _react["default"].createElement(_DragAndDropArea["default"], {
-    dashed: true,
-    addFile: onDragHandler,
-    tabIndexValue: tabIndex
-  }), filesToUpload && filesToUpload.length !== 0 && _react["default"].createElement(_FilesToUpload["default"], {
-    filesToUpload: filesToUpload,
-    addFile: onDragHandler,
-    onUpload: onUploadHandler,
-    tabIndexValue: tabIndex
-  }));
-};
-
-V3DxcUpload.propTypes = {
-  callbackUpload: _propTypes["default"].func,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
-
-var DXCUpload = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-});
-
-var _default = V3DxcUpload;
-exports["default"] = _default;

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/ButtonsUpload.js

@@ -1,139 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Button = _interopRequireDefault(require("../../button/Button"));
-
-var _uploadButton = _interopRequireDefault(require("./upload-button.svg"));
-
-var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
-
-var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
-
-var _BackgroundColorContext = require("../../BackgroundColorContext.js");
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  mask: url(", ") no-repeat center;\n  mask-size: ", ";\n  height: ", ";\n  width: ", ";\n  margin-right: 5px;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  margin-right: 50px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 80px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
-  var addFile = _ref.addFile,
-      onUpload = _ref.onUpload;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var selectFile = function selectFile(e) {
-    var filesObject = e.target.files;
-
-    if (filesObject && filesObject.length > 0) {
-      var filesArray = Object.keys(filesObject).map(function (key) {
-        return filesObject[key];
-      });
-      addFile(filesArray);
-    }
-  };
-
-  var handleClick = function handleClick() {
-    document.getElementById("chooseFiles").click();
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.upload
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.upload.backgroundColor
-  }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIcon, null), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
-    margin: {
-      right: "small"
-    },
-    mode: "text",
-    label: "CHOOSE FILES",
-    onClick: handleClick
-  }), _react["default"].createElement("input", {
-    id: "chooseFiles",
-    type: "file",
-    multiple: true,
-    onChange: selectFile,
-    style: {
-      display: "none"
-    }
-  }), _react["default"].createElement(_Button["default"], {
-    label: "UPLOAD",
-    iconPosition: "after",
-    iconSrc: _uploadButton["default"],
-    onClick: onUpload
-  }))));
-};
-
-DxcButtonsUpload.propTypes = {
-  addFile: _propTypes["default"].func,
-  onUpload: _propTypes["default"].func
-};
-
-var DXCButtonsUpload = _styledComponents["default"].div(_templateObject());
-
-var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.dragAndDropAreaTextFontSize;
-}, function (props) {
-  return props.theme.dragAndDropAreaTextFontStyle;
-}, function (props) {
-  return props.theme.dragAndDropAreaTextFontWeight;
-}, function (props) {
-  return props.theme.dragAndDropAreaTextFontTextTransform;
-}, function (props) {
-  return props.theme.dragAndDropAreaTextFontColor;
-});
-
-var DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.theme.dragAndDropAreaIconColor;
-}, _dragDropIcon["default"], function (props) {
-  return "".concat(props.theme.dragAndDropAreaIconSize, " ").concat(props.theme.dragAndDropAreaIconSize);
-}, function (props) {
-  return props.theme.dragAndDropAreaIconSize;
-}, function (props) {
-  return props.theme.dragAndDropAreaIconSize;
-});
-
-var _default = DxcButtonsUpload;
-exports["default"] = _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>