@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

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

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

@@ -1,40 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,407 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-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 {};