@tactics/toddle-styleguide 1.0.2 → 1.1.0

package/src/components/molecules/wide-button/__snapshots__/wide-button.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`test wide-button component should render a wide-button component 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -52,6 +69,23 @@ exports[`test wide-button component should render a wide-button component 1`] =
 
 exports[`test wide-button component should render a wide-button component that has a custom background color 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -104,7 +138,19 @@ exports[`test wide-button component should render a wide-button component that h
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -159,7 +205,19 @@ exports[`test wide-button component should render a wide-button component that i
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}

package/src/components/molecules/wide-button/wide-button.component.d.ts

@@ -1,4 +1,4 @@
-declare type ButtonProps = {
+type ButtonProps = {
     text: string;
     disabled?: boolean;
     onPress?: () => void;

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

@@ -16,6 +16,23 @@ exports[`test child list item component arrow appears when selectable is false 1
   }
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -222,6 +239,23 @@ exports[`test child list item component arrow appears when selectable is false 1
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -248,8 +282,8 @@ exports[`test child list item component arrow appears when selectable is false 1
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -291,7 +325,12 @@ exports[`test child list item component arrow appears when selectable is false 1
               "strokeLinejoin",
             ]
           }
-          stroke={4280232243}
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -318,6 +357,23 @@ exports[`test child list item component background is blue and text is white whe
   }
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -542,6 +598,23 @@ exports[`test child list item component make text that is too long end in ... 1`
   }
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -1,7 +1,7 @@
 import { ImageSourcePropType } from 'react-native';
 import { Initials } from '../../../models/initials.model';
 import { VisualState } from '../../../types/visual-state.enum';
-declare type ChildListItemProps = {
+type ChildListItemProps = {
     id: string;
     name: string;
     department: string;

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

@@ -2,6 +2,23 @@
 
 exports[`test contact-item renders a contact-item with a red avatar and an extra pill when isBlocked is true  1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -127,8 +144,8 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight={20}
-        bbWidth={20}
+        bbHeight="20"
+        bbWidth="20"
         fill="none"
         focusable={false}
         height={20}
@@ -170,7 +187,12 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
                 "strokeLinejoin",
               ]
             }
-            stroke={4279837036}
+            stroke={
+              {
+                "payload": 4279837036,
+                "type": 0,
+              }
+            }
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"
@@ -184,6 +206,23 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
 
 exports[`test contact-item renders a contact-item, with an avatar 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -309,8 +348,8 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight={20}
-        bbWidth={20}
+        bbHeight="20"
+        bbWidth="20"
         fill="none"
         focusable={false}
         height={20}
@@ -352,7 +391,12 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
                 "strokeLinejoin",
               ]
             }
-            stroke={4279837036}
+            stroke={
+              {
+                "payload": 4279837036,
+                "type": 0,
+              }
+            }
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"

package/src/components/organisms/contact-item/contact-item.component.d.ts

@@ -1,4 +1,4 @@
-declare type ContactItemProps = {
+type ContactItemProps = {
     name: string;
     firstname: string;
     label: string;

package/src/components/organisms/day-select/day-select.component.d.ts

@@ -1,5 +1,5 @@
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
-declare type DaySelectProps = {
+type DaySelectProps = {
     onSelectDate: (date: ToddleDateTime) => void;
     startDate: ToddleDateTime;
     selectedDate: ToddleDateTime;

package/src/components/organisms/loading-indicator/dot.component.d.ts

@@ -1,5 +1,5 @@
 import { Animated } from 'react-native';
-declare type DotProps = {
+type DotProps = {
     dynamicSize: Animated.Value;
 };
 export declare const Dot: ({ dynamicSize }: DotProps) => JSX.Element;

package/src/components/organisms/loading-indicator/loading-indicator.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {LoadingIndicator} from './loading-indicator.component';
+jest.useFakeTimers();
 
 describe('loading indicator test', function () {
   it('should render a default loading indicator', function () {

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

@@ -2,6 +2,23 @@
 
 exports[`My child list item component test Should render your child but with an inactive subscription 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -197,8 +214,8 @@ exports[`My child list item component test Should render your child but with an
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -240,7 +257,12 @@ exports[`My child list item component test Should render your child but with an
               "strokeLinejoin",
             ]
           }
-          stroke={4280232243}
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -253,6 +275,23 @@ exports[`My child list item component test Should render your child but with an
 
 exports[`My child list item component test Should render your child that has an active subscription 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -378,6 +417,8 @@ exports[`My child list item component test Should render your child that has an
        jaar
     </Text>
     <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
       style={
         [
           [
@@ -432,8 +473,8 @@ exports[`My child list item component test Should render your child that has an
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -475,7 +516,12 @@ exports[`My child list item component test Should render your child that has an
               "strokeLinejoin",
             ]
           }
-          stroke={4280232243}
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"

package/src/components/organisms/my-child-list-item/my-child-list-item.component.d.ts

@@ -1,6 +1,6 @@
 import { ImageSourcePropType } from 'react-native';
 import { Initials } from '../../../models/initials.model';
-declare type MyChildListItemProps = {
+type MyChildListItemProps = {
     id: string;
     name: string;
     department: string;

package/src/components/organisms/my-child-list-item/my-child-list-item.component.tsx

@@ -37,7 +37,12 @@ export const MyChildListItem = ({
       <Avatar source={sourceAvatar} size={Size.MEDIUM} />
       <View style={styles.childTextContainer}>
         <TinyText textAlign={'left'}>{age} jaar</TinyText>
-        <Heading2 bold={true} textAlign={'left'}>
+        <Heading2
+          bold={true}
+          textAlign={'left'}
+          numberOfLines={1}
+          ellipsizeMode={'tail'}
+        >
           {name}
         </Heading2>
         <SmallText textAlign={'left'}>{department}</SmallText>

package/src/components/organisms/my-child-list-item/my-child-list-item.preview.tsx

@@ -14,7 +14,7 @@ export const MyChildListItemPreview = ({}: {}) => {
       <View style={{marginBottom: 24}}>
         <MyChildListItem
           id={'child1'}
-          name={'Luca Jannsens'}
+          name={'Luca JannsensJannsensJannsensJannsensJannsensJannsens'}
           department={'De Teddybeertjes'}
           age={2}
           sourceAvatar={require('../../../../assets/components/avatar/baby.png')}