feat(EmptyState): allow using only ButtonLink as action

src/__screenshot_tests__/empty-state-screenshot-test.tsx

@@ -4,11 +4,14 @@ import type {Device} from '../test-utils';
 
 const devices: Array<Device> = ['MOBILE_IOS', 'TABLET', 'DESKTOP'];
 const assets = ['Icon', 'Image', 'img'];
+const actions = ['button and link', 'button', 'link', 'none'];
 const createCases = () => {
     const cases = [];
     for (const device of devices) {
         for (const asset of assets) {
-            cases.push([device, asset]);
+            for (const action of actions) {
+                cases.push([device, asset, action]);
+            }
         }
     }
     return cases;
@@ -26,18 +29,21 @@ test.each(devices)('EmptyState in %s with image', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
-test.each(createCases())('EmptyState in %s with %s asset', async (device, asset) => {
-    await openStoryPage({
-        id: 'patterns-empty-states-emptystate--with-icon',
-        device: device as Device,
-        args: {asset},
-    });
+test.each(createCases())(
+    'EmptyState in %s with %s asset and actions = %s',
+    async (device, asset, actions) => {
+        await openStoryPage({
+            id: 'patterns-empty-states-emptystate--with-icon',
+            device: device as Device,
+            args: {asset, actions},
+        });
 
-    const emptyState = await screen.findByTestId('empty-state-with-icon');
-    const image = await emptyState.screenshot();
+        const emptyState = await screen.findByTestId('empty-state-with-icon');
+        const image = await emptyState.screenshot();
 
-    expect(image).toMatchImageSnapshot();
-});
+        expect(image).toMatchImageSnapshot();
+    }
+);
 
 test.each(devices)('EmptyState in %s with small image', async (device) => {
     await openStoryPage({

src/__stories__/empty-state-story.tsx

@@ -9,29 +9,44 @@ export default {
         fullScreen: true,
     },
     argTypes: {
-        asset: {
-            options: ['Icon', 'Image', 'img'],
+        actions: {
+            options: ['button and link', 'button', 'link', 'none'],
             control: {type: 'select'},
         },
     },
+    args: {
+        actions: 'button and link',
+    },
 };
 
-type Args = {asset: string};
+interface Args {
+    actions: 'button and link' | 'button' | 'link' | 'none';
+}
 
-export const WithImage: StoryComponent = () => (
+export const WithImage: StoryComponent<Args> = ({actions}) => (
     <div data-testid="empty-state-with-image">
         <EmptyState
             largeImageUrl={emptyStateImg}
             title="Your cart is empty"
             description="Check our marketplaces and find something for you. Check our marketplaces and find something"
-            button={<ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>}
-            buttonLink={<ButtonLink onPress={() => {}}>More info</ButtonLink>}
+            button={
+                actions.includes('button') ? (
+                    <ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>
+                ) : undefined
+            }
+            buttonLink={
+                actions.includes('link') ? <ButtonLink onPress={() => {}}>More info</ButtonLink> : undefined
+            }
         />
     </div>
 );
 WithImage.storyName = 'With image';
 
-export const WithIcon: StoryComponent<Args> = ({asset}) => {
+interface WithIconArgs extends Args {
+    asset: string;
+}
+
+export const WithIcon: StoryComponent<WithIconArgs> = ({actions, asset}) => {
     let assetProps;
     if (asset === 'Icon') {
         assetProps = {
@@ -53,23 +68,46 @@ export const WithIcon: StoryComponent<Args> = ({asset}) => {
                 {...assetProps}
                 title="Your cart is empty"
                 description="Check our marketplaces and find something for you. Check our marketplaces and find something"
-                button={<ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>}
+                button={
+                    actions.includes('button') ? (
+                        <ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>
+                    ) : undefined
+                }
+                buttonLink={
+                    actions.includes('link') ? (
+                        <ButtonLink onPress={() => {}}>More info</ButtonLink>
+                    ) : undefined
+                }
             />
         </div>
     );
 };
 WithIcon.storyName = 'With icon';
+WithIcon.argTypes = {
+    asset: {
+        options: ['Icon', 'Image', 'img'],
+        control: {type: 'select'},
+    },
+};
 WithIcon.args = {
     asset: 'Icon',
+    actions: 'button and link',
 };
 
-export const WithSmallImage: StoryComponent = () => (
+export const WithSmallImage: StoryComponent<Args> = ({actions}) => (
     <div data-testid="empty-state-with-small-image">
         <EmptyState
             imageUrl={avatars4Img}
             title="Your cart is empty"
             description="Check our marketplaces and find something for you. Check our marketplaces and find something"
-            button={<ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>}
+            button={
+                actions.includes('button') ? (
+                    <ButtonPrimary onPress={() => {}}>Explore marketplace</ButtonPrimary>
+                ) : undefined
+            }
+            buttonLink={
+                actions.includes('link') ? <ButtonLink onPress={() => {}}>More info</ButtonLink> : undefined
+            }
         />
     </div>
 );

src/empty-state.tsx

@@ -107,7 +107,7 @@ const EmptyState: React.FC<Props> = ({
                             {description}
                         </Text3>
                     </Stack>
-                    {button && <ButtonGroup {...buttons} />}
+                    <ButtonGroup {...buttons} />
                 </Stack>
             </div>
             <div style={{flex: 1, position: 'relative'}}>