@tactics/toddle-styleguide 0.0.3 → 0.0.4

package/App.tsx

@@ -34,10 +34,11 @@ import {FormActionPreview} from './src/components/atoms/form-actions/form-action
 import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
 import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
 import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
-import {ChildListItemPreview} from "./src/components/atoms/child-list-item/child-list-item.preview";
-import {TimeLinePreview} from "./src/components/atoms/timeline/timeline.preview";
+import {ChildListItemPreview} from './src/components/atoms/child-list-item/child-list-item.preview';
+import {TimeLinePreview} from './src/components/atoms/timeline/timeline.preview';
 import {IncrementInputPreview} from './src/components/atoms/increment-input/increment-input.preview';
 import {SwipePreview} from './src/components/atoms/swipe/swipe.preview';
+import {LogoPreview} from './src/components/atoms/logo/logo.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -51,7 +52,8 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         alignItems: 'center',
         justifyContent: 'center',
       }}
-    ><ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
+    >
+      <ReactBtn title="Avatar" onPress={() => navigation.push('avatar')} />
       <ReactBtn title="Button" onPress={() => navigation.push('button')} />
       <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
       <ReactBtn title="Snackbar" onPress={() => navigation.push('snackbar')} />
@@ -92,8 +94,8 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('info')}
       />
       <ReactBtn
-          title="child-list-item"
-          onPress={() => navigation.push('childList')}
+        title="child-list-item"
+        onPress={() => navigation.push('childList')}
       />
       <ReactBtn
         title="Wide Button"
@@ -126,15 +128,16 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('form-action')}
       />
       <ReactBtn title="Calendar" onPress={() => navigation.push('calendar')} />
-    <ReactBtn
+      <ReactBtn
         title="quickFilter"
         onPress={() => navigation.push('quick-filter')}
       />
-    <ReactBtn
+      <ReactBtn
         title="Increment input"
         onPress={() => navigation.push('increment-input')}
       />
       <ReactBtn title="swiper" onPress={() => navigation.push('swiper')} />
+      <ReactBtn title="logo" onPress={() => navigation.push('logo')} />
     </ScrollView>
   );
 };
