# All files / atlas-mobile-ts/src/components Buttons.tsx

0% Statements 0/14
100% Branches 0/0
0% Functions 0/3
0% Lines 0/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76

     ﻿/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
     * Unauthorized copying of this file, via any medium is strictly prohibited
     * Proprietary and confidential
     * Written and maintained by the Click & Push Development team
     * <dev@clicknpush.ca>, January 2022
     */

    import { FontAwesome } from "@expo/vector-icons";
    import React from "react";
    import { StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
    import { colors, testTag } from "../utils/GlobalUtils";

    interface ButtonProps {
        onPress: () => void,
        style?: StyleProp<ViewStyle>
        accessibilityLabel?: string,
    }

    interface TextButtonProps extends ButtonProps {
        text: string,
    }

    interface IconButtonProps extends ButtonProps {
        icon: string,
        color: string,
        size: number
    }

    /**
     * A general component that represents a primary button.
     * @component
     */
    export const PrimaryButton: React.FC<TextButtonProps> = ({text, onPress, style, accessibilityLabel}) => {
        return(
        <TouchableOpacity {...testTag(accessibilityLabel)} style={[styles.btn, styles.primaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    /**
     * A general component that represents a secondary button.
     * @component
     */
    export const SecondaryButton: React.FC<TextButtonProps> = ({text, onPress, style, accessibilityLabel}) => {
        return(
        <TouchableOpacity {...testTag(accessibilityLabel)} style={[styles.btn, styles.secondaryBtn, style]} onPress={onPress}>
            <Text style={{color: 'white'}}>{text}</Text>
        </TouchableOpacity>)
    }

    export const IconButton: React.FC<IconButtonProps> = ({onPress, style, size, color, icon, accessibilityLabel}) => {
        return(
            <TouchableOpacity {...testTag(accessibilityLabel)} style={style} onPress={onPress}>
                <FontAwesome size={size} color={color} name={icon as any}/>
            </TouchableOpacity>
        )
    }

    const styles = StyleSheet.create({
        btn: {
            borderRadius: 50,
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
            height: 60,
            marginBottom: 20,
        },
        primaryBtn: {
            backgroundColor: colors.red,
        },
        secondaryBtn: {
            borderColor: 'white',
            borderWidth: 2,
            backgroundColor: 'transparent',
        }
    })