@dxc-technology/halstack-react 0.0.0-5d4ab44 → 0.0.0-5fd247d

package/dist/button/readme.md

@@ -1,93 +0,0 @@
-# DXC Button Component
-
-## Usage
-
-```js
-import { DxcButton } from "@diaas/dxc-react-cdk";
-
-<DxcButton onClick={handleClick} label="Test Button" />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>mode: 'basic' | 'outlined' | 'raised' | 'flat'</td>
-        <td><code>'basic'</code></td>
-        <td>Uses on of the available button modes.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' |'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available button modes.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td><code>'basic'</code></td>
-        <td>Text to be placed next to the button.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>URL of the icon that will be placed next to the button label.</td>
-    </tr>
-    <tr>
-        <td>iconPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>Whether the icon should appear after or before the label.</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 event object will be passed as a parameter.</td>
-    </tr>
-
-</table>
-
-## Examples
-
-- Basic button - Light theme - Enabled - Icon after label - With ripple
-
-```js
-import React from "react";
-
-import { DxcButton } from "@diaas/dxc-react-cdk";
-
-function App() {
-  const handleOnClick = event => {
-    console.log("Button clicked");
-  };
-
-  return (
-    <div>
-      <DxcButton
-        label="Basic"
-        mode="basic"
-        disabled={false}
-        theme="light"
-        disableRipple={false}
-        iconPosition="after"
-        iconSrc="/images/run_icon.png"
-        onClick={handleOnClick}
-      />
-    </div>
-  );
-}
-
-export default App;
-```

package/dist/card/Card.js

@@ -1,246 +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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _Box = _interopRequireDefault(require("../box/Box"));
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  height: 100%;\n  overflow: hidden;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 140px;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  color: ", ";\n  align-items: center;\n  flex-direction: ", ";\n  height: ", ";\n  width: ", ";\n  border: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcCard = function DxcCard(_ref) {
-  var imageSrc = _ref.imageSrc,
-      children = _ref.children,
-      margin = _ref.margin,
-      linkHref = _ref.linkHref,
-      onClick = _ref.onClick,
-      imageBgColor = _ref.imageBgColor,
-      imagePadding = _ref.imagePadding,
-      imagePosition = _ref.imagePosition,
-      theme = _ref.theme,
-      outlined = _ref.outlined,
-      imageCover = _ref.imageCover;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isHovered = _useState2[0],
-      changeIsHovered = _useState2[1];
-
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
-  var clickHandler = function clickHandler() {
-    if (onClick) {
-      onClick();
-    }
-  };
-
-  var tagContent = _react["default"].createElement(_Box["default"], {
-    shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
-  }, _react["default"].createElement(CardContainer, {
-    brightness: theme,
-    hasAction: onClick || linkHref,
-    outlined: outlined,
-    imagePosition: imagePosition
-  }, _react["default"].createElement(ImageContainer, {
-    imageBgColor: imageBgColor
-  }, _react["default"].createElement(TagImage, {
-    imagePadding: imagePadding,
-    cover: imageCover,
-    src: imageSrc
-  })), _react["default"].createElement(CardContent, null, children)));
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
-  }, _react["default"].createElement(StyledDxcCard, {
-    margin: margin,
-    onMouseEnter: function onMouseEnter() {
-      return changeIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return changeIsHovered(false);
-    },
-    onClick: clickHandler,
-    hasAction: onClick || linkHref
-  }, linkHref && _react["default"].createElement(StyledLink, {
-    href: linkHref
-  }, tagContent) || tagContent));
-};
-
-var StyledDxcCard = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var hasAction = _ref2.hasAction;
-  return hasAction && "pointer" || "unset";
-}, function (_ref3) {
-  var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
-});
-
-var borderSizePx = "2";
-
-var getBorder = function getBorder(props) {
-  var color = props.brightness === "dark" || props.brightness === "medium" ? props.theme.white : props.theme.black;
-  return props.outlined ? "".concat(borderSizePx, "px solid ").concat(color) : "none";
-};
-
-var CardContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.brightness === "dark" ? props.theme.black : props.brightness === "medium" ? "#212121" : props.theme.white;
-}, function (props) {
-  return props.brightness === "dark" || props.brightness === "medium" ? props.theme.white : props.theme.black;
-}, function (_ref8) {
-  var imagePosition = _ref8.imagePosition;
-  return imagePosition === "before" && "row" || "row-reverse";
-}, function (_ref9) {
-  var outlined = _ref9.outlined;
-  return outlined ? "".concat(220 - 2 * borderSizePx, "px") : "220px";
-}, function (_ref10) {
-  var outlined = _ref10.outlined;
-  return outlined ? "".concat(400 - 2 * borderSizePx, "px") : "400px";
-}, function (props) {
-  return getBorder(props);
-}, function (props) {
-  return props.hasAction ? props.theme.yellow : "unset";
-});
-
-var StyledLink = _styledComponents["default"].a(_templateObject3());
-
-var TagImage = _styledComponents["default"].img(_templateObject4(), function (_ref11) {
-  var imagePadding = _ref11.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref12) {
-  var imagePadding = _ref12.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref13) {
-  var cover = _ref13.cover;
-  return cover ? "cover" : "contain";
-});
-
-var ImageContainer = _styledComponents["default"].div(_templateObject5(), function (_ref14) {
-  var imageBgColor = _ref14.imageBgColor;
-  return imageBgColor;
-});
-
-var CardContent = _styledComponents["default"].div(_templateObject6());
-
-DxcCard.propTypes = {
-  imageSrc: _propTypes["default"].string,
-  imageBgColor: _propTypes["default"].string,
-  imagePadding: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces))),
-  imagePosition: _propTypes["default"].oneOf(["before", "after"]),
-  linkHref: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  outlined: _propTypes["default"].bool,
-  imageCover: _propTypes["default"].bool,
-  theme: _propTypes["default"].oneOf(["dark", "medium", "light"]),
-  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)))])
-};
-DxcCard.defaultProps = {
-  imageSrc: null,
-  margin: null,
-  theme: "light",
-  outlined: false,
-  imagePadding: null,
-  imageCover: false,
-  linkHref: null,
-  onClick: null,
-  imageBgColor: "black",
-  imagePosition: "before"
-};
-var _default = DxcCard;
-exports["default"] = _default;

package/dist/checkbox/Checkbox.js

@@ -1,221 +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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  width: 17px;\n  height: 17px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  z-index: 0;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  width: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n  position: relative;\n  flex-direction: ", ";\n  .MuiButtonBase-root {\n    padding: 10px 10px;\n    margin: 0px 2px;\n    color: ", ";\n\n    :hover {\n      background-color: transparent;\n    }\n    &.Mui-checked {\n      color: ", ";\n      &:hover {\n        background-color: transparent;\n      }\n    }\n    &.Mui-disabled {\n      color: ", ";\n    }\n    .MuiTouchRipple-child {\n      background-color: ", ";\n    }\n    .MuiSvgIcon-root {\n      width: 26.6px;\n      height: 26.6px;\n    }\n    .MuiIconButton-label {\n      z-index: 1;\n    }\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  cursor: ", ";\n  font-family: \"Open Sans\", sans-serif;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcCheckbox = function DxcCheckbox(_ref) {
-  var checked = _ref.checked,
-      value = _ref.value,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$disableRipple = _ref.disableRipple,
-      disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
-      onChange = _ref.onChange,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerChecked = _useState2[0],
-      setInnerChecked = _useState2[1];
-
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
-  var handlerCheckboxChange = function handlerCheckboxChange(checkboxValue) {
-    if (checked === undefined) {
-      var isChecked = checkboxValue.target.checked === undefined ? !innerChecked : checkboxValue.target.checked;
-      setInnerChecked(isChecked);
-
-      if (typeof onChange === "function") {
-        onChange(isChecked);
-      }
-    } else {
-      if (typeof onChange === "function") {
-        onChange(!checked);
-      }
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
-  }, _react["default"].createElement(CheckboxContainer, {
-    id: name,
-    brightness: theme,
-    labelPosition: labelPosition,
-    disabled: disabled,
-    margin: margin,
-    size: size
-  }, _react["default"].createElement(_Checkbox["default"], {
-    checked: checked != undefined ? checked : innerChecked,
-    inputProps: name = {
-      name: name
-    },
-    onChange: handlerCheckboxChange,
-    value: value,
-    disabled: disabled,
-    disableRipple: disableRipple
-  }), required && _react["default"].createElement(_RequiredComponent["default"], {
-    brightness: theme
-  }), label && _react["default"].createElement(LabelContainer, {
-    labelPosition: labelPosition,
-    brightness: theme,
-    onClick: disabled === true ? function (e) {} : handlerCheckboxChange,
-    disabled: disabled
-  }, label), _react["default"].createElement(CheckboxBlackBack, {
-    labelPosition: labelPosition,
-    disabled: disabled,
-    checked: checked != undefined ? checked : innerChecked,
-    brightness: theme
-  })));
-};
-
-var sizes = {
-  small: "120px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%",
-  fitContent: "unset"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var LabelContainer = _styledComponents["default"].span(_templateObject(), function (props) {
-  return props.disabled ? props.brightness === "dark" ? props.theme.darkGrey : props.theme.lightGrey : props.brightness === "dark" ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
-});
-
-var CheckboxContainer = _styledComponents["default"].span(_templateObject2(), 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] : "";
-}, function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
-}, function (props) {
-  return props.labelPosition === "before" ? "row-reverse" : "row";
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.darkGrey;
-}, function (props) {
-  return props.theme.yellow;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "dark" ? props.theme.white : props.theme.darkGrey;
-});
-
-var CheckboxBlackBack = _styledComponents["default"].span(_templateObject3(), function (props) {
-  return props.checked !== true ? "transparent" : props.brightness === "light" && props.disabled === true ? props.theme.white : props.theme.black;
-}, function (props) {
-  return props.labelPosition === "before" ? "unset" : "17px";
-}, function (props) {
-  return props.labelPosition === "before" ? "17px" : "unset";
-});
-
-DxcCheckbox.propTypes = {
-  checked: _propTypes["default"].bool,
-  value: _propTypes["default"].any,
-  label: _propTypes["default"].string,
-  labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
-  theme: _propTypes["default"].oneOf(["light", "dark", ""]),
-  name: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  disableRipple: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  required: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  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)))])
-};
-var _default = DxcCheckbox;
-exports["default"] = _default;