@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/Drawer/Drawer.stories.js

@@ -1,295 +1,311 @@
-import React from "react";
+import react from "react";
 import { Drawer } from "./Drawer.js";
 import { Button } from "../Button/index.js";
 import { DropdownMenu } from "../DropdownMenu/index.js";
 import { Tabs } from "../Tabs/index.js";
-import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
+import { ReactComponent } from "@webiny/icons/ring_volume.svg";
 const meta = {
-  title: "Components/Drawer",
-  component: Drawer,
-  argTypes: {}
+    title: "Components/Drawer",
+    component: Drawer,
+    argTypes: {}
 };
-export default meta;
-export const Default = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    title: "Drawer Title",
-    description: "A short dialog description.",
-    info: /*#__PURE__*/React.createElement(React.Fragment, null, "Learn more about this ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "here"), "."),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-      className: "mb-md"
-    }, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."), /*#__PURE__*/React.createElement("p", {
-      className: "mb-md"
-    }, "Its fabric, woven from the highest quality materials, ensures that you stay dry, no matter the intensity of the rain. With a frame engineered for strength yet lightweight enough to carry with ease, this umbrella is a marvel of modern design. Not just a shield against the elements, but a companion in your everyday journey, it provides peace of mind, knowing you\u2019re prepared for whatever the skies may bring."), /*#__PURE__*/React.createElement("p", {
-      className: "mb-md"
-    }, "The sleek, stylish design complements any outfit, making it not only a practical accessory but also a fashion statement. With its smooth opening mechanism, you can effortlessly transition from a sunny day to a rainy one without missing a beat. Whether you are navigating through a busy city street or enjoying a quiet stroll in the park, this umbrella offers unmatched comfort and protection."), /*#__PURE__*/React.createElement("p", {
-      className: "mb-md"
-    }, "Indeed, it is not just an umbrella \u2014 it is an experience. One that elevates your daily routine, making every step in both sun and storm feel just a little bit brighter.")),
-    onOpenChange: opened => {
-      console.log(`Drawer is ${opened ? "opened" : "closed"}.`);
+const Drawer_stories = meta;
+const Default = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        title: "Drawer Title",
+        description: "A short dialog description.",
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null, "Learn more about this ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "here"), "."),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md"
+        }, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."), /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md"
+        }, "Its fabric, woven from the highest quality materials, ensures that you stay dry, no matter the intensity of the rain. With a frame engineered for strength yet lightweight enough to carry with ease, this umbrella is a marvel of modern design. Not just a shield against the elements, but a companion in your everyday journey, it provides peace of mind, knowing you’re prepared for whatever the skies may bring."), /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md"
+        }, "The sleek, stylish design complements any outfit, making it not only a practical accessory but also a fashion statement. With its smooth opening mechanism, you can effortlessly transition from a sunny day to a rainy one without missing a beat. Whether you are navigating through a busy city street or enjoying a quiet stroll in the park, this umbrella offers unmatched comfort and protection."), /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md"
+        }, "Indeed, it is not just an umbrella — it is an experience. One that elevates your daily routine, making every step in both sun and storm feel just a little bit brighter.")),
+        onOpenChange: (opened)=>{
+            console.log(`Drawer is ${opened ? "opened" : "closed"}.`);
+        },
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, null), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, null)),
+        bodyPadding: true,
+        headerSeparator: true,
+        footerSeparator: true
     },
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer.CancelButton, null), /*#__PURE__*/React.createElement(Drawer.ConfirmButton, null)),
-    bodyPadding: true,
-    headerSeparator: true,
-    footerSeparator: true
-  },
-  argTypes: {}
+    argTypes: {}
 };
-export const SizeSmall = {
-  args: {
-    ...Default.args,
-    size: "sm"
-  }
+const SizeSmall = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
 };
-export const SizeMedium = {
-  args: {
-    ...Default.args,
-    size: "md"
-  }
+const SizeMedium = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
 };
-export const SizeLarge = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
+const SizeLarge = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
 };
-export const SizeExtraLarge = {
-  args: {
-    ...Default.args,
-    size: "xl"
-  }
+const SizeExtraLarge = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+const ControlledVisibility = {
+    render: (props)=>{
+        const [open, setOpen] = react.useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open",
+            onClick: ()=>setOpen(true)
+        }), /*#__PURE__*/ react.createElement(Drawer, {
+            ...props,
+            open: open,
+            onOpenChange: (open)=>{
+                if (!open) setOpen(false);
+            }
+        }));
+    },
+    args: {
+        ...Default.args,
+        trigger: null,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This drawer's visibility is controlled by the open state.")
+    }
 };
-export const ControlledVisibility = {
-  render: props => {
-    const [open, setOpen] = React.useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open",
-      onClick: () => setOpen(true)
-    }), /*#__PURE__*/React.createElement(Drawer, Object.assign({}, props, {
-      open: open,
-      onOpenChange: open => {
-        if (!open) {
-          setOpen(false);
+const WithOpenCloseEventHandler = {
+    args: {
+        ...Default.args,
+        onClose: ()=>{
+            console.log("onClose triggered");
+        },
+        onOpen: ()=>{
+            console.log("onOpen triggered");
         }
-      }
-    })));
-  },
-  args: {
-    ...Default.args,
-    trigger: null,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This drawer's visibility is controlled by the open state.")
-  }
+    }
 };
