@tactics/toddle-styleguide 5.0.4 → 5.0.5

package/src/components/molecules/select-list-item/select-list-item-preview.d.ts

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import {SelectListItem} from './select-list-item.component';
+import {Icon} from '../../../icons/index';
+
+const {View} = require('react-native');
+
+export const SelectListItemPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#19216C',
+      }}
+    >
+      <SelectListItem
+        title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'user-group'} size={27} />}
+        onPress={() => console.log('clicked')}
+      />
+      <SelectListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
+        inverse={true}
+        onPress={() => console.log('clicked')}
+      />
+      <SelectListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
+        inverse={true}
+        onPress={() => console.log('clicked')}
+        image={require('./../../../../assets/components/avatar/baby.png')}
+      />
+    </View>
+  );
+};

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+type SelectListProps = {
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
+    image?: ImageSourcePropType;
+};
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, image, }: SelectListProps) => React.JSX.Element;
+export { SelectListItem as SelectListItem };

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {ThemeCtx} from '../../../context/theme.context';
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  Image,
+  Pressable,
+  View,
+} from 'react-native';
+import {Stylesheet} from './select-list-item.styles';
+import {Icon} from '../../../icons/index';
+import {Heading2} from '../../atoms/heading-components';
+import {Paragraph} from '../../atoms/paragraph-components';
+
+type SelectListProps = {
+  title: string;
+  subtitle?: string;
+  icon: React.ReactElement;
+  onPress?: () => void;
+  inverse?: boolean;
+  image?: ImageSourcePropType;
+};
+
+const SelectListItem = ({
+  title,
+  subtitle,
+  icon,
+  onPress,
+  inverse,
+  image,
+}: SelectListProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, inverse);
+  const invertedIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.main[6],
+    })
+  );
+
+  const renderIconOrImage = () => {
+    if (image) {
+      return <Image source={image} style={styles.image as ImageStyle} />;
+    } else {
+      return <View>{inverse ? invertedIcon : icon}</View>;
+    }
+  };
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <View style={styles.iconCircle}>{renderIconOrImage()}</View>
+      <View style={styles.textContainer}>
+        <View>
+          <Heading2
+            bold={true}
+            textColor={context.colors.ui.white}
+            numberOfLines={2}
+            ellipsizeMode={'tail'}
+          >
+            {title}
+          </Heading2>
+        </View>
+        <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>
+  );
+};
+export {SelectListItem as SelectListItem};

package/src/components/molecules/select-list-item/select-list-item.styles.d.ts

@@ -0,0 +1,41 @@
+export function Stylesheet(
+  context: any,
+  inverse: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
+        width: '100%';
+        flexDirection: 'row';
+        alignItems: 'center';
+      };
+      iconCircle: {
+        justifyContent: 'center';
+        alignItems: 'center';
+        backgroundColor: any;
+        width: number;
+        height: number;
+        borderRadius: number;
+        marginRight: number;
+      };
+      image: {
+        position: string;
+        width: string;
+        height: string;
+        borderRadius: number;
+      }[];
+      textContainer: {
+        flex: number;
+        flexDirection: 'column';
+        justifyContent: 'center';
+        paddingTop: number;
+        paddingBottom: number;
+      };
+      iconSquare: {
+        justifyContent: 'center';
+        alignItems: 'center';
+        marginLeft: number;
+        marginRight: number;
+      };
+    }>;
+import {StyleSheet} from 'react-native';

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

