@artsy/palette 18.7.4 → 18.8.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v18.8.0 (Thu Nov 25 2021)
+
+#### 🚀  Enhancement
+
+- feat(NX02486): adjusts the modal to the new design [#1076](https://github.com/artsy/palette/pull/1076) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v18.7.4 (Wed Nov 24 2021)
 
 #### 🐛  Bug Fix

package/dist/elements/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { SFC } from "react";
+import { FC } from "react";
 /**
  * FIXME: This whole thing needs to be rebuilt from scratch
  */
@@ -21,7 +21,7 @@ export declare enum ModalWidth {
 }
 /**
  * Modal.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a
+ * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
  */
-export declare const Modal: SFC<ModalProps>;
+export declare const Modal: FC<ModalProps>;
 export {};

package/dist/elements/Modal/Modal.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = exports.ModalWidth = void 0;
 
+var _themeGet = require("@styled-system/theme-get");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -21,11 +23,15 @@ var _Box = require("../Box");
 
 var _Flex = require("../Flex");
 
+var _Join = require("../Join");
+
 var _Spacer = require("../Spacer");
 
-var _Typography = require("../Typography");
+var _Text = require("../Text");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _useOnScroll2 = require("../../utils/useOnScroll");
+
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,7 +56,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ModalWidth;
 /**
  * Modal.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a
+ * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
  */
 
 exports.ModalWidth = ModalWidth;
@@ -78,6 +84,10 @@ var Modal = function Modal(_ref) {
       fadeIn = _useState2[0],
       setFadeIn = _useState2[1];
 
+  var _useOnScroll = (0, _useOnScroll2.useOnScroll)(),
+      isScrolled = _useOnScroll.isScrolled,
+      elementRef = _useOnScroll.elementRef;
+
   var handleEscapeKey = function handleEscapeKey(event) {
     if (event && event.key === "Escape") {
       onClose();
@@ -126,39 +136,64 @@ var Modal = function Modal(_ref) {
     isWide: isWide,
     show: show,
     className: fadeIn ? "fadeIn" : ""
-  }, /*#__PURE__*/_react.default.createElement(ModalFlexContent, null, !hideCloseButton && /*#__PURE__*/_react.default.createElement(CloseIconWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(ModalFlexContent, null, /*#__PURE__*/_react.default.createElement(ModalStickyHeader, {
+    position: "sticky",
+    top: 0,
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    isScrolled: isScrolled,
+    px: 2
+  }, /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    my: 1
+  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    pr: 6,
+    flex: 1
+  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
+    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+      py: 1
+    })
+  }, hasLogo && /*#__PURE__*/_react.default.createElement(Logo, {
+    my: 1
+  }), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "lg",
+    color: "black100",
+    py: hasLogo ? 0 : 1
+  }, title))), !hideCloseButton && /*#__PURE__*/_react.default.createElement(CloseIconWrapper, {
+    my: 1,
     onClick: function onClick() {
       return onClose();
     }
   }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
     fill: "black60"
+  }))), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    py: 1
   })), /*#__PURE__*/_react.default.createElement(ModalScrollContent, {
     hasLogo: hasLogo,
-    modalWidth: modalWidth
-  }, hasLogo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/_react.default.createElement(Logo, null)), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    mb: 2
-  })), title && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Sans, {
-    size: "5t",
-    textAlign: "center",
-    color: "black100"
-  }, title)), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    mb: hasLogo ? 2 : [1, 2]
-  })), children), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, null, FixedButton))))));
+    modalWidth: modalWidth,
+    px: 2,
+    py: 1,
+    pb: 2
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Sentinel, {
+    ref: elementRef
+  }), children)), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, {
+    isScrolled: isScrolled,
+    p: 2
+  }, FixedButton))))));
 };
 
 exports.Modal = Modal;
 var FixedButtonWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__FixedButtonWrapper",
   componentId: "qjtwq0-0"
-})(["border-top:1px solid ", ";padding:", "px;", ";flex:0 0 auto;"], (0, _helpers.color)("black10"), (0, _helpers.space)(3), _helpers.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", "px;\n  "])), (0, _helpers.space)(2)));
+})(["box-shadow:", ";flex:0 0 auto;transition:box-shadow 250ms ease-in-out;"], function (_ref2) {
+  var isScrolled = _ref2.isScrolled;
+  return isScrolled ? _helpers.DROP_SHADOW : "none";
+});
 var ModalOuterWrapper = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Modal__ModalOuterWrapper",
   componentId: "qjtwq0-1"
