@artsy/palette 44.1.0 → 44.2.0

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

@@ -1,72 +1,59 @@
 import React from "react";
+import { SwiperProps } from "./";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<SwiperProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
 };
 export default _default;
-export declare const Simple: () => React.JSX.Element;
+export declare const Simple: {
+    render: () => React.JSX.Element;
+};
 export declare const WithHorizontalMargins: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const SimpleWithLeftEdgeSnapping: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const ProgressBarExample: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const ProgressDotsExample: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const CustomRailAndCells: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const DynamicItems: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            chromatic: {
-                disable: boolean;
-            };
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
         };
     };
 };
 export declare const SwiperWithText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const InitialIndexOnMount: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const NavigateViaProps: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
 };
 export declare const OverwritingDefaultMargins: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => React.JSX.Element;
+};
+export declare const ConditionalChildren: {
+    render: () => React.JSX.Element;
 };
-export declare const ConditionalChildren: () => React.JSX.Element;

package/dist/elements/Swiper/Swiper.story.js

@@ -12,6 +12,7 @@ var _Clickable = require("../Clickable");
 var _ProgressDots = require("../ProgressDots");
 var _Text = require("../Text");
 var _2 = require("./");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 var _excluded = ["widths", "heights"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,257 +58,255 @@ var Demo = function Demo(_ref) {
 };
 Demo.displayName = "Demo";
 var _default = exports.default = {
-  title: "Components/Swiper"
-};
-var Simple = exports.Simple = function Simple() {
-  return /*#__PURE__*/_react.default.createElement(Demo, null);
-};
-Simple.displayName = "Simple";
-var WithHorizontalMargins = exports.WithHorizontalMargins = function WithHorizontalMargins() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Should be flush with horizontal edges"), /*#__PURE__*/_react.default.createElement(Demo, {
-    mx: [-2, -4]
-  }));
-};
-WithHorizontalMargins.story = {
-  name: "With horizontal margins"
-};
-var SimpleWithLeftEdgeSnapping = exports.SimpleWithLeftEdgeSnapping = function SimpleWithLeftEdgeSnapping() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    snap: "start"
-  });
-};
-SimpleWithLeftEdgeSnapping.displayName = "SimpleWithLeftEdgeSnapping";
-SimpleWithLeftEdgeSnapping.story = {
-  name: "Simple with left-edge snapping"
-};
-var ProgressBarExample = exports.ProgressBarExample = function ProgressBarExample() {
-  var widths = Array.from(Array(10)).map(function (_) {
-    return 300;
-  });
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    index = _useState2[0],
-    setIndex = _useState2[1];
-  var progress = index * 100 / (widths.length - 1);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths,
-    onChange: setIndex
-  }), /*#__PURE__*/_react.default.createElement(_CarouselBar.CarouselBar, {
-    percentComplete: progress
-  }));
+  component: _2.Swiper,
+  title: "Components/Swiper",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A swiper/carousel component with horizontal scrolling, navigation, and progress indicators."
+      },
+      controls: {
+        exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
 };
-ProgressBarExample.story = {
-  name: "Progress bar example"
+var Simple = exports.Simple = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, null);
+  }
 };
-var ProgressDotsExample = exports.ProgressDotsExample = function ProgressDotsExample() {
-  var widths = Array.from(Array(10)).map(function (_) {
-    return 300;
-  });
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    index = _useState4[0],
-    setIndex = _useState4[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths,
-    onChange: setIndex
-  }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
-    variant: "dash",
-    amount: widths.length,
-    activeIndex: index
-  }));
+var WithHorizontalMargins = exports.WithHorizontalMargins = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Should be flush with horizontal edges"), /*#__PURE__*/_react.default.createElement(Demo, {
+      mx: [-2, -4]
+    }));
+  }
 };
-ProgressDotsExample.story = {
-  name: "Progress dots example"
+var SimpleWithLeftEdgeSnapping = exports.SimpleWithLeftEdgeSnapping = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      snap: "start"
+    });
+  }
 };
