@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Popover/Popover.story.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PopoverActions = exports.Placement = exports.ManageFocus = exports.Default = exports.CrashAtSpecificZoomLevels = void 0;
-var _test = require("@storybook/test");
+exports.default = exports.WithContentInteraction = exports.Visible = exports.PopoverActions = exports.Pointer = exports.Placement = exports.ManageFocus = exports.IgnoreClickOutside = exports.Default = exports.DarkVariant = exports.CrashAtSpecificZoomLevels = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _storybookStates = require("storybook-states");
 var _utils = require("../../utils");
@@ -14,227 +13,389 @@ var _Flex = require("../Flex");
 var _Spacer = require("../Spacer");
 var _Text = require("../Text");
 var _Popover = require("./Popover");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var CONTENT = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.";
 var _default = exports.default = {
-  title: "Components/Popover"
+  component: _Popover.Popover,
+  title: "Components/Popover",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A floating popover component that can be positioned relative to an anchor element."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}, {
-      visible: true
-    }, {
-      onClose: (0, _test.fn)(),
-      onDismiss: (0, _test.fn)()
-    }, {
-      visible: true,
-      popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "xs",
-        width: 300
-      }, "| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \u2014 (Content interaction with close button.)")
-    }, {
-      pointer: true,
-      visible: true,
-      p: 0,
-      popover: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, new Array(4).fill(0).map(function (_, i) {
-        return /*#__PURE__*/_react.default.createElement(_Text.Text, {
-          key: i,
-          variant: "sm-display",
-          overflowEllipsis: true,
-          bg: "red10",
-          px: 1,
-          py: 0.5
-        }, "Example Item");
-      }))
-    }, {
-      variant: "defaultDark",
-      placement: "bottom",
-      visible: true,
-      pointer: true,
-      zIndex: 99
-    }, {
-      ignoreClickOutside: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+var Default = exports.Default = {
+  args: {
     placement: "bottom",
     popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
       variant: "xs",
       width: 300
-    }, CONTENT)
-  }, function (_ref) {
-    var onVisible = _ref.onVisible,
-      anchorRef = _ref.anchorRef;
-    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-      ref: anchorRef,
-      variant: "secondaryBlack",
-      size: "small",
-      onClick: onVisible
-    }, "Click to display popover"));
-  }));
-};
-Default.displayName = "Default";
-Default.story = {
+    }, CONTENT),
+    children: function children(_ref) {
+      var onVisible = _ref.onVisible,
+        anchorRef = _ref.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }
+  },
   parameters: {
-    chromatic: {
-      disable: true
+    docs: {
+      description: {
+        story: "Default popover."
+      }
     }
   }
 };
-var Placement = exports.Placement = function Placement() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: Object.keys(_utils.POSITION).map(function (placement) {
-      return {
-        placement: placement
-      };
-    })
-  }, function (props) {
-    return /*#__PURE__*/_react.default.createElement(_Popover.Popover, _extends({
-      popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "xs"
-      }, JSON.stringify(props)),
-      visible: true,
-      variant: "defaultDark",
-      pointer: true
-    }, props), function (_ref2) {
+var Visible = exports.Visible = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    visible: true,
+    popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref2) {
       var anchorRef = _ref2.anchorRef;
-      return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
         ref: anchorRef,
-        variant: "xs",
-        textAlign: "center",
-        p: 1,
-        maxWidth: "50%",
-        mx: "auto",
-        bg: "mono10"
-      }, JSON.stringify(props));
-    });
-  });
-};
-Placement.displayName = "Placement";
-Placement.story = {
+        variant: "secondaryBlack",
+        size: "small"
+      }, "Popover Visible"));
+    }
+  },
   parameters: {
-    chromatic: {
-      disable: true
+    docs: {
+      description: {
+        story: "Popover visible state."
+      }
     }
   }
 };
