allow setting chevron optionally in buttonLink

src/__screenshot_tests__/button-screenshot-test.tsx

@@ -91,17 +91,34 @@ test.each(DEVICES)('Buttons - ellipsis (%s)', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
-test('Buttons - Link button - href and no chevron', async () => {
-    await openStoryPage({
-        id: 'components-buttons--link-button',
-        device: 'MOBILE_IOS',
-        args: {
-            noChevron: true,
-        },
-    });
+const BUTTON_LINK_ACTIONS = ['href', 'to', 'onPress'];
+const BUTTON_LINK_CHEVRON_OPTIONS = ['default', 'true', 'false'];
 
-    const story = await screen.findByTestId('content');
+const getLinkWithChevronCases = () => {
+    const cases = [];
+    for (const action of BUTTON_LINK_ACTIONS) {
+        for (const withChevron of BUTTON_LINK_CHEVRON_OPTIONS) {
+            cases.push([action, withChevron]);
+        }
+    }
+    return cases;
+};
 
-    const image = await story.screenshot();
-    expect(image).toMatchImageSnapshot();
-});
+test.each(getLinkWithChevronCases())(
+    'Buttons - Link button - %s (chevron = %s)',
+    async (action, withChevron) => {
+        await openStoryPage({
+            id: 'components-buttons--link-button',
+            device: 'MOBILE_IOS',
+            args: {
+                action,
+                withChevron,
+            },
+        });
+
+        const story = await screen.findByTestId('content');
+
+        const image = await story.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);

src/__stories__/button-story.tsx

@@ -126,18 +126,20 @@ export const DangerButton: StoryComponent<Args> = ({isInverse, text, icon, actio
     );
 };
 
-export const LinkButton: StoryComponent<Omit<Args, 'small'> & {noChevron: boolean}> = ({
+export const LinkButton: StoryComponent<Omit<Args, 'small'> & {withChevron: string}> = ({
     isInverse,
     text,
     icon,
     action,
     newTab,
+    withChevron,
     ...props
 }) => {
     return (
         <ButtonBackgroundContainer isInverse={isInverse}>
             <ButtonLink
                 {...props}
+                withChevron={withChevron === 'default' ? undefined : withChevron === 'true'}
                 {...getButtonActionProps(action, newTab)}
                 StartIcon={icon === 'left' ? IconPhotoCameraRegular : undefined}
                 EndIcon={icon === 'right' ? IconPhotoCameraRegular : undefined}
@@ -176,13 +178,16 @@ SecondaryButton.args = defaultArgs;
 DangerButton.args = defaultArgs;
 LinkButton.args = {
     ...(({small, ...o}) => o)(defaultArgs),
-    noChevron: false,
+    withChevron: 'default',
 };
 
 primaryButton.argTypes = defaultArgTypes;
 SecondaryButton.argTypes = defaultArgTypes;
 DangerButton.argTypes = defaultArgTypes;
 LinkButton.argTypes = {
     ...defaultArgTypes,
-    noChevron: {if: {arg: 'action', neq: 'onPress'}},
+    withChevron: {
+        options: ['default', 'true', 'false'],
+        control: {type: 'select'},
+    },
 };

src/button.tsx

@@ -441,6 +441,7 @@ interface ButtonLinkCommonProps {
     loadingText?: string;
     StartIcon?: React.FC<IconProps>;
     EndIcon?: React.FC<IconProps>;
+    withChevron?: boolean;
 }
 interface ButtonLinkOnPressProps extends ButtonLinkCommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
@@ -452,14 +453,12 @@ interface ButtonLinkHrefProps extends ButtonLinkCommonProps {
     newTab?: boolean;
     onPress?: undefined;
     to?: undefined;
-    noChevron?: boolean;
 }
 interface ButtonLinkToProps extends ButtonLinkCommonProps {
     to: string;
     fullPageOnWebView?: boolean;
     onPress?: undefined;
     href?: undefined;
-    noChevron?: boolean;
 }
 
 export type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
@@ -474,6 +473,7 @@ export const ButtonLink = React.forwardRef<TouchableElement, ButtonLinkProps>((p
     const [isOnPressPromiseResolving, setIsOnPressPromiseResolving] = React.useState(false);
 
     const showSpinner = props.showSpinner || isOnPressPromiseResolving;
+    const showChevron = props.withChevron ?? (!!props.href || !!props.to);
 
     // This state is needed to not render the spinner when hidden (because it causes high CPU usage
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
@@ -528,7 +528,7 @@ export const ButtonLink = React.forwardRef<TouchableElement, ButtonLinkProps>((p
             textContentStyle: styles.textContentLink,
             StartIcon: props.StartIcon,
             EndIcon: props.EndIcon,
-            withChevron: (!!props.to || !!props.href) && !props.noChevron,
+            withChevron: showChevron,
         }),
         disabled: props.disabled || showSpinner || isFormSending,
     };