@dxc-technology/halstack-react 0.0.0-c24450b → 0.0.0-c6243ef

package/test/ToggleGroup.test.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import DxcToggleGroup from "../src/toggle-group/ToggleGroup";
+
+const options = [
+  {
+    value: 1,
+    label: "Amazon",
+  },
+  {
+    value: 2,
+    label: "Ebay",
+  },
+  {
+    value: 3,
+    label: "Apple",
+  },
+  {
+    value: 4,
+    label: "Google",
+  },
+];
+
+describe("Toggle group component tests", () => {
+  test("Toggle group renders with correct labels", () => {
+    const { getByText } = render(
+      <DxcToggleGroup label="Toggle group label" helperText="Toggle group helper text" options={options} />
+    );
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    expect(getByText("Apple")).toBeTruthy();
+    expect(getByText("Google")).toBeTruthy();
+  });
+
+  test("Uncontrolled toggle group calls correct function on change with value", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  test("Controlled toggle group calls correct function on change with value", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={1} />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  test("Function on change is not called when disable", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} disabled />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} multiple />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith([2]);
+  });
+
+  test("Controlled multiple toggle returns always same values", () => {
+    const onChange = jest.fn();
+    const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={[1]} multiple />);
+
+    const option = getByText("Ebay");
+    fireEvent.click(option);
+    expect(onChange).toHaveBeenCalledWith([1, 2]);
+
+    const option2 = getByText("Google");
+    fireEvent.click(option2);
+    expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
+  });
+});

package/dist/accordion/Accordion.stories.js

@@ -1,207 +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 _Accordion = _interopRequireDefault(require("./Accordion"));
-
-var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingTop: "50px",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    mode: (0, _addonKnobs.select)("mode", {
-      "default": "default",
-      alternative: "alternative"
-    }, "default"),
-    label: (0, _addonKnobs.text)("label", "Test Accordion"),
-    assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
-    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")
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/accordion/readme.md

