@dxc-technology/halstack-react 0.0.0-15f7c5c → 0.0.0-1695f29

package/wizard/types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type StepProps = {
+    /**
+     * Step label.
+     */
+    label: string;
+    /**
+     * Description that will be placed next to the step.
+     */
+    description?: string;
+    /**
+     * Material Symbol name or SVG element 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;
+};
+type Props = {
+    /**
+     * The wizard can be shown in horizontal or vertical.
+     */
+    mode?: "horizontal" | "vertical";
+    /**
+     * 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?: (currentStep: number) => void;
+    /**
+     * An array of objects representing the steps.
+     */
+    steps: StepProps[];
+    /**
+     * 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/babel.config.js

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

package/dist/ThemeContext.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemeProvider = exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _color = _interopRequireDefault(require("color"));
-
-var _variables = require("./common/variables.js");
-
-var ThemeContext = _react["default"].createContext();
-
-var addLightness = function addLightness(hexColor, increaseLightness) {
-  var color = (0, _color["default"])(hexColor);
-  var hslColor = color.hsl();
-  var lightnessColor = hslColor.color[2];
-  return hslColor.lightness(lightnessColor + increaseLightness).hex();
-};
-
-var parseTheme = function parseTheme(theme) {
-  if (theme) {
-    if (theme.tabs) {
-      _variables.componentTokens.tabs.selectedFontColor = theme.tabs.selectedFontColor;
-      _variables.componentTokens.tabs.selectedIconColor = theme.tabs.selectedFontColor;
-      _variables.componentTokens.tabs.selectedUnderlineColor = theme.tabs.selectedFontColor;
-      _variables.componentTokens.tabs.focusOutline = theme.tabs.selectedFontColor;
-      _variables.componentTokens.tabs.hoverBackgroundColor = addLightness(_variables.componentTokens.tabs.selectedFontColor, 58);
-      _variables.componentTokens.tabs.pressedBackgroundColor = addLightness(_variables.componentTokens.tabs.selectedFontColor, 53);
-    }
-
-    if (theme.accordion) {
-      _variables.componentTokens.accordion.fontColor = theme.accordion.fontColor;
-      _variables.componentTokens.accordion.arrowColor = theme.accordion.arrowColor;
-      _variables.componentTokens.accordion.hoverBackgroundColor = addLightness(_variables.componentTokens.tabs.arrowColor, 53);
-      _variables.componentTokens.accordion.disabledFontColor = addLightness(_variables.componentTokens.tabs.fontcolor, 35);
-      _variables.componentTokens.accordion.focusOutline = theme.accordion.arrowColor;
-    }
-
-    return _variables.componentTokens;
-  }
-
-  return _variables.componentTokens;
-};
-
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  var parsedTheme = (0, _react.useMemo)(function () {
-    return parseTheme(theme);
-  }, [theme]);
-  return _react["default"].createElement(ThemeContext.Provider, {
-    value: parsedTheme
-  }, children);
-};
-
-exports.ThemeProvider = ThemeProvider;
-var _default = ThemeContext;
-exports["default"] = _default;

package/dist/accordion/Accordion.js

@@ -1,268 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-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 _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: 0px;\n  margin-right: 10px;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-left: 0px;\n  margin-right: 12px;\n  overflow: hidden;\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\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 normal 300 16px/22px Open Sans;\n  letter-spacing: 0.49px;\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: 1;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row-reverse;\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      }\n    }\n\n    .MuiButtonBase-root {\n      border-radius: 4px;\n      height: 48px;\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: 24px;\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      min-height: 48px;\n      border: 1px solid ", ";\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    color: ", ";\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 16px 0 16px;\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,
-      icon = _ref.icon,
-      _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 _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isResponsive = _useState2[0],
-      setIsResponsive = _useState2[1];
-
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var handleResize = function handleResize(width) {
-    if (width) {
-      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
-    }
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(window.innerWidth);
-  };
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return function () {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
-  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,
-    icon: icon || iconSrc,
-    isResponsive: isResponsive
-  }, _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, null, _react["default"].createElement(AccordionLabel, null, label), icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(AccordionIcon, {
-    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,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  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.hoverBackgroundColor);
-}, function (props) {
-  return props.theme.focusOutline;
-}, function (props) {
-  return props.theme.disabledFontColor;
-}, 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());
-
-var AccordionLabel = _styledComponents["default"].div(_templateObject3());
-
-var AccordionText = _styledComponents["default"].div(_templateObject4());
-
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5());
-
-var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.arrowColor;
-});
-
-var AccordionIcon = _styledComponents["default"].img(_templateObject7());
-
-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"]
-  }
-});