@tactics/toddle-styleguide 0.0.1

package/src/components/atoms/form-actions/__snapshots__/form-action.test.js.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test form-actions renders correctly when ONLY a button is provided  1`] = `
+<View
+  style={
+    {
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        {},
+      ]
+    }
+  >
+    <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]}
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#19216C",
+            "borderRadius": 50,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "paddingHorizontal": 24,
+            "paddingVertical": 12,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#E0E8F9",
+              "fontFamily": "SourceSansPro",
+              "fontSize": 16,
+              "lineHeight": 22.4,
+            }
+          }
+        >
+          Toepassen
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test form-actions renders correctly when providing button AND cancel-link 1`] = `
+<View
+  style={
+    {
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        {
+          "justifyContent": "space-between",
+        },
+      ]
+    }
+  >
+    <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]}
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 50,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "paddingHorizontal": 24,
+            "paddingVertical": 12,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#F16868",
+              "fontFamily": "SourceSansPro",
+              "fontSize": 16,
+              "lineHeight": 22.4,
+            }
+          }
+        >
+          Filter Wissen
+        </Text>
+      </View>
+    </View>
+    <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]}
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#19216C",
+            "borderRadius": 50,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "paddingHorizontal": 24,
+            "paddingVertical": 12,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#E0E8F9",
+              "fontFamily": "SourceSansPro",
+              "fontSize": 16,
+              "lineHeight": 22.4,
+            }
+          }
+        >
+          Toepassen
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/atoms/form-actions/form-action.component.tsx

@@ -0,0 +1,25 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {View} from 'react-native';
+import {Stylesheet} from './form-action.styles';
+
+type formActionProps = {
+  button: React.ReactNode;
+  cancel?: React.ReactNode;
+};
+
+const FormAction = ({button, cancel}: formActionProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.element}>
+      <View style={[styles.inner, cancel ? styles.cancel : {}]}>
+        {cancel ? cancel : null}
+        {button}
+      </View>
+    </View>
+  );
+};
+
+export {FormAction as FormAction};

package/src/components/atoms/form-actions/form-action.preview.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Button} from '../button/button.component';
+import {CancelLink} from '../cancel-link/cancel-link.component';
+import {View} from 'react-native';
+import {FormAction} from './form-action.component';
+
+export const FormActionPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <FormAction button={<Button label="test enkel button" />} />
+
+      <FormAction
+        button={<Button label="test button" />}
+        cancel={
+          <CancelLink
+            label="test cancel"
+            onPress={() => console.log('cancel')}
+          />
+        }
+      />
+    </View>
+  );
+};

package/src/components/atoms/form-actions/form-action.styles.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      paddingRight: Scale.xs,
+      paddingLeft: Scale.xs,
+    },
+    inner: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    cancel: {
+      justifyContent: 'space-between',
+    },
+  });

