@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

@@ -0,0 +1,173 @@
+// 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}
+          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}
+          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,3 @@
+import React from 'react';
+import { WaveProps } from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => React.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,2 @@
+import React from 'react';
+export declare const WaveBackgroundPreview: ({}: {}) => React.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();
+  });
+});

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

@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test wide-button component should render a wide-button component 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#19216C",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansPro",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#E0E8F9",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Bevestigen
+  </Text>
+</View>
+`;
+
+exports[`test wide-button component should render a wide-button component that has a custom background color 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "red",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansPro",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#E0E8F9",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Bevestigen
+  </Text>
+</View>
+`;
+
+exports[`test wide-button component should render a wide-button component that has a custom background color but is disabled 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#E5E8EB",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansPro",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#515F6C",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Bevestigen
+  </Text>
+</View>
+`;
+
+exports[`test wide-button component should render a wide-button component that is disabled 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#E5E8EB",
+      "borderRadius": 8,
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansPro",
+            "fontSize": 16,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#515F6C",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Bevestigen
+  </Text>
+</View>
+`;

package/src/components/molecules/wide-button/wide-button.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type ButtonProps = {
+    text: string;
+    disabled?: boolean;
+    onPress?: () => void;
+    backgroundColor?: string;
+};
+declare const WideButton: ({ text, disabled, onPress, backgroundColor, }: ButtonProps) => React.JSX.Element;
+export { WideButton as WideButton };