@tactics/toddle-styleguide 4.0.0 → 4.0.2

package/package.json

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

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

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

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

@@ -3,21 +3,35 @@ import {View} from 'react-native';
 import {Stylesheet} from './contact-role.styles';
 import {Heading2} from '../../atoms/heading-components';
 import {SmallText} from '../../atoms/paragraph-components';
+import { VisualState } from '../../../types/visual-state.enum';
+import { Pill } from '../pill/pill.component';
 
 type ContactRoleProps = {
   name: string;
   role?: string;
+  tags?: string[];
 };
 
-export const ContactRole = ({name, role}: ContactRoleProps) => {
+export const ContactRole = ({name, role, tags}: ContactRoleProps) => {
   const styles = Stylesheet();
 
+  const renderTags = (tags: string[]) => {
+    return tags.map((tag, index) => {
+      return <Pill key={index} label={tag} visualState={VisualState.INACTIVE} />;
+    });
+  }
+
   return (
     <View style={styles.container}>
       <Heading2 bold={true} textAlign={'center'} addStyle={styles.name}>
         {name}
       </Heading2>
       <SmallText textAlign={'center'}>{role}</SmallText>
+      {tags && tags.length > 0 && (
+        <View style={styles.tagsContainer}>
+          {renderTags(tags)}
+        </View>
+      )}
     </View>
   );
 };

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

@@ -11,7 +11,7 @@ export const ContactRolePreview = ({}: {}) => {
         justifyContent: 'center',
       }}
     >
-      <ContactRole name={'Pieter Jannsens'} role={'Vader'} />
+      <ContactRole name={'Pieter Jannsens'} role={'Vader'} tags={['Afhaalcontact', 'Noodcontact']} />
     </View>
   );
 };

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

@@ -1,9 +1,16 @@
 export function Stylesheet(): {
-  container: {
-    display: 'flex';
-    alignItems: 'center';
-  };
-  name: {
-    marginBottom: number;
-  };
+    container: {
+        display: "flex";
+        alignItems: "center";
+    };
+    name: {
+        marginBottom: number;
+    };
+    tagsContainer: {
+        display: "flex";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        marginTop: number;
+    };
 };

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

@@ -10,4 +10,11 @@ export const Stylesheet = () =>
     name: {
       marginBottom: Scale.xxs,
     },
+    tagsContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: Scale.xs,
+      marginTop: Scale.xxs,
+    },
   });

package/src/components/organisms/contact-item/contact-item.component.d.ts

@@ -4,6 +4,7 @@ type ContactItemProps = {
     label: string;
     onPress?: () => void;
     isBlocked?: boolean;
+    tags?: string[];
 };
-declare const ContactItem: ({ name, label, onPress, isBlocked }: ContactItemProps) => React.JSX.Element;
+declare const ContactItem: ({ name, label, onPress, isBlocked, tags }: ContactItemProps) => React.JSX.Element;
 export { ContactItem as ContactItem };

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

@@ -17,9 +17,10 @@ type ContactItemProps = {
   label: string;
   onPress?: () => void;
   isBlocked?: boolean;
+  tags?: string[];
 };
 
-const ContactItem = ({name, label, onPress, isBlocked}: ContactItemProps) => {
+const ContactItem = ({name, label, onPress, isBlocked, tags}: ContactItemProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(isBlocked);
 
@@ -32,6 +33,12 @@ const ContactItem = ({name, label, onPress, isBlocked}: ContactItemProps) => {
     setLastName(name.slice(name.lastIndexOf(' ') + 1));
   }, [name]);
 
+  const renderTags = (tags: string[]) => {
+    return tags.map((tag, index) => {
+      return <Pill key={index} label={tag} visualState={VisualState.INACTIVE} />;
+    });
+  }
+
   return (
     <Pressable onPress={onPress}>
       <View style={styles.container}>
@@ -66,6 +73,11 @@ const ContactItem = ({name, label, onPress, isBlocked}: ContactItemProps) => {
           </View>
         )}
       </View>
+      {tags && tags.length > 0 && !isBlocked && (
+        <View style={styles.tagsContainer}>
+          {renderTags(tags)}
+        </View>
+      )}
     </Pressable>
   );
 };

package/src/components/organisms/contact-item/contact-item.preview.tsx

@@ -16,12 +16,14 @@ export const ContactItemPreview = ({}: {}) => {
         name={'John'}
         label={'Ouder 1'}
         onPress={() => console.log('clicked')}
+        tags={['Afhaalcontact', 'Noodcontact']}
       />
       <ContactItem
         name={'John Serve'}
         label={'Ouder 1'}
         onPress={() => console.log('clicked')}
         isBlocked={true}
+        tags={['Afhaalcontact', 'Noodcontact']}
       />
       <ContactItem
         name={

package/src/components/organisms/contact-item/contact-item.styles.d.ts

@@ -1,15 +1,22 @@
 export function Stylesheet(isBlocked: any): {
-  container: {
-    width: '100%';
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-  textContainer: {
-    flex: number;
-    marginLeft: number;
-    marginRight: number;
-  };
-  iconSquare: {
-    marginLeft: number;
-  };
+    container: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    textContainer: {
+        flex: number;
+        marginLeft: number;
+        marginRight: number;
+    };
+    iconSquare: {
+        marginLeft: number;
+    };
+    tagsContainer: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        marginTop: number;
+        gap: number;
+        marginLeft: number;
+    };
 };

package/src/components/organisms/contact-item/contact-item.styles.js

@@ -17,4 +17,11 @@ export const Stylesheet = (isBlocked) =>
     iconSquare: {
       marginLeft: Scale.xs,
     },
+    tagsContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      marginTop: Scale.xxs,
+      gap: Scale.xs,
+      marginLeft: Scale.xxl,
+    }
   });

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

@@ -9,6 +9,7 @@ interface IContactInfoCard {
     isActive?: boolean;
     style?: ViewStyle;
     isLoading?: boolean;
+    tags?: string[];
 }
-export declare const PersonInfoCard: ({ source, isBlocked, isActive, name, label, style, isLoading, }: IContactInfoCard) => React.JSX.Element;
+export declare const PersonInfoCard: ({ source, isBlocked, isActive, name, label, style, isLoading, tags }: IContactInfoCard) => React.JSX.Element;
 export {};

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

@@ -14,6 +14,7 @@ interface IContactInfoCard {
   isActive?: boolean;
   style?: ViewStyle;
   isLoading?: boolean;
+  tags?: string[];
 }
 
 export const PersonInfoCard = ({
@@ -24,6 +25,7 @@ export const PersonInfoCard = ({
   label,
   style,
   isLoading,
+  tags
 }: IContactInfoCard) => {
   const styles = Stylesheet();
   return (
@@ -37,7 +39,7 @@ export const PersonInfoCard = ({
           isLoading={isLoading}
         />
       </View>
-      <ContactRole name={name} role={label} />
+      <ContactRole name={name} role={label} tags={tags} />
     </View>
   );
 };

package/src/context/theme.context.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/// <reference types="node" />
-/// <reference types="react-native" />
 interface ThemeInterface {
     colors: {
         gradient: {