package/src/components/atoms/form-actions/form-action.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {FormAction} from './form-action.component';
+import {Button} from '../button/button.component';
+import {CancelLink} from '../cancel-link/cancel-link.component';
+
+describe('test form-actions', () => {
+  it('renders correctly when providing button AND cancel-link', () => {
+    const tree = renderer
+      .create(
+        <FormAction
+          button={<Button label={'Toepassen'} />}
+          cancel={
+            <CancelLink
+              label={'Filter Wissen'}
+              onPress={() => console.log('canceled')}
+            />
+          }
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly when ONLY a button is provided ', () => {
+    const tree = renderer
+      .create(<FormAction button={<Button label={'Toepassen'} />} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/image-bubble/__snapshots__/image-bubble.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test image-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 24,
+          "justifyContent": "center",
+          "maxWidth": "80%",
+          "overflow": "hidden",
+        },
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Image
+      style={
+        {
+          "resizeMode": "cover",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`test image-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 24,
+          "justifyContent": "center",
+          "maxWidth": "80%",
+          "overflow": "hidden",
+        },
+        {
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 32,
+          "marginLeft": 16,
+          "marginRight": 48,
+        },
+        false,
+      ]
+    }
+  >
+    <Image
+      style={
+        {
+          "resizeMode": "cover",
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/atoms/image-bubble/image-bubble.component.tsx

@@ -0,0 +1,25 @@
+import React, {useContext} from 'react';
+import {View, Image, ImageSourcePropType, ImageStyle} from 'react-native';
+import {Stylesheet} from './image-bubble.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+
+type ImageBubbleProps = {
+  source: ImageSourcePropType;
+  bubbleAlignment: BubbleAlignment;
+};
+
+const ImageBubble = ({source, bubbleAlignment}: ImageBubbleProps) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, bubbleAlignment);
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <Image style={styles.image as ImageStyle} source={source} />
+      </View>
+    </View>
+  );
+};
+
+export {ImageBubble as ImageBubble};

package/src/components/atoms/image-bubble/image-bubble.preview.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {ImageBubble} from './image-bubble.component';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+const {View} = require('react-native');
+
+export const ImageBubblePreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <ImageBubble
+        source={require('./../../../../assets/components/avatar/baby.png')}
+        bubbleAlignment={BubbleAlignment.SENT}
+      />
+      <ImageBubble
+        source={require('./../../../../assets/components/avatar/baby.png')}
+        bubbleAlignment={BubbleAlignment.RECEIVE}
+      />
+    </View>
+  );
+};

package/src/components/atoms/image-bubble/image-bubble.styles.js

@@ -0,0 +1,31 @@
+import {StyleSheet} from 'react-native';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, bubbleAlignment) =>
+  StyleSheet.create({
+    container: [
+      {
+        maxWidth: '80%',
+        borderRadius: Scale.l,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      bubbleAlignment === BubbleAlignment.RECEIVE && {
+        borderBottomLeftRadius: Scale.xs,
+        borderBottomRightRadius: Scale.xl,
+        marginRight: Scale.xxl,
+        marginLeft: Scale.m,
+      },
+      bubbleAlignment === BubbleAlignment.SENT && {
+        borderBottomRightRadius: Scale.xs,
+        borderBottomLeftRadius: Scale.xl,
+        marginLeft: Scale.xxl,
+        marginRight: Scale.m,
+      },
+    ],
+    image: {
+      resizeMode: 'cover',
+    },
+  });

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ImageBubble} from './image-bubble.component';
+
+describe('test image-bubble', () => {
+  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
+    const tree = renderer
+      .create(<ImageBubble bubbleAlignment="SENT" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(<ImageBubble bubbleAlignment="RECEIVE" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/info/__snapshots__/info.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test info component should render an info component with a label and description 1`] = `
+<View
+  style={
+    {
+      "alignItems": "flex-start",
+      "backgroundColor": "#F5F7FA",
+      "borderRadius": 16,
+      "justifyContent": "flex-start",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansProBold",
+        "fontSize": 18,
+        "lineHeight": 22.6,
+        "marginBottom": 4,
+      }
+    }
+  >
+    Mijn Gezin
+  </Text>
+  <Text
+    style={
+      {
+        "color": "#515F6C",
+        "fontFamily": "Montserrat",
+        "fontSize": 13,
+        "lineHeight": 20.4,
+      }
+    }
+  >
+    Volg hier de dag van uw kinderen
+  </Text>
+</View>
+`;

package/src/components/atoms/info/info.component.tsx

@@ -0,0 +1,22 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Text, View} from 'react-native';
+import {Stylesheet} from './info.styles';
+
+type InfoProps = {
+  label: string;
+  description: string;
+};
+
+const Info = ({label, description}: InfoProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <Text style={styles.description}>{description}</Text>
+    </View>
+  );
+};
+export {Info as Info};

package/src/components/atoms/info/info.preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Info} from './info.component';
+const {View} = require('react-native');
+
+export const InfoPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Info
+        label={'Mijn Gezin'}
+        description={'Volg hier de dag van uw kinderen'}
+      />
+    </View>
+  );
+};

package/src/components/atoms/info/info.styles.js

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      backgroundColor: context.colors.ui.xlightgrey,
+      borderRadius: Scale.m,
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      paddingVertical: Scale.s,
+      paddingHorizontal: Scale.l,
+    },
+    label: {
+      ...Font.largeBold,
+      color: context.colors.ui.black,
+      marginBottom: Scale.xxs,
+    },
+    description: {
+      ...Font.small,
+      color: context.colors.ui.darkgrey,
+    },
+  });

package/src/components/atoms/info/info.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Info} from './info.component';
+
+describe('Test info component', () => {
+  it('should render an info component with a label and description', () => {
+    const tree = renderer
+      .create(
+        <Info
+          label={'Mijn Gezin'}
+          description={'Volg hier de dag van uw kinderen'}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});