@tactics/toddle-styleguide 5.0.4 → 5.0.5

package/src/components/molecules/quick-filter/quick-filter.styles.js

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+import {State} from '../../../types/state.enum';
+
+export const Stylesheet = (context, visualState, isSelected) =>
+  StyleSheet.create({
+    container: [
+      {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 50,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        overflow: 'hidden',
+        width: Scale.xxl,
+        height: Scale.xxl,
+      },
+      visualState === State.UNPLANNED && {
+        backgroundColor: isSelected
+          ? context.colors.state.unplanned.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.unplanned.dark,
+      },
+      visualState === State.EXPECTED && {
+        backgroundColor: isSelected
+          ? context.colors.state.expected.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.expected.dark,
+      },
+      visualState === State.IN && {
+        backgroundColor: isSelected
+          ? context.colors.state.in.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.in.dark,
+      },
+      visualState === State.OUT && {
+        backgroundColor: isSelected
+          ? context.colors.state.out.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.out.dark,
+      },
+      visualState === State.ABSENT && {
+        backgroundColor: isSelected
+          ? context.colors.state.absent.default
+          : context.colors.ui.white,
+        borderColor: context.colors.state.absent.dark,
+      },
+    ],
+  });

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

@@ -0,0 +1,134 @@
+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"
+          isLoading={false}
+          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}
+          isLoading={false}
+          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}
+          isLoading={false}
+          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}
+          isLoading={false}
+          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}
+          isLoading={true}
+          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}
+          isLoading={false}
+          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}
+          isLoading={true}
+          isSelected={true}
+          onSelect={() => console.log('clicked')}
+          visualState={VisualState.DEFAULT}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/search-input/__snapshots__/search.test.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test search shows search field 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 44,
+      "overflow": "hidden",
+      "paddingRight": 4,
+      "width": "100%",
+    }
+  }
+>
+  <TextInput
+    keyboardType="default"
+    onChangeText={[Function]}
+    placeholder="placeholder search field"
+    placeholderTextColor="#9AA5B1"
+    style={
+      {
+        "color": "#1F2933",
+        "flex": 1,
+        "fontFamily": "SourceSansPro",
+        "fontSize": 16,
+        "height": "100%",
+        "justifyContent": "center",
+        "lineHeight": 20,
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingTop": 8,
+      }
+    }
+  />
+  <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}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "minHeight": 42,
+        "minWidth": 42,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="18"
+      bbWidth="18"
+      fill="none"
+      focusable={false}
+      height={18}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 18,
+            "width": 18,
+          },
+        ]
+      }
+      vbHeight={17}
+      vbWidth={17}
+      width={18}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.75 15.25L15.25 1.75M1.75 1.75L15.25 15.25"
+          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/search-input/search.component.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+interface SearchProps extends TextInputProps {
+    keyboardType?: KeyBoardTypes;
+    onPressClear: () => void;
+    showClearIcon: boolean;
+}
+declare const Search: ({ keyboardType, onPressClear, showClearIcon, ...props }: SearchProps) => React.JSX.Element;
+export { Search as Search };

package/src/components/molecules/search-input/search.component.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {
+  View,
+  TextInput as NativeTextInput,
+  Pressable,
+  TextInputProps,
+} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './search.styles';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import {Icon} from '../../../icons/index';
+import {Scale} from '../../../theme/scale/index';
+
+interface SearchProps extends TextInputProps {
+  keyboardType?: KeyBoardTypes;
+  onPressClear: () => void;
+  showClearIcon: boolean;
+}
+
+const Search = ({
+  keyboardType,
+  onPressClear,
+  showClearIcon,
+  ...props
+}: SearchProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <NativeTextInput
+        placeholderTextColor={context.colors.ui.grey}
+        style={styles.inputContainer}
+        keyboardType={keyboardType}
+        {...props}
+      />
+      <Pressable onPress={onPressClear} style={styles.iconContainer}>
+        <Icon
+          style={'regular'}
+          name={!showClearIcon ? 'search' : 'xmark'}
+          color={context.colors.ui.black}
+          size={showClearIcon ? Scale.m * 1.125 : undefined}
+        />
+      </Pressable>
+    </View>
+  );
+};
+export {Search as Search};

