@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Footnote/FootnoteLink.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
+  displayName: "FootnoteLink__StyledSup",
+  componentId: "components-web__sc-17nd7xo-0"
+})(_ref => {
+  let {
+    fontSize,
+    lineHeight,
+    paddingLeft,
+    paddingRight,
+    ...fontNameAndWeight
+  } = _ref;
+  return {
+    border: 0,
+    color: 'inherit',
+    cursor: 'pointer',
+    // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
+    fontSize: fontSize ? `${fontSize}px` : 'smaller',
+    lineHeight: lineHeight ?? `${fontSize * 2}px`,
+    margin: 0,
+    paddingVertical: 0,
+    paddingLeft,
+    paddingRight,
+    textDecoration: 'underline',
+    // apply font family
+    ...(0, _componentsBase.applyTextStyles)(fontNameAndWeight)
+  };
+});
+
+/**
+ * Use `FootnoteLink` to open `Footnote` component and display related legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Use FootnoteLink to open a Footnote component and display related legal content.
+ * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
+ *   the annotation as part of the content whenever possible.
+ */
+const FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    number = [],
+    onClick,
+    fontSize,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
+  const numbers = Array.isArray(number) ? number : [number];
+  const refs = numbers.map(() => /*#__PURE__*/_react.default.createRef());
+  const handleClick = index => {
+    onClick(numbers[index], refs[index]);
+  };
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const handleOnClick = (event, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleClick(index);
+  };
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'Enter' || event.key === 13) {
+      handleClick(index);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    ref: ref,
+    children: numbers.map((num, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSup, {
+      onKeyDown: event => handleOnKeyDown(event, index),
+      role: "button",
+      "aria-label": getCopy('a11yLabel'),
+      ref: refs[index],
+      onClick: event => handleOnClick(event, index),
+      tabIndex: 0,
+      ...selectProps(rest),
+      ...themeTokens,
+      fontSize: fontSize ?? themeTokens.fontSize,
+      children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
+    }, num))
+  });
+});
+FootnoteLink.displayName = 'FootnoteLink';
+const copyShape = _propTypes.default.shape({
+  a11yLabel: _propTypes.default.string.isRequired
+});
+FootnoteLink.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the key `a11yLabel`.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * The footnote number, or multiple numbers if passed as an array.
+   * If using an array, a comma-separated group of numbers will be rendered as superscript.
+   */
+  number: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
+  /**
+   * A callback function to handle the click of a FootnoteLink.
+   */
+  onClick: _propTypes.default.func.isRequired,
+  /**
+   * Override default `fontSize` to set specific font size value
+   */
+  fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+var _default = exports.default = FootnoteLink;

package/lib/cjs/Footnote/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+};

package/lib/cjs/Footnote/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Footnote = _interopRequireDefault(require("./Footnote"));
+var _FootnoteLink = _interopRequireDefault(require("./FootnoteLink"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_Footnote.default.Link = _FootnoteLink.default;
+var _default = exports.default = _Footnote.default;

package/lib/cjs/IconButton/IconButton.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    icon = null,
+    action,
+    tokens = {},
+    variant = {},
+    ...iconButtonProps
+  } = _ref;
+  const variantWithAction = action && !variant.action ? {
+    ...variant,
+    action
+  } : variant;
+  const {
+    icon: themeIcon
+  } = (0, _componentsBase.useThemeTokens)('IconButton', tokens, variantWithAction);
+  return (
+    /*#__PURE__*/
+    // If we want the arrow icons to have directional animation instead of scale, we can pass
+    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
+    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
+    (0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      ref: ref,
+      ...iconButtonProps,
+      tokens: tokens,
+      variant: variant,
+      icon: icon ?? themeIcon
+    })
+  );
+});
+const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
+IconButton.displayName = 'IconButton';
+const propsWithoutIcon = _ref2 => {
+  let {
+    icon,
+    ...props
+  } = _ref2;
+  return props;
+};
+IconButton.propTypes = {
+  ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+  tokens: (0, _componentsBase.getTokensPropType)('IconButton'),
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
+  action: _propTypes.default.oneOf(multiBrandIconNames),
+  /**
+   * To set a custom icon
+   */
+  icon: _propTypes.default.func
+};
+var _default = exports.default = IconButton;

package/lib/cjs/IconButton/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _IconButton.default;

