@dxc-technology/halstack-react 0.0.0-a01a65d → 0.0.0-a062293

package/wizard/types.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+declare type Step = {
+    /**
+     * Step label.
+     */
+    label: string;
+    /**
+     * Description that will be placed next to the step.
+     */
+    description?: string;
+    /**
+     * Element or path used as the icon displayed in the step.
+     */
+    icon?: string | SVG;
+    /**
+     * Whether the step is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is valid or not.
+     */
+    valid?: boolean;
+};
+export declare type Mode = "horizontal" | "vertical";
+declare type Props = {
+    /**
+     * The wizard can be showed in horizontal or vertical.
+     */
+    mode?: Mode;
+    /**
+     * Initially selected step, only when it is uncontrolled.
+     */
+    defaultCurrentStep?: number;
+    /**
+     * Defines which step is marked as the current. The numeration starts at 0.
+     */
+    currentStep?: number;
+    /**
+     * This function will be called when the user clicks a step. The step
+     * number will be passed as a parameter.
+     */
+    onStepClick?: (newCurrentStep: number) => void;
+    /**
+     * An array of objects representing the steps.
+     */
+    steps: Step[];
+    /**
+     * 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.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute that is given to all the steps.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/wizard/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/README.md

@@ -1,66 +0,0 @@
-# Halstack React CDK 
-
-Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
-
-- It increases visual and behavioral consistency across the applications using the library.
-
-- It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
-
-## Usage
-
-Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/tools/react/) for details on how to use it.
-
-## Contributing
-
-Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
-
-## Development Setup
-
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 
-
-
-The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
-
-### Library
-
-Contained in the `lib` folder.
-
-```bash
-cd lib
-```
-
-Install the library dependencies.
-
-```bash
-npm install
-```
-
-Run the build process into `dist` folder, detecting and automatically building changes in src.
-
-```bash
-npm run build:watch #'npm run build' if there is no need to watch for changes
-```
-
-### Example Application
-
-Contained in the `app` folder.
-
-```bash
-cd app # from the root folder
-```
-
-Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
-
-```bash
-npm install
-```
-
-Start the application.
-
-```bash
-npm start # runs create-react-app dev server
-```
-
-Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
-
-## Running the tests

package/babel.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  presets: ["@babel/react", "@babel/env"],
-  plugins: ["@babel/plugin-proposal-class-properties"]
-}

package/dist/accordion/Accordion.js

@@ -1,248 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
-
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("../common/OpenSans.css");
-
-var _utils = require("../common/utils.js");
-
-var _variables = require("../common/variables.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: 1px;\n  font-size: 14px;\n  font: Italic 14px/19px Open Sans;\n  letter-spacing: 0.24px;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  flex-grow: 1;\n  margin-right: 15px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  width: ", ";\n\n  font-family: \"Open Sans\", sans-serif;\n  cursor: ", ";\n  .MuiPaper-root {\n    left: 85px;\n    background-color: ", " !important;\n    color: ", ";\n    box-shadow: 0px 6px 10px #00000024;\n    display: block;\n    position: static;\n    width: 100%;\n    border-radius: 4px;\n\n    &.Mui-expanded {\n      border-radius: 4px;\n      color: \"#000000\";\n    }\n\n    .MuiButtonBase-root.MuiExpansionPanelSummary-root {\n      :hover {\n        background-color: ", ";\n        color: ", ";\n      }\n    }\n\n    .MuiButtonBase-root {\n      border-radius: 4px;\n      height: 72px;\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n\n      &.MuiIconButton-root {\n        height: auto;\n      }\n\n      .MuiExpansionPanelSummary-content {\n        padding-right: 30px;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n\n    .MuiExpansionPanelSummary-root.Mui-expanded {\n      color: ", ";\n      border-bottom: 1px solid #d9d9d9;\n    }\n\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n\n  .MuiCollapse-hidden {\n    display: none;\n  }\n\n  .MuiPaper-root.Mui-disabled {\n    opacity: ", ";\n  }\n\n  .MuiCollapse-container {\n    color: #000000;\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n\n  .MuiSvgIcon-root {\n    color: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root {\n    padding: 0 30px;\n  }\n\n  .MuiExpansionPanelSummary-root.Mui-disabled {\n    opacity: 1;\n  }\n\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcAccordion = function DxcAccordion(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _ref$assistiveText = _ref.assistiveText,
-      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      isExpanded = _ref.isExpanded,
-      children = _ref.children,
-      margin = _ref.margin,
-      padding = _ref.padding;
-
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      innerIsExpanded = _React$useState2[0],
-      setInnerIsExpanded = _React$useState2[1];
-
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
-
-  var handlerAccordion = function handlerAccordion() {
-    if (isExpanded == null) {
-      setInnerIsExpanded(!innerIsExpanded);
-    }
-
-    if (typeof onChange === "function") {
-      onChange(isExpanded == null ? !innerIsExpanded : !isExpanded);
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.accordion
-  }, _react["default"].createElement(DXCAccordion, {
-    padding: padding,
-    margin: margin,
-    disabled: disabled
-  }, _react["default"].createElement(_ExpansionPanel["default"], {
-    disabled: disabled,
-    onChange: handlerAccordion,
-    expanded: isExpanded != null ? isExpanded : innerIsExpanded
-  }, _react["default"].createElement(_ExpansionPanelSummary["default"], {
-    expandIcon: _react["default"].createElement(_ExpandMore["default"], null)
-  }, _react["default"].createElement(AccordionInfo, {
-    iconPosition: iconPosition
-  }, _react["default"].createElement(AccordionLabel, {
-    iconPosition: iconPosition
-  }, label), iconSrc && _react["default"].createElement(AccordionIcon, {
-    iconPosition: iconPosition,
-    src: iconSrc
-  })), _react["default"].createElement(AccordionAssistiveText, null, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, null, children)))));
-};
-
-var calculateWidth = function calculateWidth(margin) {
-  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-};
-
-DxcAccordion.propTypes = {
-  label: _propTypes["default"].string,
-  iconSrc: _propTypes["default"].string,
-  iconPosition: _propTypes["default"].oneOf(["before", "after"]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  isExpanded: _propTypes["default"].bool,
-  children: _propTypes["default"].element,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
-
-var DXCAccordion = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin);
-}, function (props) {
-  return props.disabled && "not-allowed" || "pointer";
-}, function (props) {
-  return props.theme.backgroundColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "".concat(props.theme.arrowColor).concat(props.theme.hoverBackgroundColor);
-}, function (props) {
-  return props.theme.hoverFontColor;
-}, function (props) {
-  return props.theme.hoverFontColor;
-}, function (props) {
-  return props.theme.disabled;
-}, function (props) {
-  return props.theme.arrowColor;
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
-});
-
-var AccordionInfo = _styledComponents["default"].div(_templateObject2(), function (props) {
-  return props.iconPosition === "after" && "row" || "row-reverse";
-});
-
-var AccordionLabel = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.iconPosition === "after" && "0" || "1";
-});
-
-var AccordionText = _styledComponents["default"].div(_templateObject4());
-
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5());
-
-var AccordionIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
-  return props.iconPosition === "after" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && "10px" || "0px";
-});
-
-var _default = DxcAccordion;
-exports["default"] = _default;

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"]
-  }
-});