@doist/reactist 19.1.1 → 20.0.1

package/README.md

@@ -150,6 +150,38 @@ npm run test -- --watch
 
 MacOS users might need to upgrade watchman with `brew install watchman` when experiencing troubles with the watch mode. See this issue for details: https://github.com/facebook/jest/issues/1767
 
+## Chromatic visual regression tests
+
+Reactist relies on [Chromatic](https://www.chromatic.com/) to run visual regression tests on our component during the CI step in GitHub.
+
+### Enable tests
+
+To enable such tests, just add `chromatic: { disableSnapshot: false }` as a story parameter in your stories. Example:
+
+```
+<Canvas>
+    <Story
+        name="Main demo"
+        parameters={{
+            docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
+        }}
+    >
+        <BannerExamples theme="light" />
+    </Story>
+</Canvas>
+```
+
+We recommend you enable these tests on those Storybook stories that have several different variants of the component under testing. Enabling them on one or two stories per component should be sufficient in most cases (there's no need to enable them on all stories).
+
+### Review tests
+
+When you open a GitHub PR, you'll notice the "UI Review" and "UI Tests" CI steps.
+
+-   Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
+-   Now you can review and accept your changes (or go back and change your code).
+-   When you're happy with your changes, make sure to mark them as "Approved".
+
 # Releasing
 
 A new version of reactist is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.

package/dist/reactist.cjs.development.js

@@ -2163,7 +2163,7 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-var modules_33c7c985 = {"badge":"c717b894","badge-info":"_0fddcc47","badge-positive":"_62550d9b","badge-promote":"_5fdf5bab","badge-attention":"_2d52906f"};
+var modules_33c7c985 = {"badge":"_13c19ddf","badge-info":"_1377a171","badge-positive":"_9e2e287e","badge-promote":"_6b9a3e6f","badge-attention":"_573c013b"};
 
 const _excluded$p = ["tone", "label"];
 
@@ -3719,85 +3719,9 @@ Select.defaultProps = {
   disabled: false
 };
 
-const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "gray",
-  fillRule: "evenodd",
-  d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
-}));
-
-const _excluded$x = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
-
-function DeprecatedNotification(_ref) {
-  let {
-    id,
-    icon,
-    title,
-    subtitle,
-    children,
-    customCloseButton,
-    onClick,
-    onClose,
-    closeAltText = 'Close',
-    className,
-    'aria-live': ariaLive = 'polite'
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
-
-  const titleId = title ? id + "-title" : null;
-  const titleIdAttribute = titleId ? {
-    id: titleId
-  } : null;
-  const subtitleId = subtitle ? id + "-subtitle" : null;
-  const subtitleIdAttribute = subtitleId ? {
-    id: subtitleId
-  } : null;
-  const contentId = children ? id + "-content" : null;
-  const contentIdAttribute = children ? {
-    id: id + "-content"
-  } : null;
-  const ariaLabelledBy = contentId ? {
-    'aria-labelledby': contentId
-  } : titleId ? {
-    'aria-labelledby': titleId
-  } : null;
-  const ariaDescribedBy = subtitleId && !children ? {
-    'aria-describedby': subtitleId
-  } : null;
-  const notificationContent = /*#__PURE__*/React.createElement("div", _objectSpread2({
-    className: "reactist-notification__content"
-  }, contentIdAttribute), children != null ? children : /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("h3", _objectSpread2({
-    className: "reactist-notification__title"
-  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React.createElement("p", _objectSpread2({
-    className: "reactist-notification__subtitle"
-  }, subtitleIdAttribute), subtitle) : null));
-  const notificationBody = /*#__PURE__*/React.createElement("div", {
-    className: "reactist-notification__icon-content-group"
-  }, icon != null ? icon : null, notificationContent);
-  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
-    id: id,
-    role: "alert",
-    className: classNames('reactist-notification', className, {
-      'reactist-notification--with-button': Boolean(onClick),
-      'reactist-notification--with-close-button': Boolean(onClose)
-    }),
-    "aria-live": ariaLive
-  }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__button",
-    onClick: onClick
-  }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__close-button",
-    onClick: onClose,
-    "aria-label": closeAltText
-  }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React.createElement(CloseIcon$1, null)) : null);
-}
-
 var modules_8f59d13b$1 = {"reach-portal":"ad18b0a0","fadein":"f7a1b219","fitContent":"_8ed9bb5c","container":"f67e892e","full":"_4139421e","large":"_649eb5fe","medium":"_5323e676","small":"_56ca7ae6","xlarge":"a7be0fce","overlay":"_88a7a680","expand":"b29456b8","buttonContainer":"_09ef1f4f","headerContent":"_0e5b530a"};
 
-const _excluded$y = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$x = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
       _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3$3 = ["exceptionallySetClassName", "children"],
       _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
@@ -3832,7 +3756,7 @@ function DeprecatedModal(_ref) {
     autoFocus = true,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$y);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   const contextValue = React.useMemo(() => ({
     onDismiss,
@@ -4023,7 +3947,6 @@ exports.DeprecatedModalBody = DeprecatedModalBody;
 exports.DeprecatedModalCloseButton = DeprecatedModalCloseButton;
 exports.DeprecatedModalFooter = DeprecatedModalFooter;
 exports.DeprecatedModalHeader = DeprecatedModalHeader;
-exports.DeprecatedNotification = DeprecatedNotification;
 exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
 exports.Heading = Heading;
@@ -4066,6 +3989,5 @@ exports.Time = Time;
 exports.Toast = Toast;
 exports.ToastsProvider = ToastsProvider;
 exports.Tooltip = Tooltip;
-exports.usePrevious = usePrevious;
 exports.useToasts = useToasts;
 //# sourceMappingURL=reactist.cjs.development.js.map