@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

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

@@ -1,346 +0,0 @@
-[](#slider)Slider
-=================
-
-Overview
---------
-
-Sliders provide a visual indication of adjustable content, where the user can select a value from a range usually represented on a horizontal track.
-
-0
-
-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; }
-
-<IressSlider />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#default-value)Default value
-
-You can set the initial value of the slider using the `defaultValue` prop. If you would like to use a controlled slider, use the `value` prop and sync it with your state using `onChange`.
-
-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; }
-
-<IressSlider defaultValue\={3} />
-
-Copy
-
-### [](#min-max-and-step)Min, max and step
-
-To change the selectable values of the default slider you can change the `min`, `max` and `step` properties.
-
-For instance, if you set `min` to 10 and `max` to 100 the user is able to select any number between 10 and 100.
-
-By setting the `step` property to 10, for example, the user will only be able to select numbers in increments of ten i.e. 10, 20, 30, 40, 50, 60, 70, 80, 90, 100; as shown in the below example.
-
-10
-
-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; }
-
-<IressSlider
-  max\={100}
-  min\={10}
-  step\={10}
-/>
-
-Copy
-
-### [](#ticks-and-labels)Ticks and labels
-
-It is also possible to include ticks and labels for selectable values. This can be done by using the `tickLabels` property and providing an array of numbers and/or `TickLabel` objects.
-
-The `TickLabel` object takes value/label pairs. The value is required, however, an optional label property can be provided. If the label property is not specified, slider will display the value for the label.
-
-If you provide an array of `TickLabel` objects, the value tooltip (the one that appears above the slider's thumb) will use the label from its matching value.
-
-The `tickLabels` prop can also be set to true, in which case they will automatically be inferred from `min`, `max` and `step`.
-
-Zero
-
-Zero
-
-20
-
-40
-
-60
-
-80
-
-100
-
-120
-
-140
-
-160
-
-180
-
-All
-
-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; }
-
-<IressSlider
-  max\={200}
-  min\={0}
-  step\={20}
-  tickLabels\={\[
-    {
-      label: 'Zero',
-      value: 0
-    },
-    {
-      value: 20
-    },
-    {
-      value: 40
-    },
-    {
-      value: 60
-    },
-    {
-      value: 80
-    },
-    {
-      value: 100
-    },
-    {
-      value: 120
-    },
-    {
-      value: 140
-    },
-    {
-      value: 160
-    },
-    {
-      value: 180
-    },
-    {
-      label: 'All',
-      value: 200
-    }
-  \]}
-/>
-
-Copy
-
-### [](#flexible-ticks-and-labels)Flexible ticks and labels
-
-As of version 5, `min`, `max` and `step` is no longer automatically inferred from `tickLabels`, allowing you to have more flexible `tickLabels`.
-
-You can also use the `formatValue` prop to provide a formatted node to replace the value tooltip.
-
-\-10°C
-
-0°C  
-Hypothermia
-
-37°C  
-Normal
-
-45°C  
-Wicked witch  
-of the west
-
-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; }
-
-<IressSlider
-  min\={\-10}
-  max\={50}
-  formatValue\={(value) \=> \`${value}°C\`}
-  tickLabels\={\[
-    { value: 0, label: <\>0°C <br />Hypothermia</\> },
-    { value: 37, label: <\>37°C <br />Normal</\> },
-    { value: 45, label: <\>45°C <br />Wicked witch<br />of the west</\> },
-  \]}
-/>
-
-Copy
-
-### [](#hidden-labels)Hidden labels
-
-Specific labels can be hidden for all or specified breakpoints. This can be done by using the `hiddenOn` property in the `TickLabel` object.
-
-When a label is set to hide on a certain breakpoint, it will be hidden on the screen from that breakpoint onwards. You can reveal it on a larger breakpoint by setting the larger breakpoint to false.
-
-1.  To set the label to hide on all breakpoints you can set the xs property to true: `hiddenOn: { xs: true }`.
-2.  To only show on md and above you can `hiddenOn: { xs: true, md: false }`.
-
-#### [](#behavior-considerations)Behavior considerations
-
-*   The labels will always be available to screen readers to ensure best accessibility, as screen readers are not confined by screen space.
-*   The `ticksAndLabels` prop will still be used to match the `value` of the slider, even if its been set to be hidden on the user's screen.
-
-**xl** breakpoint (1200px - 1499px)
-
-Zero
-
-Zero
-
-20
-
-40
-
-60
-
-80
-
-100
-
-120
-
-140
-
-160
-
-180
-
-All
-
-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 gutter\="md"\>
-  <IressPanel\>
-    <IressText\>
-      <CurrentBreakpoint />
-    </IressText\>
-  </IressPanel\>
-  <IressSlider
-    max\={200}
-    min\={0}
-    step\={20}
-    tickLabels\={\[
-      {
-        label: 'Zero',
-        value: 0
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 20
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 40
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 60
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 80
-      },
-      {
-        value: 100
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 120
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 140
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 160
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 180
-      },
-      {
-        label: 'All',
-        value: 200
-      }
-    \]}
-  />
-</IressStack\>
-
-Copy
-
-### [](#readonly)Readonly
-
-Sliders can be set to read only by using the `readonly` property. When set to read only the slider will render a read only input and display the specified value.
-
-If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
-
-Zero
-
-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; }
-
-<IressSlider
-  max\={200}
-  min\={0}
-  readonly
-  step\={20}
-  tickLabels\={\[
-    {
-      label: 'Zero',
-      value: 0
-    },
-    {
-      label: 'All',
-      value: 200
-    }
-  \]}
-  value\={0}
-/>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Default value](#default-value)
-    *   [Min, max and step](#min-max-and-step)
-    *   [Ticks and labels](#ticks-and-labels)
-    *   [Flexible ticks and labels](#flexible-ticks-and-labels)
-    *   [Hidden labels](#hidden-labels)
-    *   [Readonly](#readonly)

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

@@ -1,59 +0,0 @@
-[](#spinner)Spinner
-===================
-
-Overview
---------
-
-Spinners notify the user that a task is being processed. They indicate that the app is busy, and should be used when the user has to wait for more than a few seconds.
-
-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; }
-
-<IressSpinner screenreaderText\="Making magic happen..." />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#standalone)Standalone
-
-When using the spinner on its own, you can define the `screenreaderText` prop to provide context to screen readers.
-
-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; }
-
-<IressSpinner screenreaderText\="Making magic happen..." />
-
-Copy
-
-### [](#message)Message
-
-You can display a message alongside the spinner. In this case, you do not need to define the `screenreaderText` prop, as you have a visible message to the user telling them what is happening.
-
-Making magic happen...
-
-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; }
-
-<IressInline
-  gutter\="sm"
-  verticalAlign\="middle"
-\>
-  <IressSpinner />
-  <IressText mode\="muted"\>
-    Making magic happen...  </IressText\>
-</IressInline\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Standalone](#standalone)
-    *   [Message](#message)

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

@@ -1,265 +0,0 @@
-[](#stack)Stack
-===============
-
-Overview
---------
-
-Use `IressStack` to control vertical spacing between content with consistent present values.
-
-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 gutter\="md"\>
-  <IressPlaceholder height\="50" />
-  <IressPlaceholder height\="50" />
-  <IressPlaceholder height\="50" />
-  <IressPlaceholder height\="50" />
-  <IressPlaceholder height\="50" />
-</IressStack\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#gutter)Gutter
-
-Vertical spacing is applied to the direct children of the `IressStack` component. The amount of spacing is controlled by the gutter prop which accepts `none`, `xs`, `sm`, `md`, `lg` or `xl`.
-
-none
-----
-
-xs
---
-
-sm
---
-
-md
---
-
-lg
---
-
-xl
---
-
-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 gutter\="xl"\>
-  <IressText\>
-    <h2\>
-      none    </h2\>
-    <IressStack gutter\="none"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      xs    </h2\>
-    <IressStack gutter\="xs"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      sm    </h2\>
-    <IressStack gutter\="sm"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      md    </h2\>
-    <IressStack gutter\="md"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      lg    </h2\>
-    <IressStack gutter\="lg"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-  <IressText\>
-    <h2\>
-      xl    </h2\>
-    <IressStack gutter\="xl"\>
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-      <IressPlaceholder height\="50" />
-    </IressStack\>
-  </IressText\>
-</IressStack\>
-
-Copy
-
-### [](#responsive-gutter)Responsive gutter
-
-The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
-
-Current breakpoint: **xl** breakpoint (1200px - 1499px).
-
-`gutter={{"xs":"xs","sm":"sm","md":"md"}}`
-
-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 gutter\="md"\>
-  <IressPanel\>
-    <p\>
-      Current breakpoint:{' '}
-      <CurrentBreakpoint />
-      .    </p\>
-    <p\>
-      <code\>
-        {\`gutter={{"xs":"xs","sm":"sm","md":"md"}}\`}
-      </code\>
-    </p\>
-  </IressPanel\>
-  <IressStack
-    gutter\={{
-      md: 'md',
-      sm: 'sm',
-      xs: 'xs'
-    }}
-  \>
-    <IressPlaceholder height\="50" />
-    <IressPlaceholder height\="50" />
-    <IressPlaceholder height\="50" />
-    <IressPlaceholder height\="50" />
-    <IressPlaceholder height\="50" />
-  </IressStack\>
-</IressStack\>
-
-Copy
-
-### [](#inline-children)Inline children
-
-The stack component respects the `display` type of it's direct children.
-
-In the example below:
-
-*   `span` will recieve no margin (as it is inline)
-*   `IressButton`s recieve the margin but remain inline-block
-*   `IressPanel`s recieve the margin as they are block elements.
-
-Panel 1 (block)
-
-I am a (inline) span so will get no margin
-
-Panel 2 (block)
-
-Button 1Button 2Button 3
-
-Panel 3 (block)
-
-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 gutter\="md"\>
-  <IressPanel background\="alt"\>
-    Panel 1 (block)  </IressPanel\>
-  <span\>
-    I am a (inline) span so will get no margin  </span\>
-  <IressPanel background\="alt"\>
-    Panel 2 (block)  </IressPanel\>
-  <IressButton\>
-    Button 1  </IressButton\>
-  <IressButton\>
-    Button 2  </IressButton\>
-  <IressButton\>
-    Button 3  </IressButton\>
-  <IressPanel background\="alt"\>
-    Panel 3 (block)  </IressPanel\>
-</IressStack\>
-
-Copy
-
-### [](#lists)Lists
-
-`IressStack` can't be used directly with list items as this would break the list semantics; list items need to be direct children of the list. Instead, you can wrap the list element, and the correct margin will be applied to the list items.
-
-This only works if the list is a direct child of the `IressStack` component. If you want to add margin to the list instead of the list items, you'll need to wrap the list in a `<div>`, as shown in the second example below.
-
-*   List item 1
-*   List item 2
-*   List item 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; }
-
-<IressStack gutter\="md"\>
-  <ul className\="iress-u-text"\>
-    <li\>
-      List item 1    </li\>
-    <li\>
-      List item 2    </li\>
-    <li\>
-      List item 3    </li\>
-  </ul\>
-</IressStack\>
-
-Copy
-
-*   List item 1
-*   List item 2
-*   List item 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; }
-
-<IressStack gutter\="md"\>
-  <IressText\>
-    <ul\>
-      <li\>
-        List item 1      </li\>
-      <li\>
-        List item 2      </li\>
-      <li\>
-        List item 3      </li\>
-    </ul\>
-  </IressText\>
-</IressStack\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Gutter](#gutter)
-    *   [Responsive gutter](#responsive-gutter)
-    *   [Inline children](#inline-children)
-    *   [Lists](#lists)