[Site]: updated color examples

epam · Dec 27, 2024 · f0a5180 · f0a5180
1 parent 6fbe830
commit f0a5180
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 32 deletions.
diff --git a/app/src/docs/Badge.doc.tsx b/app/src/docs/Badge.doc.tsx
@@ -113,7 +113,7 @@ export class BadgeDoc extends BaseDocsBlock {
                 <EditableDocContent fileName="badge-descriptions" />
                 {this.renderSectionTitle('Overview')}
                 <DocExample title="Types" path="./_examples/badge/Types.example.tsx" />
-                <DocExample title="Color variants" path="./_examples/badge/Colors.example.tsx" />
+                <DocExample config={ this.getConfig() } title="Color variants" path="./_examples/badge/Colors.example.tsx" />
                 <DocExample title="Styles" path="./_examples/badge/Styles.example.tsx" />
                 <DocExample config={ this.getConfig() } title="Sizes" path="./_examples/badge/Size.example.tsx" />
                 {this.renderSectionTitle('Examples')}

diff --git a/app/src/docs/StatusIndicator.doc.tsx b/app/src/docs/StatusIndicator.doc.tsx
@@ -27,7 +27,7 @@ export class StatusIndicatorDoc extends BaseDocsBlock {
                 {this.renderSectionTitle('Examples')}
                 <EditableDocContent fileName="statusIndicator-descriptions" />
                 <DocExample config={ this.getConfig() } title="Sizes example" path="./_examples/statusIndicator/Sizes.example.tsx" />
-                <DocExample title="Fill & Colors example" path="./_examples/statusIndicator/Basic.example.tsx" />
+                <DocExample config={ this.getConfig() } title="Fill & Colors example" path="./_examples/statusIndicator/Basic.example.tsx" />
                 <DocExample title="Uses in Table example" path="./_examples/statusIndicator/WithTable.example.tsx" />
                 <DocExample title="Dropdown example" path="./_examples/statusIndicator/Dropdown.example.tsx" />
             </>

diff --git a/app/src/docs/_examples/badge/Colors.example.tsx b/app/src/docs/_examples/badge/Colors.example.tsx
@@ -1,12 +1,23 @@
 import React from 'react';
-import { Panel, Text, Badge } from '@epam/uui';
+import { Panel, Text, Badge, BadgeProps } from '@epam/uui';
+import { ExampleProps } from '../types';
+import { getAllPropValues } from '../utils';
+
+export default function ColorsExample(props: ExampleProps) {
+    const colors = getAllPropValues('color', false, props) as BadgeProps['color'][];
 
-export default function ColorsExample() {
     return (
-        
+
         <Panel style={ { padding: '12px', flex: '1 1 0' } }>
             <Text fontSize="14">Semantic colors, use for appropriate sense</Text>
             <div style={ { display: 'flex', flexWrap: 'wrap', gap: '12px' } }>
+                { colors.map((color) => (
+                    <Badge
+                        key={ color }
+                        color={ color }
+                        caption={ color.charAt(0).toUpperCase() + color.slice(1) }
+                    />
+                )) }
                 <Badge color="info" fill="solid" caption="Info" />
                 <Badge color="success" fill="solid" caption="Success" />
                 <Badge color="critical" fill="solid" caption="Critical" />

diff --git a/app/src/docs/_examples/statusIndicator/Basic.example.tsx b/app/src/docs/_examples/statusIndicator/Basic.example.tsx
@@ -1,33 +1,38 @@
 import React from 'react';
-import { StatusIndicatorProps, StatusIndicator, Text, FlexRow, FlexCell } from '@epam/uui';
+import { StatusIndicatorProps, StatusIndicator, Text, FlexRow } from '@epam/uui';
+import { ExampleProps } from '../types';
+import { getAllPropValues } from '../utils';
 
-const uuiIndicators: StatusIndicatorProps[] = [
-    { color: 'neutral', caption: 'Neutral' },
-    { color: 'info', caption: 'Info' },
-    { color: 'success', caption: 'Success' },
-    { color: 'warning', caption: 'Warning' },
-    { color: 'critical', caption: 'Critical' },
-];
+export default function BasicStatusIndicatorExample(props: ExampleProps) {
+    const colors = getAllPropValues('color', false, props) as StatusIndicatorProps['color'][];
 
-export default function BasicStatusIndicatorExample() {
     return (
-        <>
-            <FlexCell width={ 80 }>
-                <FlexRow>
-                    <Text>Fill solid:</Text>
-                </FlexRow>
-                <FlexRow>
-                    <Text>Fill outline:</Text>
-                </FlexRow>
-            </FlexCell>
-            <FlexCell width="auto">
-                <FlexRow columnGap="12" alignItems="center">
-                    { uuiIndicators.map((item) => <StatusIndicator caption={ item.caption } key={ item.color } color={ item.color } />) }
-                </FlexRow>
-                <FlexRow columnGap="12" alignItems="center">
-                    { uuiIndicators.map((item) => <StatusIndicator caption={ item.caption } key={ item.color } color={ item.color } fill="outline" />) }
-                </FlexRow>
-            </FlexCell>
-        </>
+        <div style={ { overflow: 'hidden' } }>
+            <FlexRow>
+                <Text>Fill solid:</Text>
+            </FlexRow>
+            <FlexRow rawProps={ { style: { flexWrap: 'wrap' } } } columnGap="12" rowGap="12" alignItems="center">
+                { colors.map((color) => (
+                    <StatusIndicator
+                        key={ color }
+                        color={ color }
+                        caption={ color.charAt(0).toUpperCase() + color.slice(1) }
+                    />
+                )) }
+            </FlexRow>
+            <FlexRow>
+                <Text>Fill outline:</Text>
+            </FlexRow>
+            <FlexRow rawProps={ { style: { flexWrap: 'wrap' } } } columnGap="12" rowGap="12" alignItems="center">
+                { colors.map((color) => (
+                    <StatusIndicator
+                        key={ color }
+                        color={ color }
+                        caption={ color.charAt(0).toUpperCase() + color.slice(1) }
+                        fill="outline"
+                    />
+                )) }
+            </FlexRow>
+        </div>
     );
 }