-var CustomRailAndCells = exports.CustomRailAndCells = function CustomRailAndCells() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    snap: "start",
-    widths: ["100%", "100%", "100%", "100%"]
-    // eslint-disable-next-line react/display-name
-    ,
-    Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-      return /*#__PURE__*/_react.default.createElement(_2.SwiperCell, _extends({}, props, {
-        ref: ref,
-        display: "inline-flex",
-        width: "100%",
-        pr: 0
-      }));
-    }),
-    Rail: function Rail(props) {
-      return /*#__PURE__*/_react.default.createElement(_2.SwiperRail, _extends({}, props, {
-        display: "block"
-      }));
-    }
-  });
+var ProgressBarExample = exports.ProgressBarExample = {
+  render: function render() {
+    var widths = Array.from(Array(10)).map(function (_) {
+      return 300;
+    });
+    var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    var progress = index * 100 / (widths.length - 1);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/_react.default.createElement(_CarouselBar.CarouselBar, {
+      percentComplete: progress
+    }));
+  }
 };
-CustomRailAndCells.displayName = "CustomRailAndCells";
-CustomRailAndCells.story = {
-  name: "Custom rail and cells"
+var ProgressDotsExample = exports.ProgressDotsExample = {
+  render: function render() {
+    var widths = Array.from(Array(10)).map(function (_) {
+      return 300;
+    });
+    var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      index = _useState4[0],
+      setIndex = _useState4[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
+      variant: "dash",
+      amount: widths.length,
+      activeIndex: index
+    }));
+  }
 };
-var DynamicItems = exports.DynamicItems = function DynamicItems() {
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    index = _useState6[0],
-    setIndex = _useState6[1];
-  var _useState7 = (0, _react.useState)([300]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    widths = _useState8[0],
-    setWidths = _useState8[1];
-  (0, _react.useEffect)(function () {
-    var interval = setInterval(function () {
-      setWidths(function (prevWidths) {
-        return [].concat(_toConsumableArray(prevWidths), [300]);
-      });
-    }, 500);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
-    widths: widths,
-    onChange: setIndex
-  }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
-    amount: widths.length,
-    activeIndex: index
-  }));
+var CustomRailAndCells = exports.CustomRailAndCells = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      snap: "start",
+      widths: ["100%", "100%", "100%", "100%"]
+      // eslint-disable-next-line react/display-name
+      ,
+      Cell: /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+        return /*#__PURE__*/_react.default.createElement(_2.SwiperCell, _extends({}, props, {
+          ref: ref,
+          display: "inline-flex",
+          width: "100%",
+          pr: 0
+        }));
+      }),
+      Rail: function Rail(props) {
+        return /*#__PURE__*/_react.default.createElement(_2.SwiperRail, _extends({}, props, {
+          display: "block"
+        }));
+      }
+    });
+  }
 };
