"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Popin_stories_exports = {};
__export(Popin_stories_exports, {
  Default: () => Default,
  default: () => Popin_stories_default
});
module.exports = __toCommonJS(Popin_stories_exports);
var import_react = __toESM(require("react"));
var import_client_api = require("@storybook/client-api");
var import_addon_actions = require("@storybook/addon-actions");
var import_index = __toESM(require("./index"));
var import_Text = __toESM(require("../../asorted/Text"));
var import_Button = __toESM(require("../../cta/Button"));
var import_theme = __toESM(require("../../../styles/theme"));
const description = `
### This is a customizable pop-in component.

The component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />
In addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />

## Usage

\`\`\`js

import { Popin } from "@ledgerhq/react-ui"

\`\`\`

From the default Popin component, you can access 3 different pre-styled sections *(\`Popin.Header\`, \`Popin.Body\` and \`Popin.Footer\`)*. All of these components are optional.

- \`Popin.Header\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided
- \`Popin.Body\` is just a customizable scrollable Flex component configured to take all the available space
- \`Popin.Footer\` is a customizable Flex component

## Sandbox

Placement, style and content can be customized using props as demonstrated in the following example.<br />
Additionally, the story provide some playground options to play with the component. These options aren't props of the component itself.
`;
const code = `
<Popin isOpen={isOpen}>
  <Popin.Header onClose={onBack} onClose={onBack}><Text variant="h5">A title</Text></Popin.Header>
  <Popin.Body><Text variant="paragraph">Some texts here</Text></Popin.Body>
  <Popin.Footer>
    <Button type="main" onClick={onClick}>
      Next
    </Button>
  </Popin.Footer>
</Popin>
`;
var Popin_stories_default = {
  title: "Layout/Popin",
  component: import_index.default,
  parameters: {
    docs: {
      description: { component: description },
      source: { code, type: "code" }
    }
  },
  argTypes: {
    /** PROPS **/
    width: {
      type: "number",
      description: "Optional popin's width",
      control: {
        type: "number",
        min: import_theme.default.sizes.drawer.popin.min.width,
        max: import_theme.default.sizes.drawer.popin.max.width
      },
      table: {
        type: {
          summary: "Accepted range",
          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.width}px or greather than ${import_theme.default.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`
        },
        defaultValue: {
          summary: import_theme.default.sizes.drawer.popin.min.width
        }
      }
    },
    height: {
      type: "number",
      description: "Optional popin's height",
      control: {
        type: "number",
        min: import_theme.default.sizes.drawer.popin.min.height,
        max: import_theme.default.sizes.drawer.popin.max.height
      },
      table: {
        type: {
          summary: "Accepted range",
          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.height}px or greather than ${import_theme.default.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`
        },
        defaultValue: {
          summary: import_theme.default.sizes.drawer.popin.min.height
        }
      }
    },
    isOpen: {
      type: "boolean",
      description: "Controls if the popin is mounted or not.",
      required: true,
      control: { type: "boolean" }
    },
    onClose: {
      description: "Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.",
      control: false
    },
    /** playground **/
    hasHeader: {
      type: "boolean",
      value: true,
      description: "Controls if the header should be displayed.",
      required: true,
      control: { type: "boolean" },
      table: { category: "playground" }
    },
    hasFooter: {
      type: "boolean",
      value: true,
      description: "Controls if the footer should be displayed.",
      required: true,
      control: { type: "boolean" },
      table: { category: "playground" }
    },
    isCloseDisplayed: {
      type: "boolean",
      description: "Controls if the close button should be rendered.",
      required: true,
      control: { type: "boolean" },
      table: { category: "playground" }
    },
    isBackDisplayed: {
      type: "boolean",
      description: "Controls if the back button should be rendered.",
      required: true,
      control: { type: "boolean" },
      table: { category: "playground" }
    },
    "Header.Children.Text": {
      type: "text",
      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.",
      required: true,
      control: { type: "text" },
      table: { category: "playground" }
    },
    "Body.Children.Text": {
      type: "text",
      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.",
      required: true,
      control: { type: "text" },
      table: { category: "playground" }
    }
  },
  args: {
    width: import_theme.default.sizes.drawer.popin.max.width,
    height: import_theme.default.sizes.drawer.popin.max.height,
    isOpen: true,
    hasHeader: true,
    hasFooter: true,
    isCloseDisplayed: true,
    isBackDisplayed: true,
    "Body.Children.Text": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,
    "Header.Children.Text": "This is a fake title"
  }
};
const Template = (args) => {
  const [, updateArgs] = (0, import_client_api.useArgs)();
  const onClose = () => updateArgs({ isOpen: false });
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "shade", onClick: () => updateArgs({ isOpen: true }) }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(
    import_index.default.Header,
    {
      onBack: args.isBackDisplayed ? (0, import_addon_actions.action)("previous") : void 0,
      onClose: args.isCloseDisplayed ? onClose : void 0
    },
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, args["Header.Children.Text"])
  ) : null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Body, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph" }, args["Body.Children.Text"])), args.hasFooter ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Footer, { flexDirection: "row-reverse" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: (0, import_addon_actions.action)("next") }, "Next")) : null));
};
const Default = Template.bind({});
//# sourceMappingURL=Popin.stories.js.map
