test: fix unit suite snapshots and account for VisuallyHidden being a span

Author: joshuaellis

.changeset/tasty-suits-sit.md

@@ -2,4 +2,4 @@
 '@strapi/design-system': major
 ---
 
-chore: Box/Flex & Typography are now all react components, they are no longer styled-components.
+chore: Box/Flex/Grid & Typography are now all react components, they are no longer styled-components.

.changeset/tidy-rats-camp.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore: disallow use of as and instead use tag prop instead

docs/stories/Inputs/TextInput.stories.tsx

@@ -76,7 +76,7 @@ export const WithField = {
     return (
       <Field id="with_field" error={error} hint={hint}>
         <FieldLabel>{label}</FieldLabel>
-        <TextInput name="content" error={error} {...props} />
+        <TextInput name="content" {...props} />
         <FieldError />
         <FieldHint />
       </Field>

packages/strapi-design-system/src/Avatar/__tests__/Avatar.test.tsx

@@ -38,9 +38,7 @@ describe('Avatar', () => {
         border-radius: 50%;
         object-fit: cover;
         position: absolute;
-        -webkit-transform: translate(-16px,-100%);
-        -ms-transform: translate(-16px,-100%);
-        transform: translate(-16px,-100%);
+        transform: translate(-16px, -100%);
         margin-top: -4px;
       }
 
@@ -114,9 +112,7 @@ describe('Avatar', () => {
         border-radius: 50%;
         object-fit: cover;
         position: absolute;
-        -webkit-transform: translate(-16px,-100%);
-        -ms-transform: translate(-16px,-100%);
-        transform: translate(-16px,-100%);
+        transform: translate(-16px, -100%);
         margin-top: -4px;
       }
 

packages/strapi-design-system/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -20,7 +20,7 @@ describe('Breadcrumb', () => {
     const spanList = container.querySelectorAll('span');
 
     expect(crumbList.length).toEqual(1);
-    expect(spanList.length).toEqual(1);
+    expect(spanList.length).toEqual(2);
   });
 
   it('should render two crumbs with only one separator', async () => {
@@ -38,6 +38,6 @@ describe('Breadcrumb', () => {
     const spanList = container.querySelectorAll('span');
 
     expect(crumbList.length).toEqual(2);
-    expect(spanList.length).toEqual(3);
+    expect(spanList.length).toEqual(4);
   });
 });

packages/strapi-design-system/src/LiveRegions/__tests__/LiveRegions.test.tsx

@@ -37,7 +37,6 @@ describe('LiveRegions', () => {
     expect(container).toMatchInlineSnapshot(`
       .c0 {
         border: 0;
-        -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
         height: 1px;
         margin: -1px;
@@ -48,7 +47,7 @@ describe('LiveRegions', () => {
       }
 
       <div>
-        <div
+        <span
           class="c0"
         >
           <p
@@ -71,7 +70,7 @@ describe('LiveRegions', () => {
             id="live-region-alert"
             role="alert"
           />
-        </div>
+        </span>
       </div>
     `);
   });
@@ -92,7 +91,6 @@ describe('LiveRegions', () => {
     expect(container).toMatchInlineSnapshot(`
       .c0 {
         border: 0;
-        -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
         height: 1px;
         margin: -1px;
@@ -103,7 +101,7 @@ describe('LiveRegions', () => {
       }
 
       <div>
-        <div
+        <span
           class="c0"
         >
           <p
@@ -126,7 +124,7 @@ describe('LiveRegions', () => {
             id="live-region-alert"
             role="alert"
           />
-        </div>
+        </span>
       </div>
     `);
   });
@@ -147,7 +145,6 @@ describe('LiveRegions', () => {
     expect(container).toMatchInlineSnapshot(`
       .c0 {
         border: 0;
-        -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
         height: 1px;
         margin: -1px;
@@ -158,7 +155,7 @@ describe('LiveRegions', () => {
       }
 
       <div>
-        <div
+        <span
           class="c0"
         >
           <p
@@ -181,7 +178,7 @@ describe('LiveRegions', () => {
           >
             An alert message
           </p>
-        </div>
+        </span>
       </div>
     `);
   });