@tactics/toddle-styleguide 1.0.2 → 1.0.4

package/src/components/atoms/heading-components/all-caps-heading/__snapshots__/all-caps-heading.test.js.snap

@@ -20,6 +20,7 @@ exports[`Test for the all caps heading component should render an all caps headi
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -47,6 +48,7 @@ exports[`Test for the all caps heading component should render an all caps headi
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -74,6 +76,7 @@ exports[`Test for the all caps heading component should render an all caps headi
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -101,6 +104,7 @@ exports[`Test for the all caps heading component should render an all caps headi
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, }: TextProperties) => JSX.Element;
+export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.tsx

@@ -9,9 +9,20 @@ export const AllCapsHeading = ({
   children,
   textColor,
   textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
-  return <Text style={[styles.allCaps, styles.main]}>{children}</Text>;
+  return (
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.allCaps, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
+  );
 };

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, }: TextProperties) => JSX.Element;
+export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.tsx

@@ -10,11 +10,19 @@ export const Heading1 = ({
   textColor,
   textAlign,
   addStyle,
+  ellipsizeMode,
+  numberOfLines,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
   return (
-    <Text style={[styles.heading1, styles.main, addStyle]}>{children}</Text>
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.heading1, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
   );
 };

package/src/components/atoms/heading-components/heading3/heading3.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, }: TextProperties) => JSX.Element;
+export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading3/heading3.component.tsx

@@ -10,11 +10,19 @@ export const Heading3 = ({
   textColor,
   textAlign,
   addStyle,
+  numberOfLines,
+  ellipsizeMode,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
   return (
-    <Text style={[styles.heading3, styles.main, addStyle]}>{children}</Text>
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.heading3, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
   );
 };

package/src/components/atoms/heading-components/heading4/heading4.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, }: TextProperties) => JSX.Element;
+export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading4/heading4.component.tsx