-})(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:rgba(229,229,229,0.5);opacity:0;pointer-events:", ";&.fadeIn{transition:opacity 250ms ease;transition-delay:1ms;opacity:1;}"], function (props) {
+})(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";opacity:0;pointer-events:", ";&.fadeIn{transition:opacity 250ms ease;transition-delay:1ms;opacity:1;}"], (0, _themeGet.themeGet)("colors.black5"), function (props) {
   return props.show ? "auto" : "none";
 });
 var ModalWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
@@ -168,29 +203,41 @@ var ModalWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
 var ModalElement = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Modal__ModalElement",
   componentId: "qjtwq0-3"
-})(["position:absolute;border-radius:5px;height:", ";max-height:calc(100vh - 80px);min-height:58px;overflow:hidden;background-color:", ";box-shadow:0px 4px 15px rgba(0,0,0,0.15);width:", ";", ";transform:translateY(2000px);&.fadeIn{transition:all 400ms cubic-bezier(0.075,0.82,0.165,1);transition-delay:1ms;transform:translateY(0px);}"], function (props) {
+})(["position:absolute;height:", ";max-height:calc(100vh - 80px);min-height:58px;overflow:hidden;background-color:", ";box-shadow:", ";width:", ";", ";transform:translateY(2000px);&.fadeIn{transition:all 400ms cubic-bezier(0.075,0.82,0.165,1);transition-delay:1ms;transform:translateY(0px);}"], function (props) {
   return props.height ? props.height : "auto";
-}, (0, _helpers.color)("white100"), function (props) {
+}, (0, _themeGet.themeGet)("colors.white100"), _helpers.DROP_SHADOW, function (props) {
   return props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal);
-}, _helpers.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  "]))));
+}, _helpers.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  "]))));
 var ModalFlexContent = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__ModalFlexContent",
   componentId: "qjtwq0-4"
-})(["position:relative;flex-direction:column;width:100%;overflow:hidden;max-height:calc(100vh - 80px);", ";"], _helpers.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n  "]))));
+})(["position:relative;flex-direction:column;width:100%;overflow:hidden;max-height:calc(100vh - 80px);", ";"], _helpers.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n  "]))));
+var ModalStickyHeader = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Modal__ModalStickyHeader",
+  componentId: "qjtwq0-5"
+})(["box-shadow:", ";transition:box-shadow 250ms ease-in-out;"], function (_ref3) {
+  var isScrolled = _ref3.isScrolled;
+  return isScrolled ? _helpers.DROP_SHADOW : "none";
+});
 var ModalScrollContent = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__ModalScrollContent",
-  componentId: "qjtwq0-5"
-})(["overflow:auto;flex-direction:column;padding:", "px;", ";"], function (props) {
-  return (0, _helpers.space)(props.hasLogo || props.modalWidth === ModalWidth.Narrow ? 2 : 3);
-}, _helpers.media.xs(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", "px;\n  "])), (0, _helpers.space)(2)));
-var CloseIconWrapper = (0, _styledComponents.default)(_Box.Box).withConfig({
-  displayName: "Modal__CloseIconWrapper",
   componentId: "qjtwq0-6"
-})(["position:absolute;top:", "px;right:", "px;cursor:pointer;"], (0, _helpers.space)(2), (0, _helpers.space)(2));
+})(["overflow:auto;flex-direction:column;"]);
+var CloseIconWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
+  displayName: "Modal__CloseIconWrapper",
+  componentId: "qjtwq0-7"
+})(["cursor:pointer;"]);
 var Logo = (0, _styledComponents.default)(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon).withConfig({
   displayName: "Modal__Logo",
-  componentId: "qjtwq0-7"
-})(["width:100px;"]);
+  componentId: "qjtwq0-8"
+})(["width:78px;"]); // This <div> is positioned such that when it leaves the top of
+// the ModalScrollContent we use IntersectionObserver within the hook
+// to switch on and of the shadows of the sticky elements
+
+var Sentinel = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Modal__Sentinel",
+  componentId: "qjtwq0-9"
+})(["position:relative;width:100%;height:0;"]);
 Modal.displayName = "Modal";
 ModalWrapper.displayName = "ModalWrapper";
 ModalScrollContent.displayName = "ModalScrollContent";

