Create Opinionated Button

[ErikSin]

Create new Button components with the design system opinionated styles.

To To

• add jsdoc deprecated tag to the original button component
• Create Primary button according to design system
• Create Secondary button according to design system
• Create Destructive button according to design system

Example of component

import type {IconProps} from 'react-native-vector-icons/Icon';

type RestrictedIconProps = Omit<IconProps, 'size' | 'color' | 'style'>;

type IconButtonProps = {
  label: string;
  onPress: () => void;
  fullWidth?:boolean
  icon?: React.ReactElement<RestrictedIconProps>; //This enforces a react-native-vector-icon, but the size, color, and style cannot be set
};

export const PrimaryButton = ({
  label,
  onPress,
  icon,
}) => {
  return (
    <TouchableOpacity style={...opinionated style} onPress={onPress}>
      {icon && <Text style={...opinionated color and size}>{icon}</Text>} //vector icons are built off text, so you can pass the size and color to the parent text icon, and the icon will inherit it.
      <HeaderText style={...opinionated color} variant="header5">
        {label}
      </HeaderText>
    </TouchableOpacity>
  );
};