@tactics/toddle-styleguide 0.0.1

package/src/components/atoms/pill/__snapshots__/pill.test.js.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test pill given the visual state is DEFAULT return a blue/purple colored pill 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      },
+      {
+        "backgroundColor": "#647ACB",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#FFFFFF",
+        "fontFamily": "MontserratBold",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    Default
+  </Text>
+</View>
+`;
+
+exports[`test pill given the visual state is Error return a red colored pill 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      },
+      false,
+      false,
+      false,
+      {
+        "backgroundColor": "#F16868",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#FFFFFF",
+        "fontFamily": "MontserratBold",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    Geblokkeerd
+  </Text>
+</View>
+`;
+
+exports[`test pill given the visual state is SUCCESS return a green colored pill 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      },
+      false,
+      {
+        "backgroundColor": "#83D56C",
+      },
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#FFFFFF",
+        "fontFamily": "MontserratBold",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    Voldaan
+  </Text>
+</View>
+`;
+
+exports[`test pill given the visual state is Warning return a orange colored pill 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      },
+      false,
+      false,
+      {
+        "backgroundColor": "#FCBF6F",
+      },
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#FFFFFF",
+        "fontFamily": "MontserratBold",
+        "fontSize": 11,
+        "lineHeight": 17.9,
+      }
+    }
+  >
+    Pas op
+  </Text>
+</View>
+`;

package/src/components/atoms/pill/pill.component.tsx

@@ -0,0 +1,23 @@
+import React, {useContext} from 'react';
+import {View, Text} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './pill.styles';
+import {VisualState} from '../../../types/visual-state.enum';
+
+type PillProps = {
+  variant: VisualState;
+  label: string;
+};
+
+const Pill = ({variant, label}: PillProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, variant);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+};
+
+export {Pill as Pill};

package/src/components/atoms/pill/pill.preview.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Pill} from './pill.component';
+import {VisualState} from '../../../types/visual-state.enum';
+const {View} = require('react-native');
+
+export const PillPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Pill variant={VisualState.DEFAULT} label="default" />
+      <Pill variant={VisualState.ERROR} label="error" />
+      <Pill variant={VisualState.WARNING} label="warning" />
+      <Pill variant={VisualState.SUCCESS} label="success" />
+    </View>
+  );
+};

package/src/components/atoms/pill/pill.styles.js

@@ -0,0 +1,32 @@
+import {StyleSheet} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context, variant) =>
+  StyleSheet.create({
+    container: [
+      {
+        borderRadius: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+      },
+      variant === VisualState.DEFAULT && {
+        backgroundColor: context.colors.main['5'],
+      },
+      variant === VisualState.SUCCESS && {
+        backgroundColor: context.colors.ui.success.default,
+      },
+      variant === VisualState.WARNING && {
+        backgroundColor: context.colors.ui.warning.default,
+      },
+      variant === VisualState.ERROR && {
+        backgroundColor: context.colors.ui.error.default,
+      },
+    ],
+    label: {
+      ...Font.tinyBold,
+      color: context.colors.ui.white,
+    },
+  });

package/src/components/atoms/pill/pill.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Pill} from './pill.component';
+
+describe('test pill', () => {
+  it('given the visual state is Error return a red colored pill', () => {
+    const tree = renderer
+      .create(<Pill variant="ERROR" label="Geblokkeerd" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is Warning return a orange colored pill', () => {
+    const tree = renderer
+      .create(<Pill variant="WARNING" label="Pas op" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is SUCCESS return a green colored pill', () => {
+    const tree = renderer
+      .create(<Pill variant="SUCCESS" label="Voldaan" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visual state is DEFAULT return a blue/purple colored pill', () => {
+    const tree = renderer
+      .create(<Pill variant="DEFAULT" label="Default" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/popover/components/backdrop/backdrop.component.tsx

@@ -0,0 +1,40 @@
+import React, {useContext, useMemo} from 'react';
+import {ThemeCtx} from '../../../../../context/theme.context';
+import {Animated} from 'react-native';
+import {Stylesheet} from './backdrop.styles';
+
+type PopoverBackdropProps = {
+  isVisible: boolean;
+};
+
+const Backdrop = ({isVisible}: PopoverBackdropProps) => {
+  const context = useContext(ThemeCtx);
+  const opacity = useMemo(() => new Animated.Value(0), []);
+
+  const styles = Stylesheet(context);
+
+  const open = () => {
+    Animated.timing(opacity, {
+      toValue: 0.75,
+      duration: 80,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const close = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 600,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  if (isVisible) {
+    open();
+  } else {
+    close();
+  }
+
+  return <Animated.View style={[styles.element, {opacity: opacity}]} />;
+};
+export {Backdrop as Backdrop};

package/src/components/atoms/popover/components/backdrop/backdrop.styles.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      height: '100%',
+      backgroundColor: Context.colors.ui.black,
+      zIndex: 1001,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    },
+  });

package/src/components/atoms/popover/components/foreground/foreground.component.tsx

@@ -0,0 +1,17 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../../../context/theme.context';
+import {View} from 'react-native';
+import {Stylesheet} from './foreground.styles';
+import {Modal} from '../modal/modal.component';
+
+type PopoverForegroundProps = {
+  children: React.ReactElement<typeof Modal>;
+};
+
+const Foreground = ({children}: PopoverForegroundProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return <View style={styles.element}>{children}</View>;
+};
+export {Foreground as Foreground};

package/src/components/atoms/popover/components/foreground/foreground.styles.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      height: '100%',
+      paddingRight: Scale.xs,
+      paddingLeft: Scale.xs,
+      zIndex: 1002,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    },
+  });

package/src/components/atoms/popover/components/index.js

@@ -0,0 +1,5 @@
+import {Backdrop} from './backdrop/backdrop.component';
+import {Foreground} from './foreground/foreground.component';
+import {Modal} from './modal/modal.component';
+
+export {Backdrop, Foreground, Modal};

package/src/components/atoms/popover/components/modal/close/close.component.tsx

@@ -0,0 +1,21 @@
+import React, {useContext} from 'react';
+import {GestureResponderEvent, Pressable} from 'react-native';
+import {CrossIcon} from '../../../../../../icons/outline/cross/cross.icon';
+import {Stylesheet} from './close.styles';
+import {ThemeCtx} from '../../../../../../context/theme.context';
+
+type ModalCloseProps = {
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+const Close = ({onPress}: ModalCloseProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <Pressable onPress={onPress} style={styles.element}>
+      <CrossIcon />
+    </Pressable>
+  );
+};
+export {Close as Close};

package/src/components/atoms/popover/components/modal/close/close.styles.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      color: Context.colors.ui.darkgrey,
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      zIndex: 1003,
+    },
+  });

package/src/components/atoms/popover/components/modal/heading/heading.component.tsx

@@ -0,0 +1,22 @@
+import React, {useContext} from 'react';
+import {Text, View} from 'react-native';
+import {Stylesheet} from './heading.styles';
+import {ThemeCtx} from '../../../../../../context/theme.context';
+
+type ModalHeadingProps = {
+  title: string;
+  subtitle?: string;
+};
+
+const Heading = ({title, subtitle}: ModalHeadingProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.element}>
+      <Text style={styles.title}>{title}</Text>
+      {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : ''}
+    </View>
+  );
+};
+export {Heading as Heading};

package/src/components/atoms/popover/components/modal/heading/heading.styles.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../../../../theme/font';
+import {Scale} from '../../../../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: Scale.xl,
+    },
+    title: {
+      ...Font.bigBold,
+      display: 'flex',
+      textAlign: 'center',
+    },
+    subtitle: {
+      ...Font.large,
+      display: 'flex',
+      textAlign: 'center',
+      marginTop: Scale.xxs,
+    },
+  });

package/src/components/atoms/popover/components/modal/modal.component.tsx

@@ -0,0 +1,87 @@
+import React, {useContext, useEffect, useMemo, useState} from 'react';
+import {Animated, Dimensions} from 'react-native';
+import {Stylesheet} from './modal.styles';
+import {Close} from './close/close.component';
+import {Heading} from './heading/heading.component';
+import {ScrollContent} from './scroll-content/scroll-content.component';
+import {ThemeCtx} from '../../../../../context/theme.context';
+
+type PopoverModalProps = {
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children: React.ReactNode;
+  windowHeight: number;
+};
+
+const Modal = ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  windowHeight,
+}: PopoverModalProps) => {
+  // Keep element and window size in local state.
+  const [elementSize, setElementSize] = useState({width: 0, height: 0});
+
+  // Load theme and apply theme context to styleguide.
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const elementHeight = Math.round(elementSize.height);
+
+  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const translateYStartingPoint = windowHeight;
+
+  const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
+
+  const translateY = useMemo(
+    () => new Animated.Value(translateYStartingPoint),
+    [translateYStartingPoint]
+  );
+
+  const open = () => {
+    Animated.timing(translateY, {
+      toValue: translateYStartingPoint - saveHeight,
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const close = () => {
+    Animated.timing(translateY, {
+      toValue: translateYStartingPoint,
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  if (isVisible) {
+    open();
+  } else {
+    close();
+  }
+
+  const transform = [{translateY: translateY}];
+
+  console.log(maxHeight);
+
+  return (
+    <Animated.View
+      style={[styles.element, {maxHeight: maxHeight}, {transform: transform}]}
+      onLayout={(event) => {
+        const {width, height} = event.nativeEvent.layout;
+        setElementSize({width: width, height: height});
+      }}
+    >
+      <Close onPress={onClose} />
+      <Animated.View style={styles.inner}>
+        <Heading title={title} subtitle={subtitle} />
+        <ScrollContent>{children}</ScrollContent>
+      </Animated.View>
+    </Animated.View>
+  );
+};
+export {Modal as Modal};

package/src/components/atoms/popover/components/modal/modal.styles.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      paddingTop: Scale.m,
+      paddingBottom: Scale.m,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.m,
+      borderTopLeftRadius: Scale.l,
+      borderTopRightRadius: Scale.l,
+      backgroundColor: Context.colors.ui.white,
+    },
+    inner: {
+      display: 'flex',
+      alignItems: 'stretch',
+    },
+  });

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.component.tsx

@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+import {Animated, ScrollView, Text, View} from 'react-native';
+import {Stylesheet} from './scroll-content.styles';
+import {ThemeCtx} from '../../../../../../context/theme.context';
+
+type ModalScrollContentProps = {
+  children: React.ReactNode;
+};
+
+const ScrollContent = ({children}: ModalScrollContentProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <ScrollView contentContainerStyle={styles.element}>{children}</ScrollView>
+  );
+};
+export {ScrollContent as ScrollContent};

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.styles.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      display: 'flex',
+      alignItems: 'stretch',
+    },
+  });

package/src/components/atoms/popover/popover.component.tsx

@@ -0,0 +1,60 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Dimensions, View} from 'react-native';
+import {Stylesheet} from './popover.styles';
+import {Backdrop, Modal, Foreground} from './components';
+
+type PopoverProps = {
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children?: React.ReactNode;
+};
+
+const window = Dimensions.get('window');
+
+const Popover = ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+}: PopoverProps) => {
+  // Keep element and window size in local state.
+  const [windowHeight, setWindowHeight] = useState(window.height);
+  const [windowWidth, setWindowWidth] = useState(window.width);
+
+  // Subscribe to change events
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({window}) => {
+      setWindowHeight(window.height);
+      setWindowWidth(window.width);
+    });
+    return () => subscription?.remove();
+  });
+
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View
+      style={[styles.element, {width: windowWidth, height: windowHeight}]}
+      pointerEvents={isVisible ? 'auto' : 'none'}
+    >
+      <Backdrop isVisible={isVisible} />
+      <Foreground>
+        <Modal
+          windowHeight={windowHeight}
+          isVisible={isVisible}
+          onClose={onClose}
+          title={title}
+          subtitle={subtitle}
+        >
+          {children}
+        </Modal>
+      </Foreground>
+    </View>
+  );
+};
+export {Popover as Popover};