@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/Banner/Banner.js

@@ -1,499 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Banner = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactFeather = require("react-feather");
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-function _templateObject34() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["absolute top-0 right-0 mt-2 mr-2"]);
-
-  _templateObject34 = function _templateObject34() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject33() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["", " ", ""]);
-
-  _templateObject33 = function _templateObject33() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject32() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-1"]);
-
-  _templateObject32 = function _templateObject32() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject31() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""]);
-
-  _templateObject31 = function _templateObject31() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject30() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n            mr-4 flex-shrink-0\n            ", "\n            "]);
-
-  _templateObject30 = function _templateObject30() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject29() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["rounded"]);
-
-  _templateObject29 = function _templateObject29() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject28() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-white"]);
-
-  _templateObject28 = function _templateObject28() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject27() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-red-900"]);
-
-  _templateObject27 = function _templateObject27() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject26() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-orange-900"]);
-
-  _templateObject26 = function _templateObject26() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject25() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-green-900"]);
-
-  _templateObject25 = function _templateObject25() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject24() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-blue-900"]);
-
-  _templateObject24 = function _templateObject24() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject23() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-accent-900"]);
-
-  _templateObject23 = function _templateObject23() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject22() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]);
-
-  _templateObject22 = function _templateObject22() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject21() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-red-500"]);
-
-  _templateObject21 = function _templateObject21() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject20() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-orange-500"]);
-
-  _templateObject20 = function _templateObject20() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject19() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-green-700"]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-blue-500"]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-accent-500"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["shadow-z300"]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["shadow-z100"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-red-500"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-green-500"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-blue-500"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-accent-500"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["border-grey-500"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-red-100"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-green-100"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["relative flex text-grey-900 p-4 border-t-3 display-body"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function isBannerDefaultProps(props) {
-  return props.usageContext !== "page";
-}
-
-var BASE_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject());
-var BACKGROUND_CLASSNAMES = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject2()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject3()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject4()),
-  green: (0, _satellitePrefixer["default"])(_templateObject5()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject6()),
-  red: (0, _satellitePrefixer["default"])(_templateObject7())
-};
-var BORDER_CLASSNAMES = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject8()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject9()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject10()),
-  green: (0, _satellitePrefixer["default"])(_templateObject11()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject12()),
-  red: (0, _satellitePrefixer["default"])(_templateObject13())
-};
-var ELEVATION_CLASSNAMES = {
-  content: "",
-  section: (0, _satellitePrefixer["default"])(_templateObject14()),
-  page: (0, _satellitePrefixer["default"])(_templateObject15())
-};
-var ICON_VARIANTS = {
-  grey: _reactFeather.AlertCircle,
-  accent: _reactFeather.AlertCircle,
-  blue: _reactFeather.AlertCircle,
-  green: _reactFeather.CheckCircle,
-  orange: _reactFeather.AlertTriangle,
-  red: _reactFeather.AlertOctagon
-};
-var ICON_CLASSNAME_VARIANTS = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject16()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject17()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject18()),
-  green: (0, _satellitePrefixer["default"])(_templateObject19()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject20()),
-  red: (0, _satellitePrefixer["default"])(_templateObject21())
-};
-var TITLE_CLASSNAME_VARIANTS = {
-  grey: (0, _satellitePrefixer["default"])(_templateObject22()),
-  accent: (0, _satellitePrefixer["default"])(_templateObject23()),
-  blue: (0, _satellitePrefixer["default"])(_templateObject24()),
-  green: (0, _satellitePrefixer["default"])(_templateObject25()),
-  orange: (0, _satellitePrefixer["default"])(_templateObject26()),
-  red: (0, _satellitePrefixer["default"])(_templateObject27())
-};
-/**
- * Banners inform users about important changes or persistent conditions. Use this component if you need
- * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
- * on the appropriate banner to use:
- *
- * #### Page banner
- * - Use this banner to display critical messages about data, functionality or any other site-wide information you want to convey
- * - Place this banner at the top of the page and make sure it occupies the full width of the content area
- *
- * #### Section banner
- * - Use this banner to display a message that relates to a section of the page the user is in, e.g. billing details
- * - Place this banner inside the section (e.g. card, popover, modal), below the heading
- *
- * #### In-card banner
- * - Use this banner to display a message that relates to a specific part of the section, e.g. no events for personalization strategy
- * - Place this banner immediately above or below the element it relates to most
- *
- * ## Variantions
- * Consider the context and implied severity to choose from the following range:
- *
- * - **Informational**: `variant="gray"` & `variant="blue"`
- * - **Warning**: `variant="orange"`
- * - **Error**: `variant="red"`
- * - **Success**: `variant="green"`
- *
- * ## Content guidelines
- * #### Title
- * - Use simple, clear language
- * - Keep headings to a single sentence
- * - Avoid using punctuation such as periods, commas, or semicolons
- *
- * #### Body
- * - Be concise, keep content to 1 to 2 sentences max
- * - Clarify the benefit of the main task
- * - Explain how to resolve the issue, particularly for warning and error banners
- * - Avoid repeating the heading
- *
- * #### Buttons and links
- * - Keep them short, clear and predictable
- * - Start with verb that encourages action
- * - Avoid unnecessary words
- * - Link should set the expectation of where users will be taken
- *
- * #### Usability best practices
- * - Make sure banners appear one at the time and disappear once the issue is resolved
- * - Make them dismissible even if they contain critical information or an important step users need to take
- * - Make them concise and scannable—users shouldn't need to spend a lot of time figuring out what they need to know and do
- * - Use an appropriate color and icon for success, info, warning and error states
- */
-
-var Banner = function Banner(props) {
-  var _props$usageContext = props.usageContext,
-      usageContext = _props$usageContext === void 0 ? "content" : _props$usageContext,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? "grey" : _props$variant,
-      onDismiss = props.onDismiss,
-      className = props.className,
-      style = props.style,
-      children = props.children;
-  var containerClassName = (0, _classnames["default"])(BASE_CLASSNAME, BORDER_CLASSNAMES[variant], ELEVATION_CLASSNAMES[usageContext], usageContext === "content" ? BACKGROUND_CLASSNAMES[variant] : (0, _satellitePrefixer["default"])(_templateObject28()), usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject29()), className);
-  var icon = props.icon === undefined ? usageContext !== "page" : props.icon;
-  var Icon = typeof icon === "boolean" && icon ? ICON_VARIANTS[variant] : icon;
-  var subduedContent = Boolean(isBannerDefaultProps(props) && usageContext === "section" && props.title);
-  return _react["default"].createElement("div", {
-    className: containerClassName,
-    style: style
-  }, Icon && _react["default"].createElement(Icon, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject30(), isBannerDefaultProps(props) && props.title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
-    size: "1rem"
-  }), _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject31(), onDismiss && "mr-2")
-  }, isBannerDefaultProps(props) && props.title && _react["default"].createElement("h4", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject32()), TITLE_CLASSNAME_VARIANTS[variant])
-  }, props.title), _react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject33(), usageContext === "page" && "text-center", subduedContent && "text-grey-600")
-  }, children)), onDismiss && _react["default"].createElement("button", {
-    className: (0, _satellitePrefixer["default"])(_templateObject34()),
-    "aria-label": "Close banner",
-    onClick: function onClick(evt) {
-      evt.stopPropagation();
-      onDismiss();
-    }
-  }, _react["default"].createElement(_reactFeather.X, {
-    size: "1rem"
-  })));
-};
-
-exports.Banner = Banner;
-var _default = Banner;
-exports["default"] = _default;

