@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

package/src/feedback/CopyToClipboard/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All CopyToClipboard variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/CopyToClipboard/index.tsx

@@ -41,7 +41,7 @@ export const CopyToClipboard = React.forwardRef<
   }, [enabled]);
 
   function copyToClipboard() {
-    onCopy && onCopy();
+    if (onCopy) onCopy();
     navigator.clipboard.writeText(text);
     setEnabled(true);
   }

package/src/feedback/CopyToClipboard/interaction.test.tsx

@@ -6,36 +6,46 @@ import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Defaul
 import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
 
 test('renders the Banner Click button', async ({ mount, page }) => {
-  await mount(
-    <Banner />
-  )
+  await mount(<Banner />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Click button', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Dense Click button', async ({ mount, page }) => {
-  await mount(
-    <Dense />
-  )
+  await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/ErrorSummary/ErrorSummary.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { List, ListItem } from '@digigov/ui/content/List';
+
+export default {
+  title: 'Digigov UI/feedback/ErrorSummary',
+  description:
+    'Use this component at the top of a page to summarise any errors a user has made.',
+  link: 'https://guide.services.gov.gr/docs/components/error-summary',
+  component: ErrorSummary,
+  displayName: 'ErrorSummary',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <ErrorSummary dense={args.dense}>
+        <Heading size="sm">{args.heading}</Heading>
+        <List listStyle="none">
+          {args.links.map((link, index) => (
+            <ListItem key={index}>
+              <Link href={link.href}>{link.label}</Link>
+            </ListItem>
+          ))}
+        </List>
+      </ErrorSummary>
+    );
+  },
+  parameters: {
+    controls: { exclude: ['variant', 'ref'] },
+  },
+  args: {
+    dense: false,
+    heading: 'Υπήρξε κάποιο πρόβλημα',
+    links: [
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το έτος',
+      },
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το μήνα',
+      },
+    ],
+  },
+  argTypes: {
+    dense: {
+      control: { type: 'boolean' },
+    },
+    heading: {
+      control: { type: 'text' },
+    },
+    links: {
+      control: { type: 'object' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
+export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
+export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
+export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary)>
+<ForwardRef(ErrorSummary2)>
   this is some random warning text
-</ForwardRef(ErrorSummary)>
+</ForwardRef(ErrorSummary2)>
 `;

package/src/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const ErrorGroupLinkedToInput = () => (
+  <div>
+    <ErrorSummary variant="error-group">
+      <Heading size="md">Τα παρακάτω πεδία της φόρμας ειναι λάθος.</Heading>
+      <List listStyle="bullet">
+        <ListItem>
+          <b>Όνομα επιχείρησης:</b>{' '}
+          <Link href="#business-name">
+            Πρέπει να συμπληρώσετε το όνομα της επιχείρησης
+          </Link>
+        </ListItem>
+        <ListItem>
+          <b>Διεύθυνση επιχείρησης:</b>{' '}
+          <Link href="#address-name">
+            Πρέπει να συμπληρώσετε τη διεύθυνση της επιχείρησης
+          </Link>
+        </ListItem>
+      </List>
+    </ErrorSummary>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Όνομα επιχείρησης</LabelTitle>
+        <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-name"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Διεύθυνση επιχείρησης</LabelTitle>
+        <Hint>Ποια είναι η διεύθυνση της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-address"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+  </div>
+);
+
+export default ErrorGroupLinkedToInput;

package/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';

package/src/feedback/ErrorSummary/{index.mdx → doc.mdx}

@@ -5,17 +5,13 @@ title: ErrorSummary
 
 # ErrorSummary
 
-Use this component at the top of a page to summarise any errors a user has made.
+Use this component at the top of a page to summarize any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -23,32 +19,20 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["ErrorSummary"]} /> 
+{/* <ComponentProps componentName={["ErrorSummary"]} />  */}

package/src/feedback/ErrorSummary/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+import { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
 import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
 import { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
 import { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
@@ -18,6 +19,9 @@ test('renders the All ErrorSummary variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="ErrorGroupLinkedToInput">
+      <ErrorGroupLinkedToInput />
+    </TestVariant>
     <TestVariant title="LinkedToCheckbox">
       <LinkedToCheckbox />
     </TestVariant>
@@ -34,6 +38,10 @@ test('renders the All ErrorSummary variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/ErrorSummary/interaction.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+
+test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
+  await mount(<LinkedToCheckbox />);
+  await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Enter');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -1,4 +1,5 @@
 import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+
 export default {
   title: 'Digigov UI/feedback/NotificationBanner',
   tags: ['Experimental'],
@@ -9,6 +10,41 @@ export default {
   component: NotificationBanner,
   displayName: 'NotificationBanner',
 };
+
+export const WithControls = {
+  args: {
+    title: 'Ειδοποίηση',
+    children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#',
+    },
+    variant: 'info',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';

package/src/feedback/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
 <NotificationBanner

package/src/feedback/NotificationBanner/{index.mdx → doc.mdx}

@@ -17,28 +17,17 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 ## How to use
 
-### Default NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-### Success NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
-
-### Dense NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Dense.tsx"
-/>
+### With success style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/NotificationBanner/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All NotificationBanner variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/NotificationBanner/interaction.test.tsx

@@ -5,28 +5,35 @@ import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Def
 import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 
 test('renders the Default Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
- await page.locator("#root>div>div:nth-child(2)>h3>a").click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div:nth-child(2)>h3>a').hover();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Success Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Success />
-  )
+  await mount(<Success />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
- await page.locator("#root>div>div:nth-child(2)>h3>a").click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>div:nth-child(2)>h3>a').hover();
+  await page.locator('#root>div>div:nth-child(2)>h3>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  PhaseBanner,
+  PhaseBannerTag,
+  PhaseBannerText,
+} from '@digigov/ui/feedback/PhaseBanner';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export default {
+  title: 'Digigov UI/feedback/PhaseBanner',
+  description:
+    'Use the phase banner component to show users your service is still being worked on.',
+  link: 'https://guide.services.gov.gr/docs/components/phase-banner',
+  component: PhaseBanner,
+  displayName: 'PhaseBanner',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <PhaseBanner underline={args.underline}>
+        <PhaseBannerTag>{args.tag}</PhaseBannerTag>
+        <PhaseBannerText>
+          Αυτή είναι μία νέα υπηρεσία – τα <Link href="#feedback">σχόλιά</Link>{' '}
+          σας θα μας βοηθήσουν να τη βελτιώσουμε.
+        </PhaseBannerText>
+      </PhaseBanner>
+    );
+  },
+  args: {
+    tag: 'ALPHA',
+    underline: true,
+  },
+  argTypes: {
+    underline: {
+      control: { type: 'boolean' },
+    },
+    tag: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
+export { Underlined } from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';

package/src/feedback/PhaseBanner/{index.mdx → doc.mdx}

@@ -11,21 +11,11 @@ Use the phase banner component to show users your service is still being worked
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-### Default
-
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Underlined.tsx" />
 
 ## API
 

package/src/feedback/PhaseBanner/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All PhaseBanner variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/feedback/PhaseBanner/interaction.test.tsx

@@ -4,12 +4,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
 
 test('renders the Default pressing Tab', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/WarningText/WarningText.stories.js

@@ -7,6 +7,34 @@ export default {
   component: WarningText,
   displayName: 'WarningText',
 };
+
+export const WithControls = {
+  args: {
+    children:
+      'Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.',
+    strong: true,
+    assistiveText: 'Σημαντικό',
+    dense: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    strong: {
+      control: { type: 'boolean' },
+    },
+    assistiveText: {
+      control: { type: 'text' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/feedback/WarningText/__stories__/Default';
 export { AssistiveText } from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
 export { Dense } from '@digigov/ui/feedback/WarningText/__stories__/Dense';

package/src/feedback/WarningText/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the WarningText with sample data 1`] = `
-<ForwardRef(WarningText)>
+<ForwardRef(WarningText2)>
   this is some random warning text
-</ForwardRef(WarningText)>
+</ForwardRef(WarningText2)>
 `;