@sproutsocial/racine 12.12.0 → 12.13.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 12.13.0
+
+### Minor Changes
+
+- c8566fd: **Deprecation notice:**
+
+  The `danger` type for the `Banner` component has been **deprecated** in favor of the `error` type. A couple of changes will be required to comply with this deprecation:
+
+  - Any code using the `danger` type for the `Banner` component should be migrated to use the `error` type instead.
+  - Any styles using `danger` props from the theme should be migrated to use `error` instead.
+
+  Use of the `danger` type for the `Banner` component and `danger` props in the theme will be fully removed in a future release.
+
 ## 12.12.0
 
 ### Minor Changes

package/__flow__/Banner/index.js

@@ -4,60 +4,66 @@ import Icon from "../Icon";
 import Container from "./styles";
 import Box from "../Box";
 
-export type EnumBannerType =
+/**
+ * @deprecated
+ * Use banner type "error" instead of "danger"
+ */
+type EnumDeprecatedBannerType = "danger";
+
+type EnumValidBannerType =
   | "success"
   | "info"
-  | "danger"
   | "error"
   | "warning"
   | "opportunity";
 
+export type EnumBannerType = EnumValidBannerType | EnumDeprecatedBannerType;
+
 type TypeProps = {
   text: React.Node,
   /** Type of banner. "danger" is deprecated in favor of "error" */
   type: EnumBannerType,
 };
 
