orcs-design-system 3.2.4 → 3.2.6

package/es/components/Button/Button.stories.js

@@ -4,187 +4,203 @@ import Icon from "../Icon";
 import Spacer from "../Spacer";
 import Flex from "../Flex";
 import Button, { VARIANT_COLORS } from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Buttons/Button",
   component: Button
 };
-export var defaultButton = function defaultButton() {
-  return /*#__PURE__*/React.createElement(Button, null, "Default button");
-};
+export const defaultButton = () => /*#__PURE__*/_jsx(Button, {
+  children: "Default button"
+});
 defaultButton.storyName = "Default button";
-export var variants = function variants() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, Object.keys(VARIANT_COLORS).map(function (variant) {
-    return /*#__PURE__*/React.createElement(Button, {
-      large: true,
-      key: variant,
-      variant: variant,
-      onClick: action("clicked")
-    }, variant);
-  }));
-};
-export var alternateSize = function alternateSize() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
+export const variants = () => /*#__PURE__*/_jsx(Spacer, {
+  my: "3",
+  children: Object.keys(VARIANT_COLORS).map(variant => /*#__PURE__*/_jsx(Button, {
+    large: true,
+    variant: variant,
+    onClick: action("clicked"),
+    children: variant
+  }, variant))
+});
+export const alternateSize = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(Button, {
     small: true,
-    onClick: action("clicked")
-  }, "Small button"), /*#__PURE__*/React.createElement(Button, {
+    onClick: action("clicked"),
+    children: "Small button"
+  }), /*#__PURE__*/_jsx(Button, {
     large: true,
-    onClick: action("clicked")
-  }, "Large button"), /*#__PURE__*/React.createElement(Button, {
+    onClick: action("clicked"),
+    children: "Large button"
+  }), /*#__PURE__*/_jsx(Button, {
     height: "xxxl",
-    onClick: action("clicked")
-  }, "Specified height button"), /*#__PURE__*/React.createElement(Button, {
     onClick: action("clicked"),
-    width: "100px"
-  }, "A multiple-line button with specified width"));
-};
+    children: "Specified height button"
+  }), /*#__PURE__*/_jsx(Button, {
+    onClick: action("clicked"),
+    width: "100px",
+    children: "A multiple-line button with specified width"
+  })]
+});
 alternateSize.storyName = "Alternate sizes";
-export var alternateColours = function alternateColours() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
+export const alternateColours = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(Button, {
     variant: "success",
-    onClick: action("clicked")
-  }, "Success/green button"), /*#__PURE__*/React.createElement(Button, {
+    onClick: action("clicked"),
+    children: "Success/green button"
+  }), /*#__PURE__*/_jsx(Button, {
     variant: "danger",
-    onClick: action("clicked")
-  }, "Danger/red button"));
-};
+    onClick: action("clicked"),
+    children: "Danger/red button"
+  })]
+});
 alternateColours.storyName = "Alternate colours";
-export var ghost = function ghost() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
+export const ghost = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(Button, {
     small: true,
     variant: "ghost",
-    onClick: action("clicked")
-  }, "Small ghost button"), /*#__PURE__*/React.createElement(Button, {
+    onClick: action("clicked"),
+    children: "Small ghost button"
+  }), /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
-    onClick: action("clicked")
-  }, "Regular ghost button"), /*#__PURE__*/React.createElement(Button, {
+    onClick: action("clicked"),
+    children: "Regular ghost button"
+  }), /*#__PURE__*/_jsx(Button, {
     large: true,
     variant: "ghost",
-    onClick: action("clicked")
-  }, "Large ghost button"));
-};
+    onClick: action("clicked"),
+    children: "Large ghost button"
+  })]
+});
 ghost.storyName = "Ghost style";
-export var fullWidth = function fullWidth() {
-  return /*#__PURE__*/React.createElement(Button, {
-    fullWidth: true
-  }, "Full width button");
-};
+export const fullWidth = () => /*#__PURE__*/_jsx(Button, {
+  fullWidth: true,
+  children: "Full width button"
+});
 fullWidth.storyName = "Full width";
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: true
-  }, "Disabled button"), /*#__PURE__*/React.createElement(Button, {
-    variant: "disabled"
-  }, "Alternate way of making button disabled"));
-};
+export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(Button, {
+    disabled: true,
+    children: "Disabled button"
+  }), /*#__PURE__*/_jsx(Button, {
+    variant: "disabled",
+    children: "Alternate way of making button disabled"
+  })]
+});
 disabled.storyName = "Disabled state";