package/dist/elements/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","media","xs","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","ModalFlexContent","ModalScrollContent","Narrow","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","displayName"],"mappings":"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","sourcesContent":["import React, { SFC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { color, media, space } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Sans } from \"../Typography\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a\n */\nexport const Modal: SFC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              {!hideCloseButton && (\n                <CloseIconWrapper onClick={() => onClose()}>\n                  <CloseIcon fill=\"black60\" />\n                </CloseIconWrapper>\n              )}\n              <ModalScrollContent hasLogo={hasLogo} modalWidth={modalWidth}>\n                {hasLogo && (\n                  <>\n                    <Flex justifyContent=\"center\">\n                      <Logo />\n                    </Flex>\n                    <Spacer mb={2} />\n                  </>\n                )}\n                {title && (\n                  <>\n                    <Flex justifyContent=\"center\">\n                      <Sans size=\"5t\" textAlign=\"center\" color=\"black100\">\n                        {title}\n                      </Sans>\n                    </Flex>\n                    <Spacer mb={hasLogo ? 2 : [1, 2]} />\n                  </>\n                )}\n                {children}\n              </ModalScrollContent>\n              {FixedButton && (\n                <FixedButtonWrapper>{FixedButton}</FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\nconst FixedButtonWrapper = styled(Flex)`\n  border-top: 1px solid ${color(\"black10\")};\n  padding: ${space(3)}px;\n  ${media.xs`\n    padding: ${space(2)}px;\n  `};\n  flex: 0 0 auto;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Box)<TransitionElementProps>`\n  position: absolute;\n  border-radius: 5px;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${color(\"white100\")};\n  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n  ${media.xs`\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n  padding: ${(props) =>\n    space(props.hasLogo || props.modalWidth === ModalWidth.Narrow ? 2 : 3)}px;\n  ${media.xs`\n    padding: ${space(2)}px;\n  `};\n`\n\nconst CloseIconWrapper = styled(Box)`\n  position: absolute;\n  top: ${space(2)}px;\n  right: ${space(2)}px;\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 100px;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","isScrolled","elementRef","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","Sentinel","displayName"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useOnScroll } from \"../../utils/useOnScroll\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { isScrolled, elementRef } = useOnScroll()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer my={1} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer py={1} />}>\n                      {hasLogo && <Logo my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer py={1} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  <Sentinel ref={elementRef} />\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: ${themeGet(\"colors.black5\")};\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Box)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 78px;\n`\n\n// This <div> is positioned such that when it leaves the top of\n// the ModalScrollContent we use IntersectionObserver within the hook\n// to switch on and of the shadows of the sticky elements\nconst Sentinel = styled(Box)`\n  position: relative;\n  width: 100%;\n  height: 0;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}

package/dist/elements/Modal/Modal.story.d.ts

@@ -13,7 +13,7 @@ export declare const Default: {
         };
     };
 };
