@tactics/toddle-styleguide 1.0.0 → 1.0.2

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

@@ -35,11 +35,11 @@ exports[`Message Input test render a message text input component with placehold
   >
     <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}
@@ -51,14 +51,14 @@ exports[`Message Input test render a message text input component with placehold
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={22}
+      vbWidth={21}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -69,7 +69,7 @@ exports[`Message Input test render a message text input component with placehold
         }
       >
         <RNSVGPath
-          d="M16.4359 7.58333L9.30125 14.7179C8.45511 15.5641 8.45511 16.9359 9.30125 17.7821C10.1474 18.6282 11.5192 18.6282 12.3654 17.7821L19.3141 10.6475C21.0064 8.95519 21.0064 6.21148 19.3141 4.5192C17.6218 2.82693 14.8781 2.82693 13.1859 4.5192L6.23712 11.6538C3.69871 14.1922 3.69871 18.3078 6.23712 20.8462C8.77553 23.3846 12.8911 23.3846 15.4295 20.8462L22.2083 14.0833"
+          d="M13.4359 5.58333L6.30125 12.7179C5.45511 13.5641 5.45511 14.9359 6.30125 15.7821C7.14739 16.6282 8.51924 16.6282 9.36538 15.7821L16.3141 8.64746C18.0064 6.95519 18.0064 4.21148 16.3141 2.5192C14.6218 0.826932 11.8781 0.826932 10.1859 2.5192L3.23712 9.65381C0.698711 12.1922 0.698711 16.3078 3.23712 18.8462C5.77553 21.3846 9.8911 21.3846 12.4295 18.8462L19.2083 12.0833"
           propList={
             [
               "stroke",
@@ -122,11 +122,11 @@ exports[`Message Input test render a message text input component with placehold
   >
     <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}
@@ -136,19 +136,36 @@ exports[`Message Input test render a message text input component with placehold
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          {
+            "transform": [
+              {
+                "rotate": "90deg",
+              },
+            ],
+          },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={28}
-      vbWidth={27}
-      width="28"
+      vbHeight={22}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
         propList={
           [
             "fill",
@@ -156,7 +173,7 @@ exports[`Message Input test render a message text input component with placehold
         }
       >
         <RNSVGPath
-          d="M6.29167 14L4.125 24.125L23.625 14L4.125 3.875L6.29167 14ZM6.29167 14L14.9583 14"
+          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
           propList={
             [
               "stroke",
@@ -211,11 +228,11 @@ exports[`Message Input test render a message text input component with placehold
   >
     <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}
@@ -227,14 +244,14 @@ exports[`Message Input test render a message text input component with placehold
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={22}
+      vbWidth={21}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -245,7 +262,7 @@ exports[`Message Input test render a message text input component with placehold
         }
       >
         <RNSVGPath
-          d="M16.4359 7.58333L9.30125 14.7179C8.45511 15.5641 8.45511 16.9359 9.30125 17.7821C10.1474 18.6282 11.5192 18.6282 12.3654 17.7821L19.3141 10.6475C21.0064 8.95519 21.0064 6.21148 19.3141 4.5192C17.6218 2.82693 14.8781 2.82693 13.1859 4.5192L6.23712 11.6538C3.69871 14.1922 3.69871 18.3078 6.23712 20.8462C8.77553 23.3846 12.8911 23.3846 15.4295 20.8462L22.2083 14.0833"
+          d="M13.4359 5.58333L6.30125 12.7179C5.45511 13.5641 5.45511 14.9359 6.30125 15.7821C7.14739 16.6282 8.51924 16.6282 9.36538 15.7821L16.3141 8.64746C18.0064 6.95519 18.0064 4.21148 16.3141 2.5192C14.6218 0.826932 11.8781 0.826932 10.1859 2.5192L3.23712 9.65381C0.698711 12.1922 0.698711 16.3078 3.23712 18.8462C5.77553 21.3846 9.8911 21.3846 12.4295 18.8462L19.2083 12.0833"
           propList={
             [
               "stroke",
@@ -298,11 +315,11 @@ exports[`Message Input test render a message text input component with placehold
   >
     <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}
@@ -312,19 +329,36 @@ exports[`Message Input test render a message text input component with placehold
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          {
+            "transform": [
+              {
+                "rotate": "90deg",
+              },
+            ],
+          },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={28}
-      vbWidth={27}
-      width="28"
+      vbHeight={22}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
         propList={
           [
             "fill",
@@ -332,7 +366,7 @@ exports[`Message Input test render a message text input component with placehold
         }
       >
         <RNSVGPath
-          d="M6.29167 14L4.125 24.125L23.625 14L4.125 3.875L6.29167 14ZM6.29167 14L14.9583 14"
+          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
           propList={
             [
               "stroke",
@@ -387,11 +421,11 @@ exports[`Message Input test render a message text input component without placeh
   >
     <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}
@@ -403,14 +437,14 @@ exports[`Message Input test render a message text input component without placeh
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={22}
+      vbWidth={21}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -421,7 +455,7 @@ exports[`Message Input test render a message text input component without placeh
         }
       >
         <RNSVGPath
-          d="M16.4359 7.58333L9.30125 14.7179C8.45511 15.5641 8.45511 16.9359 9.30125 17.7821C10.1474 18.6282 11.5192 18.6282 12.3654 17.7821L19.3141 10.6475C21.0064 8.95519 21.0064 6.21148 19.3141 4.5192C17.6218 2.82693 14.8781 2.82693 13.1859 4.5192L6.23712 11.6538C3.69871 14.1922 3.69871 18.3078 6.23712 20.8462C8.77553 23.3846 12.8911 23.3846 15.4295 20.8462L22.2083 14.0833"
+          d="M13.4359 5.58333L6.30125 12.7179C5.45511 13.5641 5.45511 14.9359 6.30125 15.7821C7.14739 16.6282 8.51924 16.6282 9.36538 15.7821L16.3141 8.64746C18.0064 6.95519 18.0064 4.21148 16.3141 2.5192C14.6218 0.826932 11.8781 0.826932 10.1859 2.5192L3.23712 9.65381C0.698711 12.1922 0.698711 16.3078 3.23712 18.8462C5.77553 21.3846 9.8911 21.3846 12.4295 18.8462L19.2083 12.0833"
           propList={
             [
               "stroke",
@@ -473,11 +507,11 @@ exports[`Message Input test render a message text input component without placeh
   >
     <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}
@@ -487,19 +521,36 @@ exports[`Message Input test render a message text input component without placeh
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          {
+            "transform": [
+              {
+                "rotate": "90deg",
+              },
+            ],
+          },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={28}
-      vbWidth={27}
-      width="28"
+      vbHeight={22}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
         propList={
           [
             "fill",
@@ -507,7 +558,7 @@ exports[`Message Input test render a message text input component without placeh
         }
       >
         <RNSVGPath
-          d="M6.29167 14L4.125 24.125L23.625 14L4.125 3.875L6.29167 14ZM6.29167 14L14.9583 14"
+          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
           propList={
             [
               "stroke",
@@ -562,11 +613,11 @@ exports[`Message Input test render a message text input component without placeh
   >
     <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}
@@ -578,14 +629,14 @@ exports[`Message Input test render a message text input component without placeh
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={22}
+      vbWidth={21}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -596,7 +647,7 @@ exports[`Message Input test render a message text input component without placeh
         }
       >
         <RNSVGPath
-          d="M16.4359 7.58333L9.30125 14.7179C8.45511 15.5641 8.45511 16.9359 9.30125 17.7821C10.1474 18.6282 11.5192 18.6282 12.3654 17.7821L19.3141 10.6475C21.0064 8.95519 21.0064 6.21148 19.3141 4.5192C17.6218 2.82693 14.8781 2.82693 13.1859 4.5192L6.23712 11.6538C3.69871 14.1922 3.69871 18.3078 6.23712 20.8462C8.77553 23.3846 12.8911 23.3846 15.4295 20.8462L22.2083 14.0833"
+          d="M13.4359 5.58333L6.30125 12.7179C5.45511 13.5641 5.45511 14.9359 6.30125 15.7821C7.14739 16.6282 8.51924 16.6282 9.36538 15.7821L16.3141 8.64746C18.0064 6.95519 18.0064 4.21148 16.3141 2.5192C14.6218 0.826932 11.8781 0.826932 10.1859 2.5192L3.23712 9.65381C0.698711 12.1922 0.698711 16.3078 3.23712 18.8462C5.77553 21.3846 9.8911 21.3846 12.4295 18.8462L19.2083 12.0833"
           propList={
             [
               "stroke",
@@ -648,11 +699,11 @@ exports[`Message Input test render a message text input component without placeh
   >
     <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}
@@ -662,19 +713,36 @@ exports[`Message Input test render a message text input component without placeh
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          {
+            "transform": [
+              {
+                "rotate": "90deg",
+              },
+            ],
+          },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={28}
-      vbWidth={27}
-      width="28"
+      vbHeight={22}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
+        matrix={
+          [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ]
+        }
         propList={
           [
             "fill",
@@ -682,7 +750,7 @@ exports[`Message Input test render a message text input component without placeh
         }
       >
         <RNSVGPath
-          d="M6.29167 14L4.125 24.125L23.625 14L4.125 3.875L6.29167 14ZM6.29167 14L14.9583 14"
+          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
           propList={
             [
               "stroke",

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

@@ -27,7 +27,11 @@ const MessageInput = ({
   return (
     <View style={styles.rootContainer}>
       <Pressable onPress={() => console.log('pressed add attachment')}>
-        <Icon.Outline.PaperClip color={Context.colors.ui.black} />
+        <Icon
+          style={'regular'}
+          name={'paper-clip'}
+          color={Context.colors.ui.black}
+        />
       </Pressable>
       <RNTextInput
         style={styles.textInput}
@@ -39,7 +43,11 @@ const MessageInput = ({
         keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
       />
       <Pressable onPress={onPressSend}>
-        <Icon.Outline.PaperAirplane color={Context.colors.ui.black} />
+        <Icon
+          style={'regular'}
+          name={'paper-airplane'}
+          color={Context.colors.ui.black}
+        />
       </Pressable>
     </View>
   );

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

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`more info button should render a more info button in a black text color, underlined 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": "Montserrat",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#000000",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        {
+          "textDecorationLine": "underline",
+        },
+      ]
+    }
+  >
+    Meer info
+  </Text>
+</View>
+`;
+
+exports[`more info button should render a more info button in a white text color, underlined 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": "Montserrat",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        {
+          "textDecorationLine": "underline",
+        },
+      ]
+    }
+  >
+    More info
+  </Text>
+</View>
+`;

package/src/components/molecules/more-info-button/more-info-button.component.d.ts

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

package/src/components/molecules/more-info-button/more-info-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 './more-info-button.styles';
+import {Paragraph} from '../../atoms/paragraph-components';
+
+type MoreInfoButtonProps = {
+  label: string;
+  onPress?: () => void;
+  textColor?: string;
+};
+
+export const MoreInfoButton = ({
+  label,
+  onPress,
+  textColor,
+}: MoreInfoButtonProps) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <Paragraph
+        textAlign={'center'}
+        textColor={textColor ? textColor : Context.colors.ui.white}
+        addStyle={styles.underline}
+      >
+        {label}
+      </Paragraph>
+    </Pressable>
+  );
+};

package/src/components/molecules/more-info-button/more-info-button.preview.d.ts

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

package/src/components/molecules/more-info-button/more-info-button.preview.tsx

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

package/src/components/molecules/more-info-button/more-info-button.styles.d.ts

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

package/src/components/molecules/more-info-button/more-info-button.styles.js

@@ -0,0 +1,15 @@
+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',
+    },
+    underline: {
+      textDecorationLine: 'underline',
+    },
+  });