Implement test and story

Signed-off-by: Milos Dzepina <milos@aragon.org>

Author: milosh86

src/core/components/clipboard/clipboard.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button';
 import { Link } from '../link';
 import { Clipboard } from './clipboard';
 
@@ -54,4 +55,26 @@ export const WithText: Story = {
     ),
 };
 
+/**
+ * Example of the Clipboard component inside a form, demonstrating that clicking the copy
+ * button does not trigger form submission.
+ */
+export const InsideForm: Story = {
+    args: {
+        copyValue: '0x123456789',
+    },
+    render: (props) => (
+        <form
+            className="flex flex-col gap-6"
+            onSubmit={(e) => {
+                e.preventDefault();
+                alert('Form submitted!');
+            }}
+        >
+            <Clipboard {...props} />
+            <Button type="submit">Submit form</Button>
+        </form>
+    ),
+};
+
 export default meta;

src/core/components/clipboard/clipboard.test.tsx

@@ -56,6 +56,26 @@ describe('<Clipboard /> component', () => {
         expect(handleCopySpy).toHaveBeenCalledWith(textToCopy);
     });
 
+    it('does not trigger form submission when clicked', async () => {
+        const handleSubmit = jest.fn();
+
+        const variants: IClipboardProps['variant'][] = ['avatar', 'avatar-white-bg', 'button'];
+
+        for (const variant of variants) {
+            handleSubmit.mockReset();
+            const { unmount } = render(
+                <form onSubmit={handleSubmit}>
+                    {createTestComponent({ variant })}
+                </form>,
+            );
+
+            await userEvent.click(screen.getByRole('button'));
+
+            expect(handleSubmit).not.toHaveBeenCalled();
+            unmount();
+        }
+    });
+
     it('optionally renders children besides the clipboard', () => {
         const childText = 'Child text';
         const icon = IconType.COPY;