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

@@ -0,0 +1,755 @@
+Col
+===
+
+Overview
+--------
+
+Used in conjunction with the `IressRow` component to layout page content
+
+* * *
+
+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-col--default)
+
+Column 1
+
+Column 2
+
+```
+
+<IressRow
+  ref\={undefined}
+  gutter\="spacing.400"
+\>
+  <IressCol\>
+    <IressPlaceholder\>
+      Column 1    </IressPlaceholder\>
+  </IressCol\>
+  <IressCol\>
+    <IressPlaceholder\>
+      Column 2    </IressPlaceholder\>
+  </IressCol\>
+</IressRow\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+Examples
+--------
+
+### Auto-sized
+
+When no column widths are specified the `IressCol` component will render equal width columns.
+
+[](./iframe.html?id=components-col--auto-sized)
+
+1 of 2
+
+2 of 2
+
+1 of 3
+
+2 of 3
+
+3 of 3
+
+```
+
+<IressStack
+  ref\={undefined}
+  gap\="spacing.400"
+\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol\>
+      <IressPlaceholder\>
+        1 of 2      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        2 of 2      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol\>
+      <IressPlaceholder\>
+        1 of 3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        2 of 3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        3 of 3      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Span
+
+The `span` prop controls the number of grid columns the component should span.
+
+If no `span` is provided it will default to `auto` which will make the column either fill the remaining space in the row (when used with a col number) or size evenly when used with other columns set to auto sizing.
+
+[](./iframe.html?id=components-col--span)
+
+12
+
+1
+
+11
+
+2
+
+10
+
+3
+
+9
+
+4
+
+8
+
+5
+
+7
+
+6
+
+6
+
+```
+
+<IressStack
+  ref\={undefined}
+  gap\="spacing.400"
+\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="12"\>
+      <IressPlaceholder\>
+        12      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="1"\>
+      <IressPlaceholder\>
+        1      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        11      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="2"\>
+      <IressPlaceholder\>
+        2      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        10      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="3"\>
+      <IressPlaceholder\>
+        3      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        9      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="4"\>
+      <IressPlaceholder\>
+        4      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        8      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="5"\>
+      <IressPlaceholder\>
+        5      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        7      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol span\="6"\>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol\>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Responsive span
+
+The `span` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints. Any missing keys will fall back to the value defined for the next smallest key.
+
+**Note:** If a `span` prop is provided an object but no value is given for `xs` it will default to `12`. This means that columns will be full width on screen sizes below the sizes you've specified.
+
+[](./iframe.html?id=components-col--responsive-span)
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px).
+
+Column 1  
+{"xs":12,"md":3}
+
+Column 2  
+{"xs":12,"md":9}
+
+```
+
+<IressStack
+  ref\={undefined}
+  gap\="spacing.400"
+\>
+  <IressPanel\>
+    Current breakpoint:{' '}
+    <kn />
+    .  </IressPanel\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      span\={{
+        md: 3,
+        xs: 12
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText textAlign\="center"\>
+          Column 1          <br />
+          {\`{"xs":12,"md":3}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol
+      span\={{
+        md: 9,
+        xs: 12
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText textAlign\="center"\>
+          Column 2          <br />
+          {\`{"xs":12,"md":9}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Offset
+
+The `offset` prop controls the amount of grid columns to offset.
+
+[](./iframe.html?id=components-col--offset)
+
+1
+
+2
+
+3
+
+4
+
+5
+
+6
+
+7
+
+8
+
+9
+
+10
+
+11
+
+```
+
+<IressStack
+  ref\={undefined}
+  gap\="spacing.400"
+\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="1"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        1      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="2"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        2      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="3"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        3      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="4"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        4      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="5"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        5      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="6"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        6      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="7"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        7      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="8"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        8      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="9"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        9      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="10"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        10      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\="11"
+      span\="1"
+    \>
+      <IressPlaceholder\>
+        11      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| span | 
+
+Number of columns to span.
+
+ResponsiveProp
+
+
+
+ | \- | 
+
+"1"
+
+ |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Responsive offset
+
+When a `ResponsiveSizing` object is passed into the `offset` prop, the offset will change at the specified breakpoints. It will apply to all breakpoints above the specified breakpoint.
+
+For example, if you specify an offset for `md`, it will apply to `lg`, `xl` and `xxl` as well. If you want to change the offset at a specific breakpoint, you can pass in an object with the breakpoint as the key and the offset as the value.
+
+[](./iframe.html?id=components-col--responsive-offset)
+
+Current breakpoint: **xl** breakpoint (1200px - 1499px).
+
+Column 1  
+{"md":5,"lg":2}
+
+```
+
+<IressStack
+  ref\={undefined}
+  gap\="spacing.400"
+\>
+  <IressPanel\>
+    Current breakpoint:{' '}
+    <kn />
+    .  </IressPanel\>
+  <IressRow gutter\="spacing.400"\>
+    <IressCol
+      offset\={{
+        lg: 2,
+        md: 5
+      }}
+    \>
+      <IressPlaceholder\>
+        <IressText textAlign\="center"\>
+          Column 1          <br />
+          {\`{"md":5,"lg":2}\`}
+        </IressText\>
+      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alignSelf | 
+Individual alignment of column
+
+union
+
+
+
+ | \- | 
+
+startendcenterstretch
+
+ |
+| children | 
+
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| span | 
+
+Number of columns to span.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |
+
+### Align self
+
+The `alignSelf` prop controls the vertical alignment of the column (use if column alignment needs to differ from other columns in the row).
+
+[](./iframe.html?id=components-col--align-self)
+
+Start
+
+Center
+
+End
+
+Stretch
+
+```
+
+<IressContainer ref\={undefined}\>
+  <IressRow
+    gutter\="spacing.400"
+    layerStyle\="elevation.raised"
+    style\={{
+      height: '10rem'
+    }}
+  \>
+    <IressCol alignSelf\="start"\>
+      <IressPlaceholder\>
+        Start      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="center"\>
+      <IressPlaceholder\>
+        Center      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="end"\>
+      <IressPlaceholder\>
+        End      </IressPlaceholder\>
+    </IressCol\>
+    <IressCol alignSelf\="stretch"\>
+      <IressPlaceholder stretch\>
+        Stretch      </IressPlaceholder\>
+    </IressCol\>
+  </IressRow\>
+</IressContainer\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Any content you would like to be contained in a column.
+
+ReactNode
+
+
+
+ | \- | \- |
+| offset | 
+
+Number of columns to offset.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| span | 
+
+Number of columns to span.
+
+ResponsiveProp
+
+
+
+ | \- | Set object |
+| Show Storybook only itemsStorybook only | Show Storybook only items |