@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,135 @@
+import React, {useState} from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Snackbar} from '../snackbar/snackbar.component';
+import {Button} from '../button/button.component';
+
+const {Popover} = require('./popover.component');
+const {View} = require('react-native');
+
+export const PopoverPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+
+  return (
+    <View
+      style={{
+        borderColor: 'red',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View
+        style={{
+          marginTop: 150,
+        }}
+      >
+        <Button
+          onPress={() => setPopoverIsVisible(true)}
+          label="Open popover"
+        />
+      </View>
+      <Popover
+        isVisible={popoverIsVisible}
+        onClose={() => setPopoverIsVisible(false)}
+        title={'Taal'}
+        subtitle={'Welke taal wilt u gebruiken?'}
+      >
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+      </Popover>
+    </View>
+  );
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      zIndex: 1000,
+      top: 0,
+      left: 0,
+      position: 'absolute',
+    },
+  });

package/src/components/atoms/popover-heading/__snapshots__/popover_heading.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test popover-heading component should render a popover-heading component 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansProBold",
+        "fontSize": 24,
+        "lineHeight": 30.2,
+      }
+    }
+  >
+    Label
+  </Text>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansPro",
+        "fontSize": 18,
+        "lineHeight": 22.6,
+      }
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,22 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './popover-heading.styles';
+import {Text, View} from 'react-native';
+
+type PopoverHeadingProps = {
+  label: string;
+  subLine?: string;
+};
+
+const PopoverHeading = ({label, subLine}: PopoverHeadingProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.textLabel}>{label}</Text>
+      <Text style={styles.textSubLine}>{subLine}</Text>
+    </View>
+  );
+};
+export {PopoverHeading as PopoverHeading};

package/src/components/atoms/popover-heading/popover-heading.preview.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {PopoverHeading} from './popover-heading.component';
+
+const {View} = require('react-native');
+
+export const PopoverHeadingPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <PopoverHeading label={'Label'} subLine={'subline'} />
+    </View>
+  );
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    textLabel: {
+      color: context.colors.ui.black,
+      ...Font.bigBold,
+    },
+    textSubLine: {
+      color: context.colors.ui.black,
+      ...Font.large,
+    },
+  });

