@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/components/molecules/select-list-item/select-list-item-preview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {SelectListItem} from './select-list-item.component';
-import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
-import {OfficeBuildingIcon} from '../../../icons/outline/office-building/office-building.icon';
+import {Icon} from '../../../icons/index';
 
 const {View} = require('react-native');
 
@@ -18,13 +17,13 @@ export const SelectListItemPreview = ({}: {}) => {
       <SelectListItem
         title="Vlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
-        icon={<FilterIcon />}
+        icon={<Icon style={'regular'} name={'user-group'} size={27} />}
         onPress={() => console.log('clicked')}
       />
       <SelectListItem
         title="Vlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
-        icon={<OfficeBuildingIcon />}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
         inverse={true}
         onPress={() => console.log('clicked')}
       />

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

@@ -33,27 +33,30 @@ const SelectListItem = ({
   );
 
   return (
-    <Pressable onPress={onPress}>
-      <View style={styles.container}>
-        <View style={styles.iconCircle}>
-          <View>{inverse ? invertedIcon : icon}</View>
-        </View>
-        <View style={styles.textContainer}>
-          <View>
-            <Heading2 bold={true} textColor={context.colors.ui.white}>
-              {title}
-            </Heading2>
-          </View>
-          <View>
-            <Paragraph textColor={context.colors.ui.lightgrey}>
-              {subtitle}
-            </Paragraph>
-          </View>
+    <Pressable onPress={onPress} style={styles.container}>
+      <View style={styles.iconCircle}>
+        <View>{inverse ? invertedIcon : icon}</View>
+      </View>
+      <View style={styles.textContainer}>
+        <View>
+          <Heading2 bold={true} textColor={context.colors.ui.white}>
+            {title}
+          </Heading2>
         </View>
-        <View style={styles.iconSquare}>
-          <Icon.Outline.ChevronRight color={context.colors.ui.white} />
+        <View>
+          <Paragraph textColor={context.colors.ui.lightgrey}>
+            {subtitle}
+          </Paragraph>
         </View>
       </View>
+      <View style={styles.iconSquare}>
+        <Icon
+          style={'regular'}
+          name={'chevron-right'}
+          size={20}
+          color={context.colors.ui.white}
+        />
+      </View>
     </Pressable>
   );
 };

package/src/components/molecules/select-list-item/select-list-item.styles.js

@@ -14,19 +14,22 @@ export const Stylesheet = (context, inverse) =>
       backgroundColor: inverse
         ? context.colors.main['3']
         : context.colors.main['6'],
-      width: 60,
-      height: 60,
-      borderRadius: 60 / 2,
-      marginRight: Scale.xs,
+      width: 62,
+      height: 62,
+      borderRadius: 62 / 2,
+      marginRight: Scale.m,
     },
     textContainer: {
       flex: 1,
       flexDirection: 'column',
+      justifyContent: 'center',
+      paddingTop: Scale.xxxs,
+      paddingBottom: Scale.xxxs,
     },
     iconSquare: {
-      marginLeft: Scale.xs,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: Scale.m,
       marginRight: Scale.m,
-      width: Scale.xl,
-      height: Scale.xl,
     },
   });

package/src/components/molecules/select-picker/__snapshots__/select-picker.test.js.snap

@@ -24,7 +24,6 @@ exports[`Select Picker test renders a picker with placeholder text 1`] = `
   <View
     style={
       {
-        "alignItems": "center",
         "height": "100%",
         "justifyContent": "center",
         "width": "100%",
@@ -123,11 +122,11 @@ exports[`Select Picker test renders a picker with placeholder text 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}
@@ -139,14 +138,14 @@ exports[`Select Picker test renders a picker with placeholder text 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 20,
+            "width": 20,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={19}
+      vbWidth={12}
+      width={20}
     >
       <RNSVGGroup
         fill={null}
@@ -157,7 +156,7 @@ exports[`Select Picker test renders a picker with placeholder text 1`] = `
         }
       >
         <RNSVGPath
-          d="M8.66663 10.125L13 5.625L17.3333 10.125M17.3333 16.875L13 21.375L8.66663 16.875"
+          d="M1.66663 6.125L5.99996 1.625L10.3333 6.125M10.3333 12.875L5.99996 17.375L1.66663 12.875"
           propList={
             [
               "stroke",
@@ -201,7 +200,6 @@ exports[`Select Picker test renders a picker without placeholder text 1`] = `
   <View
     style={
       {
-        "alignItems": "center",
         "height": "100%",
         "justifyContent": "center",
         "width": "100%",
@@ -298,11 +296,11 @@ exports[`Select Picker test renders a picker without placeholder text 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}
@@ -314,14 +312,14 @@ exports[`Select Picker test renders a picker without placeholder text 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 20,
+            "width": 20,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={19}
+      vbWidth={12}
+      width={20}
     >
       <RNSVGGroup
         fill={null}
@@ -332,7 +330,7 @@ exports[`Select Picker test renders a picker without placeholder text 1`] = `
         }
       >
         <RNSVGPath
-          d="M8.66663 10.125L13 5.625L17.3333 10.125M17.3333 16.875L13 21.375L8.66663 16.875"
+          d="M1.66663 6.125L5.99996 1.625L10.3333 6.125M10.3333 12.875L5.99996 17.375L1.66663 12.875"
           propList={
             [
               "stroke",

package/src/components/molecules/select-picker/select-picker.component.tsx

@@ -63,7 +63,12 @@ export const SelectPicker = ({
         />
       </View>
       <View style={styles.iconContainer}>
-        <Icon.Outline.Selector color={context.colors.ui.black} />
+        <Icon
+          style={'regular'}
+          name={'selector'}
+          color={context.colors.ui.black}
+          size={20}
+        />
       </View>
     </View>
   );

package/src/components/molecules/select-picker/select-picker.styles.js

@@ -24,13 +24,13 @@ export const Stylesheet = (Context) =>
       width: '100%',
       height: '100%',
       justifyContent: 'center',
-      alignItems: 'center',
+      // alignItems: 'center',
       zIndex: 1,
     },
     iconContainer: {
       width: '10%',
       height: '100%',
-      right: 16,
+      right: Scale.m,
       justifyContent: 'center',
       alignItems: 'center',
       position: 'absolute',