-var ManageFocus = exports.ManageFocus = function ManageFocus() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      visible: true,
-      manageFocus: false
-    }, {
-      visible: true,
-      manageFocus: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+var WithContentInteraction = exports.WithContentInteraction = {
+  tags: ["!autodocs"],
+  args: {
     placement: "bottom",
+    visible: true,
     popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
       variant: "xs",
       width: 300
-    }, CONTENT)
-  }, function (_ref3) {
-    var onVisible = _ref3.onVisible,
-      anchorRef = _ref3.anchorRef;
-    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-      ref: anchorRef,
-      variant: "secondaryBlack",
-      size: "small",
-      onClick: onVisible
-    }, "Click to display popover"));
-  }));
+    }, "| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | \u2014 (Content interaction with close button.)"),
+    children: function children(_ref3) {
+      var anchorRef = _ref3.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small"
+      }, "Popover With Content Interaction"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with content interaction."
+      }
+    }
+  }
 };
-ManageFocus.displayName = "ManageFocus";
-var PopoverActions = exports.PopoverActions = function PopoverActions() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
-      visible: true
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+var Pointer = exports.Pointer = {
+  tags: ["!autodocs"],
+  args: {
     placement: "bottom",
-    popover: function popover(_ref4) {
-      var onHide = _ref4.onHide,
-        onDismiss = _ref4.onDismiss;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-        variant: "xs",
-        width: 300
-      }, CONTENT), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-        y: 2
-      }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-        flex: 1,
-        size: "small",
+    pointer: true,
+    visible: true,
+    p: 0,
+    popover: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, new Array(4).fill(0).map(function (_, i) {
+      return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        key: i,
+        variant: "sm-display",
+        overflowEllipsis: true,
+        bg: "red10",
+        px: 1,
+        py: 0.5
+      }, "Example Item");
+    })),
+    children: function children(_ref4) {
+      var anchorRef = _ref4.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
         variant: "secondaryBlack",
-        onClick: onHide
-      }, "Hide"), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-        x: 1
-      }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-        flex: 1,
-        size: "small",
+        size: "small"
+      }, "Popover With Pointer"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with pointer and multiple items."
+      }
+    }
+  }
+};
+var DarkVariant = exports.DarkVariant = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    variant: "defaultDark",
+    visible: true,
+    pointer: true,
+    zIndex: 99,
+    popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref5) {
+      var anchorRef = _ref5.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
         variant: "secondaryBlack",
-        onClick: onDismiss
-      }, "Dismiss")));
-    }
-  }, function (_ref5) {
-    var onVisible = _ref5.onVisible,
-      anchorRef = _ref5.anchorRef;
-    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-      ref: anchorRef,
-      variant: "secondaryBlack",
-      size: "small",
-      onClick: onVisible
-    }, "Click to display popover"));
-  }));
+        size: "small"
+      }, "Popover Dark Variant"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with dark variant styling."
+      }
+    }
+  }
+};
+var IgnoreClickOutside = exports.IgnoreClickOutside = {
+  tags: ["!autodocs"],
+  args: {
+    placement: "bottom",
+    ignoreClickOutside: true,
+    popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs",
+      width: 300
+    }, CONTENT),
+    children: function children(_ref6) {
+      var anchorRef = _ref6.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
+        size: "small"
+      }, "Popover Ignore Click Outside"));
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with ignoreClickOutside enabled."
+      }
+    }
+  }
+};
+var Placement = exports.Placement = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+      states: Object.keys(_utils.POSITION).map(function (placement) {
+        return {
+          placement: placement
+        };
+      })
+    }, function (props) {
+      return /*#__PURE__*/_react.default.createElement(_Popover.Popover, _extends({
+        popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+          variant: "xs"
+        }, JSON.stringify(props)),
+        visible: true,
+        variant: "defaultDark",
+        pointer: true
+      }, props), function (_ref7) {
+        var anchorRef = _ref7.anchorRef;
+        return /*#__PURE__*/_react.default.createElement(_Text.Text, {
+          ref: anchorRef,
+          variant: "xs",
+          textAlign: "center",
+          p: 1,
+          maxWidth: "50%",
+          mx: "auto",
+          bg: "mono10"
+        }, JSON.stringify(props));
+      });
+    });
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Popover shown in all available placement positions."
+      }
+    }
+  }
 };