package/lib/cjs/Image/Image.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _server = require("@telus-uds/components-base/server");
+var _logger = require("../utils/logger");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
+const Image = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    src,
+    width,
+    height,
+    alt,
+    rounded,
+    loading = 'eager',
+    tokens,
+    theme,
+    variant,
+    ...rest
+  } = _ref;
+  let {
+    borderRadius
+  } = theme;
+  const isCircle = rounded === 'circle';
+  const isCorners = rounded === 'corners';
+  const isSquare = width === height;
+  if (isCircle && !isSquare) {
+    (0, _logger.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
+  }
+  if (isCircle) {
+    borderRadius = '50%';
+  } else if (isCorners) {
+    borderRadius = '4px';
+  }
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    ...selectProps(rest),
+    style: style,
+    src: src,
+    width: width,
+    height: height,
+    alt: alt,
+    loading: loading,
+    ref: ref
+  });
+});
+Image.displayName = 'Image';
+Image.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The src attribute for the HTML img element.
+   */
+
+  src: _propTypes.default.string.isRequired,
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: _propTypes.default.string.isRequired,
+  /**
+   * The image's width.
+   */
+  width: _propTypes.default.number.isRequired,
+  /**
+   * The image's height.
+   */
+  height: _propTypes.default.number,
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+  /**
+   * Make image render as a circle or with rounded corners.
+   */
+  rounded: _propTypes.default.oneOf(['circle', 'corners']),
+  tokens: (0, _server.getTokensPropType)('Image')
+};
+Image.displayName = 'Image';
+var _default = exports.default = Image;

package/lib/cjs/Image/index.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
+exports.default = void 0;
+var _Image = _interopRequireDefault(require("./Image"));
+var _withClientTheme = _interopRequireDefault(require("../utils/theming/with-client-theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+
+const ClientThemedImage = (0, _withClientTheme.default)(_Image.default);
+var _default = exports.default = ClientThemedImage;

package/lib/cjs/Image/server.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _withServerTheme = _interopRequireDefault(require("../utils/theming/with-server-theme"));
+var _Image = _interopRequireDefault(require("./Image"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ServerThemedImage = (0, _withServerTheme.default)(_Image.default, 'Image');
+var _default = exports.default = ServerThemedImage;

package/lib/cjs/List/List.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _componentsBase = require("@telus-uds/components-base");
+var _default = exports.default = _componentsBase.ListBase;

package/lib/cjs/List/ListItem.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ListItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    title,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.ListItem, {
+    ref: ref,
+    ...rest,
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
+  });
+});
+ListItem.displayName = 'ListItem';
+ListItem.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string
+};
+var _default = exports.default = ListItem;

