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

package/Alert/Alert.stories.js

@@ -1,221 +1,241 @@
 import { Alert } from "./Alert.js";
-import React from "react";
-import { ReactComponent as LifeBuoyIcon } from "@webiny/icons/safety_check.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/safety_check.svg";
 const meta = {
-  title: "Components/Alert",
-  component: Alert,
-  argTypes: {},
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "w-[700px]"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export default meta;
-export const Default = {
-  args: {
-    children: "This is an alert. Play around with different properties to see how it looks."
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["info", "success", "warning", "danger"]
+    title: "Components/Alert",
+    component: Alert,
+    argTypes: {},
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-[700px]"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const Alert_stories = meta;
+const Default = {
+    args: {
+        children: "This is an alert. Play around with different properties to see how it looks."
     },
-    variant: {
-      control: "select",
-      options: ["strong", "subtle"]
-    }
-  }
-};
-export const Info = {
-  args: {
-    ...Default.args,
-    type: "info",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there\u2019s no need for accent. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link.")
-  }
-};
-export const InfoStrong = {
-  name: "Info (strong)",
-  args: {
-    ...Info.args,
-    variant: "strong",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there is a need for strong accent. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link.")
-  }
-};
-export const Success = {
-  args: {
-    ...Default.args,
-    type: "success",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a success alert, used when something occurred successfully. And", " ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link.")
-  }
-};
-export const SuccessStrong = {
-  name: "Success (strong)",
-  args: {
-    ...Success.args,
-    variant: "strong",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a success alert, used when something occurred successfully and needs to be prominent. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link.")
-  }
-};
-export const Warning = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be communicated. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link."),
-    type: "warning"
-  }
-};
-export const WarningStrong = {
-  name: "Warning (strong)",
-  args: {
-    ...Warning.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be prominently communicated. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link."),
-    variant: "strong"
-  }
-};
-export const Danger = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a danger alert, used when something critical needs to be communicated. And", " ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link."),
-    type: "danger"
-  }
-};
-export const DangerStrong = {
-  name: "Danger (strong)",
-  args: {
-    ...Danger.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a danger alert, used when something critical needs to be prominently communicated. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link."),
-    variant: "strong"
-  }
-};
-export const WithCustomIcon = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
-    icon: /*#__PURE__*/React.createElement(LifeBuoyIcon, null)
-  }
-};
-export const WithNoIcon = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
-    icon: null
-  }
-};
-export const WithCloseButton = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
-    showCloseButton: true,
-    onClose: () => alert("Close button clicked.")
-  }
-};
-export const WithAction = {
-  args: {
-    ...WithCloseButton.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
-    showCloseButton: true,
-    actions: /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Button",
-      onClick: () => alert("Custom action button clicked.")
-    })
-  }
-};
-export const WithSwatchColor = {
-  args: {
-    ...WithCloseButton.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
-    swatchColor: "#FF708F",
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Reject",
-      onClick: () => alert("Custom action button clicked.")
-    }), /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Approve",
-      onClick: () => alert("Custom action button clicked.")
-    }))
-  }
-};
-export const WithSwatchColorNoIcon = {
-  name: "With Swatch Color & No Icon",
-  args: {
-    ...WithCloseButton.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
-    swatchColor: "#2AABF6",
-    icon: null,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Reject",
-      onClick: () => alert("Custom action button clicked.")
-    }), /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Approve",
-      onClick: () => alert("Custom action button clicked.")
-    }))
-  }
-};
-export const WithSwatchColorNoSwatchIcon = {
-  name: "With Swatch Color & No Swatch Icon",
-  args: {
-    ...WithCloseButton.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
-    swatchColor: "#BDDE46",
-    swatchColorIcon: false,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Reject",
-      onClick: () => alert("Custom action button clicked.")
-    }), /*#__PURE__*/React.createElement(Alert.Action, {
-      text: "Approve",
-      onClick: () => alert("Custom action button clicked.")
-    }))
-  }
-};
-export const Documentation = {
-  args: {
-    type: "info",
-    variant: "subtle",
-    showCloseButton: false,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there\u2019s no need for accent. And ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "this thing here"), " is a short link."),
-    onClose: () => {},
-    actions: undefined
-  },
-  argTypes: {
-    type: {
-      description: "Type",
-      control: "select",
-      options: ["info", "success", "warning", "danger"],
-      defaultValue: "info"
-    },
-    variant: {
-      description: "Variant",
-      control: "select",
-      options: ["subtle", "strong"],
-      defaultValue: "subtle"
-    },
-    showCloseButton: {
-      description: "Show close button, please refer to the 'With Close Button' example below for details.",
-      control: "boolean",
-      defaultValue: false
-    },
-    onClose: {
-      description: "Please refer to the 'With Close Button' example below for details."
+    argTypes: {
+        type: {
+            control: "select",
+            options: [
+                "info",
+                "success",
+                "warning",
+                "danger"
+            ]
+        },
+        variant: {
+            control: "select",
+            options: [
+                "strong",
+                "subtle"
+            ]
+        }
+    }
+};
+const Info = {
+    args: {
+        ...Default.args,
+        type: "info",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This type of notification is suitable for general usage where there’s no need for accent. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link.")
+    }
+};
+const InfoStrong = {
+    name: "Info (strong)",
+    args: {
+        ...Info.args,
+        variant: "strong",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This type of notification is suitable for general usage where there is a need for strong accent. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link.")
+    }
+};
+const Success = {
+    args: {
+        ...Default.args,
+        type: "success",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a success alert, used when something occurred successfully. And", " ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link.")
+    }
+};
+const SuccessStrong = {
+    name: "Success (strong)",
+    args: {
+        ...Success.args,
+        variant: "strong",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a success alert, used when something occurred successfully and needs to be prominent. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link.")
+    }
+};
+const Warning = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be communicated. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link."),
+        type: "warning"
+    }
+};
+const WarningStrong = {
+    name: "Warning (strong)",
+    args: {
+        ...Warning.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be prominently communicated. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link."),
+        variant: "strong"
+    }
+};
+const Danger = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a danger alert, used when something critical needs to be communicated. And", " ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link."),
+        type: "danger"
+    }
+};
+const DangerStrong = {
+    name: "Danger (strong)",
+    args: {
+        ...Danger.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is a danger alert, used when something critical needs to be prominently communicated. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link."),
+        variant: "strong"
+    }
+};
+const WithCustomIcon = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed."),
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
+};
+const WithNoIcon = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed."),
+        icon: null
+    }
+};
+const WithCloseButton = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed."),
+        showCloseButton: true,
+        onClose: ()=>alert("Close button clicked.")
+    }
+};
+const WithAction = {
+    args: {
+        ...WithCloseButton.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed and also has action button."),
+        showCloseButton: true,
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Button",
+            onClick: ()=>alert("Custom action button clicked.")
+        })
+    }
+};
+const WithSwatchColor = {
+    args: {
+        ...WithCloseButton.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed and also has action button."),
+        swatchColor: "#FF708F",
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reject",
+            onClick: ()=>alert("Custom action button clicked.")
+        }), /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Approve",
+            onClick: ()=>alert("Custom action button clicked.")
+        }))
+    }
+};
+const WithSwatchColorNoIcon = {
+    name: "With Swatch Color & No Icon",
+    args: {
+        ...WithCloseButton.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed and also has action button."),
+        swatchColor: "#2AABF6",
+        icon: null,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reject",
+            onClick: ()=>alert("Custom action button clicked.")
+        }), /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Approve",
+            onClick: ()=>alert("Custom action button clicked.")
+        }))
+    }
+};
+const WithSwatchColorNoSwatchIcon = {
+    name: "With Swatch Color & No Swatch Icon",
+    args: {
+        ...WithCloseButton.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "An alert that can be closed and also has action button."),
+        swatchColor: "#BDDE46",
+        swatchColorIcon: false,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reject",
+            onClick: ()=>alert("Custom action button clicked.")
+        }), /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Approve",
+            onClick: ()=>alert("Custom action button clicked.")
+        }))
+    }
+};
+const Documentation = {
+    args: {
+        type: "info",
+        variant: "subtle",
+        showCloseButton: false,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This type of notification is suitable for general usage where there’s no need for accent. And ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "this thing here"), " is a short link."),
+        onClose: ()=>{},
+        actions: void 0
     },
