@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,415 @@
+// 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": 4,
+      "paddingRight": 4,
+      "paddingTop": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      {
+        "display": "flex",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "display": "flex",
+          "flexDirection": "column",
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+    >
+      <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]}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              {
+                "color": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          QR-Code
+        </Text>
+      </View>
+      <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]}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              false,
+            ]
+          }
+        >
+          NFC
+        </Text>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": 0,
+            "zIndex": -1,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              {
+                "opacity": 0,
+              },
+            ]
+          }
+        >
+          Hidden dsfdslflsd lfdslf lsdlfdslf lsdfl sdfl sfdl sdfl dsfl
+        </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": 4,
+      "paddingRight": 4,
+      "paddingTop": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      {
+        "display": "flex",
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "display": "flex",
+          "flexDirection": "column",
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+    >
+      <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]}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              {
+                "color": "#FFFFFF",
+              },
+            ]
+          }
+        >
+          Jongen
+        </Text>
+      </View>
+      <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]}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              false,
+            ]
+          }
+        >
+          Meisje
+        </Text>
+      </View>
+      <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]}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "width": 0,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              false,
+            ]
+          }
+        >
+          Beide
+        </Text>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          {
+            "alignItems": "center",
+            "backgroundColor": "#647ACB",
+            "borderRadius": 16,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateY": 0,
+              },
+            ],
+            "width": 0,
+            "zIndex": -1,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#1F2933",
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+                "maxHeight": 32,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textOverflow": "ellipsis",
+                "whiteSpace": "nowrap",
+                "width": "100%",
+              },
+              {
+                "opacity": 0,
+              },
+            ]
+          }
+        >
+          Hidden dsfdslflsd lfdslf lsdlfdslf lsdfl sdfl sfdl sdfl dsfl
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,93 @@
+import React, {useContext, useState} from 'react';
+import {Animated, Pressable, Text, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './filter-tab.styles';
+
+type FilterTab = {
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+};
+
+export const FilterTab = ({tabItem}: FilterTab) => {
+  const [dimensions, setDimensions] = useState({width: 0, height: 0});
+  const [translateValue] = useState(new Animated.Value(0));
+
+  const [clickedButton, setClickedButton] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+
+  // 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);
+              setIsActive(!isActive);
+              translateTab(index, inRow);
+            }}
+          >
+            <Text
+              style={[
+                styles.text,
+                clickedButton === index && styles.tabTextActive,
+              ]}
+            >
+              {tab.label}
+            </Text>
+          </Pressable>
+        ))}
+        <Animated.View style={[styles.tab, styles.slidingTab, trans]}>
+          <Text style={[styles.text, styles.textHidden]}>
+            Hidden dsfdslflsd lfdslf lsdlfdslf lsdfl sdfl sfdl sdfl dsfl
+          </Text>
+        </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/atoms/filter-tab/filter-tab.preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {FilterTab} from './filter-tab.component';
+import {useWindowDimensions} from 'react-native';
+const {View} = require('react-native');
+
+export const FilterTabPreview = ({}: {}) => {
+  const tabs = [
+    {
+      value: 'M',
+      label: 'Jongen',
+    },
+    {
+      value: 'V',
+      label: 'Meisje',
+    },
+    {
+      value: 'MV',
+      label: 'Beide',
+    },
+  ];
+
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  return (
+    <View
+      style={{
+        borderColor: 'red',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        width: width - 30,
+      }}
+    >
+      <FilterTab tabItem={tabs} />
+    </View>
+  );
+};

package/src/components/atoms/filter-tab/filter-tab.styles.js

@@ -0,0 +1,64 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      display: 'flex',
+      paddingRight: Scale.xxs,
+      paddingLeft: Scale.xxs,
+      paddingTop: Scale.xxs,
+      paddingBottom: Scale.xxs,
+      borderRadius: 16,
+      backgroundColor: Context.colors.ui.lightgrey,
+    },
+    inner: {
+      display: 'flex',
+      width: '100%',
+    },
+    tabs: {
+      display: 'flex',
+      flexDirection: inRow ? 'row' : 'column',
+      width: '100%',
+      position: 'relative',
+    },
+    tab: {
+      width: ItemWidth,
+      paddingRight: Scale.m,
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+      borderRadius: 16,
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+    },
+    slidingTab: {
+      width: ItemWidth,
+      paddingRight: Scale.m,
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+      borderRadius: 16,
+      zIndex: -1,
+      position: 'absolute',
+      backgroundColor: Context.colors.main['5'],
+    },
+    textHidden: {
+      opacity: 0,
+    },
+    text: {
+      ...Font.medium,
+      width: '100%',
+      textAlign: 'center',
+      color: Context.colors.ui.black,
+      maxHeight: 32,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    tabTextActive: {
+      color: Context.colors.ui.white,
+    },
+  });

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {FilterTab} from './filter-tab.component';
+
+describe('Filter tab test', () => {
+  it('renders a filter tab with 2 tabs', function () {
+    const tabs1 = [
+      {
+        value: 'QR',
+        label: 'QR-Code',
+      },
+      {
+        value: 'NFC',
+        label: 'NFC',
+      },
+    ];
+    const tree = render.create(<FilterTab tabItem={tabs1} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a filter tab with 3 tabs', function () {
+    const tabs2 = [
+      {
+        value: 'M',
+        label: 'Jongen',
+      },
+      {
+        value: 'V',
+        label: 'Meisje',
+      },
+      {
+        value: 'MV',
+        label: 'Beide',
+      },
+    ];
+    const tree = render.create(<FilterTab tabItem={tabs2} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});