@dxc-technology/halstack-react 0.0.0-b1729d7 → 0.0.0-b3de035

package/dist/progress-bar/ProgressBar.stories.js

@@ -1,280 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-
-var _Button = _interopRequireDefault(require("../button/Button"));
-
-(0, _react2.storiesOf)("Form Components|Progress Bar", module).add("Types", function () {
-  var ControlledStory =
-  /*#__PURE__*/
-  function (_React$Component) {
-    (0, _inherits2["default"])(ControlledStory, _React$Component);
-
-    function ControlledStory(props) {
-      var _this;
-
-      (0, _classCallCheck2["default"])(this, ControlledStory);
-      _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openProgressBar", function () {
-        _this.setState({
-          isVisible: !_this.state.isVisible
-        });
-      });
-      _this.state = {
-        isVisible: false
-      };
-      return _this;
-    }
-
-    (0, _createClass2["default"])(ControlledStory, [{
-      key: "render",
-      value: function render() {
-        return _react["default"].createElement("div", null, _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Determined and undetermined progress bar"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "row"
-          }
-        }, _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 0
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 15
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 52
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 80
-        })), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          value: 0
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          value: 15
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          value: 52
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "light",
-          overlay: false,
-          value: 80
-        }))))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "row",
-            background: "black"
-          }
-        }, _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          showValue: true,
-          value: 0
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          showValue: true,
-          value: 15
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          showValue: true,
-          value: 52
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          showValue: true,
-          value: 80
-        })), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          value: 0
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          value: 15
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          value: 52
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          label: "Loading...",
-          theme: "dark",
-          overlay: false,
-          value: 80
-        })))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Simplified"), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "row"
-          }
-        }, _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false
-        })), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column"
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 0
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 20
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 30
-        }), _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          overlay: false,
-          showValue: true,
-          value: 50
-        })))), _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Overlay"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-          mode: "basic",
-          theme: "light",
-          label: "Overlay Progress Bar",
-          onClick: this.openProgressBar
-        }), this.state.isVisible && _react["default"].createElement("div", {
-          onClick: this.openProgressBar,
-          style: {
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 1000
-          }
-        }, _react["default"].createElement(_ProgressBar["default"], {
-          theme: "light",
-          label: "Loading...",
-          overlay: true,
-          showValue: true,
-          value: 33
-        })))));
-      }
-    }]);
-    return ControlledStory;
-  }(_react["default"].Component);
-
-  return _react["default"].createElement(ControlledStory, null);
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("label", "Loading..."),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    value: (0, _addonKnobs.number)("value", ""),
-    overlay: (0, _addonKnobs["boolean"])("overlay", false),
-    showValue: (0, _addonKnobs["boolean"])("showValue", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Progress Bar", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_ProgressBar["default"], props));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/progress-bar/readme.md

@@ -1,63 +0,0 @@
-# DXC ProgressBar Component
-
-## Usage
-
-```js
-import { DxcProgressBar } from "@dxc-technology/halstack-react";
-
-<DxcProgressBar onClick={handleClick} label="Test Button" />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed above the progressbar.</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>overlay: boolean</td>
-        <td>true</td>
-        <td>If true, the progressbar will be over a darker background</td>
-    </tr>
-    <tr>
-        <td>value: string</td>
-        <td></td>
-        <td>The value of the progress indicator. If it´s received the component is determinated otherwise is indeterminate</td>
-    </tr>
-    <tr>
-        <td>showValue: boolean</td>
-        <td>false</td>
-        <td>If true the value is displayed above the progressbar</td>
-    </tr>
-</table>
-
-## Examples
-
-```js
-import React from "react";
-import { DxcSpinner } from "@dxc-technology/halstack-react";
-
-function App() {
-  return (
-    <div>
-        <ProgressBar label="Loading..." theme="light" overlay={false} value={20} />
-    </div>
-    <div>
-        <ProgressBar label="Loading..." theme="dark" showValue value={52} />
-    </div>
-  );
-}
-export default App;
-```

package/dist/radio/Radio.stories.js

@@ -1,166 +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 _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Radio = _interopRequireDefault(require("./Radio"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Radio", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Enable Radio",
-    labelPosition: "after",
-    onChange: onChange,
-    disabled: false,
-    required: true
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Selected Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: true
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled Selected Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: true
-  })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Enable Radio",
-    labelPosition: "after",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: false,
-    required: true
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Selected Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: false
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: true
-  }), _react["default"].createElement(_Radio["default"], {
-    checked: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled Selected Radio",
-    labelPosition: "before",
-    onChange: onChange,
-    disabled: true
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
-    disabled: (0, _addonKnobs["boolean"])("Disabled", false),
-    labelPosition: (0, _addonKnobs.select)("Label position", {
-      before: "before",
-      after: "after"
-    }, "before"),
-    theme: (0, _addonKnobs.select)("Theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
-    required: (0, _addonKnobs["boolean"])("Required", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Radio", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Radio["default"], (0, _extends2["default"])({}, props, {
-    value: "TestValue",
-    onChange: onChange
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/radio/readme.md

@@ -1,70 +0,0 @@
-# DXC Radio Component
-
-## Usage
-
-```js
-import { DxcRadio } from "@dxc-technology/halstack-react";
-
-<DxcRadio onChange={handleNewValue} label="Test Radio" checked={checked} />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>checked: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component is checked.</td>
-    </tr>
-    <tr>
-        <td>value: any</td>
-        <td></td>
-        <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the radio is checked </td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed next to the radio.</td>
-    </tr>
-    <tr>
-        <td>labelPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>Whether the label should appear after or before the radio.</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>name: string</td>
-        <td></td>
-        <td>Name attribute of the input element.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>required: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</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>onChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the radio. The event object will be passed as a parameter.<br>
-        Current state can be accessed via event.target.checked</td>
-    </tr>
-</table>

package/dist/slider/readme.md

@@ -1,64 +0,0 @@
-# DXC Slider Component
-
-## Usage
-
-```js
-import { Slider } from "@dxc-technology/halstack-react";
-
-<DxcSlider min={0} max={100} step={1} value={value}  />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>min: number</td>
-        <td><code>0</code></td>
-        <td>The minimum value available for selection.</td>
-    </tr>
-    <tr>
-        <td>max: number</td>
-        <td><code>100</code></td>
-        <td>The maximum value available for selection.</td>
-    </tr>
-    <tr>
-        <td>step: number</td>
-        <td><code>1</code></td>
-        <td>The step interval between values available for selection.</td>
-    </tr>
-    <tr>
-        <td>value: number</td>
-        <td><code>0</code></td>
-        <td>The selected value.</td>
-    </tr>
-    <tr>
-        <td>showLimitValues: boolean</td>
-        <td><code>false</code></td>
-        <td>Whether the min/max value labels should be displayed next to the slider.</td>
-    </tr>
-    <tr>
-        <td>showInput: boolean</td>
-        <td><code>false</code></td>
-        <td>Whether the input number for displaying/controlling the slider value should be displayed next to the slider.</td>
-    </tr>
-        <tr>
-        <td>name: string</td>
-        <td></td>
-        <td>Name attribute of the input element.</td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>This function will be called when the slider changes its value, as it's being dragged. The new value will be passed as a parameter when this function is executed</td>
-    </tr>
-    <tr>
-        <td>onDragEnd: function</td>
-        <td></td>
-        <td>This function will be called when the slider changes its value, but only when the thumb is released. The new value will be passed as a parameter when this function is executed</td>
-    </tr>
-</table>