@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/components/molecules/date-input/__snapshots__/date-input.test.js.snap

@@ -58,11 +58,11 @@ exports[`Test date input component renders a date input component 1`] = `
   </View>
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight="28"
-    bbWidth="28"
+    bbHeight={24}
+    bbWidth={24}
     fill="none"
     focusable={false}
-    height="28"
+    height={24}
     meetOrSlice={0}
     minX={0}
     minY={0}
@@ -74,14 +74,14 @@ exports[`Test date input component renders a date input component 1`] = `
         },
         {
           "flex": 0,
-          "height": 28,
-          "width": 28,
+          "height": 24,
+          "width": 24,
         },
       ]
     }
-    vbHeight={27}
-    vbWidth={27}
-    width="28"
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
   >
     <RNSVGGroup
       fill={null}
@@ -92,7 +92,7 @@ exports[`Test date input component renders a date input component 1`] = `
       }
     >
       <RNSVGPath
-        d="M9.16667 7.875V3.375M17.8333 7.875V3.375M8.08333 12.375H18.9167M5.91667 23.625H21.0833C22.28 23.625 23.25 22.6176 23.25 21.375V7.875C23.25 6.63236 22.28 5.625 21.0833 5.625H5.91667C4.72005 5.625 3.75 6.63236 3.75 7.875V21.375C3.75 22.6176 4.72005 23.625 5.91667 23.625Z"
+        d="M7.33333 6.16667V1.5M16.6667 6.16667V1.5M6.16667 10.8333H17.8333M3.83333 22.5H20.1667C21.4553 22.5 22.5 21.4553 22.5 20.1667V6.16667C22.5 4.878 21.4553 3.83333 20.1667 3.83333H3.83333C2.54467 3.83333 1.5 4.878 1.5 6.16667V20.1667C1.5 21.4553 2.54467 22.5 3.83333 22.5Z"
         propList={
           [
             "stroke",

package/src/components/molecules/date-input/date-input.component.tsx

@@ -22,7 +22,11 @@ export const DateInput = ({onPress, value}: DateInputProps) => {
           {value.toISODate()}
         </Heading4>
       </View>
-      <Icon.Outline.Calendar color={context.colors.ui.black} />
+      <Icon
+        style={'regular'}
+        name={'calendar'}
+        color={context.colors.ui.black}
+      />
     </Pressable>
   );
 };

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

@@ -58,11 +58,11 @@ exports[`test default select component should render a default select component
   </View>
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight="28"
-    bbWidth="28"
+    bbHeight={24}
+    bbWidth={24}
     fill="none"
     focusable={false}
-    height="28"
+    height={24}
     meetOrSlice={0}
     minX={0}
     minY={0}
@@ -74,14 +74,14 @@ exports[`test default select component should render a default select component
         },
         {
           "flex": 0,
-          "height": 28,
-          "width": 28,
+          "height": 24,
+          "width": 24,
         },
       ]
     }
-    vbHeight={27}
-    vbWidth={26}
-    width="28"
+    vbHeight={19}
+    vbWidth={11}
+    width={24}
   >
     <RNSVGGroup
       fill={null}
@@ -92,7 +92,7 @@ exports[`test default select component should render a default select component
       }
     >
       <RNSVGPath
-        d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+        d="M1.75 1.625L9.33333 9.5L1.75 17.375"
         propList={
           [
             "stroke",

package/src/components/molecules/default-select/default-select.component.tsx

@@ -32,7 +32,11 @@ export const DefaultSelect = ({label, onPress}: DefaultSelectProps) => {
           {label}
         </Heading3>
       </View>
-      <Icon.Outline.ChevronRight color={Context.colors.ui.white} />
+      <Icon
+        style={'regular'}
+        name={'chevron-right'}
+        color={Context.colors.ui.white}
+      />
     </Pressable>
   );
 };

package/src/components/molecules/failed-to-send/__snapshots__/failed-bubble.test.js.snap

@@ -19,11 +19,11 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={26}
+      bbWidth={26}
       fill="none"
       focusable={false}
-      height="28"
+      height={26}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -35,14 +35,14 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 26,
+            "width": 26,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={23}
+      vbWidth={22}
+      width={26}
     >
       <RNSVGGroup
         fill={null}
@@ -53,7 +53,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
         }
       >
         <RNSVGPath
