= Template.bind({});
+Default.args = {type: 'horizontal', iconType: 'default', size: 24};
Horizontal.args = data.horizontal.content as ToggleArrowProps;
Vertical.args = data.vertical.content as ToggleArrowProps;
+OpenHorizontal.args = {type: 'horizontal', open: true, size: 24};
+OpenVertical.args = {type: 'vertical', open: true, size: 24};
+Thin.args = {type: 'horizontal', thin: true, size: 24};
+Slow.args = {type: 'horizontal', slow: true, size: 24};
+ThinSlow.args = {type: 'horizontal', thin: true, slow: true, size: 24};
+NavigationIcon.args = {type: 'horizontal', iconType: 'navigation', size: 30};
+
+AllVariants.args = {};
+AllVariants.decorators = [
+ () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+];
diff --git a/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx
new file mode 100644
index 000000000..c6c0af77a
--- /dev/null
+++ b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx
@@ -0,0 +1,79 @@
+import {composeStories} from '@storybook/react';
+
+import {test} from '../../../../playwright/core/index';
+import * as ToggleArrowStories from '../__stories__/ToggleArrow.stories';
+
+const {
+ Default,
+ Horizontal,
+ Vertical,
+ OpenHorizontal,
+ OpenVertical,
+ Thin,
+ Slow,
+ ThinSlow,
+ NavigationIcon,
+ AllVariants,
+} = composeStories(ToggleArrowStories);
+
+test.describe('ToggleArrow', () => {
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+
+ test('render ', async ({mount, expectScreenshot, defaultDelay}) => {
+ await mount();
+ await defaultDelay();
+ await expectScreenshot({skipTheme: 'dark'});
+ });
+});