@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,307 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test button component should render a button component 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#19216C",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#E0E8F9",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Test button
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test button component should render a button component 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#E5E8EB",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#515F6C",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Button with icon
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test button component should render a button component with an 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#19216C",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginRight": 12,
+        }
+      }
+    >
+      <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={4279837036}
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <Text
+      style={
+        {
+          "color": "#E0E8F9",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Button with icon
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test button component should render a button component with an icon but is also 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#E5E8EB",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginRight": 12,
+        }
+      }
+    >
+      <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={4279837036}
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <Text
+      style={
+        {
+          "color": "#515F6C",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Button with icon
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,27 @@
+import React, {useContext} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './button.styles';
+
+type ButtonProps = {
+  label: string;
+  icon?: any; // can be an icon type?
+  disabled?: boolean;
+  onPress?: () => void;
+};
+
+const Button = ({label, icon, disabled, onPress}: ButtonProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, disabled);
+
+  return (
+    <Pressable disabled={disabled} onPress={onPress}>
+      <View style={styles.container}>
+        {icon ? <View style={styles.iconGap}>{icon}</View> : null}
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export {Button as Button};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {Button} from './button.component';
+import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
+const {View} = require('react-native');
+
+export const ButtonPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Button label="Default button" onPress={() => console.log('clicked')} />
+      <Button
+        label="Icon button"
+        icon={<FilterIcon color="red" />}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Disabled"
+        disabled={true}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Disabled Icon button"
+        icon={<FilterIcon color="red" />}
+        disabled={true}
+        onPress={() => console.log('clicked')}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, disabled) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: disabled
+        ? context.colors.ui.lightgrey
+        : context.colors.main['0'],
+      paddingVertical: Scale.s,
+      paddingHorizontal: Scale.l,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 50,
+    },
+    label: {
+      ...Font.medium,
+      color: disabled ? context.colors.ui.darkgrey : context.colors.main['9'],
+    },
+    iconGap: {
+      marginRight: Scale.s,
+    },
+  });

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Button} from './button.component';
+import {Icon} from '../../../icons';
+
+describe('test button component', () => {
+  it('should render a button component', function () {
+    const tree = render.create(<Button label="Test button" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component that is disabled', () => {
+    const tree = render
+      .create(<Button label="Button with icon" disabled={true} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component with an icon', () => {
+    const tree = render
+      .create(<Button label="Button with icon" icon={<Icon.Outline.Mail />} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component with an icon but is also disabled', () => {
+    const tree = render
+      .create(
+        <Button
+          label="Button with icon"
+          icon={<Icon.Outline.Mail />}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/cancel-link/__snapshots__/cancel-link.test.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cancel link component test renders a cancel link with label "annuleer" that is pressable 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#F16868",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Annuleer
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Cancel link component test renders a cancel link with label "cancel" that is pressable 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={
+      {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#F16868",
+          "fontFamily": "SourceSansPro",
+          "fontSize": 16,
+          "lineHeight": 22.4,
+        }
+      }
+    >
+      Cancel
+    </Text>
+  </View>
+</View>
+`;

package/src/components/atoms/cancel-link/cancel-link.component.tsx

@@ -0,0 +1,24 @@
+import React, {useContext} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './cancel-link.styles';
+
+type CancelLinkProps = {
+  label: string;
+  onPress: () => void;
+};
+
+const CancelLink = ({label, onPress}: CancelLinkProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <Pressable onPress={onPress}>
+      <View style={styles.container}>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export {CancelLink as CancelLink};

package/src/components/atoms/cancel-link/cancel-link.preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {CancelLink} from './cancel-link.component';
+const {View} = require('react-native');
+
+export const CancelLinkPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <CancelLink
+        label={'Annuleer'}
+        onPress={() => console.log('cancel clicked')}
+      />
+    </View>
+  );
+};

package/src/components/atoms/cancel-link/cancel-link.styles.js

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: 'transparent',
+      paddingVertical: Scale.s,
+      paddingHorizontal: Scale.l,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 50,
+    },
+    label: {
+      ...Font.medium,
+      color: context.colors.ui.error.default,
+    },
+  });

package/src/components/atoms/cancel-link/cancel-link.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {CancelLink} from './cancel-link.component';
+
+describe('Cancel link component test', () => {
+  it('renders a cancel link with label "cancel" that is pressable', function () {
+    const tree = render
+      .create(
+        <CancelLink
+          label="Cancel"
+          onPress={() => console.log('You cancelled something')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a cancel link with label "annuleer" that is pressable', function () {
+    const tree = render
+      .create(
+        <CancelLink
+          label="Annuleer"
+          onPress={() => console.log('You cancelled something')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/check-switch/__snapshots__/check-switch.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test check switch should render a check switch component 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <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": "#647ACB",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "width": 65,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": 50,
+            "elevation": 4,
+            "height": 30,
+            "shadowColor": "#1F2933",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.8,
+            "shadowRadius": 2,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+            ],
+            "width": 30,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;