-export var loading = function loading() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
-    isLoading: true
-  }, "Loading..."), /*#__PURE__*/React.createElement(Button, {
+export const loading = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(Button, {
     isLoading: true,
-    variant: "success"
-  }, "Saving..."), /*#__PURE__*/React.createElement(Button, {
+    children: "Loading..."
+  }), /*#__PURE__*/_jsx(Button, {
     isLoading: true,
-    variant: "danger"
-  }, "Deleting..."));
-};
+    variant: "success",
+    children: "Saving..."
+  }), /*#__PURE__*/_jsx(Button, {
+    isLoading: true,
+    variant: "danger",
+    children: "Deleting..."
+  })]
+});
 loading.storyName = "Loading state";
-export var withIcon = function withIcon() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconLeft: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "user-plus"]
-  }), "Left aligned icon"), /*#__PURE__*/React.createElement(Button, {
-    iconRight: true
-  }, "Right aligned icon", /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "download"]
-  })), /*#__PURE__*/React.createElement(Button, {
-    leftIcon: ["fas", "star"]
-  }, "Left icon magic!"));
-};
+export const withIcon = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsxs(Button, {
+    iconLeft: true,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "user-plus"]
+    }), "Left aligned icon"]
+  }), /*#__PURE__*/_jsxs(Button, {
+    iconRight: true,
+    children: ["Right aligned icon", /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "download"]
+    })]
+  }), /*#__PURE__*/_jsx(Button, {
+    leftIcon: ["fas", "star"],
+    children: "Left icon magic!"
+  })]
+});
 withIcon.storyName = "With icon";
-export var iconOnly = function iconOnly() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "3"
-  }, /*#__PURE__*/React.createElement(Button, {
+export const iconOnly = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "3",
+  children: [/*#__PURE__*/_jsx(Button, {
     small: true,
     iconOnly: true,
     p: "s",
-    ariaLabel: /*#__PURE__*/React.createElement(Icon, {
+    ariaLabel: /*#__PURE__*/_jsx(Icon, {
       icon: ["fas", "download"]
+    }),
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
     })
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/_jsx(Button, {
     iconOnly: true,
     p: "s",
-    ariaLabel: "Show calendar"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(Button, {
+    ariaLabel: "Show calendar",
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
+    })
+  }), /*#__PURE__*/_jsx(Button, {
     large: true,
     iconOnly: true,
     p: "s",
-    ariaLabel: "Show calendar"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["far", "calendar-alt"]
-  })), /*#__PURE__*/React.createElement(Flex, {
+    ariaLabel: "Show calendar",
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: ["far", "calendar-alt"]
+    })
+  }), /*#__PURE__*/_jsx(Flex, {
     alignItems: "center",
-    mt: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    mr: "r"
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconOnly: true,
-    variant: "success",
-    onClick: action("clicked"),
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Confirm"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "check"]
-  })), /*#__PURE__*/React.createElement(Button, {
-    iconOnly: true,
-    variant: "successAlternate",
-    onClick: action("clicked"),
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Confirm"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "check"]
-  })), /*#__PURE__*/React.createElement(Button, {
-    iconOnly: true,
-    variant: "danger",
-    onClick: action("clicked"),
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Cancel"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"]
-  })), /*#__PURE__*/React.createElement(Button, {
-    iconOnly: true,
-    variant: "dangerAlternate",
-    onClick: action("clicked"),
-    width: "33px",
-    height: "32px",
-    ariaLabel: "Cancel"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"]
-  })))));
-};
+    mt: "r",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      mr: "r",
+      children: [/*#__PURE__*/_jsx(Button, {
+        iconOnly: true,
+        variant: "success",
+        onClick: action("clicked"),
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Confirm",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "check"]
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        iconOnly: true,
+        variant: "successAlternate",
+        onClick: action("clicked"),
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Confirm",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "check"]
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        iconOnly: true,
+        variant: "danger",
+        onClick: action("clicked"),
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Cancel",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "times"]
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        iconOnly: true,
+        variant: "dangerAlternate",
+        onClick: action("clicked"),
+        width: "33px",
+        height: "32px",
+        ariaLabel: "Cancel",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "times"]
+        })
+      })]
+    })
+  })]
+});
 iconOnly.storyName = "Icon only";
 defaultButton.__docgenInfo = {
   "description": "",