@dxc-technology/halstack-react 0.0.0-b05ef02 → 0.0.0-b243e75

package/dist/button/Button.js

@@ -1,219 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  display: inline-block;\n  width: ", ";\n  cursor: ", ";\n\n  .MuiButtonBase-root {\n    .MuiButton-label {\n      display: flex;\n      flex-direction: ", ";\n      align-items: center;\n    }\n    letter-spacing: ", ";\n    box-shadow: none;\n    font-size: ", ";\n    font-weight: ", ";\n    min-width: ", ";\n    border-radius: 4px;\n    width: 100%;\n    min-height: 43px;\n    font-family: ", ";\n    &:focus {\n      outline: ", " auto 1px;\n    }\n    transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n    transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n    &:hover {\n      transition: color 0.16s ease-in-out, background-color 0.16s ease-in-out;\n      transition: color 0.16s ease-in-out, border-color 0.16s ease-in-out;\n    }\n    ", "\n  }\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  line-height: ", ";\n  font-size: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcButton = function DxcButton(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "primary" : _ref$mode,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "button" : _ref$type,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
-      icon = _ref.icon,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
-      margin = _ref.margin,
-      size = _ref.size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
-  var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.button
-  }, _react["default"].createElement(DxCButton, {
-    type: type,
-    margin: margin,
-    mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
-    disabled: disabled,
-    iconPosition: iconPosition,
-    size: size
-  }, _react["default"].createElement(_core.Button, {
-    disabled: disabled,
-    type: type,
-    disableRipple: true,
-    "aria-disabled": disabled ? true : false,
-    tabIndex: disabled ? -1 : tabIndex,
-    onClick: function onClick() {
-      if (_onClick) {
-        _onClick();
-      }
-    }
-  }, _react["default"].createElement(LabelContainer, null, label), icon ? _react["default"].createElement(IconContainer, {
-    label: label,
-    iconPosition: iconPosition
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(ButtonIcon, {
-    label: label,
-    iconPosition: iconPosition,
-    src: iconSrc
-  }))));
-};
-
-var sizes = {
-  small: "42px",
-  medium: "120px",
-  large: "240px",
-  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.theme.fontLineHeight;
-}, function (props) {
-  return props.theme.fontSize;
-});
-
-var IconContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
-});
-
-var ButtonIcon = _styledComponents["default"].img(_templateObject3(), function (props) {
-  return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
-});
-
-var DxCButton = _styledComponents["default"].div(_templateObject4(), function (props) {
-  return props.theme.fontSizeBase;
-}, 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.iconPosition === "after" && "row" || "row-reverse";
-}, function (props) {
-  return props.theme.fontLetterSpacingWide01;
-}, function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.size === "small" && "calc(100% - 22px)" || "unset";
-}, function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.focusColor;
-}, function (props) {
-  var mode = props.mode;
-
-  if (mode === "primary") {
-    return "\n          background-color: ".concat(props.disabled && props.theme.disabledPrimaryBackgroundColor || props.theme.primaryBackgroundColor, ";\n          color: ").concat(props.disabled && props.theme.disabledPrimaryFontColor || props.theme.primaryFontColor, " !important;\n          padding: ").concat(props.size === "small" && "11px" || "12px 30px", ";\n          &:hover{\n            background-color: ").concat(props.theme.primaryHoverBackgroundColor, ";\n            color: ").concat(props.theme.primaryHoverFontColor, " !important; \n          }\n          &:active {\n            background-color: ").concat(props.theme.primaryActiveBackgroundColor, " !important;\n            color: ").concat(props.theme.primaryHoverFontColor, " !important;\n          }\n          &:focus {\n            background-color: ").concat(props.theme.primaryBackgroundColor, ";\n            color: ").concat(props.theme.primaryHoverFontColor, " !important;\n          }\n          &:disabled{ \n            cursor: not-allowed;\n          }\n          .MuiButton-label {\n            z-index: 5\n          }\n        ");
-  } else if (mode === "secondary") {
-    return "\n            background-color: ".concat(props.theme.secondaryBackgroundColor, ";\n            padding: ").concat(props.size === "small" && "9px" || "10px 28px", ";\n            color: ").concat(props.disabled && props.theme.disabledSecondaryFontColor || props.theme.secondaryFontColor, " !important;\n            border: 2px solid;\n            border-color: ").concat(props.disabled && props.theme.disabledSecondaryOutlinedColor || props.theme.secondaryOutlinedColor, ";\n            &:hover{\n              border-color: ").concat(props.theme.hoverOutlinedColor, ";\n              background-color: ").concat(props.theme.secondaryHoverBackgroundColor, ";\n              color: ").concat(props.theme.secondaryHoverFontColor, " !important; \n            }\n            &:active {\n              background-color: ").concat(props.theme.secondaryActiveBackgroundColor, " !important;\n              color: ").concat(props.theme.secondaryHoverFontColor, " !important;\n            }\n            &:focus {\n              background-color: ").concat(props.theme.secondaryBackgroundColor, ";\n              color: ").concat(props.theme.secondaryHoverFontColor, " !important; \n            }\n            &:disabled{\n              cursor: not-allowed;\n            }\n            .MuiButton-label {\n              z-index: 5\n            }\n\n          ");
-  } else if (mode === "text") {
-    return "\n            background-color: ".concat(props.theme.textBackgroundColor, ";\n            color: ").concat(props.disabled && props.theme.disabledTextFontColor || props.theme.textFontColor, " !important;\n            padding: ").concat(props.size === "small" && "11px" || "12px 30px", ";\n            &:hover{\n              background-color: ").concat(props.theme.textHoverBackgroundColor, ";\n              color: ").concat(props.theme.textHoverFontColor, " !important;\n            }\n            &:active {\n              background-color: ").concat(props.theme.textActiveBackgroundColor, " !important;\n              color: ").concat(props.theme.textHoverFontColor, " !important;\n            }\n            &:focus {\n              background-color: ").concat(props.theme.textBackgroundColor, ";\n              color: ").concat(props.theme.textFontColor, " !important; \n            }\n            &:disabled{\n              cursor:not-allowed;\n            }\n          ");
-  }
-});
-
-DxcButton.propTypes = {
-  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)))]),
-  label: _propTypes["default"].string,
-  mode: _propTypes["default"].oneOf(["primary", "secondary", "text"]),
-  disabled: _propTypes["default"].bool,
-  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
-  onClick: _propTypes["default"].func,
-  iconSrc: _propTypes["default"].string,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  type: _propTypes["default"].oneOf(["button", "reset", "submit"]),
-  tabIndex: _propTypes["default"].number
-};
-var _default = DxcButton;
-exports["default"] = _default;

