@algolia/satellite 1.0.0-beta.125 → 1.0.0-beta.126

package/esm/Banners/BigBertha/BigBertha.js

@@ -0,0 +1,54 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { AlertCircle } from "react-feather";
+import stl from "../../styles/helpers/satellitePrefixer";
+
+/**
+* Major product wide announcement from Algolia to the users.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279476)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This is a simple high contrast banner. It use an icon that should match the content of the message, a short text that describe the situation and can contain "Learn more" links.
+
+* ## Guidelines
+
+* ### How to use it?
+* This component should only be used to inform the user about an on-going situation at Algolia that will impact the users' or end-users' experience with our products. The content of the message should be concise and explicit. Make sure that the tone used in the text does not generate stress.
+
+* ### How to NOT use it?
+* - Do not use this banner for any non critical announcement or any non product wide announcement.
+* - If you want to inform the user about something in your features, please use the [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants) component.
+* - If you want to promote a specific feature, please use the [Promote Banner](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-promote--basic) component.
+
+* ### Variants
+* - Blue banner : Default state of this component
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export var BigBertha = function BigBertha(_ref) {
+  var icon = _ref.icon,
+      children = _ref.children;
+  var InternalIcon = icon || AlertCircle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center justify-center space-x-4 bg-accent-600 text-white w-full p-4"])))
+  }, /*#__PURE__*/React.createElement(InternalIcon, {
+    size: "1rem"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body"])))
+  }, children));
+};
+export default BigBertha;

package/esm/Banners/BigBertha/index.d.ts

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

package/esm/Banners/BigBertha/index.js

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

package/esm/Banners/Promote/Promote.d.ts

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+declare type PromoteVariants = "large" | "compact";
+interface CompactPromoteProps {
+    variant?: Extract<PromoteVariants, "compact">;
+    illustration?: never;
+}
+interface WidePromoteProps {
+    variant?: Extract<PromoteVariants, "large">;
+    /** Plop in an `img` element or `svg` here */
+    illustration?: React.ReactNode;
+}
+export declare type PromoteProps = {
+    /** Product context for the banner (either a string or a React component) */
+    context?: React.ReactNode;
+    /** Descriptive title for banner (either a string or a React component) */
+    title: React.ReactNode;
+    /** Buttons */
+    actions?: React.ReactNode;
+    onDismiss?(): void;
+} & (CompactPromoteProps | WidePromoteProps);
+/**
+* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
+
+* ## Guidelines
+* ### How to use it?
+* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
+
+* This component is permanently dismissible by default.
+
+* ### How to NOT use it?
+* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
+* - You can only use one `large` promotion banner per context and two/four compact per context.
+
+* ### Variants
+* - `large`
+* - `compact`
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Promote: FC<PromoteProps>;
+export default Promote;

package/esm/Banners/Promote/Promote.js

@@ -0,0 +1,95 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+import React from "react";
+import cx from "classnames";
+import { X } from "react-feather";
+import Card from "../../Card";
+import { IconButton } from "../../Button";
+import stl from "../../styles/helpers/satellitePrefixer";
+var TITLE_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
+  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-medium mb-4"])))
+};
+var BODY_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
+};
+var ACTIONS_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mt-1"]))),
+  large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-3"])))
+};
+/**
+* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
+
+* ## Guidelines
+* ### How to use it?
+* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
+
+* This component is permanently dismissible by default.
+
+* ### How to NOT use it?
+* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
+* - You can only use one `large` promotion banner per context and two/four compact per context.
+
+* ### Variants
+* - `large`
+* - `compact`
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+
+export var Promote = function Promote(_ref) {
+  var context = _ref.context,
+      title = _ref.title,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "large" : _ref$variant,
+      illustration = _ref.illustration,
+      actions = _ref.actions,
+      children = _ref.children,
+      onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/React.createElement(Card, {
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["relative flex"]))),
+    fullBleed: true
+  }, illustration && /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"])))
+  }, illustration), /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), variant === "large" ? "p-6" : "p-4")
+  }, context && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["block mb-1"])))
+  }, context), /*#__PURE__*/React.createElement("header", {
+    className: TITLE_VARIANT_CLASSNAMES[variant]
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: BODY_VARIANT_CLASSNAMES[variant]
+  }, children), actions && /*#__PURE__*/React.createElement("div", {
+    className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant])
+  }, actions)), onDismiss && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["absolute top-2 right-2"])))
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: X,
+    title: "Close banner",
+    variant: "subtle",
+    size: "small",
+    onClick: function onClick(evt) {
+      evt.stopPropagation();
+      onDismiss();
+    }
+  })));
+};
+export default Promote;

package/esm/Banners/Promote/index.d.ts

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

