@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/molecules/filter-tab/__snapshots__/filter-tab.test.js.snap

@@ -0,0 +1,536 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#E5E8EB",
+      "borderRadius": 16,
+      "display": "flex",
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      {
+        "display": "flex",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "column",
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+    >
+      <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": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          QR-Code
+        </Text>
+      </View>
+      <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": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#19216C",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          NFC
+        </Text>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "borderRadius": 12,
+            "marginTop": 3,
+            "maxHeight": 32,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": 0,
+            "zIndex": -1,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#19216C",
+                "textAlign": undefined,
+                "width": "100%",
+              },
+              [
+                {
+                  "maxHeight": 32,
+                  "overflow": "hidden",
+                  "width": "100%",
+                },
+                {
+                  "opacity": 0,
+                },
+              ],
+            ]
+          }
+        >
+          Hidden
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#E5E8EB",
+      "borderRadius": 16,
+      "display": "flex",
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      {
+        "display": "flex",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "column",
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+    >
+      <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": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#FFFFFF",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          Jongen
+        </Text>
+      </View>
+      <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": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#19216C",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          Meisje
+        </Text>
+      </View>
+      <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": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#19216C",
+                "textAlign": "center",
+                "width": "100%",
+              },
+              {
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "width": "100%",
+              },
+            ]
+          }
+        >
+          Beide
+        </Text>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "borderRadius": 12,
+            "marginTop": 3,
+            "maxHeight": 32,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": 0,
+            "zIndex": -1,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              [
+                {
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "lineHeight": 22.4,
+                },
+              ],
+              {
+                "color": "#19216C",
+                "textAlign": undefined,
+                "width": "100%",
+              },
+              [
+                {
+                  "maxHeight": 32,
+                  "overflow": "hidden",
+                  "width": "100%",
+                },
+                {
+                  "opacity": 0,
+                },
+              ],
+            ]
+          }
+        >
+          Hidden
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/molecules/filter-tab/filter-tab.component.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type FilterTab = {
+    tabItem: {
+        value: string;
+        label: string;
+    }[];
+    setFilterValue: (value: string) => void;
+    setActivePage?: (index: number) => void;
+};
+export declare const FilterTab: ({ tabItem, setFilterValue, setActivePage, }: FilterTab) => React.JSX.Element;
+export {};

package/src/components/molecules/filter-tab/filter-tab.component.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import {useContext, useState} from 'react';
+
+import {Animated, Pressable, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './filter-tab.styles';
+import {Heading4} from '../../atoms/heading-components';
+
+type FilterTab = {
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  setFilterValue: (value: string) => void;
+  setActivePage?: (index: number) => void;
+};
+
+export const FilterTab = ({
+  tabItem,
+  setFilterValue,
+  setActivePage,
+}: FilterTab) => {
+  const [dimensions, setDimensions] = useState({width: 0, height: 0});
+  const [translateValue] = useState(new Animated.Value(0));
+
+  const [clickedButton, setClickedButton] = useState(0);
+
+  // Default from design.
+  const minTabWidth = 95;
+
+  const elementWidth = dimensions.width;
+  const inRow = elementWidth > minTabWidth * tabItem.length;
+  const itemWidth = inRow ? dimensions.width / tabItem.length : elementWidth;
+
+  const translateTab = (index: number, inRow: boolean) => {
+    const formula = inRow
+      ? index * (dimensions.width / tabItem.length)
+      : index * (dimensions.height / tabItem.length);
+
+    Animated.spring(translateValue, {
+      toValue: formula,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, inRow, elementWidth, itemWidth);
+
+  const renderTabs = (inRow: boolean) => {
+    const trans = inRow
+      ? {transform: [{translateX: translateValue}]}
+      : {transform: [{translateY: translateValue}]};
+
+    return (
+      <View style={styles.tabs}>
+        {tabItem.map((tab, index) => (
+          <Pressable
+            key={index}
+            style={styles.tab}
+            onPress={() => {
+              setClickedButton(index);
+              translateTab(index, inRow);
+              setFilterValue(tab.value);
+              setActivePage ? setActivePage(index) : null;
+            }}
+          >
+            <Heading4
+              textColor={
+                clickedButton === index
+                  ? context.colors.ui.white
+                  : context.colors.main['0']
+              }
+              textAlign={'center'}
+              addStyle={styles.text}
+            >
+              {tab.label}
+            </Heading4>
+          </Pressable>
+        ))}
+        <Animated.View style={[styles.tab, styles.slidingTab, trans]}>
+          <Heading4
+            textColor={context.colors.main['0']}
+            addStyle={[styles.text, styles.textHidden]}
+          >
+            Hidden
+          </Heading4>
+        </Animated.View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={styles.inner}
+        onLayout={(event) => {
+          const {width, height} = event.nativeEvent.layout;
+          setDimensions({
+            width: width,
+            height: height,
+          });
+        }}
+      >
+        {renderTabs(inRow)}
+      </View>
+    </View>
+  );
+};

package/src/components/molecules/filter-tab/filter-tab.preview.d.ts

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