@tactics/toddle-styleguide 0.0.1

package/src/components/atoms/text-bubble/text-bubble.test.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TextBubble} from './text-bubble.component';
+
+describe('test text-bubble', () => {
+  it('given the visualState is ERROR return a red colored text-bubble AND white text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="ERROR"
+          bubbleAlignment="SENT"
+          text="TEST color"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is WARNING return an orange colored text-bubble AND white text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="WARNING"
+          bubbleAlignment="SENT"
+          text="TEST color"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="DEFAULT"
+          bubbleAlignment="SENT"
+          text="TEST color"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="DEFAULT"
+          bubbleAlignment="SENT"
+          text="TEST Bubble"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="DEFAULT"
+          bubbleAlignment="RECEIVE"
+          text="TEST Bubble"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a textBubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          visualState="DEFAULT"
+          bubbleAlignment="RECEIVE"
+          text="TEST Bubble"
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test input texts shows icon when provided 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "overflow": "hidden",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+    }
+  }
+>
+  <TextInput
+    keyboardType="email-address"
+    onChangeText={[Function]}
+    style={
+      {
+        "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 22.4,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`test input texts shows placeholder when provided 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "overflow": "hidden",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+    }
+  }
+>
+  <TextInput
+    keyboardType="default"
+    onChangeText={[Function]}
+    placeholder="dummy placeholder"
+    style={
+      {
+        "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 22.4,
+      }
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import {View, TextInput as NativeTextInput} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './text-input.styles';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+
+type TextInputProps = {
+  placeholder?: string;
+  onchangeText?: (text: string) => void;
+  keyboardType: KeyBoardTypes;
+};
+
+const TextInput = ({
+  placeholder,
+  onchangeText,
+  keyboardType,
+}: TextInputProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <NativeTextInput
+        placeholder={placeholder}
+        style={styles.input}
+        onChangeText={onchangeText}
+        keyboardType={keyboardType}
+      />
+    </View>
+  );
+};
+export {TextInput as TextInput};

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {TextInput} from './text-input.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import {SafeAreaView} from "react-native";
+
+export const TextInputPreview = ({} = {}) => {
+  return (
+    <SafeAreaView>
+      <TextInput
+        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        keyboardType={KeyBoardTypes.DECIMAL_PAD}
+      />
+      <TextInput
+        placeholder={'placeholder text'}
+        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        keyboardType={KeyBoardTypes.DEFAULT}
+      />
+      <TextInput
+        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+      />
+    </SafeAreaView>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      borderColor: context.colors.ui.lightgrey,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      backgroundColor: context.colors.ui.white,
+      borderRadius: Scale.xs,
+      overflow: 'hidden',
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.m,
+    },
+    input: {
+      flex: 1,
+      ...Font.medium,
+    }
+  });

package/src/components/atoms/text-input/text-input.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TextInput} from './text-input.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+
+describe('test input texts', () => {
+  it('shows placeholder when provided', () => {
+    const tree = renderer
+      .create(
+        <TextInput
+          keyboardType={KeyBoardTypes.DEFAULT}
+          placeholder="dummy placeholder"
+          onchangeText={() => console.log('text changed')}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('shows icon when provided', () => {
+    const tree = renderer
+      .create(
+        <TextInput
+          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
+          onchangeText={() => console.log('text changed')}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/time-tracker/__snapshots__/time-tracker.test.js.snap

@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test time-tracker given the visualState is DEFAULT return a blue colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  />
+  <Text
+    style={
+      {
+        "fontFamily": "Montserrat",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    3u45
+  </Text>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is ERROR return a red colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        false,
+        false,
+        {
+          "backgroundColor": "#F16868",
+        },
+      ]
+    }
+  />
+  <Text
+    style={
+      {
+        "fontFamily": "Montserrat",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    3u45
+  </Text>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is SUCCESS return a green colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        {
+          "backgroundColor": "#83D56C",
+        },
+        false,
+        false,
+      ]
+    }
+  />
+  <Text
+    style={
+      {
+        "fontFamily": "Montserrat",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    3u45
+  </Text>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is WARNING return an orange colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": "#FCBF6F",
+        },
+        false,
+      ]
+    }
+  />
+  <Text
+    style={
+      {
+        "fontFamily": "Montserrat",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    3u45
+  </Text>
+</View>
+`;
+
+exports[`test time-tracker text has color when a color is given as property 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  />
+  <Text
+    style={
+      {
+        "fontFamily": "Montserrat",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    3u45
+  </Text>
+</View>
+`;

package/src/components/atoms/time-tracker/time-tracker.component.tsx

@@ -0,0 +1,24 @@
+import React, {useContext} from 'react';
+import {Stylesheet} from '../time-tracker/time-tracker.styles';
+import {Text, View} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {ThemeCtx} from '../../../context/theme.context';
+
+type TimeTrackerProps = {
+  text: string;
+  visualState: VisualState;
+};
+
+const TimeTracker = ({text, visualState}: TimeTrackerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, visualState);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.bal} />
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  );
+};
+
+export {TimeTracker as TimeTracker};

package/src/components/atoms/time-tracker/time-tracker.preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {View} from 'react-native';
+import {TimeTracker} from './time-tracker.component';
+
+export const TimeTrackerPreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <TimeTracker text={'niet gepland'} visualState={VisualState.DEFAULT} />
+      <TimeTracker text={'3u45m'} visualState={VisualState.SUCCESS} />
+      <TimeTracker text={'9u45m'} visualState={VisualState.WARNING} />
+      <TimeTracker text={'17u05m'} visualState={VisualState.ERROR} />
+    </View>
+  );
+};

package/src/components/atoms/time-tracker/time-tracker.styles.js

@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+
+import {VisualState} from '../../../types/visual-state.enum';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, visualState) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    bal: [
+      {
+        width: Scale.s,
+        height: Scale.s,
+        borderRadius: Scale.s / 2,
+        marginRight: Scale.xxs,
+      },
+      visualState === VisualState.DEFAULT && {
+        backgroundColor: context.colors.main['0'],
+      },
+      visualState === VisualState.SUCCESS && {
+        backgroundColor: context.colors.ui.success.default,
+      },
+      visualState === VisualState.WARNING && {
+        backgroundColor: context.colors.ui.warning.default,
+      },
+      visualState === VisualState.ERROR && {
+        backgroundColor: context.colors.ui.error.default,
+      },
+    ],
+    text: {
+      ...Font.tiny,
+    },
+  });

package/src/components/atoms/time-tracker/time-tracker.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TimeTracker} from './time-tracker.component';
+import render from 'react-test-renderer';
+
+describe('test time-tracker', () => {
+  it('given the visualState is DEFAULT return a blue colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="DEFAULT" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is SUCCESS return a green colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="SUCCESS" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is WARNING return an orange colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="WARNING" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is ERROR return a red colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="ERROR" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('text has color when a color is given as property', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="DEFAULT" color="red" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/wide-button/__snapshots__/wide-button.test.js.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test wide-button component should render a wide-button component 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",
+      "backgroundColor": "#19216C",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "90%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#E0E8F9",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+     
+    Bevestigen
+     
+  </Text>
+</View>
+`;
+
+exports[`test wide-button component should render a wide-button component that is disabled 1`] = `
+<View
+  accessibilityState={
+    {
+      "disabled": true,
+    }
+  }
+  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",
+      "backgroundColor": "#E5E8EB",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "90%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#515F6C",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+     
+    Bevestigen
+     
+  </Text>
+</View>
+`;