@@ -1,96 +0,0 @@
-# DXC Accordion Component
-
-## Usage
-
-```js
-import { DxcAccordion } from "@dxc-technology/halstack-react";
-
-<DxcAccordion onChange={handleOnChange} label="Test Accordion" />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-     <tr>
-        <td>mode: 'default'|'alternative'</td>
-        <td><code>'default'</code></td>
-        <td>Mode for the color of the accordion.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>The panel label.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>URL of the icon that will be placed next to panel 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>assistiveText: string</td>
-        <td></td>
-        <td>Assistive text to be placed on the right side of the panel.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the icon to open/close the panel. The state of the panel(opened/closed) should be passed as a parameter.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' |'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available button modes.</td>
-    </tr>
-
-</table>
-
-## Examples
-
-- Basic accordion - Light theme - Enabled - With assistive text - Icon after label
-
-```js
-import React from "react";
-
-import { DxcAccordion } from "@dxc-technology/halstack-react";
-
-function App() {
-  const handleOnChange = event => {
-    console.log("Accordion clicked");
-  };
-
-  return (
-    <div>
-      <Accordion
-        theme="light"
-        label="Fifth accordion"
-        assistiveText="Extra information"
-        iconPosition="after"
-        iconSrc={logo}
-        onChange={onChange}
-      >
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-          lobortis eget.
-        </div>
-      </Accordion>
-    </div>
-  );
-}
-
-export default App;
-```

package/dist/alert/Alert.stories.js

@@ -1,158 +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 _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Alert = _interopRequireDefault(require("./Alert"));
-
-var _Button = _interopRequireDefault(require("../button/Button"));
-
-var _propTypes = require("prop-types");
-
-(0, _react2.storiesOf)("Form Components|Alert", 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), "setVisibleInfoAlert", function () {
-        _this.setState({
-          isVisibleInfoAlert: !_this.state.isVisibleInfoAlert
-        });
-      });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleWarningAlert", function () {
-        _this.setState({
-          isVisibleWarningAlert: !_this.state.isVisibleWarningAlert
-        });
-      });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleSuccessAlert", function () {
-        _this.setState({
-          isVisibleSuccessAlert: !_this.state.isVisibleSuccessAlert
-        });
-      });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleErrorAlert", function () {
-        _this.setState({
-          isVisibleErrorAlert: !_this.state.isVisibleErrorAlert
-        });
-      });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleModalAlert", function () {
-        _this.setState({
-          isVisibleModalAlert: !_this.state.isVisibleModalAlert
-        });
-      });
-      _this.state = {
-        isVisibleInfoAlert: true,
-        isVisibleWarningAlert: true,
-        isVisibleSuccessAlert: true,
-        isVisibleErrorAlert: true,
-        isVisibleModalAlert: false
-      };
-      return _this;
-    }
-
-    (0, _createClass2["default"])(ControlledStory, [{
-      key: "render",
-      value: function render() {
-        return _react["default"].createElement("div", null, _react["default"].createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "static"
-          }
-        }, this.state.isVisibleInfoAlert && _react["default"].createElement(_Alert["default"], {
-          type: "info",
-          mode: "inline",
-          inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
-        }), this.state.isVisibleWarningAlert && _react["default"].createElement(_Alert["default"], {
-          type: "warning",
-          mode: "inline",
-          inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
-          onClose: this.setVisibleWarningAlert
-        }), this.state.isVisibleSuccessAlert && _react["default"].createElement(_Alert["default"], {
-          type: "confirm",
-          mode: "inline",
-          inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
-        }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), this.state.isVisibleErrorAlert && _react["default"].createElement(_Alert["default"], {
-          type: "error",
-          mode: "inline",
-          inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
-          onClose: this.setVisibleErrorAlert
-        }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-          style: {
-            marginLeft: "33px"
-          }
-        }, _react["default"].createElement(_Button["default"], {
-          mode: "basic",
-          theme: "light",
-          label: "Overlay Alert",
-          onClick: this.setVisibleModalAlert
-        })), this.state.isVisibleModalAlert && _react["default"].createElement(_Alert["default"], {
-          type: "info",
-          mode: "modal",
-          inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
-          onClose: this.setVisibleModalAlert
-        }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
-      }
-    }]);
-    return ControlledStory;
-  }(_react["default"].Component);
-
-  return _react["default"].createElement(ControlledStory, null);
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    type: (0, _addonKnobs.select)("type", {
-      info: "info",
-      confirm: "confirm",
-      warning: "warning",
-      error: "error"
-    }, "info"),
-    mode: (0, _addonKnobs.select)("mode", {
-      inline: "inline",
-      modal: "modal"
-    }, "inline"),
-    inlineText: (0, _addonKnobs.text)("inlineText", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Alert", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", null, _react["default"].createElement(_Alert["default"], props, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/alert/close.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/alert/error.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24">
-    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"  fill="#EE2222"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>

package/dist/alert/info.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#4A90E2">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-</svg>

package/dist/alert/readme.md

@@ -1,43 +0,0 @@
-# DXC Alert Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>type: 'info' | 'confirm' | 'warning' | 'error'</td>
-        <td><code>'info'</code></td>
-        <td>Uses on of the available alert types.</td>
-    </tr>
-    <tr>
-        <td>mode: 'inline' | 'modal'</td>
-        <td><code>'inline'</code></td>
-        <td>Uses on of the available alert modes:
-            <ul>
-                <li>
-                    <strong>inline:</strong> if onClose function is received, close button should be visible and the function should be executed whe its clicked.
-                    There is no overlay layer. 
-                    Position should be decided by the user.
-                </li>
-                <li>
-                    <strong>modal:</strong> In this mode it will be always an overlay layer behind the alert. 
-                    If onClose function is received it will be called if the X button is clicked or if the user clicks outside of the component. The alert should be displayed in the middle of the screen.
-                </li>
-            </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>inlineText: string</td>
-        <td></td>
-        <td>Text to display after icon and alert type and before content.</td>
-    </tr>
-    <tr>
-        <td>onClose: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks the close button. If there is no function we should close the alert by default.</td>
-    </tr>
-</table>

package/dist/alert/success.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#7ED321">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-</svg>

package/dist/alert/warning.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#FFD806">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-</svg>