-          d="M13 9V13.5M13 18H13.0108M22.75 13.5C22.75 19.0919 18.3848 23.625 13 23.625C7.61522 23.625 3.25 19.0919 3.25 13.5C3.25 7.90812 7.61522 3.375 13 3.375C18.3848 3.375 22.75 7.90812 22.75 13.5Z"
+          d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
           propList={
             [
               "stroke",
@@ -155,11 +155,11 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
             >
               <RNSVGSvgView
                 align="xMidYMid"
-                bbHeight="28"
-                bbWidth="28"
+                bbHeight={24}
+                bbWidth={24}
                 fill="none"
                 focusable={false}
-                height="28"
+                height={24}
                 meetOrSlice={0}
                 minX={0}
                 minY={0}
@@ -171,14 +171,14 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                     },
                     {
                       "flex": 0,
-                      "height": 28,
-                      "width": 28,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
-                vbHeight={27}
-                vbWidth={26}
-                width="28"
+                vbHeight={21}
+                vbWidth={20}
+                width={24}
               >
                 <RNSVGGroup
                   fill={null}
@@ -189,7 +189,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                   }
                 >
                   <RNSVGPath
-                    d="M4.33301 4.5V10.125H4.96298M21.5993 12.375C21.0662 7.9354 17.4193 4.5 12.9997 4.5C9.36251 4.5 6.24866 6.82669 4.96298 10.125M4.96298 10.125H9.74967M21.6663 22.5V16.875H21.0364M21.0364 16.875C19.7507 20.1733 16.6368 22.5 12.9997 22.5C8.58009 22.5 4.93317 19.0646 4.40006 14.625M21.0364 16.875H16.2497"
+                    d="M1.33337 1.5V7.125H1.96335M18.5997 9.375C18.0665 4.9354 14.4196 1.5 10 1.5C6.36288 1.5 3.24902 3.82669 1.96335 7.125M1.96335 7.125H6.75004M18.6667 19.5V13.875H18.0367M18.0367 13.875C16.7511 17.1733 13.6372 19.5 10 19.5C5.58045 19.5 1.93353 16.0646 1.40043 11.625M18.0367 13.875H13.25"
                     propList={
                       [
                         "stroke",
@@ -233,11 +233,11 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
             >
               <RNSVGSvgView
                 align="xMidYMid"
-                bbHeight="28"
-                bbWidth="28"
+                bbHeight={24}
+                bbWidth={24}
                 fill="none"
                 focusable={false}
-                height="28"
+                height={24}
                 meetOrSlice={0}
                 minX={0}
                 minY={0}
@@ -249,14 +249,14 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                     },
                     {
                       "flex": 0,
-                      "height": 28,
-                      "width": 28,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
-                vbHeight={28}
-                vbWidth={28}
-                width="28"
+                vbHeight={22}
+                vbWidth={21}
+                width={24}
               >
                 <RNSVGGroup
                   fill={null}
@@ -267,7 +267,7 @@ exports[`Failed text bubble test shows a failed to send text bubble that is swip
                   }
                 >
                   <RNSVGPath
-                    d="M21.875 8.375L20.8993 22.0353C20.8152 23.2127 19.8354 24.125 18.655 24.125H9.34502C8.16458 24.125 7.18484 23.2127 7.10074 22.0353L6.125 8.375M11.75 12.875V19.625M16.25 12.875V19.625M17.375 8.375V5C17.375 4.37868 16.8713 3.875 16.25 3.875H11.75C11.1287 3.875 10.625 4.37868 10.625 5V8.375M5 8.375H23"
+                    d="M18.375 5.58333L17.3993 18.7377C17.3152 19.8715 16.3354 20.75 15.155 20.75H5.84502C4.66458 20.75 3.68484 19.8715 3.60074 18.7377L2.625 5.58333M8.25 9.91667V16.4167M12.75 9.91667V16.4167M13.875 5.58333V2.33333C13.875 1.73502 13.3713 1.25 12.75 1.25H8.25C7.62868 1.25 7.125 1.73502 7.125 2.33333V5.58333M1.5 5.58333H19.5"
                     propList={
                       [
                         "stroke",

package/src/components/molecules/failed-to-send/failed-bubble.component.tsx

@@ -37,12 +37,20 @@ const FailedTextBubble = ({
       <View style={styles.swipedRow}>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
           <Pressable onPress={onPressRefresh}>
-            <Icon.Outline.Refresh color={context.colors.ui.error.xlight} />
+            <Icon
+              style={'regular'}
+              name={'refresh'}
+              color={context.colors.ui.error.xlight}
+            />
           </Pressable>
         </Animated.View>
         <Animated.View style={[styles.swipedIcon, {opacity}]}>
           <Pressable onPress={onPressDelete}>
-            <Icon.Outline.Trash color={context.colors.ui.error.xlight} />
+            <Icon
+              style={'regular'}
+              name={'trash'}
+              color={context.colors.ui.error.xlight}
+            />
           </Pressable>
         </Animated.View>
       </View>
@@ -52,8 +60,11 @@ const FailedTextBubble = ({
   return (
     <GestureHandlerRootView style={{flexDirection: 'row'}}>
       <View style={styles.iconContainer}>
-        <Icon.Outline.ExclamationCircle
+        <Icon
+          style={'regular'}
+          name={'exclamation-circle'}
           color={context.colors.ui.error.default}
+          size={26}
         />
       </View>
 

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

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`language button should render a language button in a black text color, medium bold 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "minHeight": 42,
+      "minWidth": 42,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansProBold",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#000000",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    FR
+  </Text>
+</View>
+`;
+
+exports[`language button should render a language button in a white text color, medium bold 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "minHeight": 42,
+      "minWidth": 42,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansProBold",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    NL
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,7 @@
+declare type LanguageButtonProps = {
+    label: string;
+    onPress?: () => void;
+    textColor?: string;
+};
+export declare const LanguageButton: ({ label, onPress, textColor, }: LanguageButtonProps) => JSX.Element;
+export {};

package/src/components/molecules/language-button/language-button.component.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {Pressable} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './language-button.styles';
+import {Heading4} from '../../atoms/heading-components';
+
+type LanguageButtonProps = {
+  label: string;
+  onPress?: () => void;
+  textColor?: string;
+};
+
+export const LanguageButton = ({
+  label,
+  onPress,
+  textColor,
+}: LanguageButtonProps) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <Heading4
+        bold={true}
+        textAlign={'center'}
+        textColor={textColor ? textColor : Context.colors.ui.white}
+      >
+        {label}
+      </Heading4>
+    </Pressable>
+  );
+};

package/src/components/molecules/language-button/language-button.preview.d.ts

@@ -0,0 +1 @@
+export declare const LanguageButtonPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/language-button/language-button.preview.tsx

@@ -0,0 +1,29 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {LanguageButton} from './language-button.component';
+
+const {View} = require('react-native');
+
+export const LanguageButtonPreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: Context.colors.main['0'],
+      }}
+    >
+      <LanguageButton
+        label={'NL'}
+        onPress={() => console.log('change language')}
+      />
+      <LanguageButton
+        label={'FR'}
+        onPress={() => console.log('change language')}
+        textColor={'#FF0000'}
+      />
+    </View>
+  );
+};

package/src/components/molecules/language-button/language-button.styles.d.ts

@@ -0,0 +1,8 @@
+export function Stylesheet(): {
+  container: {
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+};

package/src/components/molecules/language-button/language-button.styles.js

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    container: {
+      minWidth: Scale.m * 2.625,
+      minHeight: Scale.m * 2.625,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

package/src/components/molecules/language-button/language-button.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {LanguageButton} from './language-button.component';
+
+describe('language button', () => {
+  it('should render a language button in a white text color, medium bold', function () {
+    const tree = render
+      .create(
+        <LanguageButton
+          label="NL"
+          onPress={() => console.log('choose language')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a language button in a black text color, medium bold', () => {
+    const tree = render
+      .create(
+        <LanguageButton
+          label="FR"
+          onPress={() => console.log('choose language')}
+          textColor={'#000000'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});