@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/Badge/Badge.js

@@ -1,265 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Badge = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-function _templateObject18() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n          "]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["truncate"]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n          "]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["h-6 display-body px-2"]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-red-600"]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-orange-700"]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-green-700"]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-blue-700"]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-accent-600"]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-800"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject());
-var VARIANT_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 VALUE_VARIANT_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 SIZE_CLASSNAMES = {
-  "default": (0, _satellitePrefixer["default"])(_templateObject14()),
-  small: (0, _satellitePrefixer["default"])(_templateObject15())
-};
-/**
- * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
- *
- * - Stay consistent with badge content (text), don't vary your vocabulary
- * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages  (such as form validation) can be used instead
- * - Don't use badges with combination of buttons
- * - Badges are not interactive
- *
- * Do use
- *
- * - To indicate progress of an A/B test
- * - To indicate problem with an index
- * - To display numeric values for multiple items (similar to a "tag cloud")
- */
-
-var Badge = function Badge(_ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      Icon = _ref.icon,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "grey" : _ref$variant,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "default" : _ref$size,
-      className = _ref.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["children", "value", "icon", "variant", "size", "className"]);
-  var badgeClassName = (0, _classnames["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
-  return _react["default"].createElement("div", (0, _extends2["default"])({}, props, {
-    className: badgeClassName
-  }), Icon && _react["default"].createElement("span", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16(), size === "default" && "mr-2", size === "small" && "mr-1"))
-  }, _react["default"].createElement(Icon, {
-    size: ".8em"
-  })), _react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject17())
-  }, children), value && _react["default"].createElement("span", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject18(), size === "default" && "ml-2", size === "small" && "ml-1"), VALUE_VARIANT_CLASSNAMES[variant])
-  }, value));
-};
-
-exports.Badge = Badge;
-var _default = Badge;
-exports["default"] = _default;

package/Badge/index.d.ts

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

package/Badge/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 _Badge["default"];
-  }
-});
-
-var _Badge = _interopRequireWildcard(require("./Badge"));
-
-Object.keys(_Badge).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 _Badge[key];
-    }
-  });
-});

package/Banner/Banner.d.ts

@@ -1,79 +0,0 @@
-import React, { FunctionComponent } from "react";
-import { ColorVariant } from "../types";
-import IconComponentType from "../utils/icon";
-export declare type BannerContextType = "page" | "section" | "content";
-export interface BannerPropsBase {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    style?: React.CSSProperties;
-    /** @default grey */
-    variant?: ColorVariant;
-    icon?: boolean | IconComponentType;
-    onDismiss?(): void;
-}
-export interface BannerPageProps extends BannerPropsBase {
-    /**
-     * Usage context description
-     * @default content
-     */
-    usageContext?: "page";
-}
-export interface BannerDefaultProps extends BannerPropsBase {
-    /** Usage context description */
-    usageContext?: "content" | "section";
-    /** Notification title */
-    title?: React.ReactNode;
-}
-export declare type BannerProps = BannerPageProps | BannerDefaultProps;
-/**
- * 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
- */
-export declare const Banner: FunctionComponent<BannerProps>;
-export default Banner;