package/esm/Banners/Promote/index.js

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

package/esm/Banners/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Alert";
+export * from "./BigBertha";
+export * from "./Promote";

package/esm/Banners/index.js

@@ -0,0 +1,3 @@
+export * from "./Alert";
+export * from "./BigBertha";
+export * from "./Promote";

package/esm/Button/Button.tailwind.js

@@ -29,7 +29,7 @@ var buttonPlugin = function buttonPlugin(_ref) {
     ".btn-subtle": {
       color: theme("colors.grey.600"),
       "&:hover": {
-        background: theme("colors.grey.100")
+        background: rgba(theme("colors.grey.300"), 0.15)
       },
       "&:focus": {
         boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600"))

package/esm/Insert/Insert.d.ts

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { BadgeVariants } from "../Badge";
+declare type InsertContext = {
+    label: string;
+    variant?: BadgeVariants;
+};
+export interface InsertProps {
+    title: React.ReactNode;
+    contexts?: Array<string | InsertContext>;
+}
+/**
+* Put more emphasis on side content.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
+
+* ## Guidelines
+
+* ### How to use it?
+* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
+
+* ### How to NOT use it?
+* - Don't use this component to display temporary and/or critical information, use an Alert instead.
+
+* ### Variants
+* - Grey background
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Insert: FC<InsertProps>;
+export default Insert;

package/esm/Insert/Insert.js

@@ -0,0 +1,66 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React from "react";
+import Badge from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
+
+/**
+* Put more emphasis on side content.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
+
+* ## Guidelines
+
+* ### How to use it?
+* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
+
+* ### How to NOT use it?
+* - Don't use this component to display temporary and/or critical information, use an Alert instead.
+
+* ### Variants
+* - Grey background
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export var Insert = function Insert(_ref) {
+  var title = _ref.title,
+      contexts = _ref.contexts,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("aside", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"])))
+  }, contexts ? /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"])))
+  }, contexts.map(function (context, idx) {
+    var _ref2 = typeof context === "string" ? {
+      label: context
+    } : context,
+        label = _ref2.label,
+        _ref2$variant = _ref2.variant,
+        variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+
+    return /*#__PURE__*/React.createElement(Badge, {
+      key: idx,
+      variant: variant
+    }, label);
+  })) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"])))
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
+  }, children)));
+};
+export default Insert;

package/esm/Insert/index.d.ts

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

package/esm/Insert/index.js

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

package/esm/Tables/DataTable/DataTable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
 declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
-export interface DataTableProps<Item> {
+interface BaseDataTableProps<Item> {
     data: Item[];
     itemId?: GetItemId<Item>;
     pagination?: PaginationConfiguration;
@@ -11,13 +11,22 @@ export interface DataTableProps<Item> {
     noDataContent?: React.ReactNode;
     errorContent?: React.ReactNode;
     columns: ColumnDefinition<Item>[];
-    selectMode?: SelectMode;
-    selection?: string[];
-    onSelectionChange?(rowId: string[]): void;
-    canSelectItem?: CanSelectItem<Item>;
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
 }
+declare type DataTableWithSelectMode<Item> = {
+    selectMode: Exclude<SelectMode, "none">;
+    selection?: string[];
+    onSelectionChange?(rowId: string[]): void;
+    canSelectItem?: CanSelectItem<Item>;
+};
+declare type DataTableWithoutSelectMode = {
+    selectMode?: Extract<SelectMode, "none">;
+    selection?: never;
+    onSelectionChange?: never;
+    canSelectItem?: never;
+};
+export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTableWithSelectMode<Item> | DataTableWithoutSelectMode);
 /**
  * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *

package/esm/index.d.ts

@@ -9,6 +9,7 @@ export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
 export * from "./Banner";
+export * from "./Banners";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
@@ -21,6 +22,7 @@ export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Input";
+export * from "./Insert";
 export * from "./Link";
 export * from "./Medallion";
 export * from "./Modal";

package/esm/index.js

@@ -9,6 +9,7 @@ export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
 export * from "./Banner";
+export * from "./Banners";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
@@ -21,6 +22,7 @@ export * from "./Flag";
 export * from "./FlexGrid";
 export * from "./HelpUnderline";
 export * from "./Input";
+export * from "./Insert";
 export * from "./Link";
 export * from "./Medallion";
 export * from "./Modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.125",
+  "version": "1.0.0-beta.126",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "del dist",

package/satellite.css

@@ -1165,7 +1165,7 @@ html, body {
 }
 
 .stl-btn-subtle:hover {
-  background: #f5f5fa;
+  background: rgba(182, 183, 213, 0.15);
 }
 
 .stl-btn-subtle:focus {