package/lib/cjs/List/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _List = _interopRequireDefault(require("./List"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_List.default.Item = _ListItem.default;
+var _default = exports.default = _List.default;

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+var _NavigationSubMenu = _interopRequireDefault(require("./NavigationSubMenu"));
+var _collapseItems = _interopRequireDefault(require("./collapseItems"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationBar__Heading",
+  componentId: "components-web__sc-1vis1gt-0"
+})({
+  alignItems: 'center',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start',
+  '> *': {
+    display: 'contents',
+    letterSpacing: 0
+  }
+});
+
+/**
+ * NavigationBar can be used to allow customers to consistently navigate across
+ * key pages within a specific product line
+ */
+const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    accessibilityRole = 'navigation',
+    heading,
+    headingLevel = 'h1',
+    items,
+    onChange,
+    selectedId,
+    value,
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref;
+  const {
+    currentValue,
+    setValue
+  } = (0, _componentsBase.useInputValue)({
+    value,
+    initialValue: selectedId,
+    onChange
+  });
+  (0, _componentsBase.useHash)((hash, event) => {
+    let hashItem = hash && items.find(_ref2 => {
+      let {
+        href
+      } = _ref2;
+      return hash === href;
+    });
+    if (!hashItem) {
+      const parentItem = items.find(_ref3 => {
+        let {
+          items: parentItems
+        } = _ref3;
+        return parentItems?.some(_ref4 => {
+          let {
+            href
+          } = _ref4;
+          return hash === href;
+        });
+      });
+      hashItem = parentItem?.items.find(_ref5 => {
+        let {
+          href
+        } = _ref5;
+        return hash === href;
+      });
+    }
+    const hashId = hashItem && (hashItem.id || hashItem.label);
+    if (hashId) setValue(hashId, event);
+  }, [items, setValue]);
+  const direction = (0, _componentsBase.useResponsiveProp)({
+    xs: 'column',
+    sm: 'row'
+  });
+  const itemsForViewport = (0, _componentsBase.useResponsiveProp)({
+    xs: (0, _collapseItems.default)(items, currentValue),
+    lg: items
+  });
+  const openOverlayRef = _react.default.useRef(null);
+  const [openSubMenuId, setOpenSubMenuId] = _react.default.useState(null);
+  const handleSubMenuClose = event => {
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        setOpenSubMenuId(null);
+      }
+    } else if (event.type === 'click' && openOverlayRef?.current && event.target && !openOverlayRef?.current?.contains(event.target)) {
+      setOpenSubMenuId(null);
+    } else if (event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
+      setOpenSubMenuId(null);
+    }
+  };
+  const navRefDefault = _react.default.useRef(null);
+  const navRef = ref ?? navRefDefault;
+  const itemsRef = _react.default.useRef(null);
+
+  // Close the submenu when the user clicks outside the navigation bar
+  const handleMouseDown = _react.default.useCallback(event => {
+    if (navRef.current && itemsRef.current) {
+      // Get the bounding rectangles of the navigation bar and the items container
+      const navRect = navRef.current.getBoundingClientRect();
+      const itemsRect = itemsRef.current.getBoundingClientRect();
+
+      // Check if the click was outside the navigation bar and the items container
+      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
+      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
+      if (isOutsideNav && isOutsideItems) {
+        setOpenSubMenuId(null);
+      }
+    }
+  }, [navRef, itemsRef, setOpenSubMenuId]);
+
+  // TODO: create a custom hook for that and use here and in the Footnote
+  _react.default.useEffect(() => {
+    // Add listeners for mouse clicks outside and for key presses
+    document.addEventListener('mousedown', handleMouseDown);
+    if (openSubMenuId !== null) {
+      window.addEventListener('click', handleSubMenuClose);
+      window.addEventListener('keydown', handleSubMenuClose);
+      window.addEventListener('touchstart', handleSubMenuClose);
+    }
+    return () => {
+      // Remove listeners when the component is unmounted
+      document.removeEventListener('mousedown', handleMouseDown);
+      if (openSubMenuId !== null) {
+        window.removeEventListener('click', handleSubMenuClose);
+        window.removeEventListener('keydown', handleSubMenuClose);
+        window.removeEventListener('touchstart', handleSubMenuClose);
+      }
+    };
+  }, [openSubMenuId, handleMouseDown]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    accessibilityRole: accessibilityRole,
+    direction: direction,
+    ref: navRef,
+    space: 2,
+    tokens: {
+      alignItems: direction === 'column' ? 'flex-start' : 'center',
+      justifyContent: 'flex-end'
+    },
+    ...selectProps(rest),
+    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h5'
+        },
+        heading: headingLevel,
+        children: heading
+      })
+    }), itemsForViewport?.map((_ref6, index) => {
+      let {
+        href,
+        label,
+        id,
+        onClick,
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps,
+        items: nestedItems,
+        ...itemRest
+      } = _ref6;
+      const itemId = id ?? label;
+      const handleClick = event => {
+        if (nestedItems) {
+          setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
+          return;
+        }
+        if (href?.startsWith('#')) {
+          (0, _utils.scrollToAnchor)(href, event, () => setValue(itemId, event));
+        } else {
+          setValue(itemId, event);
+        }
+        onClick?.(event);
+      };
+      const ItemComponent = nestedItems ? _NavigationSubMenu.default : _NavigationItem.default;
+      const isOpen = itemId === openSubMenuId;
+      const scrollableNestedItems = nestedItems?.map(item => ({
+        ...item,
+        onPress: event => {
+          const nestedItemId = item.id ?? item.label;
+          (0, _utils.scrollToAnchor)(item.href, event, () => setValue(nestedItemId, event));
+        }
+      })) ?? nestedItems;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
+        ref: itemRef,
+        href: href,
+        onClick: handleClick
+        // TODO: refactor to pass selected ID via context
+        ,
+        selectedId: currentValue,
+        index: index,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: {
+          ...linkRouterProps,
+          ...itemLinkRouterProps
+        },
+        items: scrollableNestedItems,
+        selected: itemId === currentValue,
+        itemsContainerRef: itemsRef,
+        ...itemRest,
+        ...(scrollableNestedItems && {
+          isOpen
+        }),
+        ...(scrollableNestedItems && isOpen && {
+          openOverlayRef
+        }),
+        children: label
+      }, itemId);
+    })]
+  });
+});
+NavigationBar.displayName = 'NavigationBar';
+NavigationBar.propTypes = {
+  ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+  /**
+   * NavigationBar pages
+   *
+   * Each `item` object must contain:
+   *  - `heading` - user-facing text in the tab link
+   *  - `href` - the URL of the page linked to.
+   *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string,
+    id: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    selected: _propTypes.default.bool,
+    LinkRouter: _componentsBase.withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: _componentsBase.withLinkRouter.propTypes?.linkRouterProps,
+    // One layer of nested links is allowed
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      label: _propTypes.default.string.isRequired,
+      href: _propTypes.default.string,
+      id: _propTypes.default.string.isRequired,
+      onClick: _propTypes.default.func,
+      selected: _propTypes.default.bool,
+      LinkRouter: _componentsBase.withLinkRouter.propTypes?.LinkRouter,
+      linkRouterProps: _componentsBase.withLinkRouter.propTypes?.linkRouterProps
+    }))
+  })).isRequired,
+  /**
+   * Common navigation bar heading.
+   */
+  heading: _propTypes.default.string,
+  /**
+   * Sets the `headingLevel` of the `heading`
+   */
+  headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  /**
+   * Initial selected item ID
+   */
+  selectedId: _propTypes.default.string,
+  /**
+   * Optional function to be called on pressing a link
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * Controlled value for selected item ID
+   */
+  value: _propTypes.default.string,
+  /**
+   * Accesibility role for stackview
+   */
+  accessibilityRole: _propTypes.default.string
+};
+var _default = exports.default = NavigationBar;