@dxc-technology/halstack-react 0.0.0-7d25f33 → 0.0.0-7d46b9f

package/test/Select.test.js

@@ -21,18 +21,43 @@ const optionsWithoutIcon = [
 const optionsWithIcons = [
   {
     value: 1,
-    label: "Facebook",
-    iconSrc: "/testIconFacebook",
+    label: "Image 1",
+    icon: (
+      <svg
+        data-testid="image-1"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="currentColor"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+      </svg>
+    ),
   },
   {
     value: 2,
-    label: "Twitter",
-    iconSrc: "/testIconTwitter",
-  },
-  {
-    value: 3,
-    label: "Linkedin",
-    iconSrc: "/testIconLinkedin",
+    label: "Image 2",
+    icon: (
+      <svg
+        data-testid="image-2"
+        version="1.1"
+        x="0px"
+        y="0px"
+        width="24px"
+        height="24px"
+        viewBox="0 0 24 24"
+        enable-background="new 0 0 24 24"
+      >
+        <g id="Bounding_Box">
+          <rect fill="none" width="24" height="24" />
+        </g>
+        <g id="Master">
+          <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
+        </g>
+      </svg>
+    ),
   },
 ];
 
@@ -60,29 +85,27 @@ describe("Select component tests", () => {
   });
 
   test("Select renders options with icons before", () => {
-    const { getByRole, getAllByRole } = render(
+    const { getByRole, getByTestId } = render(
       <DxcSelect label="test-select-name" options={optionsWithIcons}></DxcSelect>
     );
     const select = getByRole("button");
     act(() => {
       userEvent.click(select);
     });
-    expect(getAllByRole("img")[0].getAttribute("src")).toEqual("/testIconFacebook");
-    expect(getAllByRole("img")[1].getAttribute("src")).toEqual("/testIconTwitter");
-    expect(getAllByRole("img")[2].getAttribute("src")).toEqual("/testIconLinkedin");
+    expect(getByTestId("image-1")).toBeTruthy();
+    expect(getByTestId("image-2")).toBeTruthy();
   });
 
   test("Select renders options with icons after", () => {
-    const { getByRole, getAllByRole } = render(
+    const { getByRole, getByTestId } = render(
       <DxcSelect label="test-select-name" options={optionsWithIcons} iconPosition="after"></DxcSelect>
     );
     const select = getByRole("button");
     act(() => {
       userEvent.click(select);
     });
-    expect(getAllByRole("img")[0].getAttribute("src")).toEqual("/testIconFacebook");
-    expect(getAllByRole("img")[1].getAttribute("src")).toEqual("/testIconTwitter");
-    expect(getAllByRole("img")[2].getAttribute("src")).toEqual("/testIconLinkedin");
+    expect(getByTestId("image-1")).toBeTruthy();
+    expect(getByTestId("image-2")).toBeTruthy();
   });
 
   test("Select renders with a default value", () => {
@@ -166,25 +189,22 @@ describe("Select component tests", () => {
     act(() => {
       userEvent.click(select);
     });
-    const option1 = getByText("Amazon");
-    const option2 = getByText("Ebay");
-    const option3 = getByText("Apple");
     act(() => {
-      userEvent.click(option1);
+      userEvent.click(getByText("Amazon"));
     });
     expect(onChange).toHaveBeenCalledWith([1]);
     act(() => {
-      userEvent.click(option2);
+      userEvent.click(getByText("Ebay"));
     });
     expect(onChange).toHaveBeenCalledWith([1, 2]);
     expect(getByText("Amazon, Ebay")).toBeTruthy();
     act(() => {
-      userEvent.click(option3);
+      userEvent.click(getByText("Apple"));
     });
     expect(onChange).toHaveBeenCalledWith([1, 2, 3]);
     expect(getByText("Amazon, Ebay, Apple")).toBeTruthy();
     act(() => {
-      userEvent.click(option1);
+      userEvent.click(getByText("Amazon"));
     });
     expect(onChange).toHaveBeenCalledWith([2, 3]);
     expect(getByText("Ebay, Apple")).toBeTruthy();

package/test/Spinner.test.js

@@ -24,4 +24,9 @@ describe("Spinner component tests", () => {
     expect(getByText("test-loading")).toBeTruthy();
     expect(getByText("75%")).toBeTruthy();
   });
+
+  test("Get spinner by role", () => {
+    const { getByRole } = render(<DxcSpinner label="test-loading" value={75} showValue></DxcSpinner>);
+    expect(getByRole("progressbar")).toBeTruthy();
+  });
 });

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/accordion-group/AccordionGroup.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"]
-  }
-});