-    actions: {
-      description: "Please refer to the 'With Action' example below for details."
+    argTypes: {
+        type: {
+            description: "Type",
+            control: "select",
+            options: [
+                "info",
+                "success",
+                "warning",
+                "danger"
+            ],
+            defaultValue: "info"
+        },
+        variant: {
+            description: "Variant",
+            control: "select",
+            options: [
+                "subtle",
+                "strong"
+            ],
+            defaultValue: "subtle"
+        },
+        showCloseButton: {
+            description: "Show close button, please refer to the 'With Close Button' example below for details.",
+            control: "boolean",
+            defaultValue: false
+        },
+        onClose: {
+            description: "Please refer to the 'With Close Button' example below for details."
+        },
+        actions: {
+            description: "Please refer to the 'With Action' example below for details."
+        }
     }
-  }
 };
+export default Alert_stories;
+export { Danger, DangerStrong, Default, Documentation, Info, InfoStrong, Success, SuccessStrong, Warning, WarningStrong, WithAction, WithCloseButton, WithCustomIcon, WithNoIcon, WithSwatchColor, WithSwatchColorNoIcon, WithSwatchColorNoSwatchIcon };
 
 //# sourceMappingURL=Alert.stories.js.map

package/Alert/Alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["Alert","React","ReactComponent","LifeBuoyIcon","meta","title","component","argTypes","decorators","Story","createElement","className","Default","args","children","type","control","options","variant","Info","Fragment","href","InfoStrong","name","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","icon","WithNoIcon","WithCloseButton","showCloseButton","onClose","alert","WithAction","actions","Action","text","onClick","WithSwatchColor","swatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","swatchColorIcon","Documentation","undefined","description","defaultValue"],"sources":["Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Alert } from \"./Alert.js\";\nimport React from \"react\";\nimport { ReactComponent as LifeBuoyIcon } from \"@webiny/icons/safety_check.svg\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Alert>;\n\nexport const Default: Story = {\n    args: {\n        children: \"This is an alert. Play around with different properties to see how it looks.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\"]\n        }\n    }\n};\n\nexport const Info: Story = {\n    args: {\n        ...Default.args,\n        type: \"info\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const InfoStrong: Story = {\n    name: \"Info (strong)\",\n    args: {\n        ...Info.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there is a need for\n                strong accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...Default.args,\n        type: \"success\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const SuccessStrong: Story = {\n    name: \"Success (strong)\",\n    args: {\n        ...Success.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully and needs to be\n                prominent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"warning\"\n    }\n};\n\nexport const WarningStrong: Story = {\n    name: \"Warning (strong)\",\n    args: {\n        ...Warning.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                prominently communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const Danger: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be communicated. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"danger\"\n    }\n};\n\nexport const DangerStrong: Story = {\n    name: \"Danger (strong)\",\n    args: {\n        ...Danger.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be prominently\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: <LifeBuoyIcon />\n    }\n};\n\nexport const WithNoIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: null\n    }\n};\n\nexport const WithCloseButton: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        showCloseButton: true,\n        onClose: () => alert(\"Close button clicked.\")\n    }\n};\n\nexport const WithAction: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        showCloseButton: true,\n        actions: (\n            <Alert.Action text={\"Button\"} onClick={() => alert(\"Custom action button clicked.\")} />\n        )\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\",\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSwatchColorNoIcon: Story = {\n    name: \"With Swatch Color & No Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#2AABF6\",\n        icon: null,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\nexport const WithSwatchColorNoSwatchIcon: Story = {\n    name: \"With Swatch Color & No Swatch Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#BDDE46\",\n        swatchColorIcon: false,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"info\",\n        variant: \"subtle\",\n        showCloseButton: false,\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        onClose: () => {},\n        actions: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"],\n            defaultValue: \"info\"\n        },\n        variant: {\n            description: \"Variant\",\n            control: \"select\",\n            options: [\"subtle\", \"strong\"],\n            defaultValue: \"subtle\"\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'With Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        onClose: {\n            description: \"Please refer to the 'With Close Button' example below for details.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Alert/Alert.stories.js","sources":["../../src/Alert/Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Alert } from \"./Alert.js\";\nimport React from \"react\";\nimport { ReactComponent as LifeBuoyIcon } from \"@webiny/icons/safety_check.svg\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Alert>;\n\nexport const Default: Story = {\n    args: {\n        children: \"This is an alert. Play around with different properties to see how it looks.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\"]\n        }\n    }\n};\n\nexport const Info: Story = {\n    args: {\n        ...Default.args,\n        type: \"info\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const InfoStrong: Story = {\n    name: \"Info (strong)\",\n    args: {\n        ...Info.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there is a need for\n                strong accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...Default.args,\n        type: \"success\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const SuccessStrong: Story = {\n    name: \"Success (strong)\",\n    args: {\n        ...Success.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully and needs to be\n                prominent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"warning\"\n    }\n};\n\nexport const WarningStrong: Story = {\n    name: \"Warning (strong)\",\n    args: {\n        ...Warning.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                prominently communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const Danger: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be communicated. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"danger\"\n    }\n};\n\nexport const DangerStrong: Story = {\n    name: \"Danger (strong)\",\n    args: {\n        ...Danger.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be prominently\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: <LifeBuoyIcon />\n    }\n};\n\nexport const WithNoIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: null\n    }\n};\n\nexport const WithCloseButton: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        showCloseButton: true,\n        onClose: () => alert(\"Close button clicked.\")\n    }\n};\n\nexport const WithAction: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        showCloseButton: true,\n        actions: (\n            <Alert.Action text={\"Button\"} onClick={() => alert(\"Custom action button clicked.\")} />\n        )\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\",\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSwatchColorNoIcon: Story = {\n    name: \"With Swatch Color & No Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#2AABF6\",\n        icon: null,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\nexport const WithSwatchColorNoSwatchIcon: Story = {\n    name: \"With Swatch Color & No Swatch Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#BDDE46\",\n        swatchColorIcon: false,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"info\",\n        variant: \"subtle\",\n        showCloseButton: false,\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        onClose: () => {},\n        actions: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"],\n            defaultValue: \"info\"\n        },\n        variant: {\n            description: \"Variant\",\n            control: \"select\",\n            options: [\"subtle\", \"strong\"],\n            defaultValue: \"subtle\"\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'With Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        onClose: {\n            description: \"Please refer to the 'With Close Button' example below for details.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\"\n        }\n    }\n};\n"],"names":["meta","Alert","Story","Default","Info","InfoStrong","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","LifeBuoyIcon","WithNoIcon","WithCloseButton","alert","WithAction","WithSwatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","Documentation","undefined"],"mappings":"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"}

