diff --git a/packages/orbit-components/src/NavigationBar/README.md b/packages/orbit-components/src/NavigationBar/README.md index f846d82906..af1b089fd5 100644 --- a/packages/orbit-components/src/NavigationBar/README.md +++ b/packages/orbit-components/src/NavigationBar/README.md @@ -24,12 +24,13 @@ After adding import into your project you can use it simply like: Table below contains all types of the props available in the NavigationBar component. -| Name | Type | Default | Description | -| :----------- | :---------------------- | :------ | :---------------------------------------------------------------------------------------------------- | -| **children** | `React.Node` | | The content of the NavigationBar. | -| dataTest | `string` | | Optional prop for testing purposes. | -| id | `string` | | Set `id` for `NavigationBar` | -| onMenuOpen | `() => void \| Promise` | | Function for handling onClick event on HamburgerMenu icon. If `null`, the HamburgerMenu won't appear. | -| onHide | `() => void \| Promise` | | Function for handling event when the NavigationBar disappears. | -| onShow | `() => void \| Promise` | | Function for handling event when the NavigationBar appears. | -| hideOnScroll | `boolean` | `true` | Turn on or off hiding navigation bar on scroll | +| Name | Type | Default | Description | +| :----------- | :---------------------- | :----------------------- | :---------------------------------------------------------------------------------------------------- | +| **children** | `React.Node` | | The content of the NavigationBar. | +| dataTest | `string` | | Optional prop for testing purposes. | +| id | `string` | | Set `id` for `NavigationBar` | +| onMenuOpen | `() => void \| Promise` | | Function for handling onClick event on HamburgerMenu icon. If `null`, the HamburgerMenu won't appear. | +| onHide | `() => void \| Promise` | | Function for handling event when the NavigationBar disappears. | +| onShow | `() => void \| Promise` | | Function for handling event when the NavigationBar appears. | +| hideOnScroll | `boolean` | `true` | Turn on or off hiding navigation bar on scroll | +| openTitle | `React.Node` | `"Open navigation menu"` | Property for passing translation string to open Button title | diff --git a/packages/orbit-components/src/NavigationBar/index.js.flow b/packages/orbit-components/src/NavigationBar/index.js.flow index dd4dc6fc04..4f7cf6100e 100644 --- a/packages/orbit-components/src/NavigationBar/index.js.flow +++ b/packages/orbit-components/src/NavigationBar/index.js.flow @@ -8,6 +8,7 @@ export type Props = {| +onShow?: () => void | Promise, +onHide?: () => void | Promise, +hideOnScroll?: boolean, + +openTitle?: React.Node, +children: React.Node, ...Globals, |}; diff --git a/packages/orbit-components/src/NavigationBar/index.tsx b/packages/orbit-components/src/NavigationBar/index.tsx index 45a2020590..84c7bcd548 100644 --- a/packages/orbit-components/src/NavigationBar/index.tsx +++ b/packages/orbit-components/src/NavigationBar/index.tsx @@ -7,7 +7,6 @@ import defaultTheme from "../defaultTheme"; import MenuHamburger from "../icons/MenuHamburger"; import ButtonLink from "../ButtonLink"; import useStateWithCallback from "../hooks/useStateWithCallback"; -import useTranslate from "../hooks/useTranslate"; import mq from "../utils/mediaQuery"; import type { Props } from "./types"; @@ -57,12 +56,12 @@ const NavigationBar = ({ onMenuOpen, children, dataTest, + openTitle = "Open navigation menu", id, onShow, onHide, hideOnScroll = true, }: Props) => { - const translate = useTranslate(); const resolveCallback = React.useCallback( state => { if (onHide && !state) onHide(); @@ -109,7 +108,7 @@ const NavigationBar = ({ type="secondary" onClick={onMenuOpen} iconLeft={} - title={translate("navigationbar_open_menu")} + title={openTitle} /> )} diff --git a/packages/orbit-components/src/NavigationBar/types.d.ts b/packages/orbit-components/src/NavigationBar/types.d.ts index 1adbfed5c8..01bc60ce36 100644 --- a/packages/orbit-components/src/NavigationBar/types.d.ts +++ b/packages/orbit-components/src/NavigationBar/types.d.ts @@ -9,5 +9,6 @@ export interface Props extends Common.Globals { readonly onShow?: Common.Callback; readonly onHide?: Common.Callback; readonly children: React.ReactNode; + readonly openTitle?: React.ReactNode; readonly hideOnScroll?: boolean; }