@tactics/toddle-styleguide 0.0.1

package/src/components/atoms/quick-filter/quick-filter.test.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {VisualState} from '../../../types/visual-state.enum';
+import {QuickFilter} from './quick-filter.component';
+
+describe('test quick filter', () => {
+  it('given the visual state is default AND isSelected is false ,return a white circle with a bleu border and a blue number', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={false}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is default AND isSelected is true ,return a blue circle with a white number ', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={true}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is success AND isSelected is false ,return a white circle with a green border and a green number', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={false}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is success AND isSelected is true ,return a green circle with a white number ', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={true}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is warning AND isSelected is false ,return a white circle with an orange border and an orange number', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={false}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is warning AND isSelected is true ,return an orange circle with a white number', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={true}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is error AND isSelected is false ,return a white circle with a red border and a red number', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={false}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is error AND isSelected is true ,return a red circle with a white number ', () => {
+    const tree = renderer
+      .create(
+        <QuickFilter
+          id="1"
+          amount={3}
+          isSelected={true}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/select-list-item/__snapshots__/select-list-item.test.js.snap

@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test button component should render a select-list-item component with 1 line of white text (bold) and a dark icon in a light circle 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#7B93DB",
+          "borderRadius": 30,
+          "height": 60,
+          "justifyContent": "center",
+          "marginRight": 8,
+          "width": 60,
+        }
+      }
+    >
+      <View>
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="28"
+          bbWidth="28"
+          fill="none"
+          focusable={false}
+          height="28"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 28,
+                "width": 28,
+              },
+            ]
+          }
+          vbHeight={26}
+          vbWidth={26}
+          width="28"
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <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"
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={4279837036}
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "flex": 1,
+          "flexDirection": "column",
+        }
+      }
+    >
+      <View>
+        <Text
+          style={
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 24,
+              "lineHeight": 30.2,
+            }
+          }
+        >
+          Vlindertjes
+        </Text>
+      </View>
+      <View>
+        <Text
+          style={
+            {
+              "color": "#E5E8EB",
+              "fontFamily": "Montserrat",
+              "fontSize": 14,
+              "lineHeight": 22.4,
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "height": 32,
+          "marginLeft": 8,
+          "width": 32,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="28"
+        bbWidth="28"
+        fill="none"
+        focusable={false}
+        height="28"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "flex": 0,
+              "height": 28,
+              "width": 28,
+            },
+          ]
+        }
+        vbHeight={27}
+        vbWidth={26}
+        width="28"
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGPath
+            d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+            propList={
+              [
+                "stroke",
+                "strokeWidth",
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            stroke={4294967295}
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`test button component should render a select-list-item component with 1 line of white text (bold) and a light icon in a dark circle 1`] = `"tree"`;
+
+exports[`test button component should render a select-list-item component with 2 LINES of text and a dark icon in a light circle 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#7B93DB",
+          "borderRadius": 30,
+          "height": 60,
+          "justifyContent": "center",
+          "marginRight": 8,
+          "width": 60,
+        }
+      }
+    >
+      <View>
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="28"
+          bbWidth="28"
+          fill="none"
+          focusable={false}
+          height="28"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 28,
+                "width": 28,
+              },
+            ]
+          }
+          vbHeight={26}
+          vbWidth={26}
+          width="28"
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <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"
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={4279837036}
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "flex": 1,
+          "flexDirection": "column",
+        }
+      }
+    >
+      <View>
+        <Text
+          style={
+            {
+              "color": "#FFFFFF",
+              "fontFamily": "SourceSansProBold",
+              "fontSize": 24,
+              "lineHeight": 30.2,
+            }
+          }
+        >
+          Vlindertjes
+        </Text>
+      </View>
+      <View>
+        <Text
+          style={
+            {
+              "color": "#E5E8EB",
+              "fontFamily": "Montserrat",
+              "fontSize": 14,
+              "lineHeight": 22.4,
+            }
+          }
+        >
+          Leeftijd 2 tot 4 jaar
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "height": 32,
+          "marginLeft": 8,
+          "width": 32,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="28"
+        bbWidth="28"
+        fill="none"
+        focusable={false}
+        height="28"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "flex": 0,
+              "height": 28,
+              "width": 28,
+            },
+          ]
+        }
+        vbHeight={27}
+        vbWidth={26}
+        width="28"
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGPath
+            d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+            propList={
+              [
+                "stroke",
+                "strokeWidth",
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            stroke={4294967295}
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import {SelectListItem} from './select-list.component-item';
+import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
+import {OfficeBuildingIcon} from '../../../icons/outline/office-building/office-building.icon';
+
+const {View} = require('react-native');
+
+export const SelectListItemPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <SelectListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<FilterIcon />}
+        onPress={() => console.log('clicked')}
+      />
+      <SelectListItem
+        title="Vlindertjes"
+        icon={<OfficeBuildingIcon />}
+        inverse={true}
+        onPress={() => console.log('clicked')}
+      />
+    </View>
+  );
+};

package/src/components/atoms/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.component-item';
+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/atoms/select-list-item/select-list.component-item.tsx

@@ -0,0 +1,52 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Pressable, Text, View} from 'react-native';
+import {Stylesheet} from './select-list.styles-item';
+import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
+
+type SelectListProps = {
+  title: string;
+  subtitle?: string;
+  icon: React.ReactElement;
+  onPress?: () => void;
+  inverse?: boolean;
+};
+
+const SelectListItem = ({
+  title,
+  subtitle,
+  icon,
+  onPress,
+  inverse,
+}: 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],
+    })
+  );
+
+  return (
+    <Pressable onPress={onPress}>
+      <View style={styles.container}>
+        <View style={styles.iconCircle}>
+          <View>{inverse ? invertedIcon : icon}</View>
+        </View>
+        <View style={styles.textContainer}>
+          <View>
+            <Text style={styles.title}>{title}</Text>
+          </View>
+          <View>
+            <Text style={styles.subtitle}>{subtitle}</Text>
+          </View>
+        </View>
+        <View style={styles.iconSquare}>
+          <ChevronRightIcon color={context.colors.ui.white} />
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+export {SelectListItem as SelectListItem};

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

@@ -0,0 +1,40 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+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: 60,
+      height: 60,
+      borderRadius: 60 / 2,
+      marginRight: Scale.xs,
+    },
+    textContainer: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    title: {
+      ...Font.bigBold,
+      color: context.colors.ui.white,
+    },
+    subtitle: {
+      ...Font.regular,
+      color: context.colors.ui.lightgrey,
+    },
+    iconSquare: {
+      marginLeft: Scale.xs,
+      width: Scale.xl,
+      height: Scale.xl,
+    },
+  });