@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/components/molecules/snackbar/__snapshots__/snackbar.test.js.snap

@@ -41,11 +41,11 @@ exports[`test snackbar  given the visual state is DEFAULT return a light blue ba
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -57,14 +57,14 @@ exports[`test snackbar  given the visual state is DEFAULT return a light blue ba
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={21}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -75,7 +75,7 @@ exports[`test snackbar  given the visual state is DEFAULT return a light blue ba
         }
       >
         <RNSVGPath
-          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
           propList={
             [
               "stroke",
@@ -169,11 +169,11 @@ exports[`test snackbar  given the visual state is ERROR return a red background
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -185,14 +185,14 @@ exports[`test snackbar  given the visual state is ERROR return a red background
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={21}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -203,7 +203,7 @@ exports[`test snackbar  given the visual state is ERROR return a red background
         }
       >
         <RNSVGPath
-          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
           propList={
             [
               "stroke",
@@ -297,11 +297,11 @@ exports[`test snackbar  given the visual state is SUCCESS return a light green b
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -313,14 +313,14 @@ exports[`test snackbar  given the visual state is SUCCESS return a light green b
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={21}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -331,7 +331,7 @@ exports[`test snackbar  given the visual state is SUCCESS return a light green b
         }
       >
         <RNSVGPath
-          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
           propList={
             [
               "stroke",
@@ -425,11 +425,11 @@ exports[`test snackbar  given the visual state is WARNING return a light orange
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -441,14 +441,14 @@ exports[`test snackbar  given the visual state is WARNING return a light orange
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={21}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -459,7 +459,7 @@ exports[`test snackbar  given the visual state is WARNING return a light orange
         }
       >
         <RNSVGPath
-          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
           propList={
             [
               "stroke",

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

@@ -5,8 +5,8 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './snackbar.styles';
 import {VisualState} from '../../../types/visual-state.enum';
-import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
 import {Paragraph} from '../../atoms/paragraph-components';
+import {Icon} from '../../../icons/index';
 
 type SnackbarProps = {
   text: string;
@@ -17,6 +17,21 @@ const Snackbar = ({text, visualState}: SnackbarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, visualState);
 
+  const snackbarIconNameHandler = (visualState: VisualState) => {
+    const defaultIcon = 'exclamation-circle';
+    const errorWarningIcon = 'exclamation';
+    const successIcon = 'thumb-up';
+    if (visualState === VisualState.DEFAULT) {
+      return defaultIcon;
+    } else if (visualState === VisualState.SUCCESS) {
+      return successIcon;
+    } else if (visualState === VisualState.WARNING || VisualState.ERROR) {
+      return errorWarningIcon;
+    } else {
+      return defaultIcon;
+    }
+  };
+
   const snackbarIconTextColorHandler = (visualState: VisualState) => {
     const defaultColor = context.colors.main['0'];
     const errorColor = context.colors.ui.white;
@@ -33,7 +48,11 @@ const Snackbar = ({text, visualState}: SnackbarProps) => {
   return (
     <View style={styles.container}>
       <View style={styles.iconContainer}>
-        <FilterIcon color={snackbarIconTextColorHandler(visualState)} />
+        <Icon
+          style={'regular'}
+          name={snackbarIconNameHandler(visualState)}
+          color={snackbarIconTextColorHandler(visualState)}
+        />
       </View>
       <View style={styles.textContainer}>
         <Paragraph textColor={snackbarIconTextColorHandler(visualState)}>

package/src/components/molecules/swipe/__snapshots__/swipe.test.js.snap

@@ -52,8 +52,10 @@ exports[`Test Swipe component should render an swipe component with dots and nav
       loadMinimalSize={1}
       loop={false}
       nextButton={
-        <ChevronRightIcon
+        <Icon
           color="#19216C"
+          name="chevron-right"
+          style="regular"
         />
       }
       onIndexChanged={[Function]}
@@ -67,8 +69,10 @@ exports[`Test Swipe component should render an swipe component with dots and nav
       }
       pagingEnabled={true}
       prevButton={
-        <ChevronLeftIcon
+        <Icon
           color="#19216C"
+          name="chevron-left"
+          style="regular"
         />
       }
       removeClippedSubviews={true}
@@ -366,11 +370,11 @@ exports[`Test Swipe component should render an swipe component with dots and nav
         <View>
           <RNSVGSvgView
             align="xMidYMid"
-            bbHeight="28"
-            bbWidth="28"
+            bbHeight={24}
+            bbWidth={24}
             fill="none"
             focusable={false}
-            height="28"
+            height={24}
             meetOrSlice={0}
             minX={0}
             minY={0}
@@ -382,14 +386,14 @@ exports[`Test Swipe component should render an swipe component with dots and nav
                 },
                 {
                   "flex": 0,
-                  "height": 28,
-                  "width": 28,
+                  "height": 24,
+                  "width": 24,
                 },
               ]
             }
-            vbHeight={27}
-            vbWidth={26}
-            width="28"
+            vbHeight={19}
+            vbWidth={11}
+            width={24}
           >
             <RNSVGGroup
               fill={null}
@@ -400,7 +404,7 @@ exports[`Test Swipe component should render an swipe component with dots and nav
               }
             >
               <RNSVGPath
-                d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+                d="M1.75 1.625L9.33333 9.5L1.75 17.375"
                 propList={
                   [
                     "stroke",

package/src/components/molecules/swipe/swipe.component.tsx

@@ -29,10 +29,18 @@ const Swipe = ({children, onIndexChanged}: SwipeProps) => {
         dotColor={context.colors.ui.lightgrey}
         activeDotColor={context.colors.main['7']}
         prevButton={
-          <Icon.Outline.ChevronLeft color={context.colors.main['0']} />
+          <Icon
+            style={'regular'}
+            name={'chevron-left'}
+            color={context.colors.main['0']}
+          />
         }
         nextButton={
-          <Icon.Outline.ChevronRight color={context.colors.main['0']} />
+          <Icon
+            style={'regular'}
+            name={'chevron-right'}
+            color={context.colors.main['0']}
+          />
         }
       >
         {children}

package/src/components/organisms/child-list-item/__snapshots__/child-list-item.test.js.snap

@@ -248,11 +248,11 @@ exports[`test child list item component arrow appears when selectable is false 1
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={20}
+      bbWidth={20}
       fill="none"
       focusable={false}
-      height="28"
+      height={20}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -264,14 +264,14 @@ exports[`test child list item component arrow appears when selectable is false 1
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 20,
+            "width": 20,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={19}
+      vbWidth={11}
+      width={20}
     >
       <RNSVGGroup
         fill={null}
@@ -282,7 +282,7 @@ exports[`test child list item component arrow appears when selectable is false 1
         }
       >
         <RNSVGPath
-          d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
           propList={
             [
               "stroke",
@@ -291,7 +291,7 @@ exports[`test child list item component arrow appears when selectable is false 1
               "strokeLinejoin",
             ]
           }
-          stroke={4279837036}
+          stroke={4280232243}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"

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

@@ -7,11 +7,11 @@ import {Initials} from '../../../models/initials.model';
 import {Size} from '../../../types/size.enum';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Avatar} from '../../molecules/avatar/avatar.component';
-import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
 import {Stylesheet} from './child-list-item.styles';
 import {SmallText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
 import {TimeTracker} from '../../molecules/time-tracker/time-tracker.component';
+import {Icon} from '../../../icons/index';
 
 type ChildListItemProps = {
   id: string;
@@ -88,7 +88,12 @@ const ChildListItem = ({
             onPress={() => onPressArrow(id)}
             style={styles.iconContainer}
           >
-            <ChevronRightIcon />
+            <Icon
+              style={'regular'}
+              name={'chevron-right'}
+              size={20}
+              color={context.colors.ui.black}
+            />
           </Pressable>
         ) : null}
       </>

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -72,7 +72,13 @@ export const ChildListItemPreview = ({}: {}) => {
     >
       <View style={{alignItems: 'center', marginBottom: 28}}>
         <PressableIcon
-          icon={<Icon.Outline.ViewGridAdd key={'unique key'} />}
+          icon={
+            <Icon
+              style={'regular'}
+              name={'sm-view-grid-add'}
+              key={'unique key'}
+            />
+          }
           onPress={selectChildren}
         />
       </View>

package/src/components/organisms/contact-item/__snapshots__/contact-item.test.js.snap

@@ -127,11 +127,11 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="28"
-        bbWidth="28"
+        bbHeight={20}
+        bbWidth={20}
         fill="none"
         focusable={false}
-        height="28"
+        height={20}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -143,14 +143,14 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
             },
             {
               "flex": 0,
-              "height": 28,
-              "width": 28,
+              "height": 20,
+              "width": 20,
             },
           ]
         }
-        vbHeight={27}
-        vbWidth={26}
-        width="28"
+        vbHeight={19}
+        vbWidth={11}
+        width={20}
       >
         <RNSVGGroup
           fill={null}
@@ -161,7 +161,7 @@ exports[`test contact-item renders a contact-item with a red avatar and an extra
           }
         >
           <RNSVGPath
-            d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+            d="M1.75 1.625L9.33333 9.5L1.75 17.375"
             propList={
               [
                 "stroke",
@@ -309,11 +309,11 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="28"
-        bbWidth="28"
+        bbHeight={20}
+        bbWidth={20}
         fill="none"
         focusable={false}
-        height="28"
+        height={20}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -325,14 +325,14 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
             },
             {
               "flex": 0,
-              "height": 28,
-              "width": 28,
+              "height": 20,
+              "width": 20,
             },
           ]
         }
-        vbHeight={27}
-        vbWidth={26}
-        width="28"
+        vbHeight={19}
+        vbWidth={11}
+        width={20}
       >
         <RNSVGGroup
           fill={null}
@@ -343,7 +343,7 @@ exports[`test contact-item renders a contact-item, with an avatar 1`] = `
           }
         >
           <RNSVGPath
-            d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+            d="M1.75 1.625L9.33333 9.5L1.75 17.375"
             propList={
               [
                 "stroke",

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

@@ -52,7 +52,12 @@ const ContactItem = ({
           <Pill label={'Geblokkeerd'} visualState={VisualState.ERROR} />
         ) : null}
         <View style={styles.iconSquare}>
-          <Icon.Outline.ChevronRight color={context.colors.main['0']} />
+          <Icon
+            style={'regular'}
+            name={'chevron-right'}
+            size={20}
+            color={context.colors.main['0']}
+          />
         </View>
       </View>
     </Pressable>