function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import styled from 'styled-components';
import { AccordionItem, Badge, Box, Button, Flexbox, Icon, Typography } from '../..';
export default {
  title: 'Molecules / AccordionItem',
  parameters: {
    component: AccordionItem
  }
};
var StyledAccordionItem = styled(AccordionItem).withConfig({
  displayName: "AccordionItemstories__StyledAccordionItem",
  componentId: "sc-xlwwg8-0"
})(["", "{padding-left:", "px;}"], AccordionItem.components.Content, function (p) {
  return p.theme.spacing.unit(20);
});
var ExampleContent = function ExampleContent() {
  return React.createElement(Typography, {
    as: "p",
    type: "secondary",
    color: function color(t) {
      return t.color.accordionText;
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat");
};
export var DefaultCollapsed = function DefaultCollapsed() {
  return React.createElement(AccordionItem, {
    title: "Lemon drops and several cakes for two persons or more"
  }, React.createElement(ExampleContent, null));
};
export var Expanded = function Expanded() {
  return React.createElement(AccordionItem, {
    title: "L\xE5g CO\u2082 risk",
    expandedInitial: true
  }, React.createElement(ExampleContent, null));
};
export var WithStyledContent = function WithStyledContent() {
  return React.createElement(StyledAccordionItem, {
    title: "Sustainability score"
  }, React.createElement(ExampleContent, null));
};
var ControlledExample = function ControlledExample() {
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    expandedAreas = _useState2[0],
    setExpandedAreas = _useState2[1];
  var clickHandler = function clickHandler(id) {
    if (expandedAreas.includes(id)) {
      var removed = expandedAreas.filter(function (x) {
        return x !== id;
      });
      setExpandedAreas(_toConsumableArray(removed));
    } else {
      setExpandedAreas([].concat(_toConsumableArray(expandedAreas), [id]));
    }
  };
  return React.createElement(React.Fragment, null, React.createElement(Box, {
    mb: 4
  }, React.createElement(Flexbox, {
    container: true,
    gap: 4
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Button, {
    variant: "primary",
    onClick: function onClick() {
      return clickHandler('first');
    }
  }, "Toggle first")), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Button, {
    variant: "primary",
    onClick: function onClick() {
      return clickHandler('second');
    }
  }, "Toggle second")))), React.createElement(AccordionItem, {
    title: "L\xE5g CO\u2082 risk",
    expanded: expandedAreas.includes('first'),
    onClick: function onClick() {
      return clickHandler('first');
    }
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "Sustainability score",
    expanded: expandedAreas.includes('second'),
    onClick: function onClick() {
      return clickHandler('second');
    }
  }, React.createElement(ExampleContent, null)));
};
export var Controlled = {
  render: function render() {
    return React.createElement(ControlledExample, null);
  }
};
export var TextOnlyContentIsFormattedCorrect = function TextOnlyContentIsFormattedCorrect() {
  return React.createElement(React.Fragment, null, React.createElement(AccordionItem, {
    title: "Content is text only"
  }, "Plain vanilla text content"), React.createElement(AccordionItem, {
    title: "Content is a component"
  }, React.createElement("div", null, "Content is wrapped in a div and does not get default text styling")));
};
export var WithChevron = function WithChevron() {
  return React.createElement(AccordionItem, {
    withChevron: true,
    title: "How much risk are you willing to take?"
  }, React.createElement(ExampleContent, null));
};
export var WithTypePrimaryAndChevron = function WithTypePrimaryAndChevron() {
  return React.createElement(AccordionItem, {
    type: "primary",
    withChevron: true,
    title: "How much risk are you willing to take?"
  }, React.createElement(ExampleContent, null));
};
export var WithTypePrimaryAndChevronAndLeftBadgeIcon = function WithTypePrimaryAndChevronAndLeftBadgeIcon() {
  return React.createElement(AccordionItem, {
    disableFocusOutline: true,
    disableBackgroundColor: true,
    type: "primary",
    withChevron: true,
    title: "Leverage products without stop loss",
    label: "Valid until 2023-12-31",
    leftBadgeIcon: React.createElement(Badge.Icon, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "s"
    }, React.createElement(Icon.Warning16, {
      color: function color(t) {
        return t.color.badgeIconColor;
      }
    }), ' ')
  }, React.createElement(ExampleContent, null));
};
export var WithRightAddon = function WithRightAddon() {
  return React.createElement(AccordionItem, {
    title: "How much risk are you willing to take?",
    rightAddon: React.createElement(Button.Pill, {
      onClick: function onClick() {}
    }, "right addon")
  }, React.createElement(ExampleContent, null));
};
export var WithDisabledBackgroundColor = function WithDisabledBackgroundColor() {
  return React.createElement(AccordionItem, {
    title: "This card has its hover and focus color disabled",
    disableBackgroundColor: true
  }, React.createElement(ExampleContent, null));
};
export var WithDifferentPaddings = function WithDifferentPaddings() {
  return React.createElement(React.Fragment, null, React.createElement(AccordionItem, {
    title: "This accordion item has a custom padding",
    p: 10
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom horizontal padding",
    px: 20
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom vertical padding",
    py: 10
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom top padding",
    pt: 10
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom bottom padding",
    pb: 10
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom left padding",
    pl: 20
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item has a custom right padding and chevron to demonstrate",
    pr: 20,
    withChevron: true
  }, React.createElement(ExampleContent, null)));
};
export var Disabled = function Disabled() {
  return React.createElement(React.Fragment, null, React.createElement(AccordionItem, {
    title: "This accordion item is disabled",
    disabled: true
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "This accordion item is disabled with chevron",
    disabled: true,
    withChevron: true
  }, React.createElement(ExampleContent, null)));
};