-export default class Banner extends React.Component<TypeProps> {
-  static defaultProps = {
-    type: "danger",
-  };
-
-  getBannerIcon() {
-    switch (this.props.type) {
-      case "success":
-        return <Icon name="circle-check-no-fill" className="Icon" fixedWidth />;
-      case "info":
-        return <Icon name="info-white" className="Icon" fixedWidth />;
-      case "danger":
-      case "error":
-        return <Icon name="triangle" className="Icon" fixedWidth />;
-      case "warning":
-        return <Icon name="triangle" className="Icon" fixedWidth />;
-      case "opportunity":
-        return <Icon name="sparkles" className="Icon" fixedWidth />;
-      default:
-        return;
-    }
+const getBannerIcon = (type: EnumValidBannerType) => {
+  switch (type) {
+    case "success":
+      return <Icon name="circle-check-no-fill" className="Icon" fixedWidth />;
+    case "info":
+      return <Icon name="info-white" className="Icon" fixedWidth />;
+    case "error":
+      return <Icon name="triangle" className="Icon" fixedWidth />;
+    case "warning":
+      return <Icon name="triangle" className="Icon" fixedWidth />;
+    case "opportunity":
+      return <Icon name="sparkles" className="Icon" fixedWidth />;
+    default:
+      return;
   }
+};
 
-  render() {
-    const { type, text, ...rest } = this.props;
-    return (
-      <Container
-        // danger needs to be properly deprecated and removed DS-1094
-        type={type === "danger" ? "error" : type}
-        data-qa-alert={""}
-        data-qa-alert-type={type}
-        data-qa-alert-text={text}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
-        <Box display="flex" alignItems="center" width={1}>
-          {this.getBannerIcon()}
-          {text}
-        </Box>
-      </Container>
+const Banner = ({ type = "error", text, ...rest }: TypeProps) => {
+  const bannerType: EnumValidBannerType = type === "danger" ? "error" : type;
+  if (type === "danger") {
+    console.warn(
+      "Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead."
     );
   }
-}
+  return (
+    <Container
+      type={bannerType}
+      data-qa-alert={""}
+      data-qa-alert-type={bannerType}
+      data-qa-alert-text={text}
+      // $FlowIssue - upgrade v0.112.0
+      {...rest}
+    >
+      <Box display="flex" alignItems="center" width={1}>
+        {getBannerIcon(bannerType)}
+        {text}
+      </Box>
+    </Container>
+  );
+};
+
+export default Banner;

package/__flow__/Banner/index.stories.js

@@ -18,7 +18,7 @@ export const permutations = () => (
       width="500px"
     />
     <Banner text={text("Info", "Info message")} type="info" width="500px" />
-    <Banner text={text("Error", "Error message")} type="danger" width="500px" />
+    <Banner text={text("Error", "Error message")} type="error" width="500px" />
     <Banner
       text={text("Warning", "Warning message")}
       type="warning"
@@ -45,7 +45,7 @@ export const Info = () => (
 );
 
 export const Error = () => (
-  <Banner text={text("text", "Error message")} type="danger" />
+  <Banner text={text("text", "Error message")} type="error" />
 );
 
 export const Warning = () => (

package/__flow__/Banner/index.test.js

@@ -21,7 +21,16 @@ describe("Banner", () => {
     expect(getByDataQaLabel({ icon: "info-white" })).toBeTruthy();
   });
 
-  it("should render with danger type", () => {
+  it("should render with error type", () => {
+    const { getByText, getByDataQaLabel } = render(
+      <Banner text="Banner Text" type="error" />
+    );
+
+    expect(getByText("Banner Text")).toBeTruthy();
+    expect(getByDataQaLabel({ icon: "triangle" })).toBeTruthy();
+  });
+
+  it("should render with deprecated danger type", () => {
     const { getByText, getByDataQaLabel } = render(
       <Banner text="Banner Text" type="danger" />
     );

package/__flow__/themes/dark/theme.js

@@ -44,6 +44,7 @@ const colors = {
       error: red.background,
       info: blue.background,
       opportunity: purple.background,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.background,
       decorative: {
         green: green.background,
@@ -68,6 +69,7 @@ const colors = {
       success: green.highlight,
       warning: yellow.highlight,
       error: red.highlight,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.highlight,
       info: blue.highlight,
       opportunity: purple.highlight,
@@ -191,6 +193,7 @@ const colors = {
     success: green.foreground,
     warning: yellow.foreground,
     error: red.foreground,
+    /**  @deprecated Use "error" instead of "danger" */
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,

package/__flow__/themes/light/theme.js

@@ -45,6 +45,7 @@ const colors = {
       error: red.background,
       info: blue.background,
       opportunity: purple.background,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.background,
       decorative: {
         green: green.background,
@@ -69,6 +70,7 @@ const colors = {
       success: green.highlight,
       warning: yellow.highlight,
       error: red.highlight,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.highlight,
       info: blue.highlight,
       opportunity: purple.highlight,
@@ -192,6 +194,7 @@ const colors = {
     success: green.foreground,
     warning: yellow.foreground,
     error: red.foreground,
+    /**  @deprecated Use "error" instead of "danger" */
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,

package/__flow__/types/theme.colors.flow.js

@@ -20,6 +20,7 @@ type TypeContainerColors = {|
       error: string,
       info: string,
       opportunity: string,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: string,
       decorative: {
         green: string,
@@ -44,6 +45,7 @@ type TypeContainerColors = {|
       success: string,
       warning: string,
       error: string,
+      /**  @deprecated Use "error" instead of "danger" */
       danger: string,
       info: string,
       opportunity: string,
@@ -179,6 +181,7 @@ type TypeIconColors = {|
     success: string,
     warning: string,
     error: string,
+    /**  @deprecated Use "error" instead of "danger" */
     danger: string,
     info: string,
     opportunity: string,

package/commonjs/Banner/index.js

@@ -23,86 +23,72 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+var getBannerIcon = function getBannerIcon(type) {
+  switch (type) {
+    case "success":
+      return /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "circle-check-no-fill",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "info":
+      return /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "info-white",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "error":
+      return /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "triangle",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "warning":
+      return /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "triangle",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "opportunity":
+      return /*#__PURE__*/React.createElement(_Icon.default, {
+        name: "sparkles",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    default:
+      return;
+  }
+};
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var Banner = function Banner(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "error" : _ref$type,
+      text = _ref.text,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-var Banner = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Banner, _React$Component);
+  var bannerType = type === "danger" ? "error" : type;
 
-  function Banner() {
-    return _React$Component.apply(this, arguments) || this;
+  if (type === "danger") {
+    console.warn("Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.");
   }
 
-  var _proto = Banner.prototype;
-
-  _proto.getBannerIcon = function getBannerIcon() {
-    switch (this.props.type) {
-      case "success":
-        return /*#__PURE__*/React.createElement(_Icon.default, {
-          name: "circle-check-no-fill",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "info":
-        return /*#__PURE__*/React.createElement(_Icon.default, {
-          name: "info-white",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "danger":
-      case "error":
-        return /*#__PURE__*/React.createElement(_Icon.default, {
-          name: "triangle",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "warning":
-        return /*#__PURE__*/React.createElement(_Icon.default, {
-          name: "triangle",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "opportunity":
-        return /*#__PURE__*/React.createElement(_Icon.default, {
-          name: "sparkles",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      default:
-        return;
-    }
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        type = _this$props.type,
-        text = _this$props.text,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    return /*#__PURE__*/React.createElement(_styles.default // danger needs to be properly deprecated and removed DS-1094
-    , _extends({
-      type: type === "danger" ? "error" : type,
-      "data-qa-alert": "",
-      "data-qa-alert-type": type,
-      "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0
-
-    }, rest), /*#__PURE__*/React.createElement(_Box.default, {
-      display: "flex",
-      alignItems: "center",
-      width: 1
-    }, this.getBannerIcon(), text));
-  };
-
-  return Banner;
-}(React.Component);
-
-exports.default = Banner;
-Banner.defaultProps = {
-  type: "danger"
-};
+  return /*#__PURE__*/React.createElement(_styles.default, _extends({
+    type: bannerType,
+    "data-qa-alert": "",
+    "data-qa-alert-type": bannerType,
+    "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0
+
+  }, rest), /*#__PURE__*/React.createElement(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    width: 1
+  }, getBannerIcon(bannerType), text));
+};
+
+var _default = Banner;
+exports.default = _default;

package/commonjs/themes/dark/theme.js

@@ -42,6 +42,8 @@ var colors = _extends({}, _theme.default.colors, {
       error: _decorativePalettes.red.background,
       info: _decorativePalettes.blue.background,
       opportunity: _decorativePalettes.purple.background,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: _decorativePalettes.red.background,
       decorative: {
         green: _decorativePalettes.green.background,
@@ -66,6 +68,8 @@ var colors = _extends({}, _theme.default.colors, {
       success: _decorativePalettes.green.highlight,
       warning: _decorativePalettes.yellow.highlight,
       error: _decorativePalettes.red.highlight,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: _decorativePalettes.red.highlight,
       info: _decorativePalettes.blue.highlight,
       opportunity: _decorativePalettes.purple.highlight,
@@ -189,6 +193,8 @@ var colors = _extends({}, _theme.default.colors, {
     success: _decorativePalettes.green.foreground,
     warning: _decorativePalettes.yellow.foreground,
     error: _decorativePalettes.red.foreground,
+
+    /**  @deprecated Use "error" instead of "danger" */
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
     opportunity: _decorativePalettes.purple.foreground,

package/commonjs/themes/light/theme.js

@@ -47,6 +47,8 @@ var colors = _extends({
       error: _decorativePalettes.red.background,
       info: _decorativePalettes.blue.background,
       opportunity: _decorativePalettes.purple.background,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: _decorativePalettes.red.background,
       decorative: {
         green: _decorativePalettes.green.background,
@@ -71,6 +73,8 @@ var colors = _extends({
       success: _decorativePalettes.green.highlight,
       warning: _decorativePalettes.yellow.highlight,
       error: _decorativePalettes.red.highlight,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: _decorativePalettes.red.highlight,
       info: _decorativePalettes.blue.highlight,
       opportunity: _decorativePalettes.purple.highlight,
@@ -194,6 +198,8 @@ var colors = _extends({
     success: _decorativePalettes.green.foreground,
     warning: _decorativePalettes.yellow.foreground,
     error: _decorativePalettes.red.foreground,
+
+    /**  @deprecated Use "error" instead of "danger" */
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
     opportunity: _decorativePalettes.purple.foreground,

package/lib/Banner/index.js

@@ -4,91 +4,80 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import * as React from "react";
 import Icon from "../Icon";
 import Container from "./styles";
 import Box from "../Box";
-
-var Banner = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Banner, _React$Component);
-
-  function Banner() {
-    return _React$Component.apply(this, arguments) || this;
+/**
+ * @deprecated
+ * Use banner type "error" instead of "danger"
+ */
+
+var getBannerIcon = function getBannerIcon(type) {
+  switch (type) {
+    case "success":
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "circle-check-no-fill",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "info":
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "info-white",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "error":
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "triangle",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "warning":
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "triangle",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    case "opportunity":
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "sparkles",
+        className: "Icon",
+        fixedWidth: true
+      });
+
+    default:
+      return;
   }
+};
 
-  var _proto = Banner.prototype;
-
-  _proto.getBannerIcon = function getBannerIcon() {
-    switch (this.props.type) {
-      case "success":
-        return /*#__PURE__*/React.createElement(Icon, {
-          name: "circle-check-no-fill",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "info":
-        return /*#__PURE__*/React.createElement(Icon, {
-          name: "info-white",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "danger":
-      case "error":
-        return /*#__PURE__*/React.createElement(Icon, {
-          name: "triangle",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "warning":
-        return /*#__PURE__*/React.createElement(Icon, {
-          name: "triangle",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      case "opportunity":
-        return /*#__PURE__*/React.createElement(Icon, {
-          name: "sparkles",
-          className: "Icon",
-          fixedWidth: true
-        });
-
-      default:
-        return;
-    }
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        type = _this$props.type,
-        text = _this$props.text,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    return /*#__PURE__*/React.createElement(Container // danger needs to be properly deprecated and removed DS-1094
-    , _extends({
-      type: type === "danger" ? "error" : type,
-      "data-qa-alert": "",
-      "data-qa-alert-type": type,
-      "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0
+var Banner = function Banner(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "error" : _ref$type,
+      text = _ref.text,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-    }, rest), /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      width: 1
-    }, this.getBannerIcon(), text));
-  };
+  var bannerType = type === "danger" ? "error" : type;
 
-  return Banner;
-}(React.Component);
+  if (type === "danger") {
+    console.warn("Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.");
+  }
 
-Banner.defaultProps = {
-  type: "danger"
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    type: bannerType,
+    "data-qa-alert": "",
+    "data-qa-alert-type": bannerType,
+    "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0
+
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    width: 1
+  }, getBannerIcon(bannerType), text));
 };
-export { Banner as default };
+
+export default Banner;

package/lib/themes/dark/theme.js

@@ -27,6 +27,8 @@ var colors = _extends({}, lightTheme.colors, {
       error: red.background,
       info: blue.background,
       opportunity: purple.background,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.background,
       decorative: {
         green: green.background,
@@ -51,6 +53,8 @@ var colors = _extends({}, lightTheme.colors, {
       success: green.highlight,
       warning: yellow.highlight,
       error: red.highlight,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.highlight,
       info: blue.highlight,
       opportunity: purple.highlight,
@@ -174,6 +178,8 @@ var colors = _extends({}, lightTheme.colors, {
     success: green.foreground,
     warning: yellow.foreground,
     error: red.foreground,
+
+    /**  @deprecated Use "error" instead of "danger" */
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,

package/lib/themes/light/theme.js

@@ -28,6 +28,8 @@ var colors = _extends({
       error: red.background,
       info: blue.background,
       opportunity: purple.background,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.background,
       decorative: {
         green: green.background,
@@ -52,6 +54,8 @@ var colors = _extends({
       success: green.highlight,
       warning: yellow.highlight,
       error: red.highlight,
+
+      /**  @deprecated Use "error" instead of "danger" */
       danger: red.highlight,
       info: blue.highlight,
       opportunity: purple.highlight,
@@ -175,6 +179,8 @@ var colors = _extends({
     success: green.foreground,
     warning: yellow.foreground,
     error: red.foreground,
+
+    /**  @deprecated Use "error" instead of "danger" */
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.12.0",
+  "version": "12.13.0",
   "license": "MIT",
   "files": [
     "__flow__",