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

package/generated/docs/components-hide-docs.md

@@ -1,265 +0,0 @@
-[](#hide)Hide
-=============
-
-Overview
---------
-
-`IressHide` makes it easier for designers and developers to create adaptive designs that work for all screen sizes.
-
-Content to hide
-
-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; }
-
-<IressHide
-  hiddenOn\={{
-    lg: false,
-    xs: true
-  }}
-\>
-  Content to hide
-</IressHide\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#hiddenon)`hiddenOn`
-
-The `hiddenOn` prop accepts a `ResponsiveSizing<boolean>` object, which is an object that uses a breakpoint as a key, and a boolean as a value.
-
-It determines which screen sizes the component's children will be hidden on. It's set up as an object containing the following IDS breakpoints:
-
-Hide breakpoints
-| Breakpoint | Screen Widths |
-| --- | --- |
-| `xs` | Above 0px (inclusive) |
-| `sm` | Above 576px (inclusive) |
-| `md` | Above 768px (inclusive) |
-| `lg` | Above 1024px (inclusive) |
-| `xl` | Above 1200px (inclusive) |
-| `xxl` | Above 1500px (inclusive) |
-
-[](#behaviour)Behaviour
------------------------
-
-If the breakpoint in the `hiddenOn` prop is set to true, the content will be hidden for both sighted users and screen reader users. If the value is false, or the breakpoint is omitted, the content will be visible.
-
-You don't need to include every breakpoint, just the ones where you want content to become hidden. If you want to hide content on medium screens and above, you can set `hiddenOn` like this:
-
-\[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;
-}
-
-<IressHide hiddenOn\={{ md: true }} />
-
-Copy
-
-If you want to hide content only on certain screen sizes, you'll need to specify which screen size the content should become visible again on. To set content to be hidden on medium screens, and visible on extra large screens and above, you can do the following:
-
-\[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;
-}
-
-<IressHide hiddenOn\={{ md: true, xl: false }} />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#hidden-on)Hidden on
-
-Here are a few variations of the `hiddenOn` prop in action.
-
-This text is totally hidden on xs screens and above.
-
-This text is totally hidden on md screens and above.
-
-This text is totally hidden on md screens and below.
-
-This text is totally hidden on xs screens only.
-
-This text is totally hidden on xl screens only.
-
-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; }
-
-<IressStack\>
-  <IressHide
-    hiddenOn\={{
-      xs: true
-    }}
-  \>
-    <IressText\>
-      This text is totally  hidden on xs screens and above.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      md: true
-    }}
-  \>
-    <IressText mode\="success"\>
-      This text is totally  hidden on md screens and above.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      lg: false,
-      xs: true
-    }}
-  \>
-    <IressText mode\="danger"\>
-      This text is totally  hidden on md screens and below.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      sm: false,
-      xs: true
-    }}
-  \>
-    <IressText mode\="info"\>
-      This text is totally  hidden on xs screens only.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      xl: true,
-      xxl: false
-    }}
-  \>
-    <IressText mode\="muted"\>
-      This text is totally  hidden on xl screens only.    </IressText\>
-  </IressHide\>
-</IressStack\>
-
-Copy
-
-### [](#visually-hidden)Visually hidden
-
-This `visuallyHidden` prop is used if you don't want content to be visible on screen, but you do want it to be available to screen reader users.
-
-This text is visually hidden on xs screens and above.
-
-This text is visually hidden on md screens and above.
-
-This text is visually hidden on md screens and below.
-
-This text is visually hidden on xs screens only.
-
-This text is visually hidden on xl screens only.
-
-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; }
-
-<IressStack\>
-  <IressHide
-    hiddenOn\={{
-      xs: true
-    }}
-    visuallyHidden
-  \>
-    <IressText\>
-      This text is visually  hidden on xs screens and above.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      md: true
-    }}
-    visuallyHidden
-  \>
-    <IressText mode\="success"\>
-      This text is visually  hidden on md screens and above.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      lg: false,
-      xs: true
-    }}
-    visuallyHidden
-  \>
-    <IressText mode\="danger"\>
-      This text is visually  hidden on md screens and below.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      sm: false,
-      xs: true
-    }}
-    visuallyHidden
-  \>
-    <IressText mode\="info"\>
-      This text is visually  hidden on xs screens only.    </IressText\>
-  </IressHide\>
-  <IressHide
-    hiddenOn\={{
-      xl: true,
-      xxl: false
-    }}
-    visuallyHidden
-  \>
-    <IressText mode\="muted"\>
-      This text is visually  hidden on xl screens only.    </IressText\>
-  </IressHide\>
-</IressStack\>
-
-Copy
-
-[](#utility-classes)Utility classes
------------------------------------
-
-To make it easier for developers to hide content, we've exposed the classes we use for the hide component as part of our global styles.
-
-This means you can use them without having to use the Hide component. Unlike the Hide component, the utility classes only apply to a single breakpoint:
-
-Hide breakpoints
-| Totally Hidden | Visually Hidden | Screen Widths |
-| --- | --- | --- |
-| `iress-hidden--xs` | `iress-sr-only--xs` | 0 - 575px |
-| `iress-hidden--sm` | `iress-sr-only--sm` | 576px - 767px |
-| `iress-hidden--md` | `iress-sr-only--md` | 768px - 1023px |
-| `iress-hidden--lg` | `iress-sr-only--lg` | 1024px - 1199px |
-| `iress-hidden--xl` | `iress-sr-only--xl` | 1200px - 1499px |
-| `iress-hidden--xxl` | `iress-sr-only--xxl` | 1500px and above |
-
-If you use `iress-hidden` or `iress-sr-only` without the breakpoint suffix, it will apply to all screen sizes.
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [hiddenOn](#hiddenon)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Hidden on](#hidden-on)
-    *   [Visually hidden](#visually-hidden)
-*   [Utility classes](#utility-classes)