@tactics/toddle-styleguide 5.0.4 → 5.0.5

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

@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import {KeyboardAvoidingView, Platform, View} from 'react-native';
+import {MessageInput} from './message-input.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+
+export const MessageInputPreview = ({}: {}) => {
+  const [input, setInput] = useState('');
+
+  const onChangeHandler = (text: string) => {
+    setInput(text);
+  };
+
+  const submitHandler = (text: string) => {
+    console.log(text);
+  };
+
+  const clear = () => {
+    setInput('');
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{
+        flex: 1,
+        backgroundColor: '#ECECEC',
+        borderRadius: 10,
+        paddingVertical: 5,
+        marginLeft: 10,
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          backgroundColor: 'white',
+        }}
+      >
+        <MessageInput
+          placeholder={'Type a message'}
+          value={input}
+          onChangeText={onChangeHandler}
+          onPressSend={() => {
+            submitHandler(input);
+            clear();
+          }}
+          keyboardType={KeyBoardTypes.DEFAULT}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};

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

@@ -0,0 +1,33 @@
+export function Stylesheet(context: any): {
+  rootContainer: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'flex-end';
+    backgroundColor: any;
+    borderStyle: 'solid';
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    paddingRight: number;
+  };
+  textInput: {
+    lineHeight: number;
+    color: any;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    justifyContent: 'center';
+    fontFamily: string;
+    fontSize: number;
+    maxHeight: number;
+    height: '100%';
+    flex: number;
+  };
+  iconContainer: {
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+};

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

@@ -0,0 +1,37 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    rootContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      backgroundColor: context.colors.ui.white,
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: context.colors.ui.lightgrey,
+      borderRadius: Scale.xs,
+      paddingRight: Scale.xxs,
+    },
+    textInput: {
+      maxHeight: 100,
+      height: '100%',
+      flex: 1,
+      ...Font.medium,
+      lineHeight: 20,
+      color: context.colors.ui.black,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.xs,
+      paddingTop: 10,
+      paddingBottom: 10,
+      justifyContent: 'center',
+    },
+    iconContainer: {
+      minWidth: 42,
+      minHeight: 42,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {MessageInput} from './message-input.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+
+describe('Message Input test', () => {
+  it('render a message text input component without placeholder', () => {
+    const tree = renderer
+      .create(
+        <MessageInput
+          onChangeText={() => console.log('text changed')}
+          value={'text value'}
+          onPressSend={() => console.log('send text')}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a message text input component with placeholder', () => {
+    const tree = renderer
+      .create(
+        <MessageInput
+          placeholder={'Placeholder'}
+          onChangeText={() => console.log('text changed')}
+          value={'text value'}
+          onPressSend={() => console.log('send text')}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a message text input component with placeholder and keyboard type', () => {
+    const tree = renderer
+      .create(
+        <MessageInput
+          placeholder={'Placeholder'}
+          onChangeText={() => console.log('text changed')}
+          value={'text value'}
+          onPressSend={() => console.log('send text')}
+          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a message text input component without placeholder and with keyboard type', () => {
+    const tree = renderer
+      .create(
+        <MessageInput
+          onChangeText={() => console.log('text changed')}
+          value={'text value'}
+          onPressSend={() => console.log('send text')}
+          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,133 @@
+// 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
+  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,
+    }
+  }
+>
+  <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
+  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,
+    }
+  }
+>
+  <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,8 @@
+import * as React from 'react';
+type MoreInfoButtonProps = {
+    label: string;
+    onPress?: () => void;
+    textColor?: string;
+};
+export declare const MoreInfoButton: ({ label, onPress, textColor, }: MoreInfoButtonProps) => React.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,2 @@
+import React from 'react';
+export declare const MoreInfoButtonPreview: ({}: {}) => React.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',
+    },
+  });

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {MoreInfoButton} from './more-info-button.component';
+
+describe('more info button', () => {
+  it('should render a more info button in a white text color, underlined', function () {
+    const tree = render
+      .create(
+        <MoreInfoButton
+          label="More info"
+          onPress={() => console.log('do something')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a more info button in a black text color, underlined', () => {
+    const tree = render
+      .create(
+        <MoreInfoButton
+          label="Meer info"
+          onPress={() => console.log('do something')}
+          textColor={'#000000'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});