package/src/components/atoms/popover-heading/popover_heading.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {PopoverHeading} from './popover-heading.component';
+
+describe('test popover-heading component', () => {
+  it('should render a popover-heading component', () => {
+    const tree = renderer.create(<PopoverHeading label={'Label'} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/pressable-icon/__snapshots__/pressable-icon.test.js.snap

@@ -0,0 +1,364 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pressable-icon test render a default disabled pressable icon 1`] = `
+<View
+  accessibilityState={
+    {
+      "disabled": true,
+    }
+  }
+  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={
+      [
+        {
+          "backgroundColor": "#E5E8EB",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <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={28}
+      vbWidth={28}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M3.875 9.5L12.7519 15.4179C13.5077 15.9218 14.4923 15.9218 15.2481 15.4179L24.125 9.5M6.125 21.875H21.875C23.1176 21.875 24.125 20.8676 24.125 19.625V8.375C24.125 7.13236 23.1176 6.125 21.875 6.125H6.125C4.88236 6.125 3.875 7.13236 3.875 8.375V19.625C3.875 20.8676 4.88236 21.875 6.125 21.875Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4283522924}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render a default pressable icon 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={
+      [
+        {
+          "backgroundColor": "#E0E8F9",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <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={27}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M11.25 11.25H5.8906C4.21799 11.25 3.13012 13.0102 3.87814 14.5062L7.81564 22.3812C8.19677 23.1435 8.97586 23.625 9.8281 23.625H14.348C14.532 23.625 14.7153 23.6024 14.8937 23.5578L19.125 22.5M11.25 11.25V5.625C11.25 4.38236 12.2574 3.375 13.5 3.375H13.6074C14.1694 3.375 14.625 3.83059 14.625 4.39259C14.625 5.19618 14.8629 5.9818 15.3086 6.65043L19.125 12.375V22.5M11.25 11.25H13.5M19.125 22.5H21.375C22.6177 22.5 23.625 21.4926 23.625 20.25V13.5C23.625 12.2574 22.6177 11.25 21.375 11.25H18.5625"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render an inverted pressable icon 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={
+      [
+        {
+          "backgroundColor": "#19216C",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <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={4292929785}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render an inverted pressable icon that is disabled 1`] = `
+<View
+  accessibilityState={
+    {
+      "disabled": true,
+    }
+  }
+  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={
+      [
+        {
+          "backgroundColor": "#E5E8EB",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <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={22}
+      vbWidth={24}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          clipRule={0}
+          d="M10.8502 2.2002C10.4146 2.2002 10.0164 2.4356 9.8216 2.80826L8.98946 4.4002H5.1002C4.46507 4.4002 3.9502 4.89268 3.9502 5.5002C3.9502 6.10771 4.46507 6.6002 5.1002 6.6002L5.1002 17.6002C5.1002 18.8152 6.12994 19.8002 7.4002 19.8002H16.6002C17.8705 19.8002 18.9002 18.8152 18.9002 17.6002V6.6002C19.5353 6.6002 20.0502 6.10771 20.0502 5.5002C20.0502 4.89268 19.5353 4.4002 18.9002 4.4002H15.0109L14.1788 2.80826C13.984 2.4356 13.5858 2.2002 13.1502 2.2002H10.8502ZM8.5502 8.8002C8.5502 8.19268 9.06507 7.7002 9.7002 7.7002C10.3353 7.7002 10.8502 8.19268 10.8502 8.8002V15.4002C10.8502 16.0077 10.3353 16.5002 9.7002 16.5002C9.06507 16.5002 8.5502 16.0077 8.5502 15.4002V8.8002ZM14.3002 7.7002C13.6651 7.7002 13.1502 8.19268 13.1502 8.8002V15.4002C13.1502 16.0077 13.6651 16.5002 14.3002 16.5002C14.9353 16.5002 15.4502 16.0077 15.4502 15.4002V8.8002C15.4502 8.19268 14.9353 7.7002 14.3002 7.7002Z"
+          fill={4283522924}
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/atoms/pressable-icon/pressable-icon.component.tsx

@@ -0,0 +1,48 @@
+import React, {useContext} from 'react';
+import {Pressable, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './pressable-icon.styles';
+
+type PressableIconProps = {
+  icon: React.ReactElement;
+  inverted?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+};
+
+export const PressableIcon = ({
+  icon,
+  inverted,
+  disabled,
+  onPress,
+}: PressableIconProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, disabled);
+
+  const disabledIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.ui.darkgrey,
+    })
+  );
+
+  const invertedIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.main['9'],
+    })
+  );
+
+  return (
+    <Pressable onPress={onPress} disabled={disabled}>
+      <View
+        style={[
+          inverted ? styles.backgroundInverted : styles.backgroundDefault,
+          styles.container,
+        ]}
+      >
+        {[disabled ? disabledIcon : icon && inverted ? invertedIcon : icon]}
+      </View>
+    </Pressable>
+  );
+};

package/src/components/atoms/pressable-icon/pressable-icon.preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {PressableIcon} from './pressable-icon.component';
+import {Icon} from '../../../icons';
+const {View} = require('react-native');
+
+export const PressableIconPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <PressableIcon
+        icon={<Icon.Outline.Mail key={'random'} />}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon.Solid.Phone key={'test'} />}
+        inverted={true}
+        disabled={true}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon.Solid.ChatAlt key={'testen'} />}
+        inverted={true}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon.Outline.Plus key={'hello'} />}
+        disabled={true}
+        onPress={() => console.log('Pressed')}
+      />
+    </View>
+  );
+};