@tactics/toddle-styleguide 1.0.2 → 1.1.0

package/src/components/molecules/search-input/search.component.d.ts

@@ -1,5 +1,5 @@
 import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-declare type SearchProps = {
+type SearchProps = {
     placeholder?: string;
     onchangeText?: (text: string) => void;
     value: string;

package/src/components/molecules/select-link/__snapshots__/select-link.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`SelectLink component test renders a pressable select-link with label "Toepassen" 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/molecules/select-link/select-link.component.d.ts

@@ -1,4 +1,4 @@
-declare type SelectLinkProps = {
+type SelectLinkProps = {
     label: string;
     onPress: () => void;
 };

package/src/components/molecules/select-list-item/__snapshots__/select-list-item.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`test button component should render a select-list-item component with 1 line of white text (bold) and a dark icon in a light circle 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}
@@ -38,8 +55,8 @@ exports[`test button component should render a select-list-item component with 1
     <View>
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight={24}
-        bbWidth={24}
+        bbHeight="24"
+        bbWidth="24"
         fill="none"
         focusable={false}
         height={24}
@@ -81,7 +98,12 @@ exports[`test button component should render a select-list-item component with 1
                 "strokeLinejoin",
               ]
             }
-            stroke={4279837036}
+            stroke={
+              {
+                "payload": 4279837036,
+                "type": 0,
+              }
+            }
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"
@@ -103,6 +125,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [
@@ -158,8 +182,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -201,7 +225,12 @@ exports[`test button component should render a select-list-item component with 1
               "strokeLinejoin",
             ]
           }
-          stroke={4294967295}
+          stroke={
+            {
+              "payload": 4294967295,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -214,6 +243,23 @@ exports[`test button component should render a select-list-item component with 1
 
 exports[`test button component should render a select-list-item component with 1 line of white text (bold) and a light icon in a dark circle 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}
@@ -250,8 +296,8 @@ exports[`test button component should render a select-list-item component with 1
     <View>
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight={24}
-        bbWidth={24}
+        bbHeight="24"
+        bbWidth="24"
         fill="none"
         focusable={false}
         height={24}
@@ -293,7 +339,12 @@ exports[`test button component should render a select-list-item component with 1
                 "strokeLinejoin",
               ]
             }
-            stroke={4286288859}
+            stroke={
+              {
+                "payload": 4286288859,
+                "type": 0,
+              }
+            }
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"
@@ -315,6 +366,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [
@@ -370,8 +423,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -413,7 +466,12 @@ exports[`test button component should render a select-list-item component with 1
               "strokeLinejoin",
             ]
           }
-          stroke={4294967295}
+          stroke={
+            {
+              "payload": 4294967295,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -426,6 +484,23 @@ exports[`test button component should render a select-list-item component with 1
 
 exports[`test button component should render a select-list-item component with 2 LINES of text and a dark icon in a light circle 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}
@@ -462,8 +537,8 @@ exports[`test button component should render a select-list-item component with 2
     <View>
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight={24}
-        bbWidth={24}
+        bbHeight="24"
+        bbWidth="24"
         fill="none"
         focusable={false}
         height={24}
@@ -505,7 +580,12 @@ exports[`test button component should render a select-list-item component with 2
                 "strokeLinejoin",
               ]
             }
-            stroke={4279837036}
+            stroke={
+              {
+                "payload": 4279837036,
+                "type": 0,
+              }
+            }
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"
@@ -527,6 +607,8 @@ exports[`test button component should render a select-list-item component with 2
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [
@@ -584,8 +666,8 @@ exports[`test button component should render a select-list-item component with 2
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -627,7 +709,12 @@ exports[`test button component should render a select-list-item component with 2
               "strokeLinejoin",
             ]
           }
-          stroke={4294967295}
+          stroke={
+            {
+              "payload": 4294967295,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"

package/src/components/molecules/select-list-item/select-list-item-preview.tsx

@@ -15,7 +15,7 @@ export const SelectListItemPreview = ({}: {}) => {
       }}
     >
       <SelectListItem
-        title="Vlindertjes"
+        title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'user-group'} size={27} />}
         onPress={() => console.log('clicked')}

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type SelectListProps = {
+type SelectListProps = {
     title: string;
     subtitle?: string;
     icon: React.ReactElement;

package/src/components/molecules/select-list-item/select-list-item.component.tsx

@@ -39,7 +39,12 @@ const SelectListItem = ({
       </View>
       <View style={styles.textContainer}>
         <View>
-          <Heading2 bold={true} textColor={context.colors.ui.white}>
+          <Heading2
+            bold={true}
+            textColor={context.colors.ui.white}
+            numberOfLines={2}
+            ellipsizeMode={'tail'}
+          >
             {title}
           </Heading2>
         </View>

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

@@ -45,6 +45,23 @@ exports[`Select Picker test renders a picker with placeholder text 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}
@@ -122,8 +139,8 @@ exports[`Select Picker test renders a picker with placeholder text 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -165,7 +182,12 @@ exports[`Select Picker test renders a picker with placeholder text 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4280232243}
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"
@@ -221,6 +243,23 @@ exports[`Select Picker test renders a picker without placeholder text 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}
@@ -296,8 +335,8 @@ exports[`Select Picker test renders a picker without placeholder text 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={20}
-      bbWidth={20}
+      bbHeight="20"
+      bbWidth="20"
       fill="none"
       focusable={false}
       height={20}
@@ -339,7 +378,12 @@ exports[`Select Picker test renders a picker without placeholder text 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4280232243}
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"

package/src/components/molecules/select-picker/select-picker.component.d.ts

@@ -1,4 +1,4 @@
-declare type PickerProps = {
+type PickerProps = {
     placeholder?: string;
     data: {
         value: number | string;