diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
new file mode 100644
index 0000000000..8490be93f7
--- /dev/null
+++ b/cypress/plugins/index.js
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-console */
+module.exports = (on, config) => {
+ on('before:browser:launch', (browser = {}, launchOptions) => {
+ console.log('before:browser:launch', launchOptions.args);
+
+ launchOptions.args.push('--disable-gpu');
+
+ return launchOptions;
+ });
+};
diff --git a/src/tooltip/__tests__/tooltip-e2e.stories.tsx b/src/tooltip/__tests__/tooltip-e2e.stories.tsx
new file mode 100644
index 0000000000..b14561d2d6
--- /dev/null
+++ b/src/tooltip/__tests__/tooltip-e2e.stories.tsx
@@ -0,0 +1,246 @@
+import React from 'react';
+import {Story as StoryType} from '@storybook/react';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {Button} from '../../button';
+import {GridLayoutItem} from '../../grid-layout';
+import {StorybookPage} from '../../test/storybook-comps';
+import {CreateThemeArgs, ThemeProvider} from '../../theme';
+import {Tooltip} from '../tooltip';
+import {Stack} from '../../stack';
+
+const tooltipCustomThemeObject: CreateThemeArgs = {
+ name: 'my-custom-tooltip-theme',
+ overrides: {
+ stylePresets: {
+ tooltipPointerCustom: {
+ base: {
+ backgroundColor: '{{colors.interfaceInformative020}}',
+ },
+ },
+ tooltipPanelCustom: {
+ base: {
+ backgroundColor: '{{colors.interfaceInformative020}}',
+ borderRadius: '{{borders.borderRadiusDefault}}',
+ color: '{{colors.inkBrand010}}',
+ },
+ },
+ },
+ },
+};
+
+export const StoryTooltipPlacementsTestHidden = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+StoryTooltipPlacementsTestHidden.storyName = 'Placements visual test';
+StoryTooltipPlacementsTestHidden.parameters = {
+ percy: {enableJavaScript: true},
+};
+
+export default {
+ title: 'Components/Tooltip e2e',
+ component: () => 'None',
+ parameters: {
+ nkDocs: {
+ title: 'Tooltip e2e',
+ url: 'https://newskit.co.uk/components/tooltip',
+ description: 'Additional stories for end-to-end testing.',
+ },
+ },
+ decorators: [
+ (
+ Story: StoryType,
+ context: {name: string; globals: {backgrounds: {value: string}}},
+ ) => (
+
+
+
+ ),
+ ],
+};
diff --git a/src/tooltip/__tests__/tooltip.stories.tsx b/src/tooltip/__tests__/tooltip.stories.tsx
index d3e76cd371..fee388bc4d 100644
--- a/src/tooltip/__tests__/tooltip.stories.tsx
+++ b/src/tooltip/__tests__/tooltip.stories.tsx
@@ -1,8 +1,10 @@
-import * as React from 'react';
+import React from 'react';
+import {Story as StoryType} from '@storybook/react';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
import {Button} from '../../button';
-import {GridLayout, GridLayoutItem} from '../../grid-layout';
-import {StorybookSubHeading} from '../../test/storybook-comps';
-import {createTheme, ThemeProvider} from '../../theme';
+import {GridLayoutItem} from '../../grid-layout';
+import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+import {CreateThemeArgs, ThemeProvider} from '../../theme';
import {styled} from '../../utils';
import {Tooltip} from '../tooltip';
import {IconFilledTwitter} from '../../icons';
@@ -10,399 +12,460 @@ import {IconButton} from '../../icon-button';
import {Stack} from '../../stack';
import {LinkInline, LinkStandalone} from '../../link';
-export default {
- title: 'Components/tooltip',
- component: () => 'None',
-};
-
-const StyledDiv = styled.div`
- margin-left: 200px;
- margin-top: 48px;
+const Spacer = styled.div`
+ margin-bottom: 20px;
+ min-height: 5px;
+ min-width: 5px;
`;
-const Container = styled.div`
- max-width: 600px;
- margin: 50px auto;
-`;
-
-const myCustomTheme = createTheme({
- name: 'my-custom-modal-theme',
+const tooltipCustomThemeObject: CreateThemeArgs = {
+ name: 'my-custom-tooltip-theme',
overrides: {
stylePresets: {
tooltipPointerCustom: {
base: {
- backgroundColor: '{{colors.red080}}',
+ backgroundColor: '{{colors.interfaceInformative020}}',
},
},
tooltipPanelCustom: {
base: {
- backgroundColor: '{{colors.red080}}',
+ backgroundColor: '{{colors.interfaceInformative020}}',
borderRadius: '{{borders.borderRadiusDefault}}',
- color: '{{colors.inkInverse}}',
+ color: '{{colors.inkBrand010}}',
},
},
},
},
-});
+};
export const StoryTooltipDefault = () => (
-
- Tooltip with icon button
-
-
-
-
-
- Tooltip with disabled button
-
-
-
-
- Tooltip with button
-
+
+
+);
+StoryTooltipDefault.storyName = 'Default';
+StoryTooltipDefault.parameters = {
+ percy: {skip: true},
+};
+
+export const StoryTooltipPlacements = () => (
+
+
-
-
- Tooltip with inline link
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Inline link
-
- Tooltip with standalone link
-
+
+
+
+
+
+
+
+
+
+
+
+
- Standalone link
-
-
- When content is empty, no tooltip is displayed
-
-
-
-
- When content is not a string
- Lorem ipsum dolor sit amet}
- placement="right"
- trigger={['focus', 'hover']}
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- When content is long and without maxWidth
-
-
-
-
-
- When content is long and with maxWidth
-
-
+
+
-
-
-
+
+
);
-StoryTooltipDefault.storyName = 'tooltip';
-StoryTooltipDefault.parameters = {
+StoryTooltipTriggers.storyName = 'Triggers';
+StoryTooltipTriggers.parameters = {
percy: {skip: true},
};
-export const StoryTooltipPlacements = () => (
+export const StoryTooltipVariations = () => (
<>
- Tooltip Placements
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Show tooltip
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show tooltip
+
+
+
+
+ Show tooltip
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet}
+ placement="right"
+ trigger={['focus', 'hover']}
>
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Show tooltip
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Show tooltip
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
);
-StoryTooltipPlacements.storyName = 'tooltip-placements';
-StoryTooltipPlacements.parameters = {
+StoryTooltipVariations.storyName = 'Variations';
+StoryTooltipVariations.parameters = {
percy: {skip: true},
};
-export const StoryTooltipTriggers = () => (
- <>
- Triggered by focus only
-
-
-
- Triggered by hover & focus
-
-
-
-
+export const StoryTooltipNoPointer = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-StoryTooltipTriggers.storyName = 'tooltip-triggers';
-StoryTooltipTriggers.parameters = {
- percy: {skip: true},
+StoryTooltipNoPointer.storyName = 'No pointer';
+StoryTooltipNoPointer.parameters = {
+ percy: {enableJavaScript: true},
};
export const StoryTooltipControlled = () => {
const [open, setOpen] = React.useState(false);
return (
- <>
- Tooltip Controlled
-
-
-
- External state control - click the button below to show/hide the
- tooltip.
-
-
-
+
+
+
+
+
+
+
);
};
-StoryTooltipControlled.storyName = 'tooltip-controlled';
+StoryTooltipControlled.storyName = 'Controlled';
StoryTooltipControlled.parameters = {
percy: {skip: true},
};
-export const StoryTooltipOverrides = () => (
- <>
- Tooltip Overrides
-
+export const StoryTooltipStylingOverrides = () => (
+
+
(
stylePreset: 'tooltipPointerCustom',
size: 'sizing030',
},
- transitionPreset: {
- extend: 'fade',
- base: {
- transitionDelay: '{{motions.motionDuration050}}',
- },
- },
}}
>
-
-
-
+
+
);
-StoryTooltipOverrides.storyName = 'tooltip-overrides';
-StoryTooltipOverrides.parameters = {
+StoryTooltipStylingOverrides.storyName = 'Styling overrides';
+StoryTooltipStylingOverrides.parameters = {
percy: {enableJavaScript: true},
};
-export const StoryTooltipPlacementsVisualTest = () => (
- <>
- Tooltip Visual
-
- 'None',
+ parameters: {
+ nkDocs: {
+ title: 'Tooltip',
+ url: 'https://newskit.co.uk/components/tooltip',
+ description:
+ 'A tooltip is a feedback component that displays a short, informational message when a user hovers over or focuses on a UI element.',
+ },
+ },
+ decorators: [
+ (
+ Story: StoryType,
+ context: {name: string; globals: {backgrounds: {value: string}}},
+ ) => (
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-StoryTooltipPlacementsVisualTest.storyName = 'tooltip-placements-visual-test';
-StoryTooltipPlacementsVisualTest.parameters = {
- percy: {enableJavaScript: true},
-};
-
-export const StoryTooltipNoPointer = () => (
- <>
- Tooltip - no pointer (default)
-
-
-
-
- Tooltip - no pointer offset (increased)
-
-
-
-
-
- Tooltip - no pointer offset (zero)
-
-
-
-
-
-);
-StoryTooltipNoPointer.storyName = 'tooltip-no-pointer';
-StoryTooltipNoPointer.parameters = {
- percy: {enableJavaScript: true},
+
+
+ ),
+ ],
};