@tactics/toddle-styleguide 1.2.3 → 1.2.5

package/src/components/molecules/time-picker/time-picker.component.tsx

@@ -1,6 +1,6 @@
 import {View} from 'react-native';
 import WheelPickerExpo from 'react-native-wheel-picker-expo';
-import {Heading3} from '../../atoms/heading-components';
+import {Heading1, Heading3} from '../../atoms/heading-components';
 import {Stylesheet} from './time-picker.styles';
 import {Scale} from '../../../theme/scale/index';
 import {useContext} from 'react';
@@ -36,30 +36,56 @@ export const TimePicker = ({
   };
 
   return (
-    <View style={styles.container}>
-      <WheelPickerExpo
-        items={HOURS.map((value) => ({label: value, value: value}))}
-        onChange={({item}) => onChangeHours(item.label)}
-        width={Scale.m * 4.5}
-        selectedStyle={styles.selected}
-        renderItem={({label, textAlign}) => (
-          <Heading3 textAlign={textAlign}>{label}</Heading3>
-        )}
-        initialSelectedIndex={initialIndexHandler(HOURS, initialHours)}
-      />
+    <View style={styles.rootContainer}>
+      <View style={styles.container}>
+        <WheelPickerExpo
+          items={HOURS.map((value) => ({label: value, value: value}))}
+          onChange={({item}) => onChangeHours(item.label)}
+          width={Scale.m * 4.5}
+          height={320}
+          backgroundColor={context.colors.ui.xlightgrey}
+          renderItem={({label, textAlign}) => (
+            <Heading1
+              textAlign={textAlign}
+              textColor={context.colors.ui.grey}
+              bold={false}
+              addStyle={styles.text}
+            >
+              {label}
+            </Heading1>
+          )}
+          initialSelectedIndex={initialIndexHandler(HOURS, initialHours)}
+        />
+      </View>
       <View>
-        <Heading3>:</Heading3>
+        <Heading1
+          textColor={context.colors.ui.grey}
+          addStyle={styles.colon}
+          textAlign={'center'}
+        >
+          :
+        </Heading1>
+      </View>
+      <View style={styles.container}>
+        <WheelPickerExpo
+          items={MINUTES.map((value) => ({label: value, value: value}))}
+          onChange={({item}) => onChangeMinutes(item.label)}
+          width={Scale.m * 4.5}
+          height={320}
+          backgroundColor={context.colors.ui.xlightgrey}
+          renderItem={({label, textAlign}) => (
+            <Heading1
+              textAlign={textAlign}
+              textColor={context.colors.ui.grey}
+              bold={false}
+              addStyle={styles.text}
+            >
+              {label}
+            </Heading1>
+          )}
+          initialSelectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
+        />
       </View>
-      <WheelPickerExpo
-        items={MINUTES.map((value) => ({label: value, value: value}))}
-        onChange={({item}) => onChangeMinutes(item.label)}
-        width={Scale.m * 4.5}
-        selectedStyle={styles.selected}
-        renderItem={({label, textAlign}) => (
-          <Heading3 textAlign={textAlign}>{label}</Heading3>
-        )}
-        initialSelectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
-      />
     </View>
   );
 };

package/src/components/molecules/time-picker/time-picker.preview.tsx

@@ -61,11 +61,11 @@ export const TimePickerPreview = ({}: {}) => {
           </View>
           <View
             style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
+              flexDirection: 'column',
+              gap: 26,
             }}
           >
-            <View>
+            <View style={{alignItems: 'center'}}>
               <Heading3
                 bold={true}
                 textAlign={'center'}
@@ -80,7 +80,8 @@ export const TimePickerPreview = ({}: {}) => {
                 onChangeMinutes={setCheckInMinutes}
               />
             </View>
-            <View>
+
+            <View style={{alignItems: 'center'}}>
               <Heading3
                 bold={true}
                 textAlign={'center'}

package/src/components/molecules/time-picker/time-picker.styles.d.ts

@@ -1,15 +1,27 @@
 export function Stylesheet(context: any): {
+  rootContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
   container: {
     borderColor: any;
     borderWidth: number;
     borderStyle: 'solid';
     borderRadius: number;
     overflow: 'hidden';
-    flexDirection: 'row';
+    justifyContent: 'center';
     alignItems: 'center';
+    maxHeight: number;
+    maxWidth: number;
   };
-  selected: {
-    borderColor: any;
-    borderWidth: number;
+  text: {
+    fontWeight: '200';
+    fontSize: number;
+  };
+  colon: {
+    fontWeight: '200';
+    lineHeight: number;
+    fontSize: number;
   };
 };

package/src/components/molecules/time-picker/time-picker.styles.js

@@ -3,17 +3,29 @@ import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context) =>
   StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Scale.s,
+    },
     container: {
-      borderColor: context.colors.ui.xlightgrey,
+      borderColor: context.colors.ui.lightgrey,
       borderWidth: 1,
       borderStyle: 'solid',
-      borderRadius: Scale.m,
+      borderRadius: Scale.m * 1.25,
       overflow: 'hidden',
-      flexDirection: 'row',
+      justifyContent: 'center',
       alignItems: 'center',
+      maxHeight: Scale.m * 4.5,
+      maxWidth: Scale.m * 4.5,
     },
-    selected: {
-      borderColor: context.colors.ui.lightgrey,
-      borderWidth: 1,
+    text: {
+      fontWeight: '200',
+      fontSize: 42,
+    },
+    colon: {
+      fontWeight: '200',
+      lineHeight: 42,
+      fontSize: 42,
     },
   });

package/src/components/molecules/timestamp/__snapshots__/timestamp.test.js.snap

@@ -22,6 +22,6 @@ exports[`Timestamp component test Renders a timestamp component, this will be ad
     ]
   }
 >
-  25 May, 9:08
+  9:08
 </Text>
 `;

package/src/components/molecules/timestamp/timestamp.component.tsx

@@ -15,8 +15,6 @@ export const Timestamp = ({sent}: TimestampProps) => {
 
   const timestampToStringHandler = (timestamp: ToddleDateTime) => {
     return timestamp.toLocaleString({
-      day: 'numeric',
-      month: 'short',
       hourCycle: 'h24',
       hour: 'numeric',
       minute: '2-digit',

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

@@ -59,69 +59,73 @@ exports[`test child list item component arrow appears when selectable is false 1
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          {
-            "borderRadius": 36,
-            "height": 72,
-            "width": 72,
-          },
-          false,
-        ]
-      }
+      style={null}
     >
-      <ViewManagerAdapter_ExpoLinearGradient
-        proxiedProperties={
-          {
-            "colors": [
-              4281681564,
-              4284775115,
-              4292481661,
-            ],
-            "endPoint": [
-              0.9,
-              0.9,
-            ],
-            "locations": [
-              0,
-              0.55,
-              1,
-            ],
-            "startPoint": [
-              0.1,
-              0.1,
-            ],
-          }
-        }
+      <View
         style={
           [
             {
-              "height": "100%",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-          ]
-        }
-      />
-      <Image
-        source={1}
-        style={
-          [
+            false,
             {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
+              "borderRadius": 36,
+              "height": 72,
+              "width": 72,
             },
+            false,
           ]
         }
-      />
+      >
+        <ViewManagerAdapter_ExpoLinearGradient
+          proxiedProperties={
+            {
+              "colors": [
+                4281681564,
+                4284775115,
+                4292481661,
+              ],
+              "endPoint": [
+                0.9,
+                0.9,
+              ],
+              "locations": [
+                0,
+                0.55,
+                1,
+              ],
+              "startPoint": [
+                0.1,
+                0.1,
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <Image
+          source={1}
+          style={
+            [
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
+            ]
+          }
+        />
+      </View>
     </View>
     <View
       style={
@@ -400,69 +404,73 @@ exports[`test child list item component background is blue and text is white whe
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          {
-            "borderRadius": 36,
-            "height": 72,
-            "width": 72,
-          },
-          false,
-        ]
-      }
+      style={null}
     >
-      <ViewManagerAdapter_ExpoLinearGradient
-        proxiedProperties={
-          {
-            "colors": [
-              4281681564,
-              4284775115,
-              4292481661,
-            ],
-            "endPoint": [
-              0.9,
-              0.9,
-            ],
-            "locations": [
-              0,
-              0.55,
-              1,
-            ],
-            "startPoint": [
-              0.1,
-              0.1,
-            ],
-          }
-        }
+      <View
         style={
           [
             {
-              "height": "100%",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-          ]
-        }
-      />
-      <Image
-        source={1}
-        style={
-          [
+            false,
             {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
+              "borderRadius": 36,
+              "height": 72,
+              "width": 72,
             },
+            false,
           ]
         }
-      />
+      >
+        <ViewManagerAdapter_ExpoLinearGradient
+          proxiedProperties={
+            {
+              "colors": [
+                4281681564,
+                4284775115,
+                4292481661,
+              ],
+              "endPoint": [
+                0.9,
+                0.9,
+              ],
+              "locations": [
+                0,
+                0.55,
+                1,
+              ],
+              "startPoint": [
+                0.1,
+                0.1,
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <Image
+          source={1}
+          style={
+            [
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
+            ]
+          }
+        />
+      </View>
     </View>
     <View
       style={
@@ -641,69 +649,73 @@ exports[`test child list item component make text that is too long end in ... 1`
     }
   >
     <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#647ACB",
-            "justifyContent": "center",
-            "overflow": "hidden",
-          },
-          false,
-          {
-            "borderRadius": 36,
-            "height": 72,
-            "width": 72,
-          },
-          false,
-        ]
-      }
+      style={null}
     >
-      <ViewManagerAdapter_ExpoLinearGradient
-        proxiedProperties={
-          {
-            "colors": [
-              4281681564,
-              4284775115,
-              4292481661,
-            ],
-            "endPoint": [
-              0.9,
-              0.9,
-            ],
-            "locations": [
-              0,
-              0.55,
-              1,
-            ],
-            "startPoint": [
-              0.1,
-              0.1,
-            ],
-          }
-        }
+      <View
         style={
           [
             {
-              "height": "100%",
-              "width": "100%",
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
             },
-          ]
-        }
-      />
-      <Image
-        source={1}
-        style={
-          [
+            false,
             {
-              "borderRadius": 50,
-              "height": "90%",
-              "position": "absolute",
-              "width": "90%",
+              "borderRadius": 36,
+              "height": 72,
+              "width": 72,
             },
+            false,
           ]
         }
-      />
+      >
+        <ViewManagerAdapter_ExpoLinearGradient
+          proxiedProperties={
+            {
+              "colors": [
+                4281681564,
+                4284775115,
+                4292481661,
+              ],
+              "endPoint": [
+                0.9,
+                0.9,
+              ],
+              "locations": [
+                0,
+                0.55,
+                1,
+              ],
+              "startPoint": [
+                0.1,
+                0.1,
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <Image
+          source={1}
+          style={
+            [
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
+            ]
+          }
+        />
+      </View>
     </View>
     <View
       style={