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

package/dist/slider/Slider.stories.js

@@ -1,241 +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 _Slider = _interopRequireDefault(require("./Slider"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-var onDragEnd = (0, _addonActions.action)("onDragEnd");
-
-onDragEnd.toString = function () {
-  return "onDragEnd";
-};
-
-var onChangeInput = (0, _addonActions.action)("onChangeInput");
-
-onChangeInput.toString = function () {
-  return "onChangeInputHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "light",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 100,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 1,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: false,
-    showInput: false,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 10,
-    marks: false,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: false,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
-    style: {
-      color: "white"
-    }
-  }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
-    minValue: 0,
-    maxValue: 50,
-    showLimitsValues: true,
-    showInput: true,
-    name: "input",
-    disabled: true,
-    required: true,
-    theme: "dark",
-    step: 5,
-    marks: true,
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    minValue: (0, _addonKnobs.number)("minvalue", 0),
-    maxValue: (0, _addonKnobs.number)("maxvalue", 100),
-    showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
-    showInput: (0, _addonKnobs["boolean"])("showInput", true),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    step: (0, _addonKnobs.number)("step", 1),
-    marks: (0, _addonKnobs["boolean"])("marks", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    onDragEnd: onDragEnd,
-    onChangeInput: onChangeInput,
-    name: "sliderImput"
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/toggle-group/readme.md

@@ -1,82 +0,0 @@
-# DXC Toggle Group Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>value: any | any[]</td>
-        <td></td>
-        <td>
-          The key(s) of the selected value(s). If the toggle group component
-          doesn't allow multiple selection, it must be one unique value. If the
-          component allows multiple selection, value must be an array. If
-          undefined, the component will be uncontrolled and the value will be
-          managed internally by the component.
-        </td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>
-            This function will be called every time the selection changes. The
-            number with the key of the selected value will be passed as a
-            parameter to this function. If multiple selection is allowed, an array
-            of keys will be passed
-        </td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>multiple: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>
-            If true, the toggle group will support multiple selection. In that
-            case, value must be an array of numbers with the keys of the selected
-            values.
-        </td>
-    </tr>
-    <tr>
-        <td>options: object[]</td>
-        <td>
-            <code>[]</code>
-        </td>
-        <td>
-            An array of objects representing the selectable options. Each object
-            has the following properties:
-            <ul>
-            <li>
-                <b>value</b>: Number with the option inner value.
-            </li>
-            <li>
-                <b>label</b>: String with the option display value.
-            </li>
-            <li>
-                <b>iconSrc</b>: URL of the icon that will be placed. IconSrc and
-                label can't be used at same time.
-            </li>
-            </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>margin: string | object</td>
-        <td></td>
-        <td>
-            Size of the margin to be applied to the component ('xxsmall' |
-            'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
-            can pass an object with 'top', 'bottom', 'left' and 'right' properties
-            in order to specify different margin sizes.
-        </td>
-    </tr>
-</table>

package/test/Toggle.test.js

@@ -1,43 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcToggle from "../src/toggle/Toggle";
-
-describe("Toggle component tests", () => {
-  test("Toggle renders with correct text", () => {
-    const { getByText } = render(<DxcToggle label="Toggle" />);
-    expect(getByText("Toggle")).toBeTruthy();
-  });
-
-  test("Calls correct function on click", () => {
-    const onClick = jest.fn();
-    const { getByText} = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test("Calls correct function on click with the correct value.", () => {
-    const onClick = jest.fn();
-    const { getByText, rerender } = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    rerender(<DxcToggle label="ToggleTest" onClick={onClick} selected={true} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick.mock.calls[0][0]).toBe(true);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-  });
-
-
-  test("Calls correct function on click with the correct value, if it´s controlled and the user doesn´t change the value the function always receives the same", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<DxcToggle label="ToggleTest" selected={true} onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalledTimes(3);
-    expect(onClick.mock.calls[0][0]).toBe(false);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-    expect(onClick.mock.calls[2][0]).toBe(false);
-  });
-
-});