package/Alert/AlertCloseButton.js

@@ -1,38 +1,30 @@
-import * as React from "react";
 import { IconButton } from "../Button/index.js";
-import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { ReactComponent } from "@webiny/icons/close.svg";
 import { Icon } from "../Icon/index.js";
 import { useAlertProps } from "./AlertPropsProvider.js";
-import { useMemo } from "react";
 import { DEFAULT_TYPE, DEFAULT_VARIANT } from "./constants.js";
-export const AlertCloseButton = () => {
-  const {
-    showCloseButton,
-    onClose,
-    type = DEFAULT_TYPE,
-    variant = DEFAULT_VARIANT
-  } = useAlertProps();
-  if (!showCloseButton) {
-    return null;
-  }
-  const iconButtonVariant = useMemo(() => {
-    if (variant === "subtle") {
-      return "ghost";
-    }
-    if (type === "warning") {
-      return "ghost";
-    }
-    return "ghost-negative";
-  }, [type, variant]);
-  return /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(XIcon, null),
-      label: "Close"
-    }),
-    size: "sm",
-    variant: iconButtonVariant
-  });
+import * as __rspack_external_react from "react";
+const AlertCloseButton = ()=>{
+    const { showCloseButton, onClose, type = DEFAULT_TYPE, variant = DEFAULT_VARIANT } = useAlertProps();
+    if (!showCloseButton) return null;
+    const iconButtonVariant = (0, __rspack_external_react.useMemo)(()=>{
+        if ("subtle" === variant) return "ghost";
+        if ("warning" === type) return "ghost";
+        return "ghost-negative";
+    }, [
+        type,
+        variant
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(IconButton, {
+        onClick: onClose,
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+            icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null),
+            label: "Close"
+        }),
+        size: "sm",
+        variant: iconButtonVariant
+    });
 };
