@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/{components-navbar-recipes-docs.md → components_components-navbar-recipes-docs.md}

@@ -1,8 +1,8 @@
-[](#recipes)Recipes
-===================
+Recipes
+=======
 
-[](#custom-navbars)Custom navbars
----------------------------------
+Custom navbars
+--------------
 
 At its essence, the navbar component is a coloured panel. This means you can easily create custom navbars by creating your own content structure and passing everything into the `children` slot.
 
@@ -10,10 +10,12 @@ If you're creating a custom navbar, there are a few things to be aware of. First
 
 Secondly, you'll need to make sure your content is accessible; for example using a `nav` element with an `aria-label` when you add navigation links.
 
-### [](#custom-responsive-navbar)Custom responsive navbar
+### Custom responsive navbar
 
 This example uses existing IDS components to create a custom responsive navbar. On smaller screens the main `nav` in the `IressNavbar` is hidden, and a menu button is shown. The menu button triggers a slideout that contains the nav links.
 
+[](./iframe.html?id=components-navbar-recipes--custom-responsive-navbar)
+
 ![Iress logo](assets/ids-logo.png)
 
 Custom navbar
@@ -21,10 +23,22 @@ Custom navbar
 
 [Link 1](#)[Link 2](#)[Link 3](#)
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressHide,
+  IressIcon,
+  IressInline,
+  IressMenu,
+  IressMenuItem,
+  IressNavbar,
+  IressSlideout,
+  IressSlideoutProvider,
+  IressText,
+  useSlideout,
+} from '@/main';
+import { useRef } from 'react';
 const Navbar \= () \=> {
   const { showSlideout } \= useSlideout();
   const containerRef \= useRef<HTMLDivElement | null\>(null);
@@ -79,14 +93,143 @@ export const ResponsiveNavbar \= () \=> (
   </IressSlideoutProvider\>
 );
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
 
-### [](#custom-navbar-with-other-ids-components)Custom navbar with other IDS components
+ | \- | Set object |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Custom navbar with other IDS components
 
 Not all navbars contain navigation links; often they contain global actions or filters. The example below shows a navbar containing a user dropdown, two buttons and a global search field.
 
 Because there are no navigation links, we don't need to add a nav element in this example.
 
+[](./iframe.html?id=components-navbar-recipes--custom-consuming-navbar)
+
 ![Iress logo](assets/ids-logo.png)
 
 Barry George
@@ -97,9 +240,7 @@ Person 1Person 2Person 3
 
 **Input**
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressNavbar horizontalAlign\="between"\>
   <IressInline
@@ -145,7 +286,7 @@ Hide code
         hiddenLabel
         label\="Input"
       \>
-        <IressInput
+        <ForwardedInput
           name\="test-input"
           prepend\={<IressIcon name\="search" />}
         />
@@ -154,28 +295,188 @@ Hide code
   </IressInline\>
 </IressNavbar\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | 
+
+Edit JSON
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ children, className, gutter = "none", horizontalAlign = "left", noWrap = false, verticalAlign = "top", ...restProps }) => { const classMap = { \[\`${InlineCssClass.HorizontalAlign}--${horizontalAlign}\`\]: true, \[InlineCssClass.NoWrap\]: noWrap, \[\`${InlineCssClass.VerticalAlign}--${verticalAlign}\`\]: true }; const cssClasses = classNames( className, InlineCssClass.Base, getResponsiveLayoutModifiers(InlineCssClass.Gutter, gutter, "none"), classMap ); return /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { className: cssClasses, ...restProps, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Inline/Inline.tsx", lineNumber: 33, columnNumber: 5 }, this); }
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
 
-[](#secondary-navigation)Secondary navigation
----------------------------------------------
+
+
+
+
+
+ |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | 
+
+"between"
+
+ |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+Secondary navigation
+--------------------
 
 The Navbar component should only be used for primary navigation.
 
 If your site has secondary navigation, you can use the Menu component. Here are a few examples.
 
-### [](#navbar-combined-with-secondary-navigation)Navbar combined with secondary navigation
+### Navbar combined with secondary navigation
 
 You can use an `IressPanel` component to render the secondary navigation directly below your navbar. Use an `IressMenu` component for the links, and make sure you wrap it in a `nav` element. You'll need to add an `aria-label` to the `nav` element to make sure its purpose is clear to screen reader users.
 
+[](./iframe.html?id=components-navbar-recipes--navbar-with-secondary-navigation)
+
 ![IDS logo](assets/ids-logo.png)
 
 [Link 1](#)[Link 2](#)[Link 3](#)
 
 Secondary link 1Secondary link 2Secondary link 3
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <div\>
   <IressNavbar
@@ -203,18 +504,154 @@ Hide code
   </IressPanel\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
 
-### [](#icon-strips)Icon strips
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Icon strips
 
 You can change your secondary navigation to an icon strip by passing in icons to the `IressMenuItem` component. This can be rendered as a vertical strip (default), or a horizontal strip (by setting the `IressMenu` layout to `inline`).
 
 The example below has some custom CSS to fix the menu to the side of its container. This includes setting `--iress-initial-offset` on the slideout element to ensure the slideout is correctly positioned next to the icon strip.
 
-Hide code
+[](./iframe.html?id=components-navbar-recipes--icon-strip)
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressIcon,
+  IressMenu,
+  IressMenuItem,
+  IressNavbar,
+  IressSlideout,
+  IressTooltip,
+} from '@/main';
+import { useRef, useState } from 'react';
 export const NavbarIconStrip \= () \=> {
   const \[secondary, setSecondary\] \= useState(false);
   const containerRef \= useRef<HTMLDivElement | null\>(null);
@@ -294,12 +731,141 @@ export const NavbarIconStrip \= () \=> {
   );
 };
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
 
-### [](#fixed-navigation)Fixed navigation
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
+
+'Main navigation'
+
+ | Set string |
+
+### Fixed navigation
 
 A common pattern for small screens is to fix navigation links at the bottom of the screen. This can be done by applying some custom CSS to your secondary navigation.
 
+[](./iframe.html?id=components-navbar-recipes--fixed-navigation)
+
 ![IDS logo](assets/ids-logo.png)
 
 [](#)
@@ -338,9 +904,7 @@ Messages
 
 ](#)
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <div className\="mobile-mockup-wrapper"\>
   <IressNavbar
@@ -400,14 +964,131 @@ Hide code
   </IressPanel\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| breakpoint | 
+Sets the breakpoint at which the main nav content is hidden, and replaced by a hamburger menu. If not set, the navbar won't be responsive.
+
+union
+
+
+
+ | \- | Set object |
+| children | 
+
+Content to be rendered inside the navbar (e.g. navigation links).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fixed | 
+
+Fixes the navbar with relation to the viewport if true. If false, the navbar will scroll out of view when the user scrolls.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| handledFocus | 
+
+When navbar is fixed, elements that are obscured by the fixed navbar are scrolled into view when they receive focus.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| homeUrl | 
+
+Sets the url of the home link
+
+string
+
+
+
+ | 
+
+''
+
+ | Set string |
+| horizontalAlign | 
+
+Sets the alignment of the nav; either start (all left-aligned), between (children slot left-aligned and nav slot right-aligned) or end (all right-aligned)
+
+union
+
+
+
+ | \- | Set object |
+| logo | 
+
+Content for the logo slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| logoAltText | 
+
+Adds alt text to the logo's 
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead, and `alt` text to your img.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| logoSrc | 
+
+Sets the source url of the logo
+
+string
+
+<table class="css-ymgjf7"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `logo` instead with the proper `src` attribute.</td></tr></tbody></table>
+
+ | 
+
+''
+
+ | Set string |
+| nav | 
+
+Content for the nav slot.
+
+ReactNode
+
+
+
+ | \- | \- |
+| navLabel | 
+
+The name of the nav element (used by screen reader users). The nav element is wrapped around any content in the Nav slot
+
+string
+
+
+
+ | 
 
-On this page
+'Main navigation'
 
-*   [Custom navbars](#custom-navbars)
-    *   [Custom responsive navbar](#custom-responsive-navbar)
-    *   [Custom navbar with other IDS components](#custom-navbar-with-other-ids-components)
-*   [Secondary navigation](#secondary-navigation)
-    *   [Navbar combined with secondary navigation](#navbar-combined-with-secondary-navigation)
-    *   [Icon strips](#icon-strips)
-    *   [Fixed navigation](#fixed-navigation)
+ | Set string |