-export declare const WithTitle: {
+export declare const Title: {
     (): JSX.Element;
     story: {
         name: string;
@@ -24,7 +24,7 @@ export declare const WithTitle: {
         };
     };
 };
-export declare const WithLogo: {
+export declare const LongTitle: {
     (): JSX.Element;
     story: {
         name: string;
@@ -35,7 +35,7 @@ export declare const WithLogo: {
         };
     };
 };
-export declare const ModalWithFixedButton: {
+export declare const Logo: {
     (): JSX.Element;
     story: {
         name: string;
@@ -46,7 +46,51 @@ export declare const ModalWithFixedButton: {
         };
     };
 };
-export declare const WideModal: {
+export declare const LogoAndTitle: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButton: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButtonNoTitle: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButtonNoLogo: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const Wide: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/elements/Modal/Modal.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WideModal = exports.ModalWithFixedButton = exports.WithLogo = exports.WithTitle = exports.Default = exports.default = void 0;
+exports.Wide = exports.FixedButtonNoLogo = exports.FixedButtonNoTitle = exports.FixedButton = exports.LogoAndTitle = exports.Logo = exports.LongTitle = exports.Title = exports.Default = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,6 +17,7 @@ var _default = {
   title: "Components/Modal"
 };
 exports.default = _default;
+var content = "\n  Chicharrones marfa tumeric squid four loko flexitarian celiac hell of hot chicken \n  jianbing salvia enamel pin woke. Migas you probably haven't heard of them church-key \n  pok pok banh mi yr ennui ethical subway tile authentic. Sartorial retro roof party, \n  gastropub bicycle rights drinking vinegar microdosing swag DIY deep v. Viral hella pop-up, \n  banh mi squid poke chambray yuccie biodiesel occupy scenester.\n";
 
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
@@ -24,7 +25,7 @@ var Default = function Default() {
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
 exports.Default = Default;
@@ -37,20 +38,20 @@ Default.story = {
   }
 };
 
-var WithTitle = function WithTitle() {
+var Title = function Title() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
-exports.WithTitle = WithTitle;
-WithTitle.displayName = "WithTitle";
-WithTitle.story = {
-  name: "With title",
+exports.Title = Title;
+Title.displayName = "Title";
+Title.story = {
+  name: "Title",
   parameters: {
     chromatic: {
       delay: 500
@@ -58,21 +59,112 @@ WithTitle.story = {
   }
 };
 
-var WithLogo = function WithLogo() {
+var LongTitle = function LongTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.LongTitle = LongTitle;
+LongTitle.displayName = "LongTitle";
+LongTitle.story = {
+  name: "Long title",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var Logo = function Logo() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.Logo = Logo;
+Logo.displayName = "Logo";
+Logo.story = {
+  name: "Logo",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var LogoAndTitle = function LogoAndTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    title: "Modal Title",
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.LogoAndTitle = LogoAndTitle;
+LogoAndTitle.displayName = "LogoAndTitle";
+LogoAndTitle.story = {
+  name: "Logo and title",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var FixedButton = function FixedButton() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
     hasLogo: true,
     onClose: function onClose() {
       return null;
+    },
+    FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      width: "100%"
+    }, "Click me")
+  }, content.repeat(5));
+};
+
+exports.FixedButton = FixedButton;
+FixedButton.displayName = "FixedButton";
+FixedButton.story = {
+  name: "Fixed button",
+  parameters: {
+    chromatic: {
+      delay: 500
     }
-  }, "Some example content");
+  }
+};
+
+var FixedButtonNoTitle = function FixedButtonNoTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    onClose: function onClose() {
+      return null;
+    },
+    FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      width: "100%"
+    }, "Click me")
+  }, content.repeat(5));
 };
 
-exports.WithLogo = WithLogo;
-WithLogo.displayName = "WithLogo";
-WithLogo.story = {
-  name: "With logo",
+exports.FixedButtonNoTitle = FixedButtonNoTitle;
+FixedButtonNoTitle.displayName = "FixedButtonNoTitle";
+FixedButtonNoTitle.story = {
+  name: "Fixed button no title",
   parameters: {
     chromatic: {
       delay: 500
@@ -80,7 +172,7 @@ WithLogo.story = {
   }
 };
 
-var ModalWithFixedButton = function ModalWithFixedButton() {
+var FixedButtonNoLogo = function FixedButtonNoLogo() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
@@ -90,13 +182,13 @@ var ModalWithFixedButton = function ModalWithFixedButton() {
     FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
       width: "100%"
     }, "Click me")
-  }, "Some example content");
+  }, content.repeat(5));
 };
 