+export { AlertCloseButton };
 
 //# sourceMappingURL=AlertCloseButton.js.map

package/Alert/AlertCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","IconButton","ReactComponent","XIcon","Icon","useAlertProps","useMemo","DEFAULT_TYPE","DEFAULT_VARIANT","AlertCloseButton","showCloseButton","onClose","type","variant","iconButtonVariant","createElement","onClick","icon","label","size"],"sources":["AlertCloseButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { useMemo } from \"react\";\nimport { DEFAULT_TYPE, DEFAULT_VARIANT } from \"./constants.js\";\n\nexport const AlertCloseButton = () => {\n    const {\n        showCloseButton,\n        onClose,\n        type = DEFAULT_TYPE,\n        variant = DEFAULT_VARIANT\n    } = useAlertProps();\n\n    if (!showCloseButton) {\n        return null;\n    }\n\n    const iconButtonVariant = useMemo(() => {\n        if (variant === \"subtle\") {\n            return \"ghost\";\n        }\n\n        if (type === \"warning\") {\n            return \"ghost\";\n        }\n\n        return \"ghost-negative\";\n    }, [type, variant]);\n\n    return (\n        <IconButton\n            onClick={onClose}\n            icon={<Icon icon={<XIcon />} label=\"Close\" />}\n            size={\"sm\"}\n            variant={iconButtonVariant}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,OAAO,QAAQ,OAAO;AAC/B,SAASC,YAAY,EAAEC,eAAe;AAEtC,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IACFC,eAAe;IACfC,OAAO;IACPC,IAAI,GAAGL,YAAY;IACnBM,OAAO,GAAGL;EACd,CAAC,GAAGH,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACK,eAAe,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,MAAMI,iBAAiB,GAAGR,OAAO,CAAC,MAAM;IACpC,IAAIO,OAAO,KAAK,QAAQ,EAAE;MACtB,OAAO,OAAO;IAClB;IAEA,IAAID,IAAI,KAAK,SAAS,EAAE;MACpB,OAAO,OAAO;IAClB;IAEA,OAAO,gBAAgB;EAC3B,CAAC,EAAE,CAACA,IAAI,EAAEC,OAAO,CAAC,CAAC;EAEnB,oBACIb,KAAA,CAAAe,aAAA,CAACd,UAAU;IACPe,OAAO,EAAEL,OAAQ;IACjBM,IAAI,eAAEjB,KAAA,CAAAe,aAAA,CAACX,IAAI;MAACa,IAAI,eAAEjB,KAAA,CAAAe,aAAA,CAACZ,KAAK,MAAE,CAAE;MAACe,KAAK,EAAC;IAAO,CAAE,CAAE;IAC9CC,IAAI,EAAE,IAAK;IACXN,OAAO,EAAEC;EAAkB,CAC9B,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Alert/AlertCloseButton.js","sources":["../../src/Alert/AlertCloseButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { useMemo } from \"react\";\nimport { DEFAULT_TYPE, DEFAULT_VARIANT } from \"./constants.js\";\n\nexport const AlertCloseButton = () => {\n    const {\n        showCloseButton,\n        onClose,\n        type = DEFAULT_TYPE,\n        variant = DEFAULT_VARIANT\n    } = useAlertProps();\n\n    if (!showCloseButton) {\n        return null;\n    }\n\n    const iconButtonVariant = useMemo(() => {\n        if (variant === \"subtle\") {\n            return \"ghost\";\n        }\n\n        if (type === \"warning\") {\n            return \"ghost\";\n        }\n\n        return \"ghost-negative\";\n    }, [type, variant]);\n\n    return (\n        <IconButton\n            onClick={onClose}\n            icon={<Icon icon={<XIcon />} label=\"Close\" />}\n            size={\"sm\"}\n            variant={iconButtonVariant}\n        />\n    );\n};\n"],"names":["AlertCloseButton","showCloseButton","onClose","type","DEFAULT_TYPE","variant","DEFAULT_VARIANT","useAlertProps","iconButtonVariant","useMemo","IconButton","Icon","XIcon"],"mappings":";;;;;;AAQO,MAAMA,mBAAmB;IAC5B,MAAM,EACFC,eAAe,EACfC,OAAO,EACPC,OAAOC,YAAY,EACnBC,UAAUC,eAAe,EAC5B,GAAGC;IAEJ,IAAI,CAACN,iBACD,OAAO;IAGX,MAAMO,oBAAoBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QAC9B,IAAIJ,AAAY,aAAZA,SACA,OAAO;QAGX,IAAIF,AAAS,cAATA,MACA,OAAO;QAGX,OAAO;IACX,GAAG;QAACA;QAAME;KAAQ;IAElB,OAAO,WAAP,GACI,sCAACK,YAAUA;QACP,SAASR;QACT,oBAAM,sCAACS,MAAIA;YAAC,oBAAM,sCAACC,gBAAKA;YAAK,OAAM;;QACnC,MAAM;QACN,SAASJ;;AAGrB"}