@@ -221,13 +224,14 @@ function App() {
           <Stack.Screen name="childList">
             {() => <ChildListItemPreview />}
           </Stack.Screen>
-            <Stack.Screen name="timeline">
-                {() => <TimeLinePreview />}
-                </Stack.Screen>
+          <Stack.Screen name="timeline">
+            {() => <TimeLinePreview />}
+          </Stack.Screen>
           <Stack.Screen name="increment-input">
             {() => <IncrementInputPreview />}
-            </Stack.Screen>
+          </Stack.Screen>
           <Stack.Screen name="swiper">{() => <SwipePreview />}</Stack.Screen>
+          <Stack.Screen name="logo">{() => <LogoPreview />}</Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.tsx

@@ -27,36 +27,38 @@ import {TextBubble} from './src/components/atoms/text-bubble/text-bubble.compone
 import {TextInput} from './src/components/atoms/text-input/text-input.component';
 import {TimeTracker} from './src/components/atoms/time-tracker/time-tracker.component';
 import {WideButton} from './src/components/atoms/wide-button/wide-button.component';
-import { Icon } from './src/icons';
-import { Calendar } from './src/components/atoms/calendar/calendar.component';
-import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
-import { Swipe } from './src/components/atoms/swipe/swipe.component';
+import {Icon} from './src/icons';
+import {Calendar} from './src/components/atoms/calendar/calendar.component';
+import {IncrementInput} from './src/components/atoms/increment-input/increment-input.component';
+import {Swipe} from './src/components/atoms/swipe/swipe.component';
+import {Logo} from './src/components/atoms/logo/logo.component';
 
 export {
-    Avatar,
-    Button,
-    CancelLink,
-    Check,
-    Checkbox,
-    ChildListItem,
-    ContactItem,
-    FilterTab,
-    FormAction,
-    ImageBubble,
-    Info,
-    Pill,
-    Popover,
-    PressableIcon,
-    QuickFilter,
-    SelectListItem,
-    Snackbar,
-    Tag,
-    TextBubble,
-    TextInput,
-    TimeTracker,
-    WideButton,
-    Icon,
-    Calendar,
-    IncrementInput,
-    Swipe
+  Avatar,
+  Button,
+  CancelLink,
+  Check,
+  Checkbox,
+  ChildListItem,
+  ContactItem,
+  FilterTab,
+  FormAction,
+  ImageBubble,
+  Info,
+  Pill,
+  Popover,
+  PressableIcon,
+  QuickFilter,
+  SelectListItem,
+  Snackbar,
+  Tag,
+  TextBubble,
+  TextInput,
+  TimeTracker,
+  WideButton,
+  Icon,
+  Calendar,
+  IncrementInput,
+  Swipe,
+  Logo,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.tsx",
   "types": "types/index.d.ts",
   "scripts": {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Image, ImageSourcePropType, View, Text, ImageStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1431,7 +1431,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 12 December 2022 "
+            accessibilityLabel=" Maandag 12 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1451,10 +1451,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1474,9 +1470,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2138,7 +2131,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 22 December 2022 "
+            accessibilityLabel="today Donderdag 22 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2158,6 +2151,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2177,6 +2174,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4337,7 +4337,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 12 December 2022 "
+            accessibilityLabel=" Maandag 12 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -4357,10 +4357,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4380,9 +4376,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -5044,7 +5037,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 22 December 2022 "
+            accessibilityLabel="today Donderdag 22 December 2022 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -5064,6 +5057,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5083,6 +5080,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >

package/src/components/atoms/cancel-link/cancel-link.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/check-switch/check-switch.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useRef } from 'react';
+import {useContext, useRef} from 'react';
 
 import {View, Animated, Pressable, Easing} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/child-list-item/child-list-item.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View, Text} from 'react-native';

package/src/components/atoms/child-list-item/child-list-item.styles.js

@@ -28,11 +28,11 @@ export const Stylesheet = (
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
-        padding: Scale.xs,
-        borderTopRightRadius: Scale.l,
-        borderBottomRightRadius: Scale.l,
-        borderTopLeftRadius: Scale.xxl,
-        borderBottomLeftRadius: Scale.xxl,
+      padding: Scale.xs,
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
     },
     pressableText: {
       marginLeft: Scale.m,

package/src/components/atoms/contact-item/contact-item.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 import {Stylesheet} from './contact-item.styles';
 import {Avatar} from '../avatar/avatar.component';
 import {Initials} from '../../../models/initials.model';

package/src/components/atoms/filter-tab/filter-tab.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useState } from 'react';
+import {useContext, useState} from 'react';
 
 import {Animated, Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {View, Image, ImageSourcePropType, ImageStyle} from 'react-native';
 import {Stylesheet} from './image-bubble.styles';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Text, View} from 'react-native';

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

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test logo renders correct when big is true  1`] = `
+<View>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="31"
+    bbWidth="142"
+    fill="none"
+    focusable={false}
+    height="31"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": 31,
+          "width": 142,
+        },
+      ]
+    }
+    vbHeight={18}
+    vbWidth={69}
+    width="142"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        fill={4280232243}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
+
+exports[`test logo renders correctly when colorIsWhite is true 1`] = `
+<View>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="18"
+    bbWidth="69"
+    fill="none"
+    focusable={false}
+    height="18"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": 18,
+          "width": 69,
+        },
+      ]
+    }
+    vbHeight={18}
+    vbWidth={69}
+    width="69"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        fill={4294967295}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {View} from 'react-native';
+
+type logoProps = {
+  colorIsWhite?: boolean;
+  big?: boolean;
+};
+
+const Logo = ({colorIsWhite, big}: logoProps) => {
+  const context = useContext(ThemeCtx);
+
+  return big ? (
+    <View>
+      <Svg width="142" height="31" viewBox="0 0 69 18" fill="none">
+        <Path
+          fill={
+            colorIsWhite ? context.colors.ui.white : context.colors.ui.black
+          }
+          d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        />
+      </Svg>
+    </View>
+  ) : (
+    <View>
+      <Svg width="69" height="18" viewBox="0 0 69 18" fill="none">
+        <Path
+          fill={
+            colorIsWhite ? context.colors.ui.white : context.colors.ui.black
+          }
+          d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        />
+      </Svg>
+    </View>
+  );
+};
+export {Logo as Logo};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import {View} from 'react-native';
+
+import {Logo} from './logo.component';
+
+export const LogoPreview = ({}: {}) => {
+  return (
+    <View>
+      <Logo />
+      <Logo colorIsWhite={true} />
+      <Logo big={true} />
+      <Logo big={true} colorIsWhite={true} />
+    </View>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Logo} from './logo.component';
+
+describe('test logo', () => {
+  it('renders correctly when colorIsWhite is true', () => {
+    const tree = renderer.create(<Logo colorIsWhite={true} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correct when big is true ', () => {
+    const tree = renderer.create(<Logo big={true} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {View, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/popover/components/backdrop/backdrop.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useMemo } from 'react';
+import {useContext, useMemo} from 'react';
 
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {Animated} from 'react-native';

package/src/components/atoms/popover/components/foreground/foreground.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {View} from 'react-native';

package/src/components/atoms/popover/components/modal/close/close.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {GestureResponderEvent, Pressable} from 'react-native';
 import {CrossIcon} from '../../../../../../icons/outline/cross/cross.icon';

package/src/components/atoms/popover/components/modal/heading/heading.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Text, View} from 'react-native';
 import {Stylesheet} from './heading.styles';

package/src/components/atoms/popover/components/modal/modal.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useMemo, useState } from 'react';
+import {useContext, useMemo, useState} from 'react';
 
 import {Animated, Dimensions} from 'react-native';
 import {Stylesheet} from './modal.styles';

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ScrollView} from 'react-native';
 import {Stylesheet} from './scroll-content.styles';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useEffect, useState } from 'react';
+import {useContext, useEffect, useState} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Dimensions, View} from 'react-native';

package/src/components/atoms/pressable-icon/pressable-icon.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/quick-filter/quick-filter.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Pressable, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Pressable, Text, View} from 'react-native';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Text, View} from 'react-native';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useState } from 'react';
+import {useContext, useState} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './tag.styles';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {View, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/text-input/text-input.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {View, TextInput as NativeTextInput} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -1,22 +1,28 @@
 import React from 'react';
 import {TextInput} from './text-input.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {SafeAreaView} from "react-native";
+import {SafeAreaView} from 'react-native';
 
 export const TextInputPreview = ({} = {}) => {
   return (
     <SafeAreaView>
       <TextInput
-        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        onchangeText={(text: string) =>
+          console.log('text is changed to: ' + text)
+        }
         keyboardType={KeyBoardTypes.DECIMAL_PAD}
       />
       <TextInput
         placeholder={'placeholder text'}
-        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        onchangeText={(text: string) =>
+          console.log('text is changed to: ' + text)
+        }
         keyboardType={KeyBoardTypes.DEFAULT}
       />
       <TextInput
-        onchangeText={(text: string) => console.log('text is changed to: ' + text)}
+        onchangeText={(text: string) =>
+          console.log('text is changed to: ' + text)
+        }
         keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
       />
     </SafeAreaView>

package/src/components/atoms/text-input/text-input.styles.js

@@ -22,5 +22,5 @@ export const Stylesheet = (context) =>
     input: {
       flex: 1,
       ...Font.medium,
-    }
+    },
   });

package/src/components/atoms/time-tracker/time-tracker.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Stylesheet} from '../time-tracker/time-tracker.styles';
 import {Text, View} from 'react-native';

package/src/components/atoms/wide-button/wide-button.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext } from 'react';
+import {useContext} from 'react';
 
 import {Text, Pressable} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';