-export const WithOpenCloseEventHandler = {
-  args: {
-    ...Default.args,
-    onClose: () => {
-      console.log("onClose triggered");
+const WithDropdownMenu = {
+    render: (props)=>{
+        const [open, setOpen] = react.useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open"
+            })
+        }, /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Open Drawer",
+            content: "Open Drawer",
+            onClick: ()=>setOpen(true)
+        })), /*#__PURE__*/ react.createElement(Drawer, {
+            ...props,
+            open: open,
+            onOpenChange: ()=>setOpen(false)
+        }));
     },
-    onOpen: () => {
-      console.log("onOpen triggered");
+    args: {
+        ...Default.args,
+        trigger: null,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This drawer is opened from a dropdown menu item.")
     }
-  }
-};
-export const WithDropdownMenu = {
-  render: props => {
-    const [open, setOpen] = React.useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
-        text: "Open"
-      })
-    }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Open Drawer",
-      content: "Open Drawer",
-      onClick: () => setOpen(true)
-    })), /*#__PURE__*/React.createElement(Drawer, Object.assign({}, props, {
-      open: open,
-      onOpenChange: () => setOpen(false)
-    })));
-  },
-  args: {
-    ...Default.args,
-    trigger: null,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This drawer is opened from a dropdown menu item.")
-  }
 };
-export const WithoutCloseButton = {
-  args: {
-    ...Default.args,
-    showCloseButton: false,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This drawer is opened from a dropdown menu item.")
-  }
+const WithoutCloseButton = {
+    args: {
+        ...Default.args,
+        showCloseButton: false,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This drawer is opened from a dropdown menu item.")
+    }
 };
-export const CustomWidth = {
-  args: {
-    ...Default.args,
-    width: 1000,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This drawer has a custom width of 1000px, making it wider than the default.")
-  }
+const CustomWidth = {
+    args: {
+        ...Default.args,
+        width: 1000,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This drawer has a custom width of 1000px, making it wider than the default.")
+    }
 };
-export const WithTabs = {
-  args: {
-    ...Default.args,
-    bodyPadding: false,
-    headerSeparator: false,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
-      spacing: "lg",
-      tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "account",
-        value: "account",
-        trigger: "Account",
-        content: "Make changes to your account here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "company",
-        value: "company",
-        trigger: "Company",
-        content: "Make changes to your company info here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "security",
-        value: "security",
-        trigger: "Security",
-        content: "Make changes to your security settings here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "development",
-        value: "development",
-        trigger: "Development",
-        content: "Make changes to your development settings here."
-      })]
-    }))
-  }
+const WithTabs = {
+    args: {
+        ...Default.args,
+        bodyPadding: false,
+        headerSeparator: false,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tabs, {
+            spacing: "lg",
+            tabs: [
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "account",
+                    value: "account",
+                    trigger: "Account",
+                    content: "Make changes to your account here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "company",
+                    value: "company",
+                    trigger: "Company",
+                    content: "Make changes to your company info here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "security",
+                    value: "security",
+                    trigger: "Security",
+                    content: "Make changes to your security settings here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "development",
+                    value: "development",
+                    trigger: "Development",
+                    content: "Make changes to your development settings here."
+                })
+            ]
+        }))
+    }
 };
-export const DropdownMenuInDrawer = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
-        text: "Open"
-      })
-    }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Billing"
-    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Settings"
-    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      content: "Keyboard shortcuts"
-    })))
-  }
+const DropdownMenuInDrawer = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open"
+            })
+        }, /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            content: "Billing"
+        }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            content: "Settings"
+        }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            content: "Keyboard shortcuts"
+        })))
+    }
 };
