carbon-react 111.0.3 → 111.1.0

package/esm/components/toast/toast.component.js

@@ -25,6 +25,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   disableAutoFocus,
   ...restProps
 }, ref) => {
+  const isNotice = variant === "notice";
   const locale = useLocale();
   const toastRef = useRef();
   const timer = useRef();
@@ -94,7 +95,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
     };
     return /*#__PURE__*/React.createElement(CSSTransition, {
       enter: true,
-      classNames: "toast",
+      classNames: isNotice ? "toast-alternative" : "toast",
       timeout: {
         appear: 1600,
         enter: 1500,
@@ -102,14 +103,16 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       },
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
+      isNotice: isNotice,
       className: componentClasses
     }, tagComponent(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
-    }), /*#__PURE__*/React.createElement(TypeIcon, {
+    }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/React.createElement(Icon, {
       type: toastProps.variant
     })), /*#__PURE__*/React.createElement(ToastContentStyle, {
+      isNotice: isNotice,
       variant: toastProps.variant,
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
@@ -117,15 +120,17 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
-    isCenter: isCenter
+    isCenter: isCenter,
+    isNotice: isNotice
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
     isCenter: isCenter,
-    ref: refToPass
+    ref: refToPass,
+    isNotice: isNotice
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
 });
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
-  variant: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  variant: PropTypes.oneOf(["error", "info", "success", "warning", "notice"]),
 
   /** Custom className */
   className: PropTypes.string,

package/esm/components/toast/toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-type ToastVariants = "error" | "info" | "success" | "warning";
+type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
 
 export interface ToastPropTypes {
   /** The rendered children of the component. */

package/esm/components/toast/toast.style.js

@@ -5,6 +5,7 @@ import TypeIcon from "../message/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";
+import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
   ${({
   theme
@@ -20,12 +21,21 @@ const StyledPortal = styled(Portal)`
         margin-left: 50%;
         transform: translateX(-50%);
       `}
+
+    ${({
+  isNotice
+}) => isNotice && css`
+        bottom: 0;
+        top: auto;
+        width: 100%;
+      `}
   `}
 `;
 StyledPortal.defaultProps = {
   theme: baseTheme
 };
 const animationName = ".toast";
+const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = styled(MessageStyle)`
   ${({
   maxWidth,
@@ -39,24 +49,23 @@ const ToastStyle = styled(MessageStyle)`
     position: relative;
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
- 
 
   &${animationName}-appear,
   &${animationName}-enter {
     opacity: 0;
-    transform: scale(0.5)};
+    transform: scale(0.5);
   }
 
-  &${animationName}-appear.toast-appear-active,
-  &${animationName}-enter.toast-enter-active {
+  &${animationName}-appear${animationName}-appear-active,
+    &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
   isCenter
 }) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
-    transition: all 300ms cubic-bezier(0.250, 0.250, 0.000, 1.500);
+    transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
-  &${animationName}-exit.toast-exit-active {
+  &${animationName}-exit${animationName}-exit-active {
     opacity: 0;
     margin-top: -40px;
     transition: all 150ms ease-out;
@@ -68,14 +77,64 @@ const ToastStyle = styled(MessageStyle)`
     top: 50%;
     transform: translateY(-50%);
   }
+
+  ${({
+  isNotice
+}) => isNotice && css`
+      background-color: var(--colorsUtilityMajor400);
+      border: none;
+      color: var(--colorsSemanticNeutralYang100);
+      margin-right: 0;
+      max-width: 100%;
+
+      ${StyledIconButton} {
+        right: 55px;
+      }
+
+      ${StyledIconButton} ${StyledIcon} {
+        color: var(--colorsSemanticNeutralYang100);
+      }
+
+      &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
+        bottom: -40px;
+        opacity: 0;
+      }
+
+      &${alternativeAnimationName}-exit {
+        bottom: 0;
+        opacity: 1;
+      }
+
+      &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
+        &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
+        bottom: 0;
+        opacity: 1;
+        transition: all 400ms ease;
+      }
+
+      &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
+        bottom: -40px;
+        opacity: 0;
+        transition: all 200ms ease;
+      }
+    `}
 `;
 const ToastContentStyle = styled(MessageContentStyle)`
   padding: 8px 16px 8px 16px;
 
   ${({
-  isDismiss
+  isNotice
+}) => isNotice && css`
+      display: flex;
+      align-items: center;
+      padding: 11px 40px;
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
 }) => isDismiss && css`
-      padding-right: 48px;
+      padding-right: ${isNotice ? "88px" : "48px"};
     `}
 `;
 const ToastWrapper = styled.div`
@@ -88,5 +147,11 @@ const ToastWrapper = styled.div`
       justify-content: center;
       display: flex;
     `}
