carbon-react 104.31.0 → 104.33.0

package/lib/components/navigation-bar/navigation-bar.component.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { PaddingProps, FlexboxProps } from "styled-system";
-export declare type StickyPosition = "top" | "bottom";
+export declare type Position = "sticky" | "fixed";
+export declare type Orientation = "top" | "bottom";
 export declare type NavigationType = "light" | "dark" | "white" | "black";
+export declare type StickyPosition = "top" | "bottom";
 export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     children?: React.ReactNode;
     ariaLabel?: string;
@@ -13,6 +15,12 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     stickyPosition?: StickyPosition;
     /** Defines the offset of sticky navigation bar */
     stickyOffset?: string;
+    /** Defines whether the navigation bar should be positioned fixed or sticky */
+    position?: Position;
+    /** Defines the offset of navigation bar */
+    offset?: string;
+    /** Defines whether the navigation bar should be positioned top or bottom */
+    orientation?: Orientation;
 }
-export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, stickyOffset, stickyPosition, ...props }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, stickyOffset, stickyPosition, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
 export default NavigationBar;

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -11,6 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _navigationBar = _interopRequireDefault(require("./navigation-bar.style"));
 
+var _logger = _interopRequireDefault(
+  require("../../__internal__/utils/logger")
+);
+
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -32,6 +36,8 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+let deprecatedWarnTriggered = false;
+
 const NavigationBar = ({
   navigationType = "light",
   isLoading = false,
@@ -39,8 +45,20 @@ const NavigationBar = ({
   ariaLabel,
   stickyOffset = "0",
   stickyPosition,
+  position,
+  offset = "0",
+  orientation,
   ...props
 }) => {
+  if (!deprecatedWarnTriggered && stickyPosition) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate(
+      // eslint-disable-next-line max-len
+      "The `stickyPosition` and `stickyOffset` props are deprecated and will soon be removed. You should use the `position`, `offset` and `orientation` props to achieve the same layout. The following codemods are available to help with updating your code: https://github.com/Sage/carbon-codemod/tree/master/transforms/remove-prop and https://github.com/Sage/carbon-codemod/tree/master/transforms/add-prop"
+    );
+  }
+
   return /*#__PURE__*/ _react.default.createElement(
     _navigationBar.default,
     _extends(
@@ -51,6 +69,9 @@ const NavigationBar = ({
         "data-component": "navigation-bar",
         stickyOffset: stickyOffset,
         stickyPosition: stickyPosition,
+        position: position,
+        offset: offset,
+        orientation: orientation,
       },
       props
     ),
@@ -4694,6 +4715,10 @@ NavigationBar.propTypes = {
    * Color scheme of navigation component
    */
   navigationType: _propTypes.default.oneOf(["black", "dark", "light", "white"]),
+  /**
+   * Defines the offset of navigation bar
+   */
+  offset: _propTypes.default.string,
   /**
    * The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container
    * are sorted by ascending order value and then by their source code order.
@@ -4786,6 +4811,10 @@ NavigationBar.propTypes = {
       valueOf: _propTypes.default.func.isRequired,
     }),
   ]),
+  /**
+   * Defines whether the navigation bar should be positioned top or bottom
+   */
+  orientation: _propTypes.default.oneOf(["bottom", "top"]),
   /**
    * Padding on top, left, bottom and right
    */
@@ -5236,6 +5265,10 @@ NavigationBar.propTypes = {
     }),
     _propTypes.default.string,
   ]),
+  /**
+   * Defines whether the navigation bar should be positioned fixed or sticky
+   */
+  position: _propTypes.default.oneOf(["fixed", "sticky"]),
   /**
    * Padding on right
    */

package/lib/components/navigation-bar/navigation-bar.style.d.ts

@@ -1,11 +1,17 @@
 import { PaddingProps, FlexboxProps } from "styled-system";
-import { StickyPosition, NavigationType } from "./navigation-bar.component";
+import { Position, Orientation, NavigationType } from "./navigation-bar.component";
 declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     /** Color scheme of navigation component */
     navigationType?: NavigationType | undefined;
     /** Defines the position of sticky navigation bar */
-    stickyPosition?: StickyPosition | undefined;
+    stickyPosition?: Orientation | undefined;
     /** Defines the offset of sticky navigation bar */
     stickyOffset?: string | undefined;
+    /** Defines whether the navigation bar should be positioned fixed or sticky */
+    position?: Position | undefined;
+    /** Defines the offset of navigation bar */
+    offset?: string | undefined;
+    /** Defines whether the navigation bar should be positioned top or bottom */
+    orientation?: Orientation | undefined;
 }, never>;
 export default StyledNavigationBar;

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -54,8 +54,22 @@ const StyledNavigationBar = _styledComponents.default.nav`
   stickyOffset
 }) => stickyPosition && (0, _styledComponents.css)`
       position: sticky;
-      ${stickyPosition}: ${stickyOffset}
-    `};
+      ${stickyPosition}: ${stickyOffset};
+    `}
+
+  ${({
+  position,
+  orientation,
+  offset
+}) => position && orientation && (0, _styledComponents.css)`
+      position: ${position};
+      ${orientation}: ${offset};
+
+      ${position === "fixed" && (0, _styledComponents.css)`
+        box-sizing: border-box;
+        width: 100%;
+      `}
+    `}
 
   ${({
   navigationType,

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -4,6 +4,7 @@ declare namespace StepSequenceItem {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const indicator: PropTypes.Validator<string>;
+        const hideIndicator: PropTypes.Requireable<boolean>;
         const ariaLabel: PropTypes.Requireable<string>;
         const status: PropTypes.Requireable<string>;
         const hiddenCompleteLabel: PropTypes.Requireable<string>;
@@ -12,6 +13,8 @@ declare namespace StepSequenceItem {
     namespace defaultProps {
         const status_1: string;
         export { status_1 as status };
+        const hideIndicator_1: boolean;
+        export { hideIndicator_1 as hideIndicator };
     }
 }
 import PropTypes from "prop-types";

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -24,7 +24,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const StepSequenceItem = props => {
-  const indicatorText = () => /*#__PURE__*/_react.default.createElement(_stepSequenceItemIndicator.default, null, props.indicator);
+  const indicatorText = () => {
+    return !props.hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItemIndicator.default, null, props.indicator) : null;
+  };
 
   const icon = () => props.status === "complete" ? /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "tick"
@@ -62,6 +64,9 @@ StepSequenceItem.propTypes = {
   /** Value to be displayed before text for uncompleted steps */
   indicator: _propTypes.default.string.isRequired,
 
+  /** Flag to hide the indicator for uncompleted steps */
+  hideIndicator: _propTypes.default.bool,
+
   /** Aria label */
   ariaLabel: _propTypes.default.string,
 
@@ -75,7 +80,8 @@ StepSequenceItem.propTypes = {
   hiddenCurrentLabel: _propTypes.default.string
 };
 StepSequenceItem.defaultProps = {
-  status: "incomplete"
+  status: "incomplete",
+  hideIndicator: false
 };
 var _default = StepSequenceItem;
 exports.default = _default;

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.d.ts

@@ -9,6 +9,8 @@ export interface StepSequenceItemProps {
   hiddenCurrentLabel?: string;
   /** Value to be displayed before text for uncomplete steps */
   indicator: string;
+  /** Flag to hide the indicator for uncomplete steps */
+  hideIndicator?: boolean;
   /** Status for the step */
   status?: "complete" | "current" | "incomplete";
 }

package/lib/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -137,6 +137,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     warning: warning,
     info: info,
     noRightBorder: noRightBorder,
+    noLeftBorder: noLeftBorder,
     alternateStyling: alternateStyling || isInSidebar,
     borders: borders,
     isInSidebar: isInSidebar

package/lib/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -22,21 +22,25 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const StyledTitleContent = _styledComponents.default.span`
   outline: none;
   display: inline-block;
+  line-height: 20px;
+  margin: 0;
 
   ${({
+  hasCustomLayout,
+  error,
+  warning,
+  info,
   size,
+  isTabSelected,
+  hasSiblings,
   borders,
   position,
   noLeftBorder,
   noRightBorder,
-  isTabSelected,
   hasHref,
-  error,
   alternateStyling,
   align
 }) => (0, _styledComponents.css)`
-    line-height: 20px;
-    margin: 0;
     text-align: ${align};
 
     ${position === "left" && (0, _styledComponents.css)`
@@ -60,7 +64,7 @@ const StyledTitleContent = _styledComponents.default.span`
     `}
 
     ${!hasHref && (0, _styledComponents.css)`
-      [data-component="icon"] {
+      [data-component="icon"]:not([color]) {
         color: var(--colorsActionMinorYin065);
       }
     `}
@@ -97,27 +101,16 @@ const StyledTitleContent = _styledComponents.default.span`
     ${size === "large" && position === "left" && (0, _styledComponents.css)`
       font-size: 16px;
       padding: 14px 24px;
-      ${!isTabSelected && !alternateStyling && error && `margin-right: -2px;`}
     `}
 
     ${size === "default" && (0, _styledComponents.css)`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-
-      ${position === "left" && !isTabSelected && !alternateStyling && error && `
-        margin-right: -2px;
-      `}
     `}
-  `}
+ 
 
-  ${({
-  position,
-  warning,
-  info,
-  size,
-  hasCustomLayout
-}) => (warning || info) && (0, _styledComponents.css)`
+    ${(warning || info) && (0, _styledComponents.css)`
       outline: 1px solid;
       outline-offset: -1px;
 
@@ -129,11 +122,11 @@ const StyledTitleContent = _styledComponents.default.span`
         outline-color: var(--colorsSemanticCaution500);
       `}
 
-    ${position === "top" && (0, _styledComponents.css)`
+      ${position === "top" && (0, _styledComponents.css)`
         border-bottom-color: transparent;
       `}
 
-    ${position === "left" && (0, _styledComponents.css)`
+      ${position === "left" && (0, _styledComponents.css)`
         border-right-color: transparent;
         padding-right: ${size === "large" ? "26px" : "18px"};
       `}
@@ -150,7 +143,7 @@ const StyledTitleContent = _styledComponents.default.span`
           outline-color: var(--colorsSemanticCaution500);
         `}
 
-      ${position === "top" && (0, _styledComponents.css)`
+        ${position === "top" && (0, _styledComponents.css)`
           border-bottom-color: transparent;
 
           ${hasCustomLayout && (0, _styledComponents.css)`
@@ -158,19 +151,14 @@ const StyledTitleContent = _styledComponents.default.span`
           `}
         `}
 
-      ${position === "left" && (0, _styledComponents.css)`
+        ${position === "left" && (0, _styledComponents.css)`
           border-right-color: transparent;
           padding-right: ${size === "large" ? "26px" : "18px"};
         `}
       }
     `}
 
-  ${({
-  error,
-  position,
-  size,
-  hasCustomLayout
-}) => error && (0, _styledComponents.css)`
+    ${error && (0, _styledComponents.css)`
       outline: 2px solid var(--colorsSemanticNegative500);
       outline-offset: -2px;
 
@@ -201,32 +189,11 @@ const StyledTitleContent = _styledComponents.default.span`
       }
     `}
 
-  ${({
-  hasSiblings,
-  hasCustomLayout,
-  error,
-  warning,
-  info,
-  size,
-  isTabSelected,
-  position
-}) => hasSiblings && !hasCustomLayout && position === "top" && (0, _styledComponents.css)`
+    ${hasSiblings && !hasCustomLayout && position === "top" && (0, _styledComponents.css)`
       height: 20px;
-
-      ${size === "large" && !(error || warning || info) && isTabSelected && (0, _styledComponents.css)`
-        padding-bottom: 6px;
-      `}
     `}
 
-  ${({
-  hasCustomLayout,
-  error,
-  warning,
-  info,
-  position,
-  size,
-  isTabSelected
-}) => hasCustomLayout && (0, _styledComponents.css)`
+    ${hasCustomLayout && (0, _styledComponents.css)`
       display: flex;
 
       ${position === "left" && (0, _styledComponents.css)`
@@ -251,9 +218,10 @@ const StyledTitleContent = _styledComponents.default.span`
           &:hover {
             padding-bottom: ${size === "large" ? "4px" : "2px"};
           }
-        `};
+        `}
       `}
     `}
+  `}
 `;
 exports.StyledTitleContent = StyledTitleContent;
 const StyledTabTitle = _styledComponents.default.button`
@@ -268,131 +236,114 @@ const StyledTabTitle = _styledComponents.default.button`
   text-decoration: none;
   outline-offset: 0px;
   margin: 0;
-  height: ${({
-  size
-}) => size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
 
   a:visited {
     color: inherit;
   }
 
   ${({
+  size,
   position,
   borders,
   noRightBorder,
-  noLeftBorder
+  noLeftBorder,
+  isTabSelected,
+  alternateStyling,
+  error,
+  warning,
+  info,
+  isInSidebar
 }) => (0, _styledComponents.css)`
+    height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
+    
     ${position === "top" && (0, _styledComponents.css)`
-      ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
-        &:nth-of-type(n + 1) {
-          margin-left: -1px;
-        }
-        &:first-child {
-          margin-left: 0;
-        }
+        ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
+          &:nth-of-type(n + 1) {
+            margin-left: -1px;
+          }
+          &:first-child {
+            margin-left: 0;
+          }
+        `}
       `}
-    `}
     ${position === "left" && (0, _styledComponents.css)`
-      ${borders && (0, _styledComponents.css)`
-        &:nth-of-type(n + 1) {
-          margin-top: -1px;
-        }
-        &:first-child {
-          margin-top: 0;
-        }
+        ${borders && (0, _styledComponents.css)`
+          &:nth-of-type(n + 1) {
+            margin-top: -1px;
+          }
+          &:first-child {
+            margin-top: 0;
+          }
+        `}
       `}
-    `}
-  `}
 
-  ${({
-  isTabSelected
-}) => !isTabSelected && (0, _styledComponents.css)`
-      color: var(--colorsActionMinorYin090);
-
-      &:hover {
-        background: var(--colorsActionMinor100);
-        color: var(--colorsActionMinorYin090);
-        outline: none;
-      }
-      &:focus {
+    ${!isTabSelected && (0, _styledComponents.css)`
         color: var(--colorsActionMinorYin090);
-        outline: none;
-      }
-    `}
-
-  ${({
-  isTabSelected,
-  alternateStyling,
-  error,
-  warning,
-  info
-}) => isTabSelected && (0, _styledComponents.css)`
-      color: var(--colorsActionMajorYin090);
-      background-color: var(--colorsActionMajorYang100);
 
-      ${(error || warning || info) && (0, _styledComponents.css)`
-        padding-bottom: 0px;
+        &:hover {
+          background: var(--colorsActionMinor100);
+          color: var(--colorsActionMinorYin090);
+          outline: none;
+        }
+        &:focus {
+          color: var(--colorsActionMinorYin090);
+          outline: none;
+        }
       `}
 
-      &:hover {
-        background-color: var(--colorsActionMajorYang100);
-        border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+    ${isTabSelected && (0, _styledComponents.css)`
         color: var(--colorsActionMajorYin090);
-        cursor: default;
-      }
-    `}
+        background-color: var(--colorsActionMajorYang100);
+
+        ${(error || warning || info) && (0, _styledComponents.css)`
+          padding-bottom: 0px;
+        `}
+
+        &:hover {
+          background-color: var(--colorsActionMajorYang100);
+          border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+          color: var(--colorsActionMajorYin090);
+          cursor: default;
+        }
+      `}
 
-  ${({
-  isInSidebar
-}) => `
     &:focus {
       outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
       z-index: 2;
     }
-  `}
-  
-  ${({
-  position,
-  borders,
-  alternateStyling,
-  error,
-  warning,
-  info,
-  isInSidebar
-}) => position === "left" && (0, _styledComponents.css)`
-      background-color: transparent;
-      border-bottom: 0px;
 
-      ${!isInSidebar && (0, _styledComponents.css)`
-        border-right: ${alternateStyling ? "1px" : "2px"} solid
-          var(--colorsActionMinor100);
-      `}
+    ${position === "left" && (0, _styledComponents.css)`
+        background-color: transparent;
+        border-bottom: 0px;
 
-      ${!borders && (0, _styledComponents.css)`
-        ${StyledTitleContent} {
-          border-bottom: none;
-        }
-      `}
+        ${!isInSidebar && !error && (0, _styledComponents.css)`
+          border-right: ${alternateStyling ? "1px" : "2px"} solid
+            var(--colorsActionMinor100);
+        `}
+
+        ${!borders && (0, _styledComponents.css)`
+          ${StyledTitleContent} {
+            border-bottom: none;
+          }
+        `}
 
       display: flex;
-      height: auto;
-      margin-left: 0px;
+        height: auto;
+        margin-left: 0px;
 
-      &:first-child {
-        margin-top: 0;
-      }
+        &:first-child {
+          margin-top: 0;
+        }
 
-      &:hover {
-        ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
-      }
+        &:hover {
+          ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
+        }
 
-      ${(warning || info) && (0, _styledComponents.css)`
-        border-right: none;
-      `}
+        ${(warning || info) && (0, _styledComponents.css)`
+          border-right: none;
+        `}
 
-      ${({
-  isTabSelected
-}) => isTabSelected && (0, _styledComponents.css)`
+        ${isTabSelected && (0, _styledComponents.css)`
           ${alternateStyling && (0, _styledComponents.css)`
             border-right-color: var(--colorsActionMinor100);
           `}
@@ -406,8 +357,8 @@ const StyledTabTitle = _styledComponents.default.button`
               border-right: none;
             }
           `}
-    
-          background-color: var(--colorsActionMajorYang100);
+  
+        background-color: var(--colorsActionMajorYang100);
 
           &:hover {
             ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
@@ -419,43 +370,38 @@ const StyledTabTitle = _styledComponents.default.button`
             ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
           }
         `}
-    `}
+      `}
 
-  ${({
-  alternateStyling,
-  isTabSelected,
-  isInSidebar
-}) => alternateStyling && (0, _styledComponents.css)`
-      &:focus {
-        background-color: var(--colorsActionMinor100);
-      }
+    ${alternateStyling && (0, _styledComponents.css)`
+        &:focus {
+          background-color: var(--colorsActionMinor100);
+        }
 
-      &:hover {
-        background-color: ${isTabSelected ? "var(--colorsActionMinor100)" : "var(--colorsActionMinor150)"};
-      }
+        &:hover {
+          background-color: ${isTabSelected ? "var(--colorsActionMinor100)" : "var(--colorsActionMinor150)"};
+        }
 
-      ${isTabSelected && (0, _styledComponents.css)`
-        background-color: var(--colorsActionMinor100);
-      `}
+        ${isTabSelected && (0, _styledComponents.css)`
+          background-color: var(--colorsActionMinor100);
+        `}
 
-      ${isInSidebar && `padding-bottom: 1px;`}
-    `}
+        ${isInSidebar && `padding-bottom: 1px;`}
+      `}
+  `}
 `;
 exports.StyledTabTitle = StyledTabTitle;
 const StyledLayoutWrapper = _styledComponents.default.div`
-  ${({
-  hasCustomLayout
-}) => hasCustomLayout && (0, _styledComponents.css)`
-      flex-grow: 2;
-      min-width: 100px;
-    `}
-
   ${({
   hasCustomLayout,
   titlePosition,
   hasCustomSibling,
   position
-}) => !hasCustomLayout && (0, _styledComponents.css)`
+}) => (0, _styledComponents.css)`
+    ${hasCustomLayout && (0, _styledComponents.css)`
+      flex-grow: 2;
+    `}
+
+    ${!hasCustomLayout && (0, _styledComponents.css)`
       display: inline-flex;
 
       position: relative;
@@ -481,6 +427,7 @@ const StyledLayoutWrapper = _styledComponents.default.div`
         }
       }
     `}
+  `}
 `;
 exports.StyledLayoutWrapper = StyledLayoutWrapper;
 const StyledSelectedIndicator = _styledComponents.default.div`
@@ -489,7 +436,8 @@ const StyledSelectedIndicator = _styledComponents.default.div`
 
   ${({
   position
-}) => position === "top" && (0, _styledComponents.css)`
+}) => (0, _styledComponents.css)`
+    ${position === "top" && (0, _styledComponents.css)`
       bottom: 0px;
       left: 0px;
       box-shadow: inset 0px calc(-1 * var(--sizing025)) 0px
@@ -498,9 +446,7 @@ const StyledSelectedIndicator = _styledComponents.default.div`
       height: var(--sizing025);
     `}
 
-  ${({
-  position
-}) => position === "left" && (0, _styledComponents.css)`
+    ${position === "left" && (0, _styledComponents.css)`
       top: 0px;
       right: 0px;
       box-shadow: inset calc(-1 * var(--sizing025)) 0px 0px 0px
@@ -508,6 +454,7 @@ const StyledSelectedIndicator = _styledComponents.default.div`
       height: 100%;
       width: var(--sizing025);
     `}
+  `}
 `;
 exports.StyledSelectedIndicator = StyledSelectedIndicator;
 StyledTabTitle.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.31.0",
+  "version": "104.33.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {