@tactics/toddle-styleguide 0.1.8 → 0.1.10

package/index.d.ts

@@ -39,6 +39,8 @@ import { DateInput } from './src/components/atoms/date-input/date-input.componen
 import { FilterRange } from './src/components/atoms/filter-range/filter-range.component';
 import { Footer } from './src/components/atoms/footer/footer.component';
 import { DefaultSelect } from './src/components/atoms/default-select/default-select.component';
+import { PasswordInput } from './src/components/atoms/password-input/password-input.component';
+import { MessageInput } from './src/components/atoms/message-input/message-input.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -46,4 +48,4 @@ import { VisualState } from './src/types/visual-state.enum';
 import { Initials } from './src/models/initials.model';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, };

package/index.tsx

@@ -47,6 +47,8 @@ import {DateInput} from './src/components/atoms/date-input/date-input.component'
 import {FilterRange} from './src/components/atoms/filter-range/filter-range.component';
 import {Footer} from './src/components/atoms/footer/footer.component';
 import {DefaultSelect} from './src/components/atoms/default-select/default-select.component';
+import {PasswordInput} from './src/components/atoms/password-input/password-input.component';
+import {MessageInput} from './src/components/atoms/message-input/message-input.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -110,4 +112,6 @@ export {
   FilterRange,
   Footer,
   DefaultSelect,
+  PasswordInput,
+  MessageInput,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -2132,7 +2132,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 19 Januari 2023 "
+            accessibilityLabel=" Donderdag 19 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2152,10 +2152,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2175,9 +2171,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2208,7 +2201,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 20 Januari 2023 "
+            accessibilityLabel=" Vrijdag 20 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2228,10 +2221,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2251,9 +2240,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2432,7 +2418,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 23 Januari 2023 "
+            accessibilityLabel="today Maandag 23 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2452,6 +2438,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2471,6 +2461,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2501,7 +2494,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 24 Januari 2023 "
+            accessibilityLabel="today Dinsdag 24 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2521,6 +2514,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2540,6 +2537,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2639,7 +2639,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 26 Januari 2023 "
+            accessibilityLabel="today Donderdag 26 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2659,6 +2659,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2678,6 +2682,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5583,8 +5590,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Donderdag 19 Januari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Donderdag 19 Januari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -5603,10 +5609,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5627,7 +5629,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5659,8 +5661,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 20 Januari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 20 Januari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -5679,10 +5680,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5703,7 +5700,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5887,7 +5884,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 23 Januari 2023 "
+            accessibilityLabel="today Maandag 23 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5906,6 +5904,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5926,7 +5928,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }
@@ -5958,7 +5960,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 24 Januari 2023 "
+            accessibilityLabel="today Dinsdag 24 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5977,6 +5980,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5997,7 +6004,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }
@@ -6100,7 +6107,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 26 Januari 2023 "
+            accessibilityLabel="today Donderdag 26 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -6119,6 +6127,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -6139,7 +6151,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/filter-tab/__snapshots__/filter-tab.test.js.snap

@@ -8,8 +8,8 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
       "borderRadius": 16,
       "display": "flex",
       "paddingBottom": 4,
-      "paddingLeft": 4,
-      "paddingRight": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
       "paddingTop": 4,
       "width": "100%",
     }
@@ -65,7 +65,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -115,7 +115,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -161,7 +161,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -194,8 +194,8 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
       "borderRadius": 16,
       "display": "flex",
       "paddingBottom": 4,
-      "paddingLeft": 4,
-      "paddingRight": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
       "paddingTop": 4,
       "width": "100%",
     }
@@ -251,7 +251,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -301,7 +301,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -349,7 +349,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,
@@ -395,7 +395,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           style={
             [
               {
-                "color": "#1F2933",
+                "color": "#19216C",
                 "fontFamily": "SourceSansPro",
                 "fontSize": 16,
                 "lineHeight": 22.4,

package/src/components/atoms/filter-tab/filter-tab.styles.js

@@ -7,8 +7,8 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
     container: {
       width: '100%',
       display: 'flex',
-      paddingRight: Scale.xxs,
-      paddingLeft: Scale.xxs,
+      paddingRight: Scale.xs,
+      paddingLeft: Scale.xs,
       paddingTop: Scale.xxs,
       paddingBottom: Scale.xxs,
       borderRadius: inRow ? 50 : Scale.m,
@@ -55,7 +55,7 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
       ...Font.medium,
       width: '100%',
       textAlign: 'center',
-      color: Context.colors.ui.black,
+      color: Context.colors.main['0'],
       maxHeight: 32,
       overflow: 'hidden',
       whiteSpace: 'nowrap',

package/src/components/atoms/message-input/__snapshots__/message-input.test.js.snap

@@ -11,10 +11,10 @@ exports[`Message Input test render a message text input component with placehold
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -91,9 +91,10 @@ exports[`Message Input test render a message text input component with placehold
     multiline={true}
     onChangeText={[Function]}
     placeholder="Placeholder"
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -186,10 +187,10 @@ exports[`Message Input test render a message text input component with placehold
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -266,9 +267,10 @@ exports[`Message Input test render a message text input component with placehold
     multiline={true}
     onChangeText={[Function]}
     placeholder="Placeholder"
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -361,10 +363,10 @@ exports[`Message Input test render a message text input component without placeh
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -440,9 +442,10 @@ exports[`Message Input test render a message text input component without placeh
     keyboardType="default"
     multiline={true}
     onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,
@@ -535,10 +538,10 @@ exports[`Message Input test render a message text input component without placeh
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
-      "paddingBottom": 8,
+      "paddingBottom": 7,
       "paddingLeft": 16,
       "paddingRight": 16,
-      "paddingTop": 8,
+      "paddingTop": 7,
       "width": "100%",
     }
   }
@@ -614,9 +617,10 @@ exports[`Message Input test render a message text input component without placeh
     keyboardType="email-address"
     multiline={true}
     onChangeText={[Function]}
+    placeholderTextColor="#9AA5B1"
     style={
       {
-        "color": "#9AA5B1",
+        "color": "#1F2933",
         "flex": 1,
         "fontFamily": "SourceSansPro",
         "fontSize": 16,

package/src/components/atoms/message-input/message-input.component.tsx

@@ -23,6 +23,7 @@ const MessageInput = ({
 }: MessageInputProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context);
+
   return (
     <View style={styles.rootContainer}>
       <Pressable onPress={() => console.log('pressed add attachment')}>
@@ -32,6 +33,7 @@ const MessageInput = ({
         style={styles.textInput}
         multiline={true}
         placeholder={placeholder}
+        placeholderTextColor={Context.colors.ui.grey}
         onChangeText={onChangeText}
         value={value}
         keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}

package/src/components/atoms/message-input/message-input.styles.js

@@ -14,15 +14,15 @@ export const Stylesheet = (context) =>
       borderColor: context.colors.ui.lightgrey,
       borderRadius: Scale.xs,
       paddingLeft: Scale.m,
-      paddingTop: Scale.xs,
+      paddingTop: Scale.xs - 1,
       paddingRight: Scale.m,
-      paddingBottom: Scale.xs,
+      paddingBottom: Scale.xs - 1,
     },
     textInput: {
       maxHeight: 100,
       flex: 1,
       ...Font.medium,
-      color: context.colors.ui.grey,
+      color: context.colors.ui.black,
       marginLeft: Scale.m,
       marginRight: Scale.m,
     },

package/src/components/atoms/password-input/__snapshots__/password-input.test.js.snap

@@ -8,6 +8,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -22,10 +23,11 @@ exports[`Visual test for the password input field shows a password input field w
     <TextInput
       keyboardType="default"
       onChangeText={[Function]}
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,
@@ -139,6 +141,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -154,10 +157,11 @@ exports[`Visual test for the password input field shows a password input field w
       keyboardType="default"
       onChangeText={[Function]}
       placeholder="password"
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,
@@ -271,6 +275,7 @@ exports[`Visual test for the password input field shows a password input field w
       "backgroundColor": "#FFFFFF",
       "borderRadius": 8,
       "flexDirection": "row",
+      "height": 44,
       "width": "100%",
     }
   }
@@ -286,10 +291,11 @@ exports[`Visual test for the password input field shows a password input field w
       keyboardType="number-pad"
       onChangeText={[Function]}
       placeholder="number password"
+      placeholderTextColor="#9AA5B1"
       secureTextEntry={true}
       style={
         {
-          "color": "#9AA5B1",
+          "color": "#1F2933",
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,

package/src/components/atoms/password-input/password-input.component.tsx

@@ -30,6 +30,7 @@ export const PasswordInput = ({
         <RNTextInput
           style={styles.textInput}
           placeholder={placeholder}
+          placeholderTextColor={Context.colors.ui.grey}
           secureTextEntry={secure}
           value={value}
           onChangeText={onChangeText}

package/src/components/atoms/password-input/password-input.styles.js

@@ -6,6 +6,7 @@ export const Stylesheet = (Context) =>
   StyleSheet.create({
     container: {
       width: '100%',
+      height: 44,
       flexDirection: 'row',
       backgroundColor: Context.colors.ui.white,
       borderRadius: Scale.xs,
@@ -21,7 +22,7 @@ export const Stylesheet = (Context) =>
       paddingRight: Scale.m,
       ...Font.medium,
       lineHeight: 20,
-      color: Context.colors.ui.grey,
+      color: Context.colors.ui.black,
     },
     iconContainer: {
       paddingLeft: Scale.m,