-PopoverActions.displayName = "PopoverActions";
-var CrashAtSpecificZoomLevels = exports.CrashAtSpecificZoomLevels = function CrashAtSpecificZoomLevels() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    height: 100
-  }, "Zoom to 90% in Chrome, click, then scroll."), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    height: 2000,
-    bg: "mono5"
-  }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    height: 200
-  }), /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
-    placement: "top",
-    popover: function popover(_ref6) {
-      var onHide = _ref6.onHide,
-        onDismiss = _ref6.onDismiss;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+var ManageFocus = exports.ManageFocus = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+      states: [{
+        visible: true,
+        manageFocus: false
+      }, {
+        visible: true,
+        manageFocus: true
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+      placement: "bottom",
+      popover: /*#__PURE__*/_react.default.createElement(_Text.Text, {
         variant: "xs",
         width: 300
-      }, CONTENT), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-        y: 2
-      }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-        flex: 1,
+      }, CONTENT)
+    }, function (_ref8) {
+      var onVisible = _ref8.onVisible,
+        anchorRef = _ref8.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
+        variant: "secondaryBlack",
         size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with different focus management settings."
+      }
+    }
+  }
+};
+var PopoverActions = exports.PopoverActions = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+      states: [{
+        visible: true
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+      placement: "bottom",
+      popover: function popover(_ref9) {
+        var onHide = _ref9.onHide,
+          onDismiss = _ref9.onDismiss;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+          variant: "xs",
+          width: 300
+        }, CONTENT), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+          y: 2
+        }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onHide
+        }, "Hide"), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+          x: 1
+        }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onDismiss
+        }, "Dismiss")));
+      }
+    }, function (_ref10) {
+      var onVisible = _ref10.onVisible,
+        anchorRef = _ref10.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
         variant: "secondaryBlack",
-        onClick: onHide
-      }, "Hide"), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-        x: 1
-      }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-        flex: 1,
         size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Popover with action buttons (Hide and Dismiss)."
+      }
+    }
+  }
+};
+var CrashAtSpecificZoomLevels = exports.CrashAtSpecificZoomLevels = {
+  tags: ["!autodocs"],
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 100
+    }, "Zoom to 90% in Chrome, click, then scroll."), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 2000,
+      bg: "mono5"
+    }, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      height: 200
+    }), /*#__PURE__*/_react.default.createElement(_Popover.Popover, {
+      placement: "top",
+      popover: function popover(_ref11) {
+        var onHide = _ref11.onHide,
+          onDismiss = _ref11.onDismiss;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+          variant: "xs",
+          width: 300
+        }, CONTENT), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+          y: 2
+        }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onHide
+        }, "Hide"), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+          x: 1
+        }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+          flex: 1,
+          size: "small",
+          variant: "secondaryBlack",
+          onClick: onDismiss
+        }, "Dismiss")));
+      }
+    }, function (_ref12) {
+      var onVisible = _ref12.onVisible,
+        anchorRef = _ref12.anchorRef;
+      return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        ref: anchorRef,
         variant: "secondaryBlack",
-        onClick: onDismiss
-      }, "Dismiss")));
-    }
-  }, function (_ref7) {
-    var onVisible = _ref7.onVisible,
-      anchorRef = _ref7.anchorRef;
-    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-      ref: anchorRef,
-      variant: "secondaryBlack",
-      size: "small",
-      onClick: onVisible
-    }, "Click to display popover"));
-  })));
+        size: "small",
+        onClick: onVisible
+      }, "Click to display popover"));
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Test case for popover behavior at specific zoom levels."
+      }
+    }
+  }
 };
 //# sourceMappingURL=Popover.story.js.map