carbon-react 104.32.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/package.json

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