@tactics/toddle-styleguide 1.4.13 → 1.4.15

package/src/components/molecules/context-label/context-label.component.tsx

@@ -5,27 +5,35 @@ import {View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './context-label.styles';
 import {Paragraph} from '../../atoms/paragraph-components';
+import {LoadingIndicator} from "../../organisms/loading-indicator/loading-indicator.component";
 
 type ContextLabelProps = {
-  label: string;
+    label: string;
+    isLoading: boolean
 };
 
-const ContextLabel = ({label}: ContextLabelProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+const ContextLabel = ({label, isLoading}: ContextLabelProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context);
 
-  return (
-    <View style={styles.container}>
-      <Paragraph
-        bold={true}
-        textAlign={'center'}
-        ellipsizeMode={'tail'}
-        numberOfLines={1}
-      >
-        {label}
-      </Paragraph>
-    </View>
-  );
+    return (
+        <View style={styles.container}>
+            {
+                (isLoading ?
+                        <LoadingIndicator size={4} color={context.colors.ui.grey} />
+                        :
+                        <Paragraph
+                            bold={true}
+                            textAlign={'center'}
+                            ellipsizeMode={'tail'}
+                            numberOfLines={1}
+                        >
+                            {label}
+                        </Paragraph>
+                )
+            }
+        </View>
+    );
 };
 
 export {ContextLabel as ContextLabel};

package/src/components/molecules/context-label/context-label.preview.tsx

@@ -17,7 +17,7 @@ export const ContextLabelPreview = ({}: {}) => {
         backgroundColor: 'white',
       }}
     >
-        <ContextLabel label='Dirk Dingles' />
+        <ContextLabel isLoading={false} label='Dirk Dingles' />
 
         <View
         style={{
@@ -30,7 +30,7 @@ export const ContextLabelPreview = ({}: {}) => {
           }}
         >
             <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'Dingles')} />
-            <ContextLabel label='Dirk Dingles' />
+            <ContextLabel isLoading={false} label='Dirk Dingles' />
         </View>
 
         <View
@@ -47,7 +47,7 @@ export const ContextLabelPreview = ({}: {}) => {
             <View style={{width: '100%'}}><Paragraph>Toddle Logo</Paragraph></View>
             <View style={{ flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center', gap: Scale.xs,}}>
                 <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'DingleslangereNaam')} />
-                <ContextLabel label='Dirk DingleslangereNaamMaarDanEchtSuperLang' />
+                <ContextLabel isLoading={false} label='Dirk DingleslangereNaamMaarDanEchtSuperLang' />
             </View>
         </View>
     </View>

package/src/components/molecules/time-picker/__snapshots__/time-picker.test.js.snap

@@ -47,7 +47,7 @@ exports[`Time picker test Should render a time picker where we can choose the ho
             },
             {
               "label": "--",
-              "value": "--",
+              "value": "",
             },
             {
               "label": "00",
@@ -1093,7 +1093,7 @@ exports[`Time picker test Should render a time picker where we can choose the ho
             },
             {
               "label": "--",
-              "value": "--",
+              "value": "",
             },
             {
               "label": "00",

package/src/components/organisms/child-list-item/__snapshots__/child-list-item.test.js.snap

@@ -366,6 +366,7 @@ exports[`test child list item component arrow appears when selectable is false 1
         "flexDirection": "row",
         "flexWrap": "wrap",
         "gap": 12,
+        "marginBottom": 8,
         "marginLeft": 96,
       }
     }
@@ -961,6 +962,7 @@ exports[`test child list item component make text that is too long end in ... an
         "flexDirection": "row",
         "flexWrap": "wrap",
         "gap": 12,
+        "marginBottom": 8,
         "marginLeft": 96,
       }
     }