@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-container-docs.md

@@ -0,0 +1,172 @@
+Container
+=========
+
+Overview
+--------
+
+`IressContainer` provides a means to center and horizontally pad your site’s contents.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-container--container)
+
+IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.
+
+Try resizing the screen to see the difference.
+
+Your screen size is showing the container for the **xl** breakpoint.
+
+*   Screen width range: 1200px - 1499px
+*   Max width: 1280px
+
+```
+
+<IressContainer\>
+  <p\>
+    IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.  </p\>
+  <p\>
+    Try resizing the screen to see the difference.  </p\>
+  <IressPanel\>
+    <kn renderLabel\="container" />
+  </IressPanel\>
+</IressContainer\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be contained, usually used with `IressRow` and `IressCol`.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fluid | 
+
+Container stretches to fill the width of the browser window if true.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Behaviour
+---------
+
+The `IressContainer` snaps to fixed max widths at different breakpoints. Those max widths are as follows:
+
+[](./iframe.html?id=components-container--breakpoint-table)
+
+Container breakpoints
+| Breakpoint | Screen Widths | Max Width |
+| --- | --- | --- |
+| xs | 0 - 575px | 100% |
+| sm | 576px - 767px | 100% |
+| md | 768px - 1023px | 100% |
+| lg | 1024px - 1199px | 100% |
+| xl | 1200px - 1499px | 1280px |
+| xxl | 1500px and above | 1280px |
+
+```
+
+{
+  render: () \=> <IressTable caption\="Container breakpoints" rows\={BREAKPOINTS.map(breakpoint \=> ({
+    breakpoint,
+    screenWidths: BREAKPOINT\_DETAILS\[breakpoint\].screenWidthRange,
+    maxWidth: BREAKPOINT\_DETAILS\[breakpoint\].containerMaxWidth
+  }))} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be contained, usually used with `IressRow` and `IressCol`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| fluid | 
+
+Container stretches to fill the width of the browser window if true.
+
+boolean
+
+
+
+ | \- | \- |
+
+Examples
+--------
+
+### Fluid
+
+If you want the `IressContainer` to fill its containing element, you can set the `fluid` prop. Resize the example below to see how the IressContainer is 100% for all screen sizes.
+
+[](./iframe.html?id=components-container--fluid)
+
+IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.
+
+When the `fluid` prop is enabled, the container will span the full width of its containing element. Try resizing the screen to see how the IressContainer is 100% for all screen sizes.
+
+Your screen size is showing the container for the **xl** breakpoint.
+
+*   Screen width range: 1200px - 1499px
+*   Max width: 100%
+
+```
+
+<IressContainer fluid\>
+  <p\>
+    IressContainer improves the scannability and visual hierarchy of a user interface by snapping the layout to fixed max widths at different breakpoints.  </p\>
+  <p\>
+    When the{' '}
+    <code\>
+      fluid    </code\>
+    {' '}prop is enabled, the container will span the full width of its containing element. Try resizing the screen to see how the IressContainer is 100% for all screen sizes.
+  </p\>
+  <IressPanel\>
+    <kn renderLabel\="container-fluid" />
+  </IressPanel\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be contained, usually used with `IressRow` and `IressCol`.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| fluid | 
+
+Container stretches to fill the width of the browser window if true.
+
+boolean
+
+
+
+ | \- | FalseTrue |

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

@@ -0,0 +1,235 @@
+Divider
+=======
+
+Overview
+--------
+
+A divider is a UI element that separates content in lists and layouts.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-divider--horizontal)
+
+* * *
+
+```
+
+<IressDivider />
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| vertical | 
+Change to a vertical divider.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Examples
+--------
+
+### Vertical divider
+
+Use the `vertical` prop to change the divider from horizontal to vertical.
+
+[](./iframe.html?id=components-divider--vertical)
+
+Separate
+
+* * *
+
+this
+
+```
+
+<IressInline
+  gap\="spacing.400"
+  verticalAlign\="middle"
+\>
+  <IressText\>
+    Separate  </IressText\>
+  <IressDivider vertical />
+  <IressText\>
+    this  </IressText\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| vertical | 
+Change to a vertical divider.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Gutter
+
+You can customise the gutter by using the `my` prop. If the divider is vertical, use the `mx` prop instead.
+
+By default, dividers do not have a gutter, allowing them to adapt to `<IressStack>` and `<IressInline>` layouts.
+
+[](./iframe.html?id=components-divider--gutter)
+
+`my="none"`
+-----------
+
+Separate
+
+* * *
+
+this
+
+`my="xs"`
+---------
+
+Separate
+
+* * *
+
+this
+
+`my="sm"`
+---------
+
+Separate
+
+* * *
+
+this
+
+`my="md"`
+---------
+
+Separate
+
+* * *
+
+this
+
+`my="lg"`
+---------
+
+Separate
+
+* * *
+
+this
+
+`my="xl"`
+---------
+
+Separate
+
+* * *
+
+this
+
+```
+
+<IressInline gap\="spacing.400"\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="none"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="none" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="xs"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="xs" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="sm"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="sm" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="md"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="md" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="lg"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="lg" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      <code\>
+        my="xl"      </code\>
+    </IressText\>
+    <IressText\>
+      Separate    </IressText\>
+    <IressDivider my\="xl" />
+    <IressText\>
+      this    </IressText\>
+  </IressPanel\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| gap | 
+\-
+
+ | \- | \- |
+| vertical | 
+
+Change to a vertical divider.
+
+boolean
+
+
+
+ | \- | Set boolean |