@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,611 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Message Input test render a message text input component with placeholder 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-end",
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "paddingRight": 4,
-      "width": "100%",
-    }
-  }
->
-  <TextInput
-    keyboardType="default"
-    multiline={true}
-    onChangeText={[Function]}
-    placeholder="Placeholder"
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "flex": 1,
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": "100%",
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "maxHeight": 100,
-        "paddingBottom": 10,
-        "paddingLeft": 16,
-        "paddingRight": 8,
-        "paddingTop": 10,
-      }
-    }
-    value="text value"
-  />
-  <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}
-    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,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "transform": [
-              {
-                "rotate": "90deg",
-              },
-            ],
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={22}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`Message Input test render a message text input component with placeholder and keyboard type 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-end",
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "paddingRight": 4,
-      "width": "100%",
-    }
-  }
->
-  <TextInput
-    keyboardType="email-address"
-    multiline={true}
-    onChangeText={[Function]}
-    placeholder="Placeholder"
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "flex": 1,
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": "100%",
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "maxHeight": 100,
-        "paddingBottom": 10,
-        "paddingLeft": 16,
-        "paddingRight": 8,
-        "paddingTop": 10,
-      }
-    }
-    value="text value"
-  />
-  <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}
-    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,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "transform": [
-              {
-                "rotate": "90deg",
-              },
-            ],
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={22}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`Message Input test render a message text input component without placeholder 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-end",
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "paddingRight": 4,
-      "width": "100%",
-    }
-  }
->
-  <TextInput
-    keyboardType="default"
-    multiline={true}
-    onChangeText={[Function]}
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "flex": 1,
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": "100%",
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "maxHeight": 100,
-        "paddingBottom": 10,
-        "paddingLeft": 16,
-        "paddingRight": 8,
-        "paddingTop": 10,
-      }
-    }
-    value="text value"
-  />
-  <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}
-    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,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "transform": [
-              {
-                "rotate": "90deg",
-              },
-            ],
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={22}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`Message Input test render a message text input component without placeholder and with keyboard type 1`] = `
-<View
-  style={
-    {
-      "alignItems": "flex-end",
-      "backgroundColor": "#FFFFFF",
-      "borderColor": "#E5E8EB",
-      "borderRadius": 8,
-      "borderStyle": "solid",
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "paddingRight": 4,
-      "width": "100%",
-    }
-  }
->
-  <TextInput
-    keyboardType="email-address"
-    multiline={true}
-    onChangeText={[Function]}
-    placeholderTextColor="#9AA5B1"
-    style={
-      {
-        "color": "#1F2933",
-        "flex": 1,
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": "100%",
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "maxHeight": 100,
-        "paddingBottom": 10,
-        "paddingLeft": 16,
-        "paddingRight": 8,
-        "paddingTop": 10,
-      }
-    }
-    value="text value"
-  />
-  <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}
-    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,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "transform": [
-              {
-                "rotate": "90deg",
-              },
-            ],
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={22}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 18.5833L21.625 20.75L11.5 1.25L1.375 20.75L11.5 18.5833ZM11.5 18.5833V9.91667"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { TextInputProps } from 'react-native';
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-interface MessageInputProps extends TextInputProps {
-    keyboardType?: KeyBoardTypes;
-    onPressSend: () => void;
-}
-declare const MessageInput: ({ keyboardType, onPressSend, ...props }: MessageInputProps) => React.JSX.Element;
-export { MessageInput };

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

@@ -1,54 +0,0 @@
-import React, {useContext} from 'react';
-import {
-  Pressable,
-  TextInput as RNTextInput,
-  TextInputProps,
-  View,
-} from 'react-native';
-import {Icon} from '../../../icons/index';
-import {Stylesheet} from './message-input.styles';
-import {ThemeCtx} from '../../../context/theme.context';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-
-interface MessageInputProps extends TextInputProps {
-  keyboardType?: KeyBoardTypes;
-  onPressSend: () => void;
-  // addAttachment: () => void;
-}
-
-const MessageInput = ({
-  keyboardType,
-  onPressSend,
-  ...props
-}: MessageInputProps) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context);
-
-  return (
-    <View style={styles.rootContainer}>
-      {/*<Pressable onPress={() => console.log('pressed add attachment')}>*/}
-      {/*  <Icon*/}
-      {/*    style={'regular'}*/}
-      {/*    name={'paper-clip'}*/}
-      {/*    color={Context.colors.ui.black}*/}
-      {/*  />*/}
-      {/*</Pressable>*/}
-      <RNTextInput
-        style={styles.textInput}
-        multiline={true}
-        placeholderTextColor={Context.colors.ui.grey}
-        keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
-        {...props}
-      />
-      <Pressable onPress={onPressSend} style={styles.iconContainer}>
-        <Icon
-          style={'regular'}
-          name={'paper-airplane'}
-          color={Context.colors.ui.black}
-        />
-      </Pressable>
-    </View>
-  );
-};
-
-export {MessageInput};

package/src/components/molecules/message-input/message-input.preview.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MessageInputPreview: ({}: {}) => React.JSX.Element;