@tactics/toddle-styleguide 5.2.2 → 5.3.1

package/App.tsx

@@ -81,6 +81,8 @@ import { SelectableListItemPreview } from './src/components/molecules/selectable
 import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
+import {ContactAddress} from './src/components/molecules/contact-address/contact-address.component';
+import {ContactAddressPreview} from './src/components/molecules/contact-address/contact-address.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -128,6 +130,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact Item"
         onPress={() => navigation.push('contact-item')}
       />
+      <ReactBtn
+        title="Contact Address"
+        onPress={() => navigation.push('contact-address')}
+      />
       <ReactBtn
         title="Contact Role"
         onPress={() => navigation.push('contact-role')}
@@ -645,6 +651,11 @@ function App() {
   }}>
             {() => <SelectableListItemPreview />}
           </Stack.Screen>
+          <Stack.Screen name="contact-address" options={{
+            freezeOnBlur: false,
+          }}>
+            {() => <ContactAddressPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.tsx

@@ -86,6 +86,7 @@ import { InlineNotice } from './src/components/molecules/inline-notice/inline-no
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
 import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
 import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
+import { ContactAddress } from './src/components/molecules/contact-address/contact-address.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -122,6 +123,7 @@ export {
   Check,
   Checkbox,
   ChildListItem,
+  ContactAddress,
   ContactItem,
   ContactRole,
   DateInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.2.2",
+  "version": "5.3.1",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/molecules/contact-address/__snapshots__/contact-address.test.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Contact role component test renders a contact who is the father 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansProBold",
+            "fontSize": 24,
+            "lineHeight": 30.2,
+          },
+        ],
+        {
+          "color": "#1F2933",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        {
+          "marginBottom": 4,
+        },
+      ]
+    }
+  >
+    Darth Vader
+  </Text>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+          },
+        ],
+        {
+          "color": "#1F2933",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    I'm your Father
+  </Text>
+</View>
+`;
+
+exports[`Contact role component test renders a contact who is the sister 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+    }
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "SourceSansProBold",
+            "fontSize": 24,
+            "lineHeight": 30.2,
+          },
+        ],
+        {
+          "color": "#1F2933",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        {
+          "marginBottom": 4,
+        },
+      ]
+    }
+  >
+    Princess Leia
+  </Text>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+          },
+        ],
+        {
+          "color": "#1F2933",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    Sister
+  </Text>
+</View>
+`;

package/src/components/molecules/contact-address/contact-address.component.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type ContactRoleProps = {
+    name: string;
+    role?: string;
+    tags?: string[];
+};
+export declare const ContactRole: ({ name, role, tags }: ContactRoleProps) => React.JSX.Element;
+export {};

package/src/components/molecules/contact-address/contact-address.component.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {Stylesheet} from './contact-address.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+
+type ContactAddressProps = {
+  line1: string;
+  line2?: string;
+};
+
+export const ContactAddress = ({line1, line2}: ContactAddressProps) => {
+  const styles = Stylesheet();
+
+  return (
+    <View style={styles.container}>
+      <SmallText textAlign={'center'}>{line1}</SmallText>
+      {line2 && <SmallText textAlign={'center'}>{line2}</SmallText>}
+    </View>
+  );
+};

package/src/components/molecules/contact-address/contact-address.preview.d.ts

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

package/src/components/molecules/contact-address/contact-address.preview.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {ContactAddress} from './contact-address.component';
+const {View} = require('react-native');
+
+export const ContactAddressPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ContactAddress line1={'Starrenhof 14'} line2={'2950 Kapellen'} />
+    </View>
+  );
+};

package/src/components/molecules/contact-address/contact-address.styles.d.ts

@@ -0,0 +1,7 @@
+
+export function Stylesheet(): {
+    container: {
+        display: "flex";
+        alignItems: "center";
+    };
+};

package/src/components/molecules/contact-address/contact-address.styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  });

package/src/components/molecules/contact-address/contact-address.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {ContactRole} from './contact-role.component';
+
+describe('Contact role component test', () => {
+  it('renders a contact who is the father', function () {
+    const tree = render
+      .create(<ContactRole name={'Darth Vader'} role={"I'm your Father"} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a contact who is the sister', function () {
+    const tree = render
+      .create(<ContactRole name={'Princess Leia'} role={'Sister'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/organisms/person-info-card/person-info-card.component.tsx

@@ -1,10 +1,11 @@
 import {Avatar} from '../../molecules/avatar/avatar.component';
-import {ImageSourcePropType, View, ViewStyle} from 'react-native';
+import {ImageSourcePropType, View, ViewStyle, Text} from 'react-native';
 import {Initials} from '../../../models/initials.model';
 import {Size} from '../../../types/size.enum';
 import {ContactRole} from '../../molecules/contact-role/contact-role.component';
 import {Stylesheet} from './person-info-card.styles';
 import React from 'react';
+import {ContactAddress} from '../../molecules/contact-address/contact-address.component';
 
 interface IContactInfoCard {
   source: ImageSourcePropType | Initials;
@@ -15,6 +16,8 @@ interface IContactInfoCard {
   style?: ViewStyle;
   isLoading?: boolean;
   tags?: string[];
+  addressLine1?: string;
+  addressLine2?: string;
 }
 
 export const PersonInfoCard = ({
@@ -25,7 +28,9 @@ export const PersonInfoCard = ({
   label,
   style,
   isLoading,
-  tags
+  tags,
+  addressLine1,
+  addressLine2
 }: IContactInfoCard) => {
   const styles = Stylesheet();
   return (
@@ -40,6 +45,7 @@ export const PersonInfoCard = ({
         />
       </View>
       <ContactRole name={name} role={label} tags={tags} />
+      { addressLine1 && <View style={styles.addressContainer}><ContactAddress line1={addressLine1} line2={addressLine2}/></View>}
     </View>
   );
 };

package/src/components/organisms/person-info-card/person-info-card.preview.tsx

@@ -24,6 +24,8 @@ export const PersonInfoCardPreview = ({}: {}) => {
           style={{
             margin: Scale.s,
           }}
+          addressLine1={"Starrenhof 12"}
+          addressLine2={"2920 Kalmthout"}
         />
         <PersonInfoCard
           source={Initials.for('Zeno', 'Driesen')}
@@ -32,6 +34,7 @@ export const PersonInfoCardPreview = ({}: {}) => {
             margin: Scale.s,
           }}
           isActive={false}
+          addressLine1={"Starrenhof 12"}
         />
         <PersonInfoCard
           source={Initials.for('Zeno', 'Driesen')}

package/src/components/organisms/person-info-card/person-info-card.styles.d.ts

@@ -3,4 +3,8 @@ export function Stylesheet(): {
     alignItems: 'center';
     marginBottom: number;
   };
+  addressContainer: {
+    alignItems: 'center';
+    marginTop: number;
+  }
 };

package/src/components/organisms/person-info-card/person-info-card.styles.js

@@ -7,4 +7,8 @@ export const Stylesheet = () =>
       alignItems: 'center',
       marginBottom: Scale.xs,
     },
+    addressContainer: {
+      alignItems: 'center',
+      marginTop: Scale.xs,
+    }
   });