+
+  ${({
+  isNotice
+}) => isNotice && css`
+      display: block;
+    `}
 `;
 export { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal };

package/lib/components/toast/toast.component.js

@@ -49,6 +49,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   disableAutoFocus,
   ...restProps
 }, ref) => {
+  const isNotice = variant === "notice";
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
@@ -118,7 +119,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
     };
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
       enter: true,
-      classNames: "toast",
+      classNames: isNotice ? "toast-alternative" : "toast",
       timeout: {
         appear: 1600,
         enter: 1500,
@@ -126,14 +127,16 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       },
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
+      isNotice: isNotice,
       className: componentClasses
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps, {
       ref: toastContentNodeRef
-    }), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastProps.variant
     })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
+      isNotice: isNotice,
       variant: toastProps.variant,
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
@@ -141,16 +144,18 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
 
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
-    isCenter: isCenter
+    isCenter: isCenter,
+    isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
     isCenter: isCenter,
-    ref: refToPass
+    ref: refToPass,
+    isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
 });
 
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
-  variant: _propTypes.default.oneOf(["error", "info", "success", "warning"]),
+  variant: _propTypes.default.oneOf(["error", "info", "success", "warning", "notice"]),
 
   /** Custom className */
   className: _propTypes.default.string,

package/lib/components/toast/toast.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-type ToastVariants = "error" | "info" | "success" | "warning";
+type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
 
 export interface ToastPropTypes {
   /** The rendered children of the component. */

package/lib/components/toast/toast.style.js

@@ -25,6 +25,8 @@ var _portal = _interopRequireDefault(require("../portal/portal"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _icon = _interopRequireDefault(require("../icon/icon.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -46,6 +48,14 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
         margin-left: 50%;
         transform: translateX(-50%);
       `}
+
+    ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+        bottom: 0;
+        top: auto;
+        width: 100%;
+      `}
   `}
 `;
 exports.StyledPortal = StyledPortal;
@@ -53,6 +63,7 @@ StyledPortal.defaultProps = {
   theme: _base.default
 };
 const animationName = ".toast";
+const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = (0, _styledComponents.default)(_message.default)`
   ${({
   maxWidth,
@@ -66,24 +77,23 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     position: relative;
     margin-right: ${isCenter ? "auto" : "30px"};
   `}
- 
 
   &${animationName}-appear,
   &${animationName}-enter {
     opacity: 0;
-    transform: scale(0.5)};
+    transform: scale(0.5);
   }
 
-  &${animationName}-appear.toast-appear-active,
-  &${animationName}-enter.toast-enter-active {
+  &${animationName}-appear${animationName}-appear-active,
+    &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
   isCenter
 }) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
-    transition: all 300ms cubic-bezier(0.250, 0.250, 0.000, 1.500);
+    transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
-  &${animationName}-exit.toast-exit-active {
+  &${animationName}-exit${animationName}-exit-active {
     opacity: 0;
     margin-top: -40px;
     transition: all 150ms ease-out;
@@ -95,15 +105,65 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     top: 50%;
     transform: translateY(-50%);
   }
+
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityMajor400);
+      border: none;
+      color: var(--colorsSemanticNeutralYang100);
+      margin-right: 0;
+      max-width: 100%;
+
+      ${_iconButton.default} {
+        right: 55px;
+      }
+
+      ${_iconButton.default} ${_icon.default} {
+        color: var(--colorsSemanticNeutralYang100);
+      }
+
+      &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
+        bottom: -40px;
+        opacity: 0;
+      }
+
+      &${alternativeAnimationName}-exit {
+        bottom: 0;
+        opacity: 1;
+      }
+
+      &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
+        &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
+        bottom: 0;
+        opacity: 1;
+        transition: all 400ms ease;
+      }
+
+      &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
+        bottom: -40px;
+        opacity: 0;
+        transition: all 200ms ease;
+      }
+    `}
 `;
 exports.ToastStyle = ToastStyle;
 const ToastContentStyle = (0, _styledComponents.default)(_messageContent.default)`
   padding: 8px 16px 8px 16px;
 
   ${({
-  isDismiss
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      display: flex;
+      align-items: center;
+      padding: 11px 40px;
+    `}
+
+  ${({
+  isDismiss,
+  isNotice
 }) => isDismiss && (0, _styledComponents.css)`
-      padding-right: 48px;
+      padding-right: ${isNotice ? "88px" : "48px"};
     `}
 `;
 exports.ToastContentStyle = ToastContentStyle;
@@ -117,5 +177,11 @@ const ToastWrapper = _styledComponents.default.div`
       justify-content: center;
       display: flex;
     `}
+
+  ${({
+  isNotice
+}) => isNotice && (0, _styledComponents.css)`
+      display: block;
+    `}
 `;
 exports.ToastWrapper = ToastWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.0.3",
+  "version": "111.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -109,7 +109,7 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "10.8.0",
+    "cypress": "10.9.0",
     "cypress-axe": "^1.0.0",
     "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",

package/scripts/check_carbon_version/check_carbon_version.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/* istanbul ignore file */
 const fetch = require("node-fetch");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
@@ -9,7 +10,7 @@ dotenv.config();
 const majorVersion = version.split(".")[0];
 
 const checkCarbonVersion = () => {
-  if (ci.BITRISE) {
+  if (ci.isCI && process.env.NODE_ENV !== "test") {
     return;
   }
 

package/scripts/check_rfcs/check_rfcs.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/* istanbul ignore file */
 const { Octokit } = require("@octokit/rest");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
@@ -34,7 +35,7 @@ const getOpenRfcs = async () => {
 const getRfcTitle = (rfc) => rfc.title.split(": ")[1];
 
 const checkRfcs = async () => {
-  if (ci.BITRISE) {
+  if (ci.isCI && process.env.NODE_ENV !== "test") {
     return;
   }