-exports.ModalWithFixedButton = ModalWithFixedButton;
-ModalWithFixedButton.displayName = "ModalWithFixedButton";
-ModalWithFixedButton.story = {
-  name: "Modal with fixed button",
+exports.FixedButtonNoLogo = FixedButtonNoLogo;
+FixedButtonNoLogo.displayName = "FixedButtonNoLogo";
+FixedButtonNoLogo.story = {
+  name: "Fixed button no logo",
   parameters: {
     chromatic: {
       delay: 500
@@ -104,7 +196,7 @@ ModalWithFixedButton.story = {
   }
 };
 
-var WideModal = function WideModal() {
+var Wide = function Wide() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
@@ -112,13 +204,13 @@ var WideModal = function WideModal() {
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
-exports.WideModal = WideModal;
-WideModal.displayName = "WideModal";
-WideModal.story = {
-  name: "Wide modal",
+exports.Wide = Wide;
+Wide.displayName = "Wide";
+Wide.story = {
+  name: "Wide",
   parameters: {
     chromatic: {
       delay: 500

package/dist/elements/Modal/Modal.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.story.tsx"],"names":["title","Default","story","parameters","chromatic","delay","WithTitle","name","WithLogo","ModalWithFixedButton","WideModal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAArB,4BADF;AAKD,CANM;;;AAAMA,O;AAQbA,OAAO,CAACC,KAAR,GAAgB;AACdC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AADE,CAAhB;;AAIO,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAzC,4BADF;AAKD,CANM;;;AAAMA,S;AAQbA,SAAS,CAACJ,KAAV,GAAkB;AAChBK,EAAAA,IAAI,EAAE,YADU;AAEhBJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFI,CAAlB;;AAKO,IAAMG,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,OAAO,MAAvC;AAAwC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAjD,4BADF;AAKD,CANM;;;AAAMA,Q;AAQbA,QAAQ,CAACN,KAAT,GAAiB;AACfK,EAAAA,IAAI,EAAE,WADS;AAEfJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFG,CAAjB;;AAKO,IAAMI,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,YAAD;AACE,IAAA,IAAI,MADN;AAEE,IAAA,KAAK,EAAC,aAFR;AAGE,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KAHX;AAIE,IAAA,WAAW,eAAE,6BAAC,cAAD;AAAQ,MAAA,KAAK,EAAC;AAAd;AAJf,4BADF;AAUD,CAXM;;;AAAMA,oB;AAabA,oBAAoB,CAACP,KAArB,GAA6B;AAC3BK,EAAAA,IAAI,EAAE,yBADqB;AAE3BJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFe,CAA7B;;AAKO,IAAMK,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,MAAM,MAAtC;AAAuC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAhD,4BADF;AAKD,CANM;;;AAAMA,S;AAQbA,SAAS,CAACR,KAAV,GAAkB;AAChBK,EAAAA,IAAI,EAAE,YADU;AAEhBJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFI,CAAlB","sourcesContent":["import React from \"react\"\nimport { Button } from \"../Button\"\nimport { Modal } from \"./Modal\"\n\nexport default {\n  title: \"Components/Modal\",\n}\n\nexport const Default = () => {\n  return (\n    <Modal show onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WithTitle = () => {\n  return (\n    <Modal show title=\"Modal Title\" onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWithTitle.story = {\n  name: \"With title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WithLogo = () => {\n  return (\n    <Modal show title=\"Modal Title\" hasLogo onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWithLogo.story = {\n  name: \"With logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const ModalWithFixedButton = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      Some example content\n    </Modal>\n  )\n}\n\nModalWithFixedButton.story = {\n  name: \"Modal with fixed button\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WideModal = () => {\n  return (\n    <Modal show title=\"Modal Title\" isWide onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWideModal.story = {\n  name: \"Wide modal\",\n  parameters: { chromatic: { delay: 500 } },\n}\n"],"file":"Modal.story.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.story.tsx"],"names":["title","content","Default","story","parameters","chromatic","delay","Title","name","LongTitle","Logo","LogoAndTitle","FixedButton","repeat","FixedButtonNoTitle","FixedButtonNoLogo","Wide"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Button } from \"../Button\"\nimport { Modal } from \"./Modal\"\n\nexport default {\n  title: \"Components/Modal\",\n}\n\nconst content = `\n  Chicharrones marfa tumeric squid four loko flexitarian celiac hell of hot chicken \n  jianbing salvia enamel pin woke. Migas you probably haven't heard of them church-key \n  pok pok banh mi yr ennui ethical subway tile authentic. Sartorial retro roof party, \n  gastropub bicycle rights drinking vinegar microdosing swag DIY deep v. Viral hella pop-up, \n  banh mi squid poke chambray yuccie biodiesel occupy scenester.\n`\n\nexport const Default = () => {\n  return (\n    <Modal show onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Title = () => {\n  return (\n    <Modal show title=\"Modal Title\" onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nTitle.story = {\n  name: \"Title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const LongTitle = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title with a longer title or headline text that runs on for mutliple lines\"\n      onClose={() => null}\n    >\n      {content}\n    </Modal>\n  )\n}\n\nLongTitle.story = {\n  name: \"Long title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Logo = () => {\n  return (\n    <Modal show hasLogo onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nLogo.story = {\n  name: \"Logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const LogoAndTitle = () => {\n  return (\n    <Modal show hasLogo title=\"Modal Title\" onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nLogoAndTitle.story = {\n  name: \"Logo and title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButton = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      hasLogo\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButton.story = {\n  name: \"Fixed button\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButtonNoTitle = () => {\n  return (\n    <Modal\n      show\n      hasLogo\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButtonNoTitle.story = {\n  name: \"Fixed button no title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButtonNoLogo = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButtonNoLogo.story = {\n  name: \"Fixed button no logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Wide = () => {\n  return (\n    <Modal show title=\"Modal Title\" isWide onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nWide.story = {\n  name: \"Wide\",\n  parameters: { chromatic: { delay: 500 } },\n}\n"],"file":"Modal.story.js"}

package/dist/utils/useOnScroll.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * useOnScroll is used to track if an element is scrolled vertically or not
+ */
+export declare const useOnScroll: () => {
+    isScrolled: boolean;
+    elementRef: import("react").MutableRefObject<null>;
+};

package/dist/utils/useOnScroll.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnScroll = void 0;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * useOnScroll is used to track if an element is scrolled vertically or not
+ */
+var useOnScroll = function useOnScroll() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isScrolled = _useState2[0],
+      setIsScrolled = _useState2[1];
+
+  var elementRef = (0, _react.useRef)(null);
+  var node = elementRef.current;
+  (0, _react.useEffect)(function () {
+    if (!("IntersectionObserver" in window)) return;
+    if (!node) return;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      setIsScrolled(!entry.isIntersecting);
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 1.0
+    });
+    observer.observe(node);
+    return function () {
+      observer.unobserve(node);
+    };
+  }, [node, isScrolled]);
+  return {
+    isScrolled: isScrolled,
+    elementRef: elementRef
+  };
+};
+
+exports.useOnScroll = useOnScroll;
+//# sourceMappingURL=useOnScroll.js.map

package/dist/utils/useOnScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useOnScroll.ts"],"names":["useOnScroll","isScrolled","setIsScrolled","elementRef","node","current","window","observer","IntersectionObserver","entry","isIntersecting","root","rootMargin","threshold","observe","unobserve"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA,kBACK,qBAAS,KAAT,CADL;AAAA;AAAA,MACxBC,UADwB;AAAA,MACZC,aADY;;AAE/B,MAAMC,UAAU,GAAG,mBAAO,IAAP,CAAnB;AACA,MAAMC,IAAI,GAAGD,UAAU,CAACE,OAAxB;AAEA,wBAAU,YAAM;AACd,QAAI,EAAE,0BAA0BC,MAA5B,CAAJ,EAAyC;AACzC,QAAI,CAACF,IAAL,EAAW;AAEX,QAAMG,QAAQ,GAAG,IAAIC,oBAAJ,CACf,gBAAa;AAAA;AAAA,UAAXC,KAAW;;AACXP,MAAAA,aAAa,CAAC,CAACO,KAAK,CAACC,cAAR,CAAb;AACD,KAHc,EAIf;AACEC,MAAAA,IAAI,EAAE,IADR;AAEEC,MAAAA,UAAU,EAAE,KAFd;AAGEC,MAAAA,SAAS,EAAE;AAHb,KAJe,CAAjB;AAWAN,IAAAA,QAAQ,CAACO,OAAT,CAAiBV,IAAjB;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACQ,SAAT,CAAmBX,IAAnB;AACD,KAFD;AAGD,GApBD,EAoBG,CAACA,IAAD,EAAOH,UAAP,CApBH;AAsBA,SAAO;AAAEA,IAAAA,UAAU,EAAVA,UAAF;AAAcE,IAAAA,UAAU,EAAVA;AAAd,GAAP;AACD,CA5BM","sourcesContent":["import { useEffect, useState, useRef } from \"react\"\n\n/**\n * useOnScroll is used to track if an element is scrolled vertically or not\n */\nexport const useOnScroll = () => {\n  const [isScrolled, setIsScrolled] = useState(false)\n  const elementRef = useRef(null)\n  const node = elementRef.current\n\n  useEffect(() => {\n    if (!(\"IntersectionObserver\" in window)) return\n    if (!node) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsScrolled(!entry.isIntersecting)\n      },\n      {\n        root: null,\n        rootMargin: \"0px\",\n        threshold: 1.0,\n      }\n    )\n\n    observer.observe(node)\n\n    return () => {\n      observer.unobserve(node)\n    }\n  }, [node, isScrolled])\n\n  return { isScrolled, elementRef }\n}\n"],"file":"useOnScroll.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.7.4",
+  "version": "18.8.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -174,5 +174,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "1e1f87f0c407adf58f5e663e5cc5b380ca9f4b6c"
+  "gitHead": "b28d6d4136e809c3b2e2c9a5bf52eae35bdf78f8"
 }