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

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

@@ -1,32 +1,88 @@
-[](#hide)Hide
-=============
+Hide
+====
 
 Overview
 --------
 
 `IressHide` makes it easier for designers and developers to create adaptive designs that work for all screen sizes.
 
+[](./iframe.html?id=components-hide--default)
+
 Content to hide
 
-Hide code
+Hide codedrawOpen in CodeSandbox
+
+{
+  args: {
+    children: 'Content to hide',
+    hiddenOn: {
+      xs: true,
+      lg: false
+    }
+  }
+}
 
-\[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\>
+Props
+-----
 
-Copy
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Content to hide"
+
+ |
+| hiddenOn\* | 
+
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | 
+
+Edit JSON
+
+hiddenOn :
+
+{
+
+*   xs : true
+*   lg : false
+
+}
+
+
+
+
+
+
+
+ |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
 
-[](#usage)Usage
----------------
 
-### [](#hiddenon)`hiddenOn`
+
+ | \- | Set boolean |
+
+Usage
+-----
+
+### `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.
 
@@ -42,64 +98,32 @@ Hide breakpoints
 | `xl` | Above 1200px (inclusive) |
 | `xxl` | Above 1500px (inclusive) |
 
-[](#behaviour)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
----------------------
+Examples
+--------
 
-### [](#hidden-on)Hidden on
+### Hidden on
 
 Here are a few variations of the `hiddenOn` prop in action.
 
+[](./iframe.html?id=components-hide--hidden-on)
+
 This text is totally hidden on xs screens and above.
 
 This text is totally hidden on md screens and above.
@@ -110,62 +134,92 @@ This text is totally hidden on xs screens only.
 
 This text is totally hidden on xl screens only.
 
-Hide code
+Hide codedrawOpen in CodeSandbox
+
+{
+  ...Default,
+  argTypes: {
+    ...disableArgTypes(\['children', 'hiddenOn'\])
+  },
+  render: args \=> {
+    const description \= args.visuallyHidden ? 'visually ' : 'totally ';
+    return <IressStack\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true
+      }}\>
+          <IressText\>
+            This text is {description} hidden on xs screens and above.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        md: true
+      }}\>
+          <IressText mode\="success"\>
+            This text is {description} hidden on md screens and above.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true,
+        lg: false
+      }}\>
+          <IressText mode\="danger"\>
+            This text is {description} hidden on md screens and below.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xs: true,
+        sm: false
+      }}\>
+          <IressText mode\="info"\>
+            This text is {description} hidden on xs screens only.          </IressText\>
+        </IressHide\>
+        <IressHide {...args} hiddenOn\={{
+        xl: true,
+        xxl: false
+      }}\>
+          <IressText mode\="muted"\>
+            This text is {description} hidden on xl screens only.          </IressText\>
+        </IressHide\>
+      </IressStack\>;
+  }
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
 
-\[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
+ | \- | \- |
+| hiddenOn\* | 
 
-### [](#visually-hidden)Visually hidden
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | \- |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### 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.
 
+[](./iframe.html?id=components-hide--visually-hidden)
+
 This text is visually hidden on xs screens and above.
 
 This text is visually hidden on md screens and above.
@@ -176,9 +230,7 @@ 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; }
+Hide codedrawOpen in CodeSandbox
 
 <IressStack\>
   <IressHide
@@ -231,10 +283,41 @@ Hide code
   </IressHide\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
 
-[](#utility-classes)Utility classes
------------------------------------
+
+
+ | \- | \- |
+| hiddenOn\* | 
+
+Content will be hidden on any screen sizes that are set to true.
+
+ResponsiveSizing
+
+
+
+ | \- | \- |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+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.
 
@@ -251,15 +334,3 @@ Hide breakpoints
 | `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)