@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,173 +0,0 @@
-// 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

@@ -1,3 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const WaveBackgroundPreview: ({}: {}) => React.JSX.Element;

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

@@ -1,78 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,269 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-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 };