@@ -0,0 +1,43 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, inverse) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconCircle: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: inverse
+        ? context.colors.main['3']
+        : context.colors.main['6'],
+      width: 62,
+      height: 62,
+      borderRadius: 62 / 2,
+      marginRight: Scale.m,
+    },
+    image: [
+      {
+        position: 'absolute',
+        width: '90%',
+        height: '90%',
+        borderRadius: 50,
+      },
+    ],
+    textContainer: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      paddingTop: Scale.xxxs,
+      paddingBottom: Scale.xxxs,
+    },
+    iconSquare: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: Scale.m,
+      marginRight: Scale.m,
+    },
+  });

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import render from 'react-test-renderer';
+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';
+
+describe('test button component', () => {
+  it('should render a select-list-item component with 1 line of white text (bold) and a dark icon in a light circle', () => {
+    const tree = render
+      .create(<SelectListItem title={'Vlindertjes'} icon={<FilterIcon />} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a select-list-item component with 1 line of white text (bold) and a light icon in a dark circle', () => {
+    const tree = render
+      .create(
+        <SelectListItem
+          title={'lindertjes'}
+          icon={<OfficeBuildingIcon />}
+          inverse={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a select-list-item component with 2 LINES of text and a dark icon in a light circle', () => {
+    const tree = render
+      .create(
+        <SelectListItem
+          title={'Vlindertjes'}
+          subtitle={'Leeftijd 2 tot 4 jaar'}
+          icon={<FilterIcon />}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,407 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Picker test renders a picker with placeholder text 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 48,
+      "justifyContent": "center",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "height": "100%",
+        "justifyContent": "center",
+        "width": "100%",
+        "zIndex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+          },
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+        testID="ios_touchable_wrapper"
+      >
+        <View
+          pointerEvents="box-only"
+          style={
+            {
+              "height": "100%",
+              "justifyContent": "flex-start",
+            }
+          }
+        >
+          <TextInput
+            editable={false}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "color": "#9AA5B1",
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "justifyContent": "center",
+                  "lineHeight": 22.4,
+                },
+                {
+                  "color": "#c7c7cd",
+                },
+              ]
+            }
+            testID="text_input"
+            value="Choose..."
+          />
+        </View>
+      </View>
+      <Modal
+        hardwareAccelerated={false}
+        onOrientationChange={[Function]}
+        supportedOrientations={
+          [
+            "portrait",
+            "landscape",
+          ]
+        }
+        testID="ios_modal"
+        transparent={true}
+        visible={false}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 16,
+        "width": "10%",
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="20"
+      bbWidth="20"
+      fill="none"
+      focusable={false}
+      height={20}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={12}
+      width={20}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.66663 6.125L5.99996 1.625L10.3333 6.125M10.3333 12.875L5.99996 17.375L1.66663 12.875"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Select Picker test renders a picker without placeholder text 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 48,
+      "justifyContent": "center",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "height": "100%",
+        "justifyContent": "center",
+        "width": "100%",
+        "zIndex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+          },
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+        testID="ios_touchable_wrapper"
+      >
+        <View
+          pointerEvents="box-only"
+          style={
+            {
+              "height": "100%",
+              "justifyContent": "flex-start",
+            }
+          }
+        >
+          <TextInput
+            editable={false}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "color": "#9AA5B1",
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "justifyContent": "center",
+                  "lineHeight": 22.4,
+                },
+                {},
+              ]
+            }
+            testID="text_input"
+            value="an option"
+          />
+        </View>
+      </View>
+      <Modal
+        hardwareAccelerated={false}
+        onOrientationChange={[Function]}
+        supportedOrientations={
+          [
+            "portrait",
+            "landscape",
+          ]
+        }
+        testID="ios_modal"
+        transparent={true}
+        visible={false}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 16,
+        "width": "10%",
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="20"
+      bbWidth="20"
+      fill="none"
+      focusable={false}
+      height={20}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={12}
+      width={20}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.66663 6.125L5.99996 1.625L10.3333 6.125M10.3333 12.875L5.99996 17.375L1.66663 12.875"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/molecules/select-picker/select-picker.component.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type PickerProps = {
+    placeholder?: string;
+    data: {
+        value: number | string;
+        label: string;
+    }[];
+    onChange: (item: string) => void;
+    defaultValue: string;
+};
+export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => React.JSX.Element;
+export {};