@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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

@@ -0,0 +1,450 @@
+Hide
+====
+
+Overview
+--------
+
+`IressHide` makes it easier for designers and developers to create adaptive designs that work for all screen sizes.
+
+* * *
+
+Caution
+
+**Use srOnly and hide props instead**
+
+The design of this component is changing. Please use the new component/props instead.
+
+[](./iframe.html?id=components-hide--default)
+
+Content to hide
+
+```
+
+<IressHide
+  hiddenOn\={{
+    lg: false,
+    xs: true
+  }}
+\>
+  Content to hide
+</IressHide\>
+
+```
+
+Props
+-----
+
+| 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
+
+
+
+ | \- | 
+
+RAW
+
+hiddenOn :
+
+{
+
+*   xs : true
+*   lg : false
+
+}
+
+
+
+
+
+
+
+ |
+| visuallyHidden | 
+
+If true, the content will not be visible, but will be available to screen readers
+
+boolean
+
+
+
+ | \- | 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.
+
+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:
+
+[](./iframe.html?id=components-hide--breakpoint-table)
+
+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) |
+
+```
+
+{
+  render: () \=> <IressTable caption\="Hide breakpoints" rows\={BREAKPOINTS.map(breakpoint \=> ({
+    breakpoint: <code\>{breakpoint}</code\>,
+    screenWidths: <span\>
+            Above {BREAKPOINT\_DETAILS\[breakpoint\].minScreenWidth} (inclusive)          </span\>
+  }))} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | \- |
+
+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:
+
+<IressHide hiddenOn\={{ md: true }} />
+
+```
+
+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:
+
+<IressHide hiddenOn\={{ md: true, xl: false }} />
+
+```
+
+Examples
+--------
+
+### Hidden on
+
+Here are a few variations of the `hiddenOn` prop in action.
+
+[](./iframe.html?id=components-hide--hidden-on)
+
+**xl** breakpoint (1200px - 1499px)
+
+* * *
+
+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.
+
+```
+
+<IressStack gap\="spacing.100"\>
+  <IressPanel\>
+    <kn />
+  </IressPanel\>
+  <IressDivider />
+  <IressHide
+    hiddenOn\={{
+      xs: true
+    }}
+  \>
+    <IressText\>
+      This text is totally  hidden on xs screens and above.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      md: true
+    }}
+  \>
+    <IressText color\="colour.system.success.text"\>
+      This text is totally  hidden on md screens and above.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      lg: false,
+      xs: true
+    }}
+  \>
+    <IressText color\="colour.system.danger.text"\>
+      This text is totally  hidden on md screens and below.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      sm: false,
+      xs: true
+    }}
+  \>
+    <IressText color\="colour.system.info.text"\>
+      This text is totally  hidden on xs screens only.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      xl: true,
+      xxl: false
+    }}
+  \>
+    <IressText color\="colour.neutral.70"\>
+      This text is totally  hidden on xl screens only.    </IressText\>
+  </IressHide\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | 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)
+
+**xl** breakpoint (1200px - 1499px)
+
+* * *
+
+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.
+
+```
+
+<IressStack gap\="spacing.100"\>
+  <IressPanel\>
+    <kn />
+  </IressPanel\>
+  <IressDivider />
+  <IressHide
+    hiddenOn\={{
+      xs: true
+    }}
+    visuallyHidden
+  \>
+    <IressText\>
+      This text is visually  hidden on xs screens and above.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      md: true
+    }}
+    visuallyHidden
+  \>
+    <IressText color\="colour.system.success.text"\>
+      This text is visually  hidden on md screens and above.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      lg: false,
+      xs: true
+    }}
+    visuallyHidden
+  \>
+    <IressText color\="colour.system.danger.text"\>
+      This text is visually  hidden on md screens and below.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      sm: false,
+      xs: true
+    }}
+    visuallyHidden
+  \>
+    <IressText color\="colour.system.info.text"\>
+      This text is visually  hidden on xs screens only.    </IressText\>
+  </IressHide\>
+  <IressHide
+    hiddenOn\={{
+      xl: true,
+      xxl: false
+    }}
+    visuallyHidden
+  \>
+    <IressText color\="colour.neutral.70"\>
+      This text is visually  hidden on xl screens only.    </IressText\>
+  </IressHide\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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.
+
+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:
+
+[](./iframe.html?id=components-hide--utility-breakpoint-table)
+
+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 |
+
+```
+
+{
+  render: () \=> <IressTable caption\="Hide breakpoints" rows\={BREAKPOINTS.map(breakpoint \=> ({
+    totallyHidden: <code\>iress-hidden--{breakpoint}</code\>,
+    visuallyHidden: <code\>iress-sr-only--{breakpoint}</code\>,
+    screenWidths: BREAKPOINT\_DETAILS\[breakpoint\].screenWidthRange
+  }))} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children\* | 
+Content to hide.
+
+ReactNode
+
+
+
+ | \- | \- |
+| 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
+
+
+
+ | \- | \- |
+
+If you use `iress-hidden` or `iress-sr-only` without the breakpoint suffix, it will apply to all screen sizes.