@dxc-technology/halstack-react 0.0.0-40fd4e3 → 0.0.0-41b488f

package/dist/button/Button.js

@@ -1,202 +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 = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\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: 1px;\n    box-shadow: none;\n    font-size: 14px;\n    font-weight: 500;\n    min-width: ", ";\n    border-radius: 4px;\n    width: 100%;\n    min-height: 43px;\n    line-height: 1;\n    font-family: \"Open Sans\", sans-serif;\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: 18px;\n  font-size: 14px;\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$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;
-
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.button
-  }, _react["default"].createElement(DxCButton, {
-    margin: margin,
-    mode: mode,
-    disabled: disabled,
-    iconPosition: iconPosition,
-    size: size
-  }, _react["default"].createElement(_core.Button, {
-    disabled: disabled,
-    disableRipple: true,
-    "aria-disabled": disabled ? true : false,
-    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());
-
-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.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.size === "small" && "calc(100% - 22px)" || "unset";
-}, function (props) {
-  return props.theme.focusColor;
-}, function (props) {
-  var mode = props.mode;
-
-  if (mode === "primary") {
-    return "\n          background-color: ".concat(props.theme.color, ";\n          color: ").concat(props.theme.primaryFontColor, ";\n          padding: ").concat(props.size === "small" && "11px" || "12px 30px", ";\n          &:hover{\n            background-color: ").concat(props.theme.hoverColor, ";\n            color: ").concat(props.theme.primaryHoverFontColor, "; \n          }\n          &:active {\n            background-color: ").concat(props.theme.hoverColor).concat(props.theme.primaryActiveOpacity, " !important;\n            color: ").concat(props.theme.primaryHoverFontColor, " !important;\n          }\n          &:focus {\n            background-color: ").concat(props.theme.color, ";\n            color: ").concat(props.theme.primaryHoverFontColor, "; \n          }\n          &:disabled{ \n            background-color: ").concat(props.theme.color, ";\n            opacity: ").concat(props.theme.disabledOpacity, ";\n            color: ").concat(props.theme.primaryFontColor, ";\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.theme.secondaryFontColor, ";\n            border: 2px solid;\n            border-color: ").concat(props.theme.color, ";\n            &:hover{\n              border-color: ").concat(props.theme.hoverColor, ";\n              background-color: ").concat(props.theme.hoverColor).concat(props.theme.secondaryHoverOpacity, ";\n              color: ").concat(props.theme.secondaryHoverFontColor, "; \n            }\n            &:active {\n              background-color: ").concat(props.theme.hoverColor).concat(props.theme.secondaryActiveOpacity, " !important;\n              color: ").concat(props.theme.secondaryHoverFontColor, " !important;\n            }\n            &:focus {\n              background-color: ").concat(props.theme.secondaryBackgroundColor, ";\n              color: ").concat(props.theme.secondaryHoverFontColor, "; \n            }\n            &:disabled{\n              background-color: ").concat(props.theme.secondaryBackgroundColor, ";\n              border-color: ").concat(props.theme.color, ";\n              color: ").concat(props.theme.secondaryFontColor, ";\n              cursor:not-allowed;\n              opacity: ").concat(props.theme.disabledOpacity, ";\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.theme.textFontColor, ";\n            padding: ").concat(props.size === "small" && "11px" || "12px 30px", ";\n            &:hover{\n              background-color: ").concat(props.theme.hoverColor, ";\n              color: ").concat(props.theme.textHoverFontColor, ";\n            }\n            &:active {\n              background-color: ").concat(props.theme.hoverColor).concat(props.theme.textActiveOpacity, " !important;\n              color: ").concat(props.theme.textHoverFontColor, " !important;\n            }\n            &:focus {\n              background-color: ").concat(props.theme.textBackgroundColor, ";\n              color: ").concat(props.theme.textFontColor, "; \n            }\n            &:disabled{\n              background-color: ").concat(props.theme.textBackgroundColor, ";\n              opacity: ").concat(props.theme.disabledOpacity, ";\n              color: ").concat(props.theme.textFontColor, ";\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,
-  theme: _propTypes["default"].oneOf(["dark", "light"]),
-  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
-  onClick: _propTypes["default"].func,
-  iconSrc: _propTypes["default"].string,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func])
-};
-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;
-```