package/src/components/molecules/search-input/search.preview.d.ts

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

package/src/components/molecules/search-input/search.preview.tsx

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+import {Search} from './search.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import {Keyboard, SafeAreaView} from 'react-native';
+
+export const SearchPreview = ({} = {}) => {
+  const [input, setInput] = useState('');
+
+  const clearHandler = () => {
+    setInput('');
+    Keyboard.dismiss;
+  };
+
+  return (
+    <SafeAreaView style={{paddingHorizontal: 16}}>
+      <Search
+        placeholder={'Search field placeholder'}
+        onChangeText={(text: string) => setInput(text)}
+        value={input}
+        keyboardType={KeyBoardTypes.DEFAULT}
+        onPressClear={clearHandler}
+        showClearIcon={input.length > 0}
+      />
+    </SafeAreaView>
+  );
+};

package/src/components/molecules/search-input/search.styles.d.ts

@@ -0,0 +1,33 @@
+export function Stylesheet(context: any): {
+  container: {
+    width: '100%';
+    height: number;
+    flexDirection: 'row';
+    borderStyle: 'solid';
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    backgroundColor: any;
+    overflow: 'hidden';
+    alignItems: 'center';
+    paddingRight: number;
+  };
+  inputContainer: {
+    lineHeight: number;
+    color: any;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    fontFamily: string;
+    fontSize: number;
+    flex: number;
+    justifyContent: 'center';
+    height: '100%';
+  };
+  iconContainer: {
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+};

package/src/components/molecules/search-input/search.styles.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      height: Scale.m * 2.75,
+      flexDirection: 'row',
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: context.colors.ui.lightgrey,
+      borderRadius: Scale.xs,
+      backgroundColor: context.colors.ui.white,
+      overflow: 'hidden',
+      alignItems: 'center',
+      paddingRight: Scale.xxs,
+    },
+    inputContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      height: '100%',
+      ...Font.medium,
+      lineHeight: 20,
+      color: context.colors.ui.black,
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+    },
+    iconContainer: {
+      minWidth: 42,
+      minHeight: 42,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

package/src/components/molecules/search-input/search.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Search} from './search.component';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+
+describe('test search', () => {
+  it('shows search field', () => {
+    const tree = renderer
+      .create(
+        <Search
+          keyboardType={KeyBoardTypes.DEFAULT}
+          placeholder="placeholder search field"
+          onChangeText={() => console.log('text is changed')}
+          onPressClear={() => console.log('clear input')}
+          showClearIcon={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectLink component test renders a pressable select-link with label "Toepassen" 1`] = `
+<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}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "borderRadius": 50,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "paddingHorizontal": 24,
+      "paddingVertical": 12,
+    }
+  }
+>
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#515F6C",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      Toepassen
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type SelectLinkProps = {
+    label: string;
+    onPress: () => void;
+};
+declare const SelectLink: ({ label, onPress }: SelectLinkProps) => React.JSX.Element;
+export { SelectLink as SelectLink };

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {Pressable, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './select-link.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+
+type SelectLinkProps = {
+  label: string;
+  onPress: () => void;
+};
+
+const SelectLink = ({label, onPress}: SelectLinkProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <View>
+        <SmallText textColor={context.colors.ui.darkgrey} textAlign={'center'}>
+          {label}
+        </SmallText>
+      </View>
+    </Pressable>
+  );
+};
+
+export {SelectLink as SelectLink};

package/src/components/molecules/select-link/select-link.preview.d.ts

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

package/src/components/molecules/select-link/select-link.preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {SelectLink} from './select-link.component';
+import {View} from 'react-native';
+
+export const SelectLinkPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <SelectLink
+        label={'Selecteer alle'}
+        onPress={() => console.log('selecteer alle clicked')}
+      />
+    </View>
+  );
+};

package/src/components/molecules/select-link/select-link.styles.d.ts

@@ -0,0 +1,11 @@
+export function Stylesheet(): {
+  container: {
+    backgroundColor: string;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+  };
+};

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

@@ -0,0 +1,15 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: 'transparent',
+      paddingVertical: Scale.s,
+      paddingHorizontal: Scale.l,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 50,
+    },
+  });