package/Banner/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Banner";
-export { default } from "./Banner";

package/Banner/index.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _Banner["default"];
-  }
-});
-
-var _Banner = _interopRequireWildcard(require("./Banner"));
-
-Object.keys(_Banner).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Banner[key];
-    }
-  });
-});

package/Button/Button.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { AcceptableButtonType, ButtonBaseProps, ExtractProps } from "./types";
-export declare type ButtonProps<T extends AcceptableButtonType = "button"> = ButtonBaseProps & ExtractProps<T> & {
-    as?: T;
-};
-/**
- * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
- *
- * ## Variations
- * - **Primary**: to highlight the strongest action on a page. Should only appear once per screen. Not every screen requires a primary button
- * - **Neutral (default)**: the standard button for most use cases
- * - **Destructive**: appears as a final confirmation for a destructive action (e.g. deleting an index). Should be used with care, primarily in confirmation modals
- * - **Subtle-neutral**: user with a primary button or for actionals that are less crucial (e.g. Cancel)
- *
- * ## Styles
- * - Use icons before the label in any button type to draw more attention to it, or help convey more meaning
- * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
- * - Buttons can take the full width to fill the parent container
- */
-export declare const Button: <T extends AcceptableButtonType = "button">(props: ButtonProps<T>) => JSX.Element;
-export default Button;