@dxc-technology/halstack-react 0.0.0-e904570 → 0.0.0-e961efe

package/dist/spinner/Spinner.stories.js

@@ -1,183 +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 _Spinner = _interopRequireDefault(require("./Spinner"));
-
-var _Button = _interopRequireDefault(require("../button/Button"));
-
-(0, _react2.storiesOf)("Form Components|Spinner", 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), "openSpinner", 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("h3", null, "Undetermined spinner"), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            width: "1440px",
-            height: "204px",
-            justifyContent: "space-around"
-          }
-        }, _react["default"].createElement("div", {
-          style: {
-            marginTop: "34px",
-            display: "flex",
-            width: "1440px",
-            height: "170px",
-            justifyContent: "space-around"
-          }
-        }, _react["default"].createElement(_Spinner["default"], {
-          theme: "light"
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "light",
-          label: "Loading..."
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "light",
-          showValue: true,
-          value: 12
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "light",
-          label: "Loading...",
-          showValue: true,
-          value: 34
-        }), _react["default"].createElement("div", {
-          style: {
-            marginTop: "46px"
-          }
-        }, _react["default"].createElement(_Spinner["default"], {
-          theme: "light",
-          mode: "small"
-        })))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            backgroundColor: "black",
-            width: "1440px",
-            height: "204px",
-            justifyContent: "space-around"
-          }
-        }, _react["default"].createElement("div", {
-          style: {
-            marginTop: "34px",
-            display: "flex",
-            backgroundColor: "black",
-            width: "1440px",
-            height: "170px",
-            justifyContent: "space-around"
-          }
-        }, _react["default"].createElement(_Spinner["default"], {
-          theme: "dark",
-          label: ""
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "dark",
-          label: "Loading..."
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "dark",
-          showValue: true,
-          value: 32
-        }), _react["default"].createElement(_Spinner["default"], {
-          theme: "dark",
-          label: "Loading...",
-          showValue: true,
-          value: 34
-        }), _react["default"].createElement("div", {
-          style: {
-            marginTop: "46px"
-          }
-        }, _react["default"].createElement(_Spinner["default"], {
-          theme: "dark",
-          mode: "small"
-        })))), _react["default"].createElement("h3", null, "Overlay"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
-          mode: "basic",
-          theme: "light",
-          label: "Overlay Spinner",
-          onClick: this.openSpinner
-        }), this.state.isVisible && _react["default"].createElement("div", {
-          onClick: this.openSpinner
-        }, _react["default"].createElement(_Spinner["default"], {
-          theme: "light",
-          label: "Loading...",
-          mode: "overlay"
-        }))));
-      }
-    }]);
-    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"),
-    mode: (0, _addonKnobs.select)("mode", {
-      large: "large",
-      small: "small",
-      overlay: "overlay"
-    }, "large"),
-    value: (0, _addonKnobs.number)("value", ""),
-    showValue: (0, _addonKnobs["boolean"])("show value", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Spinner", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Spinner["default"], props));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/spinner/readme.md

@@ -1,65 +0,0 @@
-# DXC Spinner Component
-
-## Usage
-
-```js
-import { DxcSpinner } from "@dxc-technology/halstack-react";
-
-<Spinner theme="dark" label="Processing..." />;
-```
-
-## 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 inside the spinner.</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>mode: 'large' | 'small' | 'overlay' </td>
-        <td>large</td>
-        <td>The spinner can have overlay or small or large size. <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 inside the spinner</td>
-    </tr>
-</table>
-
-## Examples
-
-```js
-import React from "react";
-
-import { DxcSpinner } from "@dxc-technology/halstack-react";
-
-function App() {
-  return (
-    <div>
-        <Spinner theme="light" label="Processing..." overlay={false} />
-    </div>
-    <div>
-        <Spinner theme="dark" label="Processing..." overlay={false} showValue value={52} />
-    </div>
-  );
-}
-
-export default App;
-```

package/dist/switch/Switch.stories.js

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

package/dist/switch/readme.md

@@ -1,133 +0,0 @@
-# DXC Checkbox Component
-
-## Usage
-
-```js
-import { DxcSwitch } from "@dxc-technology/halstack-react";
-
-<DxcSwitch onChange={handleNewValue} label="Test Switch" checked={checked} />;
-```
-
-## Props
-
-The API properties are the following:
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Type</td>
-        <td>Default</td>
-        <td>Required</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>checked</td>
-        <td><code> boolean </code></td>
-        <td>false</td>
-        <td>No</td>
-        <td>If true, the component is checked.</td>
-    </tr>
-    <tr>
-        <td>value</td>
-        <td><code> any </code></td>
-        <td></td>
-        <td>No</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 switch is checked </td>
-    </tr>
-    <tr>
-        <td>label</td>
-        <td><code>string</code></td>
-        <td></td>
-        <td>No</td>
-        <td>Text to be placed next to the switch.</td>
-    </tr>
-    <tr>
-        <td>labelPosition</td>
-        <td><code>string: 'before' | 'after'</code></td>
-        <td><code>'before'</code></td>
-        <td>No</td>
-        <td>Whether the label should appear after or before the switch.</td>
-    </tr>
-    <tr>
-        <td>theme</td>
-        <td><code> string: 'light' |
- 'dark'</code></td>
-        <td><code>'light'</code></td>
-        <td>No</td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>name</td>
-        <td><code>string</code></td>
-        <td><code>false</code></td>
-        <td></td>
-        <td>Name attribute of the input element.</td>
-    </tr>
-    <tr>
-        <td>disabled</td>
-        <td><code>boolean</code></td>
-        <td><code>false</code></td>
-        <td>No</td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>disableRipple</td>
-        <td><code>boolean</code></td>
-        <td><code>false</code></td>
-        <td>No</td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onChange</td>
-        <td><code>function</code></td>
-        <td></td>
-        <td>No</td>
-        <td>This function will be called when the user clicks the radio. The new value will be passed as a parameter.<br>
-    </tr>
-</table>
-
-## Examples
-
-- Basic switch - Light theme - Enabled - Label after switch - With ripple
-
-```js
-import React from "react";
-import { DxcSwitch } from "@dxc-technology/halstack-react";
-
-class App extends React.Component {
-  state = {
-    isChecked: true
-  };
-  constructor() {
-    super();
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(checked) {
-    this.setState({
-      isChecked: checked
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <DxcSwitch
-            checked={this.state.isChecked}
-            value="Switch1"
-            label="Switch 1"
-            labelPosition="after"
-            theme="light"
-            name="Checkbox"
-            disabled={false}
-            disableRipple={false}
-            onChange={event => this.handleChange(event)}
-          />
-      </div>
-    );
-  }
-}
-export default App;
-
-
-```

package/dist/tabs/Tabs.stories.js

@@ -1,130 +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 _Tabs = _interopRequireDefault(require("./Tabs"));
-
-var _Tab = _interopRequireDefault(require("./tab/Tab"));
-
-var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
-
-var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
-
-var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Tabs", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
-    activeTabIndex: 0,
-    activeTabIndexChange: onChange,
-    mode: "underlined"
-  }, _react["default"].createElement(_Tab["default"], {
-    label: "Tab ONE",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Tab TWO",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Tab THREE",
-    iconSrc: "",
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))), _react["default"].createElement("div", null, _react["default"].createElement(_Tabs["default"], {
-    activeTabIndex: 0,
-    activeTabIndexChange: onChange,
-    mode: "filled"
-  }, _react["default"].createElement(_Tab["default"], {
-    label: "Label 1",
-    iconSrc: _amazon["default"],
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Label 2",
-    iconSrc: _ebay["default"],
-    disabled: false
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")), _react["default"].createElement(_Tab["default"], {
-    label: "Label 3",
-    iconSrc: _apple["default"],
-    disabled: true
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet.")))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    mode: (0, _addonKnobs.select)("mode", {
-      filled: "filled",
-      underlined: "underlined"
-    }, "filled"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    activeTabIndex: (0, _addonKnobs.number)("Tab Active", 0)
-  };
-};
-
-var knobTab1Props = function knobTab1Props() {
-  return {
-    label: (0, _addonKnobs.text)("First Tab Label", "Tab 1"),
-    disabled: (0, _addonKnobs["boolean"])("First Tab Disabled", false)
-  };
-};
-
-var knobTab2Props = function knobTab2Props() {
-  return {
-    label: (0, _addonKnobs.text)("Second Tab Label", "Tab 2"),
-    disabled: (0, _addonKnobs["boolean"])("Second Tab Disabled", false)
-  };
-};
-
-var knobTab3Props = function knobTab3Props() {
-  return {
-    label: (0, _addonKnobs.text)("Third Tab Label", "Tab 3"),
-    disabled: (0, _addonKnobs["boolean"])("Third Tab Disabled", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Tabs", module).add("Knobs example", function () {
-  var props = knobProps();
-  var tab1Props = knobTab1Props();
-  var tab2Props = knobTab2Props();
-  var tab3Props = knobTab3Props();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({}, props, {
-    activeTabIndexChange: onChange
-  }), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab1Props, {
-    iconSrc: _amazon["default"]
-  }), "Content ONE"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab2Props, {
-    iconSrc: _ebay["default"]
-  }), "Content TWO"), _react["default"].createElement(_Tab["default"], (0, _extends2["default"])({}, tab3Props, {
-    iconSrc: _apple["default"]
-  }), "Content THREE")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});