@@ -10,11 +10,19 @@ export const Heading4 = ({
   textColor,
   textAlign,
   addStyle,
+  numberOfLines,
+  ellipsizeMode,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
   return (
-    <Text style={[styles.heading4, styles.main, addStyle]}>{children}</Text>
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.heading4, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
   );
 };

package/src/components/atoms/static-wave/static-wave.component.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle } from 'react-native';
+export declare type WaveProps = {
+    customStyle?: ViewStyle;
+    customWavePath?: string;
+    heightSvgContainer?: number;
+    positionTop?: number;
+};
+export declare const StaticWave: ({ customStyle, customWavePath, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;

package/src/components/atoms/static-wave/static-wave.component.tsx

@@ -0,0 +1,46 @@
+import React, {useContext} from 'react';
+import {Dimensions, View, ViewStyle} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './static-wave.styles';
+
+// https://getwaves.io/ -> create custom waves
+
+export type WaveProps = {
+  customStyle?: ViewStyle;
+  customWavePath?: string;
+  heightSvgContainer?: number;
+  positionTop?: number;
+};
+
+export const StaticWave = ({
+  customStyle,
+  customWavePath,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => {
+  const {width} = Dimensions.get('window');
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, heightSvgContainer, width);
+  return (
+    <View style={!customStyle ? styles.rootContainer : customStyle}>
+      <View style={styles.svgContainer}>
+        <Svg
+          height="60%"
+          width="100%"
+          viewBox="0 0 1440 320"
+          style={{position: 'absolute', top: !positionTop ? 210 : positionTop}}
+        >
+          <Path
+            fill={Context.colors.main['5']}
+            d={
+              !customWavePath
+                ? 'M0,160L60,133.3C120,107,240,53,360,58.7C480,64,600,128,720,181.3C840,235,960,277,1080,282.7C1200,288,1320,256,1380,240L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'
+                : customWavePath
+            }
+          />
+        </Svg>
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/static-wave/static-wave.styles.d.ts

@@ -0,0 +1,14 @@
+export function Stylesheet(
+  Context: any,
+  height: any,
+  width: any
+): {
+  rootContainer: {
+    position: 'absolute';
+    width: any;
+  };
+  svgContainer: {
+    backgroundColor: any;
+    height: any;
+  };
+};

package/src/components/atoms/static-wave/static-wave.styles.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context, height, width) =>
+  StyleSheet.create({
+    rootContainer: {
+      position: 'absolute',
+      width: width,
+    },
+    svgContainer: {
+      backgroundColor: Context.colors.main['5'],
+      height: !height ? 250 : height,
+    },
+  });

package/src/components/molecules/select-list-item/__snapshots__/select-list-item.test.js.snap

@@ -103,6 +103,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [
@@ -315,6 +317,8 @@ exports[`test button component should render a select-list-item component with 1
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [
@@ -527,6 +531,8 @@ exports[`test button component should render a select-list-item component with 2
   >
     <View>
       <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
         style={
           [
             [

package/src/components/molecules/select-list-item/select-list-item-preview.tsx

@@ -15,7 +15,7 @@ export const SelectListItemPreview = ({}: {}) => {
       }}
     >
       <SelectListItem
-        title="Vlindertjes"
+        title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'user-group'} size={27} />}
         onPress={() => console.log('clicked')}

package/src/components/molecules/select-list-item/select-list-item.component.tsx

@@ -39,7 +39,12 @@ const SelectListItem = ({
       </View>
       <View style={styles.textContainer}>
         <View>
-          <Heading2 bold={true} textColor={context.colors.ui.white}>
+          <Heading2
+            bold={true}
+            textColor={context.colors.ui.white}
+            numberOfLines={2}
+            ellipsizeMode={'tail'}
+          >
             {title}
           </Heading2>
         </View>

package/src/components/molecules/wave-background/__snapshots__/wave.test.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test wave background should render a wave background 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#4055A8",
+      "height": 1334,
+      "position": "absolute",
+      "width": 750,
+      "zIndex": -1,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "flex-start",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "position": "absolute",
+          "top": "-1%",
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "aspectRatio": 1,
+            },
+            undefined,
+            {
+              "backgroundColor": "#647ACB",
+              "width": 814,
+            },
+          ]
+        }
+      >
+        <View
+          autoPlay={true}
+          cacheComposition={true}
+          collapsable={false}
+          colorFilters={[]}
+          enableMergePathsAndroidForKitKatAndAbove={false}
+          forwardedRef={[Function]}
+          loop={true}
+          onAnimationFinish={[Function]}
+          onLayout={[Function]}
+          progress={0}
+          resizeMode="contain"
+          sourceJson="{"nm":"circle_blue","mn":"","layers":[{"ty":0,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":true,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[89,89,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[500.00000000000006,500.00000000000006,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"Mask 1","mn":"","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":0,"k":{"c":true,"i":[[49.153,0],[0,-49.153],[-49.153,0],[0,49.153]],"o":[[-49.153,0],[0,49.153],[49.153,0],[0,-49.153]],"v":[[89,0],[0,89],[89,178],[178,89]]},"ix":1}}],"w":178,"h":178,"refId":"comp_0","ind":1},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[494.8314606741573,233.8876404494382,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[178,178],"ix":2}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0.92,47.368],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 2","e":{"a":0,"k":[0,45],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.25098039215686274,0.3333333333333333,0.6588235294117647,0.5,0.25098039215686274,0.3333333333333333,0.6588235294117647,1,0.25098039215686274,0.3333333333333333,0.6588235294117647],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[0,360],"ix":5},"r":1,"o":{"a":0,"k":89,"ix":10}},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 1","e":{"a":0,"k":[75,0],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.25098039215686274,0.3333333333333333,0.6588235294117647,0.5,0.25098039215686274,0.3333333333333333,0.6588235294117647,1,0.25098039215686274,0.3333333333333333,0.6588235294117647],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[-54,0],"ix":5},"r":1,"o":{"a":0,"k":100,"ix":10}}],"ind":2}],"ddd":0,"h":1000,"w":1000,"meta":{"a":"","k":"","d":"","g":"LottieFiles AE 0.1.21","tc":"#000000"},"v":"3.4.1","fr":8,"op":60.0000024438501,"ip":0,"assets":[{"nm":"","mn":"","layers":[{"ty":4,"nm":"wave_2 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,89,0],"t":0,"ti":[-29.667,0,0],"to":[29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,89,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[45.859,9.977],[13.272,-0.001]],"o":[[0,0],[-0.03,0.007],[0,0],[-45.859,-9.977],[0,0],[0,0],[0,0],[0,0],[-0.031,0.007],[0,0],[-15.288,-3.326],[-26.538,0]],"v":[[0,-22.84],[0,-22.852],[-0.052,-22.84],[-88.423,-22.84],[-178,-22.84],[-178,32.816],[0,32.816],[178,32.816],[178,-22.852],[177.948,-22.84],[89.576,-22.84],[45.971,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.251,0.3333,0.6588],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":1},{"ty":4,"nm":"wave_1 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,91,0],"t":0,"ti":[29.667,0,0],"to":[-29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,91,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":50,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[15.288,-3.326],[0,0],[0.031,0.007],[0,0],[45.858,-9.977],[0,0],[0.031,0.007],[0,0],[0,0],[0,0],[0,0],[26.539,0]],"o":[[-45.857,9.977],[0,0],[0,0],[0,0],[-45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-13.272,-0.001]],"v":[[88.423,-22.84],[0.051,-22.84],[0,-22.852],[0,-22.84],[-89.576,-22.84],[-177.948,-22.84],[-178,-22.852],[-178,32.816],[0,32.816],[178,32.816],[178,-22.84],[132.029,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.251,0.3333,0.6588],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":2}],"id":"comp_0"}]}"
+          speed={1}
+          style={
+            {
+              "aspectRatio": 1,
+              "backgroundColor": "#647ACB",
+              "height": "100%",
+              "width": 814,
+            }
+          }
+          textFiltersAndroid={[]}
+          textFiltersIOS={[]}
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#4055A8",
+          "height": "30%",
+          "position": "absolute",
+          "top": "38%",
+          "width": "100%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`test wave background should render a wave background for android specific we will give some props that it should render 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#4055A8",
+      "height": 1334,
+      "position": "absolute",
+      "width": 750,
+      "zIndex": -1,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "flex-start",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "position": "absolute",
+          "top": "-1%",
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "aspectRatio": 1,
+            },
+            undefined,
+            {
+              "backgroundColor": "#647ACB",
+              "width": 814,
+            },
+          ]
+        }
+      >
+        <View
+          autoPlay={true}
+          cacheComposition={true}
+          collapsable={false}
+          colorFilters={[]}
+          enableMergePathsAndroidForKitKatAndAbove={false}
+          forwardedRef={[Function]}
+          loop={true}
+          onAnimationFinish={[Function]}
+          onLayout={[Function]}
+          progress={0}
+          resizeMode="contain"
+          sourceJson="{"nm":"circle_blue","mn":"","layers":[{"ty":0,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":true,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[89,89,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[500.00000000000006,500.00000000000006,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"Mask 1","mn":"","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":0,"k":{"c":true,"i":[[49.153,0],[0,-49.153],[-49.153,0],[0,49.153]],"o":[[-49.153,0],[0,49.153],[49.153,0],[0,-49.153]],"v":[[89,0],[0,89],[89,178],[178,89]]},"ix":1}}],"w":178,"h":178,"refId":"comp_0","ind":1},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[494.8314606741573,233.8876404494382,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[178,178],"ix":2}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0.92,47.368],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 2","e":{"a":0,"k":[0,45],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.25098039215686274,0.3333333333333333,0.6588235294117647,0.5,0.25098039215686274,0.3333333333333333,0.6588235294117647,1,0.25098039215686274,0.3333333333333333,0.6588235294117647],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[0,360],"ix":5},"r":1,"o":{"a":0,"k":89,"ix":10}},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 1","e":{"a":0,"k":[75,0],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.25098039215686274,0.3333333333333333,0.6588235294117647,0.5,0.25098039215686274,0.3333333333333333,0.6588235294117647,1,0.25098039215686274,0.3333333333333333,0.6588235294117647],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[-54,0],"ix":5},"r":1,"o":{"a":0,"k":100,"ix":10}}],"ind":2}],"ddd":0,"h":1000,"w":1000,"meta":{"a":"","k":"","d":"","g":"LottieFiles AE 0.1.21","tc":"#000000"},"v":"3.4.1","fr":8,"op":60.0000024438501,"ip":0,"assets":[{"nm":"","mn":"","layers":[{"ty":4,"nm":"wave_2 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,89,0],"t":0,"ti":[-29.667,0,0],"to":[29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,89,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[45.859,9.977],[13.272,-0.001]],"o":[[0,0],[-0.03,0.007],[0,0],[-45.859,-9.977],[0,0],[0,0],[0,0],[0,0],[-0.031,0.007],[0,0],[-15.288,-3.326],[-26.538,0]],"v":[[0,-22.84],[0,-22.852],[-0.052,-22.84],[-88.423,-22.84],[-178,-22.84],[-178,32.816],[0,32.816],[178,32.816],[178,-22.852],[177.948,-22.84],[89.576,-22.84],[45.971,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.251,0.3333,0.6588],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":1},{"ty":4,"nm":"wave_1 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,91,0],"t":0,"ti":[29.667,0,0],"to":[-29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,91,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":50,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[15.288,-3.326],[0,0],[0.031,0.007],[0,0],[45.858,-9.977],[0,0],[0.031,0.007],[0,0],[0,0],[0,0],[0,0],[26.539,0]],"o":[[-45.857,9.977],[0,0],[0,0],[0,0],[-45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-13.272,-0.001]],"v":[[88.423,-22.84],[0.051,-22.84],[0,-22.852],[0,-22.84],[-89.576,-22.84],[-177.948,-22.84],[-178,-22.852],[-178,32.816],[0,32.816],[178,32.816],[178,-22.84],[132.029,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.251,0.3333,0.6588],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":2}],"id":"comp_0"}]}"
+          speed={1}
+          style={
+            {
+              "aspectRatio": 1,
+              "backgroundColor": "#647ACB",
+              "height": "100%",
+              "width": 814,
+            }
+          }
+          textFiltersAndroid={[]}
+          textFiltersIOS={[]}
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#4055A8",
+          "height": "30%",
+          "position": "absolute",
+          "top": "38%",
+          "width": "100%",
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/molecules/wave-background/wave.component.d.ts

@@ -0,0 +1,2 @@
+import { WaveProps } from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;

package/src/components/molecules/wave-background/wave.component.tsx

@@ -0,0 +1,35 @@
+import React, {useContext} from 'react';
+import {Dimensions, Platform, View} from 'react-native';
+import {
+  StaticWave,
+  WaveProps,
+} from '../../atoms/static-wave/static-wave.component';
+import {Stylesheet} from './wave.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+import {AnimatedWave} from '../../atoms/animated-wave/animated-wave.component';
+
+export const WaveBackground = ({
+  customWavePath,
+  customStyle,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => {
+  const {width, height} = Dimensions.get('window');
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, width, height);
+
+  return (
+    <View style={styles.container}>
+      {Platform.OS === 'ios' ? (
+        <AnimatedWave />
+      ) : (
+        <StaticWave
+          customStyle={customStyle}
+          customWavePath={customWavePath}
+          heightSvgContainer={heightSvgContainer}
+          positionTop={positionTop}
+        />
+      )}
+    </View>
+  );
+};

package/src/components/molecules/wave-background/wave.preview.d.ts

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

package/src/components/molecules/wave-background/wave.preview.tsx

@@ -0,0 +1,78 @@
+import React, {useContext, useState} from 'react';
+import {SafeAreaView, View, Platform, StatusBar} from 'react-native';
+import {WaveBackground} from './wave.component';
+import {Logo} from '../../atoms/logo/logo.component';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Heading1, Heading4} from '../../atoms/heading-components';
+import {Paragraph} from '../../atoms/paragraph-components';
+import {SelectPicker} from '../select-picker/select-picker.component';
+
+export const WaveBackgroundPreview = ({}: {}) => {
+  const regions = [
+    {value: 'Leuven', label: 'Leuven'},
+    {value: 'Brussel', label: 'Brussel'},
+    {value: 'Antwerpen', label: 'Antwerpen'},
+  ];
+  const [selectedRegion, setSelectedRegion] = useState('');
+  const Context = useContext(ThemeCtx);
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: Context.colors.main['5'],
+      }}
+    >
+      <WaveBackground />
+      <View
+        style={{
+          width: '100%',
+          height: '100%',
+          paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+      >
+        <View
+          style={{
+            marginTop: 16 * 3.5,
+            marginBottom: 16 * 5.5,
+            alignItems: 'center',
+          }}
+        >
+          <Logo big={true} colorIsWhite={true} />
+        </View>
+
+        <View>
+          <Heading1
+            bold={true}
+            textColor={Context.colors.ui.white}
+            textAlign={'left'}
+            addStyle={{marginBottom: 64}}
+          >
+            Welkom,
+          </Heading1>
+          <Heading4
+            bold={true}
+            textColor={Context.colors.ui.white}
+            addStyle={{marginBottom: 8}}
+          >
+            Regio
+          </Heading4>
+          <Paragraph
+            textColor={Context.colors.ui.white}
+            addStyle={{marginBottom: 16}}
+          >
+            Deze krijgt u toegestuurd van het kinderdagverblijf bij de start van
+            uw opvangtraject.
+          </Paragraph>
+          <SelectPicker
+            placeholder={'Choose your region'}
+            data={regions}
+            onChange={setSelectedRegion}
+            defaultValue={selectedRegion}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};

package/src/components/molecules/wave-background/wave.styles.d.ts

@@ -0,0 +1,13 @@
+export function Stylesheet(
+  Context: any,
+  width: any,
+  height: any
+): {
+  container: {
+    width: any;
+    height: any;
+    backgroundColor: any;
+    position: 'absolute';
+    zIndex: number;
+  };
+};

package/src/components/molecules/wave-background/wave.styles.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context, width, height) =>
+  StyleSheet.create({
+    container: {
+      width: width,
+      height: height,
+      backgroundColor: Context.colors.main['3'],
+      position: 'absolute',
+      zIndex: -1,
+    },
+  });