@iress-oss/ids-mcp-server 0.0.1-dev.0

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

@@ -0,0 +1,868 @@
+[](#inline)Inline
+=================
+
+Overview
+--------
+
+`IressInline` renders a set of components in a row with equal spacing around them, wrapping onto multiple lines when necessary.
+
+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\="md"\>
+  <IressPlaceholder
+    style\={{
+      minHeight: '30px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '50px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '80px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '60px'
+    }}
+    width\="50"
+  />
+  <IressPlaceholder
+    style\={{
+      minHeight: '10px'
+    }}
+    width\="50"
+  />
+</IressInline\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#gutter)Gutter
+
+Inline spacing is applied to the direct children of the `IressInline` component.
+
+The amount of spacing is controlled by the `gutter` prop and can be set to: `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\>
+    <IressInline gutter\="none"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xs    </h2\>
+    <IressInline gutter\="xs"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      sm    </h2\>
+    <IressInline gutter\="sm"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      md    </h2\>
+    <IressInline gutter\="md"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      lg    </h2\>
+    <IressInline gutter\="lg"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </IressText\>
+  <IressText\>
+    <h2\>
+      xl    </h2\>
+    <IressInline gutter\="xl"\>
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+      <IressPlaceholder
+        style\={{
+          minHeight: '50px'
+        }}
+        width\="50"
+      />
+    </IressInline\>
+  </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\>
+  <IressInline
+    gutter\={{
+      md: 'md',
+      sm: 'sm',
+      xs: 'xs'
+    }}
+  \>
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+    <IressPlaceholder
+      style\={{
+        minHeight: '50px'
+      }}
+      width\="50"
+    />
+  </IressInline\>
+</IressStack\>
+
+Copy
+
+### [](#horizontal-align)Horizontal align
+
+Horizontal alignment of the children is controlled by the `horizontalAlign` prop. It defaults to left and can be set to the following:
+
+*   `around` - space is distributed so each direct child has the same space on the left and on the right. This means that the gap between children is twice as large as the gap between the first / last items and the edges of the container, because the gap between children is comprised one child's spacing right plus the next child's spacing left.
+*   `between` - space is distributed evenly between direct children, but the first and last children sit tight to the edges of the container.
+*   `center` - children are aligned center, similar to `text-align: center`.
+*   `evenly` - space is distributed evenly between direct children.
+*   `left` - children are aligned left, similar to `text-align: left`.
+*   `right` - children are aligned right, similar to `text-align: right`.
+
+around
+------
+
+between
+-------
+
+center
+------
+
+evenly
+------
+
+left
+----
+
+right
+-----
+
+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; }
+
+<IressContainer\>
+  <IressStack gutter\="xl"\>
+    <IressText\>
+      <h2\>
+        around      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="around"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        between      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="between"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        center      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="center"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        evenly      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="evenly"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        left      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="left"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText\>
+      <h2\>
+        right      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="right"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+  </IressStack\>
+</IressContainer\>
+
+Copy
+
+### [](#vertical-align)Vertical align
+
+Vertical alignment of the children is controlled by the `verticalAlign` prop. It defaults to top and can be set to the following:
+
+*   `bottom` - children are aligned to the bottom of the container.
+*   `middle` - children are aligned to the middle of the container.
+*   `stretch` - each direct child stretches to the full height of the inline container.
+*   `top` - children are aligned to the top of the container.
+
+top
+---
+
+middle
+------
+
+bottom
+------
+
+stretch
+-------
+
+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; }
+
+<IressContainer\>
+  <IressStack gutter\="xl"\>
+    <IressText align\="center"\>
+      <h2\>
+        top      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="center"
+        verticalAlign\="top"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText align\="center"\>
+      <h2\>
+        middle      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="center"
+        verticalAlign\="middle"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText align\="center"\>
+      <h2\>
+        bottom      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="center"
+        verticalAlign\="bottom"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+    <IressText align\="center"\>
+      <h2\>
+        stretch      </h2\>
+      <IressInline
+        gutter\="sm"
+        horizontalAlign\="center"
+        verticalAlign\="stretch"
+      \>
+        <IressPlaceholder
+          style\={{
+            minHeight: '30px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '50px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '80px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '60px'
+          }}
+          width\="50"
+        />
+        <IressPlaceholder
+          style\={{
+            minHeight: '10px'
+          }}
+          width\="50"
+        />
+      </IressInline\>
+    </IressText\>
+  </IressStack\>
+</IressContainer\>
+
+Copy
+
+### [](#no-wrap)No wrap
+
+The `IressInline` component automatically wraps children. There may be some scenarios where you do not require children to be wrapped. For this you can use the `noWrap` prop.
+
+His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
+
+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\="lg"
+  noWrap
+\>
+  <IressPlaceholder
+    height\="100px"
+    style\={{
+      minWidth: '100px'
+    }}
+    width\="100px"
+  />
+  <IressText\>
+    His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.  </IressText\>
+</IressInline\>
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Gutter](#gutter)
+    *   [Responsive gutter](#responsive-gutter)
+    *   [Horizontal align](#horizontal-align)
+    *   [Vertical align](#vertical-align)
+    *   [No wrap](#no-wrap)