import React from 'react';
import { Accordion, AccordionItem, Badge, Box, Icon, Spinner, Typography } from '../..';
import docs from './Accordion.mdx';
export default {
  title: 'Molecules / Accordion',
  parameters: {
    docs: {
      page: docs
    },
    component: Accordion
  }
};
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");
};
var exampleFooter = React.createElement(Typography, {
  as: "p",
  type: "secondary",
  weight: "bold"
}, "Did not find what you look for? ...That's a shame. ", React.createElement(Spinner, {
  id: "shame"
}));
export var DefaultStory = {
  render: function render() {
    return React.createElement(Accordion, null, React.createElement(AccordionItem, {
      title: "L\xE5g CO\u2082 risk"
    }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
      title: "Sustainability score"
    }, React.createElement(ExampleContent, null)));
  },
  name: 'Default'
};
export var WithFooter = function WithFooter() {
  return React.createElement(Accordion, {
    footer: exampleFooter
  }, React.createElement(AccordionItem, {
    title: "L\xE5g CO\u2082 risk"
  }, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
    title: "Sustainability score"
  }, React.createElement(ExampleContent, null)));
};
export var WithBadges = function WithBadges() {
  return React.createElement(Box, {
    p: 10,
    backgroundColor: function backgroundColor(t) {
      return t.color.card;
    }
  }, React.createElement(Accordion, null, 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)), 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)), 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))));
};