@tactics/toddle-styleguide 1.0.2 → 1.1.0

package/src/components/molecules/swipe/__snapshots__/swipe.test.js.snap

@@ -108,6 +108,23 @@ exports[`Test Swipe component should render an swipe component with dots and nav
             }
           >
             <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}
@@ -186,6 +203,23 @@ exports[`Test Swipe component should render an swipe component with dots and nav
             }
           >
             <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}
@@ -324,7 +358,19 @@ exports[`Test Swipe component should render an swipe component with dots and nav
       <View
         accessibilityState={
           {
+            "busy": undefined,
+            "checked": undefined,
             "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
         accessible={true}
@@ -348,7 +394,19 @@ exports[`Test Swipe component should render an swipe component with dots and nav
       <View
         accessibilityState={
           {
+            "busy": undefined,
+            "checked": undefined,
             "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
         accessible={true}
@@ -370,8 +428,8 @@ exports[`Test Swipe component should render an swipe component with dots and nav
         <View>
           <RNSVGSvgView
             align="xMidYMid"
-            bbHeight={24}
-            bbWidth={24}
+            bbHeight="24"
+            bbWidth="24"
             fill="none"
             focusable={false}
             height={24}
@@ -413,7 +471,12 @@ exports[`Test Swipe component should render an swipe component with dots and nav
                     "strokeLinejoin",
                   ]
                 }
-                stroke={4279837036}
+                stroke={
+                  {
+                    "payload": 4279837036,
+                    "type": 0,
+                  }
+                }
                 strokeLinecap={1}
                 strokeLinejoin={1}
                 strokeWidth="2"

package/src/components/molecules/swipe/swipe.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type SwipeProps = {
+type SwipeProps = {
     children: React.ReactNode;
     onIndexChanged?: (index: number) => void;
 };

package/src/components/molecules/tag/__snapshots__/tag.test.js.snap

@@ -2,6 +2,23 @@
 
 exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected is true 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}
@@ -54,6 +71,23 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
 
 exports[`test Tag renders Tag correctly (grey, black text) 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}

package/src/components/molecules/tag/tag.component.d.ts

@@ -2,7 +2,7 @@ export interface TagPressEvent {
     value: string;
     isSelected: boolean;
 }
-declare type TagProps = {
+type TagProps = {
     value: string;
     text: string;
     isSelected?: boolean;

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,5 +1,5 @@
 import { VisualState } from '../../../types/visual-state.enum';
-declare type TimeTrackerProps = {
+type TimeTrackerProps = {
     text: string;
     textColor?: string;
     visualState: VisualState;

package/src/components/molecules/timeline/timeline.component.d.ts

@@ -1,4 +1,4 @@
-declare type TimelineProps = {
+type TimelineProps = {
     checkIn: string;
     checkOut?: string;
 };

package/src/components/molecules/timestamp/timestamp.component.d.ts

@@ -1,5 +1,5 @@
 import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
-declare type TimestampProps = {
+type TimestampProps = {
     sent: ToddleDateTime;
 };
 export declare const Timestamp: ({ sent }: TimestampProps) => JSX.Element;

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

@@ -0,0 +1,175 @@
+// 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
+          cacheComposition={true}
+          collapsable={false}
+          colorFilters={[]}
+          enableMergePathsAndroidForKitKatAndAbove={false}
+          forwardedRef={[Function]}
+          loop={true}
+          onAnimationFinish={[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={[]}
+          useNativeLooping={false}
+        />
+      </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
+          cacheComposition={true}
+          collapsable={false}
+          colorFilters={[]}
+          enableMergePathsAndroidForKitKatAndAbove={false}
+          forwardedRef={[Function]}
+          loop={true}
+          onAnimationFinish={[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={[]}
+          useNativeLooping={false}
+        />
+      </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,
+    },
+  });

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {WaveBackground} from './wave.component';
+
+describe('test wave background', () => {
+  it('should render a wave background', () => {
+    const tree = render.create(<WaveBackground />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a wave background for android specific we will give some props that it should render', () => {
+    const tree = render
+      .create(
+        <WaveBackground
+          customStyle={{flex: 1, alignItems: 'center'}}
+          customWavePath={
+            'M0,64L48,90.7C96,117,192,171,288,165.3C384,160,480,96,576,80C672,64,768,96,864,138.7C960,181,1056,235,1152,261.3C1248,288,1344,288,1392,288L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'
+          }
+          heightSvgContainer={400}
+          positionTop={450}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});