From c2a2eff7fee87bdee971649ab7a538d20453bdad Mon Sep 17 00:00:00 2001
From: elevatebart <bart@cypress.io>
Date: Fri, 1 Dec 2023 19:08:40 +0100
Subject: [PATCH] add keys for rootstory

---
 components/Alert/react/Alert.rootstory.tsx    | 19 ++++++++--
 components/Button/react/Button.rootstory.tsx  |  5 ++-
 .../StatusIcon/react/StatusIconReact.cy.tsx   | 38 ++++++++++++++-----
 .../Tag/react/{Tag.cy.tsx => TagReact.cy.tsx} | 12 ++++--
 .../Tag/vue/{Tag.cy.tsx => TagVue.cy.tsx}     |  2 +-
 5 files changed, 57 insertions(+), 19 deletions(-)
 rename components/Tag/react/{Tag.cy.tsx => TagReact.cy.tsx} (76%)
 rename components/Tag/vue/{Tag.cy.tsx => TagVue.cy.tsx} (95%)

diff --git a/components/Alert/react/Alert.rootstory.tsx b/components/Alert/react/Alert.rootstory.tsx
index fc86edc0a..1986e2d29 100644
--- a/components/Alert/react/Alert.rootstory.tsx
+++ b/components/Alert/react/Alert.rootstory.tsx
@@ -13,6 +13,7 @@ export default () => {
         title="Spec not found"
         detailsTitle="Stack trace"
         data-cy="alert-1"
+        key="alert-1"
         details={
           <pre className="bg-white rounded border border-red-500 px-[16px] py-[8px] overflow-x-auto">
             {dedent`Uncaught Error: Error occurred in defineConfig()
@@ -68,6 +69,7 @@ export default () => {
       </button>
       {displayTimedAlert ? (
         <Alert
+          key="alert-2"
           title="Wait 5 seconds please"
           duration={5000}
           onDismiss={() => setDisplayTimedAlert(false)}
@@ -76,6 +78,7 @@ export default () => {
         />
       ) : null}
       <Alert
+        key="alert-3"
         variant="success"
         dismissible
         title="Success with body"
@@ -83,9 +86,10 @@ export default () => {
       >
         Success body
       </Alert>
-      <Alert variant="warning" title="Warning" notRounded />
-      <Alert variant="neutral" title="Neutral" />
+      <Alert key="alert-4" variant="warning" title="Warning" notRounded />
+      <Alert key="alert-5" variant="neutral" title="Neutral" />
       <Alert
+        key="alert-6"
         variant="error"
         dismissible
         data-cy="alert-4"
@@ -98,17 +102,24 @@ export default () => {
       cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
       est laborum."
       />
-      <Alert variant="info" title="Info" />
-      <Alert variant="info" title="Info" customIcon={IconArrowRight} />
+      <Alert key="alert-7" variant="info" title="Info" />
+      <Alert
+        key="alert-8"
+        variant="info"
+        title="Info"
+        customIcon={IconArrowRight}
+      />
       {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
         <>
           <Alert
+            key="alert-9"
             variant="error"
             title={`${size} - Lorem ipsum dolor sit amet`}
             data-cy="alert-size"
             size={size}
           />
           <Alert
+            key="alert-10"
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
           veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
diff --git a/components/Button/react/Button.rootstory.tsx b/components/Button/react/Button.rootstory.tsx
index b1a37d3d9..1f03548fc 100644
--- a/components/Button/react/Button.rootstory.tsx
+++ b/components/Button/react/Button.rootstory.tsx
@@ -13,9 +13,10 @@ export default ({
     {(Object.keys(VariantClassesTable) as ButtonVariants[]).map((variant) => {
       return (
         <div
+          key={variant}
           className={clsx(
             'flex flex-col items-center gap-3 justify-center mt-4 p-2',
-            { 'bg-gray-1000 text-white': variant === 'outline-dark' }
+            { 'bg-gray-1000 text-white': variant === 'outline-dark' },
           )}
         >
           <h3 className="text-right">{variant}</h3>
@@ -23,7 +24,7 @@ export default ({
             .reverse()
             .map((size) => {
               return (
-                <div className="flex items-center justify-center">
+                <div key={size} className="flex items-center justify-center">
                   <span
                     className={clsx('text-sm mr-4', {
                       'text-gray-300': variant === 'outline-dark',
diff --git a/components/StatusIcon/react/StatusIconReact.cy.tsx b/components/StatusIcon/react/StatusIconReact.cy.tsx
index d55aa96b1..98a6f9925 100644
--- a/components/StatusIcon/react/StatusIconReact.cy.tsx
+++ b/components/StatusIcon/react/StatusIconReact.cy.tsx
@@ -9,9 +9,19 @@ describe('StatusIcon', () => {
   it('defaults to a variant that exists if the one provided does not exist', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon
+          key="simple"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -24,9 +34,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if no status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple" variant="simple" size="16" />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -39,9 +54,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if null status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status={null} />
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple-1" variant="simple" size="16" status={null} />
+        <StatusIcon
+          key="simple-2"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
diff --git a/components/Tag/react/Tag.cy.tsx b/components/Tag/react/TagReact.cy.tsx
similarity index 76%
rename from components/Tag/react/Tag.cy.tsx
rename to components/Tag/react/TagReact.cy.tsx
index 395a6f9b8..cc419bdbf 100644
--- a/components/Tag/react/Tag.cy.tsx
+++ b/components/Tag/react/TagReact.cy.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { mount } from 'cypress/react18'
 import Tag from './Tag'
-import { SizeClasses, ColorClasses } from '../constants'
+import { SizeClasses, ColorClasses } from '@cypress-design/constants-tag'
 import assertions from '../assertions'
 
 describe('Tag', () => {
@@ -20,12 +20,18 @@ describe('Tag', () => {
                 ).map((color) => {
                   return (
                     <>
-                      <div className="flex items-center justify-center">
+                      <div
+                        key={color}
+                        className="flex items-center justify-center"
+                      >
                         <Tag size={size} color={color}>
                           {`{Tag}`}
                         </Tag>
                       </div>
-                      <div className="flex items-center justify-center">
+                      <div
+                        key={`${color}-2`}
+                        className="flex items-center justify-center"
+                      >
                         <Tag size={size} color={color} dark>
                           {`{Tag}`}
                         </Tag>
diff --git a/components/Tag/vue/Tag.cy.tsx b/components/Tag/vue/TagVue.cy.tsx
similarity index 95%
rename from components/Tag/vue/Tag.cy.tsx
rename to components/Tag/vue/TagVue.cy.tsx
index df2018ce5..06d5b517d 100644
--- a/components/Tag/vue/Tag.cy.tsx
+++ b/components/Tag/vue/TagVue.cy.tsx
@@ -2,7 +2,7 @@
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import Tag from './Tag.vue'
-import { SizeClasses, ColorClasses } from '../constants'
+import { SizeClasses, ColorClasses } from '../constants/dist/dist'
 
 describe('<Tag/>', () => {
   function mountStory() {