-DynamicItems.story = {
-  name: "Dynamic items",
+var DynamicItems = exports.DynamicItems = {
+  render: function render() {
+    var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      index = _useState6[0],
+      setIndex = _useState6[1];
+    var _useState7 = (0, _react.useState)([300]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      widths = _useState8[0],
+      setWidths = _useState8[1];
+    (0, _react.useEffect)(function () {
+      var interval = setInterval(function () {
+        setWidths(function (prevWidths) {
+          return [].concat(_toConsumableArray(prevWidths), [300]);
+        });
+      }, 500);
+      return function () {
+        return clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Demo, {
+      widths: widths,
+      onChange: setIndex
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
+      amount: widths.length,
+      activeIndex: index
+    }));
+  },
   parameters: {
     chromatic: {
       disable: true
     }
   }
 };
-var SwiperWithText = exports.SwiperWithText = function SwiperWithText() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4],
-    my: 2
-  }, /*#__PURE__*/_react.default.createElement(_2.Swiper, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "mono10",
-    p: 1,
-    width: 300
-  }, LOREM)));
-};
-SwiperWithText.displayName = "SwiperWithText";
-SwiperWithText.story = {
-  name: "Swiper with text"
-};
-var InitialIndexOnMount = exports.InitialIndexOnMount = function InitialIndexOnMount() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    initialIndex: 3
-  });
-};
-InitialIndexOnMount.displayName = "InitialIndexOnMount";
-InitialIndexOnMount.story = {
-  name: "initialIndex on mount"
-};
-var NavigateViaProps = exports.NavigateViaProps = function NavigateViaProps() {
-  var _useState9 = (0, _react.useState)(0),
-    _useState10 = _slicedToArray(_useState9, 2),
-    initialIndex = _useState10[0],
-    resetIndex = _useState10[1];
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(Demo, {
-    initialIndex: initialIndex,
-    onChange: resetIndex
-  }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    display: "flex",
-    justifyContent: "space-around"
-  }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(0);
-    }
-  }, "Navigate to page 1"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(1);
-    }
-  }, "Navigate to page 2"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(2);
-    }
-  }, "Navigate to page 3"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
-    onClick: function onClick() {
-      return resetIndex(3);
-    }
-  }, "Navigate to page 4")));
+var SwiperWithText = exports.SwiperWithText = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/_react.default.createElement(_2.Swiper, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      bg: "mono10",
+      p: 1,
+      width: 300
+    }, LOREM)));
+  }
 };
-NavigateViaProps.displayName = "NavigateViaProps";
-NavigateViaProps.story = {
-  name: "Navigate via props"
+var InitialIndexOnMount = exports.InitialIndexOnMount = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      initialIndex: 3
+    });
+  }
 };
-var OverwritingDefaultMargins = exports.OverwritingDefaultMargins = function OverwritingDefaultMargins() {
-  return /*#__PURE__*/_react.default.createElement(Demo, {
-    mt: 6,
-    ml: 6
-  });
+var NavigateViaProps = exports.NavigateViaProps = {
+  render: function render() {
+    var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialIndex = _useState10[0],
+      resetIndex = _useState10[1];
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement(Demo, {
+      initialIndex: initialIndex,
+      onChange: resetIndex
+    }), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      display: "flex",
+      justifyContent: "space-around"
+    }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(0);
+      }
+    }, "Navigate to page 1"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(1);
+      }
+    }, "Navigate to page 2"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(2);
+      }
+    }, "Navigate to page 3"), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+      onClick: function onClick() {
+        return resetIndex(3);
+      }
+    }, "Navigate to page 4")));
+  }
 };
-OverwritingDefaultMargins.displayName = "OverwritingDefaultMargins";
-OverwritingDefaultMargins.story = {
-  name: "Overwriting default margins"
+var OverwritingDefaultMargins = exports.OverwritingDefaultMargins = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(Demo, {
+      mt: 6,
+      ml: 6
+    });
+  }
 };
-var ConditionalChildren = exports.ConditionalChildren = function ConditionalChildren() {
-  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    mx: [2, 4],
-    my: 2
-  }, /*#__PURE__*/_react.default.createElement(_2.Swiper, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "1")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "2")), false && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "3")), true && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "4")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "5")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "mono10",
-    width: 300,
-    height: 300,
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    variant: "xs"
-  }, "6"))));
+var ConditionalChildren = exports.ConditionalChildren = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      mx: [2, 4],
+      my: 2
+    }, /*#__PURE__*/_react.default.createElement(_2.Swiper, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "1")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "2")), false && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "3")), true && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "4")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "5")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      bg: "mono10",
+      width: 300,
+      height: 300,
+      p: 2
+    }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+      variant: "xs"
+    }, "6"))));
+  }
 };
-ConditionalChildren.displayName = "ConditionalChildren";
 //# sourceMappingURL=Swiper.story.js.map