@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/accentBar.md

@@ -0,0 +1,582 @@
+# AccentBar
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/accentBar
+*Captured:* 2025-12-12T12:38:50.323Z
+
+The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.
+
+## AccentBar
+
+Use it to indicate status or priority in a table, as a category marker in list-based layouts where items belong to different groups, or to subtly enhance visual hierarchy in a UI without overwhelming the content. Additionally, it can be used to describe values in a chart, acting as a color-coded reference for data representation.
+
+### Example: Example 1
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+
+#### React (tsx)
+
+```tsx
+import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
+import Card from '@rio-cloud/rio-uikit/Card';
+import { dummyTextShort } from '../../../utils/data';
+
+export default () => (
+    <div className='display-flex flex-column gap-15 max-width-400'>
+        <Card>
+            <AccentBar>Lorem ipsum dolor sit amet</AccentBar>
+        </Card>
+        <Card>
+            <AccentBar color='bg-info'>Lorem ipsum dolor sit amet</AccentBar>
+        </Card>
+        <Card>
+            <AccentBar color='bg-warning'>{dummyTextShort}</AccentBar>
+        </Card>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column gap-15 max-width-400">
+    <div class="bg-white rounded border shadow-default padding-15">
+        <div class="display-flex align-items-stretch">
+            <div class="AccentBar bg-secondary">
+            </div>Lorem ipsum dolor sit amet
+        </div>
+    </div>
+    <div class="bg-white rounded border shadow-default padding-15">
+        <div class="display-flex align-items-stretch">
+            <div class="AccentBar bg-info">
+            </div>Lorem ipsum dolor sit amet
+        </div>
+    </div>
+    <div class="bg-white rounded border shadow-default padding-15">
+        <div class="display-flex align-items-stretch">
+            <div class="AccentBar bg-warning">
+            </div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
+### Example: Example 2
+
+StatusLocationETA
+
+In transit
+Hamburg, DE2024-02-02
+
+Delivered
+Rotterdam, NL2024-01-29
+
+Awaiting pickup
+Warsaw, PL2024-02-05
+
+Customs clearance
+Antwerp, BE2024-02-03
+
+#### Summary
+
+StatusLocationETA
+
+In transit
+Hamburg, DE2024-02-02
+
+Delivered
+Rotterdam, NL2024-01-29
+
+Awaiting pickup
+Warsaw, PL2024-02-05
+
+Customs clearance
+Antwerp, BE2024-02-03
+
+#### React (tsx)
+
+```tsx
+import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
+
+const data = [
+    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
+    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
+    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
+    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
+];
+
+export default () => {
+    return (
+        <div className='table-responsive'>
+            <table className='table'>
+                <thead>
+                    <tr>
+                        <th>Status</th>
+                        <th>Location</th>
+                        <th>ETA</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {data.map(row => (
+                        <tr key={row.id}>
+                            <td>
+                                <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>
+                            </td>
+                            <td>{row.location}</td>
+                            <td>{row.eta}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case 'In transit':
+            return 'bg-warning';
+        case 'Delivered':
+            return 'bg-success';
+        case 'Awaiting pickup':
+            return 'bg-info';
+        case 'Customs clearance':
+            return 'bg-danger';
+        default:
+            return 'bg-primary';
+    }
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="table-responsive">
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Status</th>
+                <th>Location</th>
+                <th>ETA</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-stretch">
+                        <div class="AccentBar bg-warning">
+                        </div>In transit
+                    </div>
+                </td>
+                <td>Hamburg, DE</td>
+                <td>2024-02-02</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-stretch">
+                        <div class="AccentBar bg-success">
+                        </div>Delivered
+                    </div>
+                </td>
+                <td>Rotterdam, NL</td>
+                <td>2024-01-29</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-stretch">
+                        <div class="AccentBar bg-info">
+                        </div>Awaiting pickup
+                    </div>
+                </td>
+                <td>Warsaw, PL</td>
+                <td>2024-02-05</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-stretch">
+                        <div class="AccentBar bg-danger">
+                        </div>Customs clearance
+                    </div>
+                </td>
+                <td>Antwerp, BE</td>
+                <td>2024-02-03</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
+### Example: Example 3
+
+Visualizing rating distribution
+
+CategoryPercentage
+
+Poor15%
+
+Below Average20%
+
+Average25%
+
+Good15%
+
+Excellent25%
+
+#### Summary
+
+Visualizing rating distribution
+
+CategoryPercentage
+
+Poor15%
+
+Below Average20%
+
+Average25%
+
+Good15%
+
+Excellent25%
+
+#### React (tsx)
+
+```tsx
+import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
+import Card from '@rio-cloud/rio-uikit/Card';
+
+const data = [
+    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
+    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
+    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
+    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
+];
+
+export default () => {
+    return (
+        <Card className='max-width-500 padding-25'>
+            <div className='text-size-h5 text-medium text-color darker margin-bottom-25'>
+                Visualizing rating distribution
+            </div>
+            <div className='margin-bottom-25'>
+                <div className='progress'>
+                    <div className='progress-bar bg-rating-1 progress-divider' style={{ width: '15%' }} />
+                    <div className='progress-bar bg-rating-2 progress-divider' style={{ width: '20%' }} />
+                    <div className='progress-bar bg-rating-3 progress-divider' style={{ width: '25%' }} />
+                    <div className='progress-bar bg-rating-4 progress-divider' style={{ width: '15%' }} />
+                    <div className='progress-bar bg-rating-5 progress-divider' style={{ width: '25%' }} />
+                </div>
+            </div>
+
+            <table className='table table-compact'>
+                <thead>
+                    <tr>
+                        <th className='width-10' />
+                        <th>Category</th>
+                        <th>Percentage</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td className='align-center width-5 padding-right-0'>
+                            <AccentBar color='bg-rating-1' />
+                        </td>
+                        <td>Poor</td>
+                        <td>15%</td>
+                    </tr>
+                    <tr>
+                        <td className='align-center width-5 padding-right-0'>
+                            <AccentBar color='bg-rating-2' />
+                        </td>
+                        <td>Below Average</td>
+                        <td>20%</td>
+                    </tr>
+                    <tr>
+                        <td className='align-center width-5 padding-right-0'>
+                            <AccentBar color='bg-rating-3' />
+                        </td>
+                        <td>Average</td>
+                        <td>25%</td>
+                    </tr>
+                    <tr>
+                        <td className='align-center width-5 padding-right-0'>
+                            <AccentBar color='bg-rating-4' />
+                        </td>
+                        <td>Good</td>
+                        <td>15%</td>
+                    </tr>
+                    <tr>
+                        <td className='align-center width-5 padding-right-0'>
+                            <AccentBar color='bg-rating-5' />
+                        </td>
+                        <td>Excellent</td>
+                        <td>25%</td>
+                    </tr>
+                </tbody>
+            </table>
+        </Card>
+    );
+};
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case 'In transit':
+            return 'bg-warning';
+        case 'Delivered':
+            return 'bg-success';
+        case 'Awaiting pickup':
+            return 'bg-info';
+        case 'Customs clearance':
+            return 'bg-danger';
+        default:
+            return 'bg-primary';
+    }
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="bg-white rounded border shadow-default padding-15 max-width-500 padding-25">
+    <div class="text-size-h5 text-medium text-color darker margin-bottom-25">Visualizing rating distribution</div>
+    <div class="margin-bottom-25">
+        <div class="progress">
+            <div class="progress-bar bg-rating-1 progress-divider" style="width: 15%;">
+            </div>
+            <div class="progress-bar bg-rating-2 progress-divider" style="width: 20%;">
+            </div>
+            <div class="progress-bar bg-rating-3 progress-divider" style="width: 25%;">
+            </div>
+            <div class="progress-bar bg-rating-4 progress-divider" style="width: 15%;">
+            </div>
+            <div class="progress-bar bg-rating-5 progress-divider" style="width: 25%;">
+            </div>
+        </div>
+    </div>
+    <table class="table table-compact">
+        <thead>
+            <tr>
+                <th class="width-10">
+                </th>
+                <th>Category</th>
+                <th>Percentage</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="align-center width-5 padding-right-0">
+                    <div class="AccentBar bg-rating-1">
+                    </div>
+                </td>
+                <td>Poor</td>
+                <td>15%</td>
+            </tr>
+            <tr>
+                <td class="align-center width-5 padding-right-0">
+                    <div class="AccentBar bg-rating-2">
+                    </div>
+                </td>
+                <td>Below Average</td>
+                <td>20%</td>
+            </tr>
+            <tr>
+                <td class="align-center width-5 padding-right-0">
+                    <div class="AccentBar bg-rating-3">
+                    </div>
+                </td>
+                <td>Average</td>
+                <td>25%</td>
+            </tr>
+            <tr>
+                <td class="align-center width-5 padding-right-0">
+                    <div class="AccentBar bg-rating-4">
+                    </div>
+                </td>
+                <td>Good</td>
+                <td>15%</td>
+            </tr>
+            <tr>
+                <td class="align-center width-5 padding-right-0">
+                    <div class="AccentBar bg-rating-5">
+                    </div>
+                </td>
+                <td>Excellent</td>
+                <td>25%</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |
+
+### Example: Example 4
+
+Risk levelReasonSuggested action
+
+Low risk
+Stable weather conditionsMonitor
+
+High risk
+Labor strike at destinationReroute shipment
+
+Critical risk
+Customs hold & inspectionExpedite clearance
+
+#### Summary
+
+Risk levelReasonSuggested action
+
+Low risk
+Stable weather conditionsMonitor
+
+High risk
+Labor strike at destinationReroute shipment
+
+Critical risk
+Customs hold & inspectionExpedite clearance
+
+#### React (tsx)
+
+```tsx
+import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
+
+const data = [
+    { id: 1, riskLevel: 'Low risk', reason: 'Stable weather conditions', action: 'Monitor' },
+    { id: 3, riskLevel: 'High risk', reason: 'Labor strike at destination', action: 'Reroute shipment' },
+    { id: 4, riskLevel: 'Critical risk', reason: 'Customs hold & inspection', action: 'Expedite clearance' },
+];
+
+export default () => {
+    return (
+        <div className='table-responsive max-width-600'>
+            <table className='table'>
+                <thead>
+                    <tr>
+                        <th>Risk level</th>
+                        <th>Reason</th>
+                        <th>Suggested action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {data.map(row => (
+                        <tr key={row.id}>
+                            <td>
+                                <AccentBar color={getRiskColor(row.riskLevel)} circle>
+                                    {row.riskLevel}
+                                </AccentBar>
+                            </td>
+                            <td>{row.reason}</td>
+                            <td>{row.action}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+const getRiskColor = (riskLevel: string) => {
+    switch (riskLevel) {
+        case 'Low risk':
+            return 'bg-success';
+        case 'High risk':
+            return 'bg-warning';
+        case 'Critical risk':
+            return 'bg-danger';
+        default:
+            return 'bg-secondary';
+    }
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="table-responsive max-width-600">
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Risk level</th>
+                <th>Reason</th>
+                <th>Suggested action</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-center">
+                        <div class="AccentBar AccentBarCircle bg-success">
+                        </div>Low risk
+                    </div>
+                </td>
+                <td>Stable weather conditions</td>
+                <td>Monitor</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-center">
+                        <div class="AccentBar AccentBarCircle bg-warning">
+                        </div>High risk
+                    </div>
+                </td>
+                <td>Labor strike at destination</td>
+                <td>Reroute shipment</td>
+            </tr>
+            <tr>
+                <td>
+                    <div class="display-flex align-items-center">
+                        <div class="AccentBar AccentBarCircle bg-danger">
+                        </div>Critical risk
+                    </div>
+                </td>
+                <td>Customs hold &amp; inspection</td>
+                <td>Expedite clearance</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | bg-secondary | Defines the color by setting it to a UIKIT bg-<name> class name. |
+| circle | boolean | false | Defines if the element is rendered as a stretching bar or just a centered circle. |
+| className | string | — | Additional class names passed to the actual element. |