-export const WithIcon = {
-  args: {
-    ...Default.args,
-    icon: /*#__PURE__*/React.createElement(Drawer.Icon, {
-      icon: /*#__PURE__*/React.createElement(DoorbellIcon, null),
-      label: "Icon label..."
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "The icon helps to visually identify the purpose of this drawer.")
-  }
+const WithIcon = {
+    args: {
+        ...Default.args,
+        icon: /*#__PURE__*/ react.createElement(Drawer.Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Icon label..."
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "The icon helps to visually identify the purpose of this drawer.")
+    }
 };
-export const AsModal = {
-  args: {
-    ...Default.args,
-    modal: true,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This drawer has modal=true, which means it will show an overlay behind it and prevent interaction with the content underneath.")
-  }
+const AsModal = {
+    args: {
+        ...Default.args,
+        modal: true,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This drawer has modal=true, which means it will show an overlay behind it and prevent interaction with the content underneath.")
+    }
 };
-export const Documentation = {
-  render: args => {
-    const [open, setOpen] = React.useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open Drawer",
-      onClick: () => setOpen(true)
-    }), /*#__PURE__*/React.createElement(Drawer, Object.assign({}, args, {
-      open: open,
-      onOpenChange: open => setOpen(open)
-    })));
-  },
-  args: {
-    title: "Drawer Title",
-    description: "A short drawer description.",
-    showCloseButton: true,
-    bodyPadding: true,
-    headerSeparator: true,
-    footerSeparator: true,
-    side: "right",
-    modal: false,
-    info: /*#__PURE__*/React.createElement(React.Fragment, null, "Learn more about this ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "here"), "."),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-      className: "mb-md, mt-md"
-    }, "This is the drawer content area. You can place any content here including forms, text, images, or other components."), /*#__PURE__*/React.createElement("p", {
-      className: "mb-md"
-    }, "Drawers are useful for displaying additional information or actions without navigating away from the current page.")),
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer.CancelButton, null), /*#__PURE__*/React.createElement(Drawer.ConfirmButton, null)),
-    width: undefined
-  },
-  argTypes: {
-    title: {
-      description: "Title displayed in the header",
-      control: "text"
-    },
-    description: {
-      description: "Description displayed below the title",
-      control: "text"
-    },
-    side: {
-      description: "Side from which the drawer appears",
-      control: "select",
-      options: ["left", "right"],
-      defaultValue: "right"
-    },
-    size: {
-      description: "Controls the size of the drawer",
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      defaultValue: "md"
-    },
-    showCloseButton: {
-      description: "Show close button in the top-right corner",
-      control: "boolean",
-      defaultValue: true
-    },
-    modal: {
-      description: "Whether the drawer should behave as a modal",
-      control: "boolean",
-      defaultValue: false
+const Documentation = {
+    render: (args)=>{
+        const [open, setOpen] = react.useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open Drawer",
+            onClick: ()=>setOpen(true)
+        }), /*#__PURE__*/ react.createElement(Drawer, {
+            ...args,
+            open: open,
+            onOpenChange: (open)=>setOpen(open)
+        }));
     },
-    bodyPadding: {
-      description: "Add padding to the drawer body",
-      control: "boolean",
-      defaultValue: true
+    args: {
+        title: "Drawer Title",
+        description: "A short drawer description.",
+        showCloseButton: true,
+        bodyPadding: true,
+        headerSeparator: true,
+        footerSeparator: true,
+        side: "right",
+        modal: false,
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null, "Learn more about this ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "here"), "."),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md, mt-md"
+        }, "This is the drawer content area. You can place any content here including forms, text, images, or other components."), /*#__PURE__*/ react.createElement("p", {
+            className: "mb-md"
+        }, "Drawers are useful for displaying additional information or actions without navigating away from the current page.")),
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, null), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, null)),
+        width: void 0
     },
-    headerSeparator: {
-      description: "Show separator below the header",
-      control: "boolean",
-      defaultValue: true
-    },
-    footerSeparator: {
-      description: "Show separator above the footer",
-      control: "boolean",
-      defaultValue: true
-    },
-    width: {
-      description: 'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like "80%", "50vw", "auto", etc., following React.CSSProperties["width"] types.'
-    },
-    info: {
-      description: "Additional info displayed below the description, please refer to the example below for details."
-    },
-    children: {
-      description: "Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
-    },
-    actions: {
-      description: "Actions displayed in the footer, please refer to the code example for details."
+    argTypes: {
+        title: {
+            description: "Title displayed in the header",
+            control: "text"
+        },
+        description: {
+            description: "Description displayed below the title",
+            control: "text"
+        },
+        side: {
+            description: "Side from which the drawer appears",
+            control: "select",
+            options: [
+                "left",
+                "right"
+            ],
+            defaultValue: "right"
+        },
+        size: {
+            description: "Controls the size of the drawer",
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ],
+            defaultValue: "md"
+        },
+        showCloseButton: {
+            description: "Show close button in the top-right corner",
+            control: "boolean",
+            defaultValue: true
+        },
+        modal: {
+            description: "Whether the drawer should behave as a modal",
+            control: "boolean",
+            defaultValue: false
+        },
+        bodyPadding: {
+            description: "Add padding to the drawer body",
+            control: "boolean",
+            defaultValue: true
+        },
+        headerSeparator: {
+            description: "Show separator below the header",
+            control: "boolean",
+            defaultValue: true
+        },
+        footerSeparator: {
+            description: "Show separator above the footer",
+            control: "boolean",
+            defaultValue: true
+        },
+        width: {
+            description: 'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like "80%", "50vw", "auto", etc., following React.CSSProperties["width"] types.'
+        },
+        info: {
+            description: "Additional info displayed below the description, please refer to the example below for details."
+        },
+        children: {
+            description: "Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
+        },
+        actions: {
+            description: "Actions displayed in the footer, please refer to the code example for details."
+        }
     }
-  }
 };
+export default Drawer_stories;
+export { AsModal, ControlledVisibility, CustomWidth, Default, Documentation, DropdownMenuInDrawer, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, WithDropdownMenu, WithIcon, WithOpenCloseEventHandler, WithTabs, WithoutCloseButton };
 
 //# sourceMappingURL=Drawer.stories.js.map