docs(ClipboardButton): CSF 3 & visual testing

src/components/ClipboardButton/__stories__/ClipboardButton.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
+import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
+import type {ClipboardButtonProps} from '../ClipboardButton';
 import {ClipboardButton} from '../ClipboardButton';
 
 export default {
@@ -13,7 +15,69 @@ export default {
 
 type Story = StoryObj<typeof ClipboardButton>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        onCopy: action('onCopy'),
+        onMouseEnter: action('onMouseEnter'),
+        onMouseLeave: action('onMouseLeave'),
+        onFocus: action('onFocus'),
+        onBlur: action('onBlur'),
+    },
+};
+
+export const CustomTooltipText: Story = {
+    args: {
+        hasTooltip: true,
+        tooltipInitialText: 'Initial text',
+        tooltipSuccessText: 'Success text',
+    },
+    name: 'Custom tooltip text',
+};
+
+export const CustomTimeout: Story = {
+    args: {
+        timeout: 5000,
+    },
+    name: 'Custom timeout',
+};
+
+const viewCases: Array<ClipboardButtonProps['view']> = [
+    'normal',
+    'action',
+    'outlined',
+    'outlined-info',
+    'outlined-success',
+    'outlined-warning',
+    'outlined-danger',
+    'outlined-utility',
+    'outlined-action',
+    'raised',
+    'flat',
+    'flat-secondary',
+    'flat-info',
+    'flat-success',
+    'flat-warning',
+    'flat-danger',
+    'flat-utility',
+    'flat-action',
+    'normal-contrast',
+    'outlined-contrast',
+    'flat-contrast',
+];
+
+export const View: Story = {
+    render: (args) => (
+        <Showcase>
+            {viewCases.map((view) => {
+                return (
+                    <ShowcaseItem title={`View ${view}`} key={view}>
+                        <ClipboardButton {...args} view={view} />
+                    </ShowcaseItem>
+                );
+            })}
+        </Showcase>
+    ),
+};
 
 export const Size: Story = {
     render: (args) => (

src/components/ClipboardButton/__tests__/ClipboardButton.visual.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {ClipboardButtonStories} from './helpersPlaywright';
+
+const mountOptions = {};
+
+test.describe('ClipboardButton', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<ClipboardButtonStories.Default />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <CustomTooltipText>', async ({mount, expectScreenshot}) => {
+        await mount(<ClipboardButtonStories.CustomTooltipText />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <View>', async ({mount, expectScreenshot}) => {
+        await mount(<ClipboardButtonStories.View />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<ClipboardButtonStories.Size />, mountOptions);
+
+        await expectScreenshot();
+    });
+});

src/components/ClipboardButton/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultClipboardButtonStories from '../__stories__/ClipboardButton.stories';
+
+export const ClipboardButtonStories = composeStories(DefaultClipboardButtonStories);