package/dist/button/Button.stories.js

@@ -1,224 +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 _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Button = _interopRequireDefault(require("./Button"));
-
-var onClick = (0, _addonActions.action)("onClick");
-
-onClick.toString = function () {
-  return "onClickHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Button", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    mode: "basic",
-    theme: "light",
-    label: "Basic Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "raised",
-    theme: "light",
-    label: "Raised Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "flat",
-    theme: "light",
-    label: "Flat Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "outlined",
-    theme: "light",
-    label: "Outlined Button",
-    onClick: onClick
-  })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "basic",
-    theme: "light",
-    label: "Basic Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "raised",
-    theme: "light",
-    label: "Raised Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "flat",
-    theme: "light",
-    label: "Flat Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "outlined",
-    theme: "light",
-    label: "Outlined Button",
-    onClick: onClick
-  })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    mode: "basic",
-    theme: "dark",
-    label: "Basic Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "raised",
-    theme: "dark",
-    label: "Raised Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "flat",
-    theme: "dark",
-    label: "Flat Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "outlined",
-    theme: "dark",
-    label: "Outlined Button",
-    onClick: onClick
-  })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "basic",
-    theme: "dark",
-    label: "Basic Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "raised",
-    theme: "dark",
-    label: "Raised Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "flat",
-    theme: "dark",
-    label: "Flat Button",
-    onClick: onClick
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "outlined",
-    theme: "dark",
-    label: "Outlined Button",
-    onClick: onClick
-  }))), _react["default"].createElement("h3", null, "With icon"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    mode: "basic",
-    theme: "light",
-    label: "Basic Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "raised",
-    theme: "light",
-    label: "Raised Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "flat",
-    theme: "light",
-    label: "Flat Button",
-    onClick: onClick,
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    mode: "outlined",
-    theme: "light",
-    label: "Outlined Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "basic",
-    theme: "light",
-    label: "Basic Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "raised",
-    theme: "light",
-    label: "Raised Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "flat",
-    theme: "light",
-    label: "Flat Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement(_Button["default"], {
-    disabled: true,
-    mode: "outlined",
-    theme: "light",
-    label: "Outlined Button",
-    onClick: onClick,
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"]
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("label", "Test Button"),
-    mode: (0, _addonKnobs.select)("mode", {
-      basic: "basic",
-      raised: "raised",
-      flat: "flat",
-      outlined: "outlined"
-    }, "basic"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    iconPosition: (0, _addonKnobs.select)("icon position", {
-      before: "before",
-      after: "after"
-    }, "before"),
-    icon: (0, _addonKnobs["boolean"])("With Icon", true)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Button", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, props.icon && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
-    onClick: onClick,
-    iconSrc: _run_icon_black["default"]
-  })) || _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
-    onClick: onClick
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/button/readme.md

@@ -1,93 +0,0 @@
-# DXC Button Component
-
-## Usage
-
-```js
-import { DxcButton } from "@dxc-technology/halstack-react";
-
-<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 "@dxc-technology/halstack-react";
-
-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;
-```