From 338665214afa9268e8e09c0d71812a40fab8ab0b Mon Sep 17 00:00:00 2001
From: Daniela Muller <62384394+danimuller20@users.noreply.github.com>
Date: Tue, 2 Jul 2024 14:09:58 -0300
Subject: [PATCH] feat: update alert (#1115)

* feat: adjust alert component

* chore: change icon link to chevron

* test: update snapshot

* chore: update alert text size and gap

* chore: update ocean icons version

* test: update snapshot

* test: update breadcrumbs test

* chore: update snapshot

* chore: update snapshot

* style: update alert caption font weight

* feat: update button alert caption

* chore: update alert documentation

* chore: update responsive link hover color in alert variants

* feat: update link size in alert component
---
 .../ocean-core/src/components/_alert.scss     |  65 +++++++++-
 packages/ocean-react/package.json             |   2 +-
 .../Accordion/__tests__/Accordion.test.tsx    |   4 +-
 packages/ocean-react/src/Alert/Alert.tsx      |  15 ++-
 .../src/Alert/__tests__/Alert.test.tsx        | 122 +++++++++---------
 .../src/Alert/stories/Alert.stories.mdx       |  29 +++--
 .../Breadcrumb/__tests__/Breadcrumb.test.tsx  |  51 +++++++-
 .../CrossSellCard/__tests__/CrossSellCard.tsx |   4 +-
 .../src/Date/__tests__/DatePicker.test.tsx    |   2 +-
 .../src/Date/__tests__/DateRange.test.tsx     |   4 +-
 .../__tests__/FormControl.test.tsx            |   2 +-
 .../src/Search/__tests__/Search.test.tsx      |   2 +-
 .../src/Select/__tests__/Select.test.tsx      |   2 +-
 .../src/Snackbar/__tests__/Snackbar.test.tsx  |   2 +-
 .../src/TopBar/__tests__/TopBar.test.tsx      |  68 +++++-----
 .../HTMLDivElement.test.tsx.snap              |   6 +-
 yarn.lock                                     |   8 +-
 17 files changed, 252 insertions(+), 136 deletions(-)

diff --git a/packages/ocean-core/src/components/_alert.scss b/packages/ocean-core/src/components/_alert.scss
index 30ec5a3de..4953a0a86 100644
--- a/packages/ocean-core/src/components/_alert.scss
+++ b/packages/ocean-core/src/components/_alert.scss
@@ -1,7 +1,7 @@
 .ods-alert {
   align-items: flex-start;
   background-color: $color-interface-light-up;
-  border-radius: $border-radius-md;
+  border-radius: $border-radius-sm;
   color: $color-interface-dark-down;
   display: flex;
   flex-direction: column;
@@ -13,11 +13,19 @@
   padding: $spacing-stack-xs;
 
   @include media-breakpoint-up(sm) {
+    flex-direction: row;
+
     &__button--mobile {
       display: none;
     }
   }
 
+  &--with-button-no-title {
+    @include media-breakpoint-up(sm) {
+      font-size: $font-size-xxs;
+    }
+  }
+
   &--error {
     background-color: $color-status-negative-up;
 
@@ -33,9 +41,23 @@
       background-color: $color-status-negative-pure;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-negative-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-negative-deep;
+    }
+
     .ods-link {
       color: $color-status-negative-pure;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-negative-down;
+    }
   }
 
   &--warning {
@@ -53,9 +75,23 @@
       background-color: $color-status-warning-deep;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-warning-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-warning-deep;
+    }
+
     .ods-link {
       color: $color-status-warning-deep;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-warning-down;
+    }
   }
 
   &--success {
@@ -73,15 +109,30 @@
       background-color: $color-status-positive-deep;
     }
 
+    .ods-btn--primary:hover,
+    .ods-btn--primary:focus {
+      background-color: $color-status-positive-down;
+    }
+
+    .ods-btn--primary:active {
+      background-color: $color-status-positive-deep;
+    }
+
     .ods-link {
       color: $color-status-positive-deep;
     }
+
+    .ods-link:hover,
+    .ods-link:focus {
+      color: $color-status-positive-down;
+    }
   }
 
   &__text {
     display: flex;
     flex: 1;
     flex-direction: column;
+    gap: $spacing-stack-xxxs;
   }
 
   &__icon {
@@ -96,7 +147,7 @@
     }
 
     &--mobile {
-      margin-top: $spacing-stack-xxs;
+      margin: $spacing-stack-xxs-extra 0 0 $spacing-inline-md;
     }
 
     .ods-btn {
@@ -118,7 +169,13 @@
   &__title {
     color: $color-brand-primary-down;
     font-size: $font-size-xxs;
-    font-weight: $font-weight-bold;
-    line-height: $line-height-comfy;
+    font-weight: $font-weight-extrabold;
+    line-height: $line-height-loose;
+  }
+
+  &__content {
+    &--no-title {
+      padding-top: 0;
+    }
   }
 }
diff --git a/packages/ocean-react/package.json b/packages/ocean-react/package.json
index 59d18c1bf..571ff44e7 100644
--- a/packages/ocean-react/package.json
+++ b/packages/ocean-react/package.json
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@reach/auto-id": "0.16.0",
-    "@useblu/ocean-icons-react": "1.4.0",
+    "@useblu/ocean-icons-react": "1.23.1",
     "chart.js": "^3.9.1",
     "classnames": "2.3.1",
     "date-fns": "^2.29.1",
diff --git a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
index b2e12e207..f42b4a758 100644
--- a/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
+++ b/packages/ocean-react/src/Accordion/__tests__/Accordion.test.tsx
@@ -35,7 +35,7 @@ test('renders element properly', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
@@ -81,7 +81,7 @@ test('render element opened', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/Alert/Alert.tsx b/packages/ocean-react/src/Alert/Alert.tsx
index 301cbd79e..5315465bd 100644
--- a/packages/ocean-react/src/Alert/Alert.tsx
+++ b/packages/ocean-react/src/Alert/Alert.tsx
@@ -62,12 +62,13 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           'ods-alert',
           `ods-alert--${type}`,
           longSize && 'ods-alert--long',
+          button && !title && 'ods-alert--with-button-no-title',
           className
         )}
         {...rest}
       >
         {longSize ? (
-          <>
+          <div>
             <div
               className={classNames(
                 'ods-alert__header',
@@ -82,7 +83,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
               )}
             </div>
             {title && <div className="alert__content">{children}</div>}
-          </>
+          </div>
         ) : (
           <>
             <div
@@ -94,7 +95,13 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
               {alertIcon}
               <div className="ods-alert__text">
                 {title && <div className="ods-alert__title">{title}</div>}
-                <div className="alert__content">{children}</div>
+                <div
+                  className={classNames('alert__content', {
+                    'alert__content--no-title': !title,
+                  })}
+                >
+                  {children}
+                </div>
               </div>
               {button && (
                 <div className="ods-alert__button">
@@ -106,7 +113,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
             </div>
             {button && (
               <div className="ods-alert__button--mobile">
-                <Link size="sm" onClick={buttonAction} icon="externalLink">
+                <Link size="tiny" onClick={buttonAction} icon="linkChevron">
                   {button}
                 </Link>
               </div>
diff --git a/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx b/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
index d274c3c36..9fac52c5b 100644
--- a/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
+++ b/packages/ocean-react/src/Alert/__tests__/Alert.test.tsx
@@ -66,52 +66,20 @@ describe('Alert', () => {
     setup({ title: 'Test Title', size: 'long' });
 
     expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default ods-alert--long"
-      role="alert"
-    >
       <div
-        class="ods-alert__header ods-alert__header--margin"
+        class="ods-alert ods-alert--default ods-alert--long"
+        role="alert"
       >
-        mock-information-circle-outline
-        <div
-          class="ods-alert__title"
-        >
-          Test Title
-        </div>
-      </div>
-      <div
-        class="alert__content"
-      >
-        <div
-          class="ods-alert__content"
-        >
-          Hello There!
-        </div>
-      </div>
-    </div>
-    `);
-  });
-
-  test('checks short description snapshot', () => {
-    setup({ title: 'Test Title', size: 'short' });
-
-    expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default"
-      role="alert"
-    >
-      <div
-        class="ods-alert__header"
-      >
-        mock-information-circle-outline
-        <div
-          class="ods-alert__text"
-        >
+        <div>
           <div
-            class="ods-alert__title"
+            class="ods-alert__header ods-alert__header--margin"
           >
-            Test Title
+            mock-information-circle-outline
+            <div
+              class="ods-alert__title"
+            >
+              Test Title
+            </div>
           </div>
           <div
             class="alert__content"
@@ -124,37 +92,73 @@ describe('Alert', () => {
           </div>
         </div>
       </div>
-    </div>
     `);
   });
 
+  test('checks short description snapshot', () => {
+    setup({ title: 'Test Title', size: 'short' });
+
+    expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
+          <div
+            class="ods-alert ods-alert--default"
+            role="alert"
+          >
+            <div
+              class="ods-alert__header"
+            >
+              mock-information-circle-outline
+              <div
+                class="ods-alert__text"
+              >
+                <div
+                  class="ods-alert__title"
+                >
+                  Test Title
+                </div>
+                <div
+                  class="alert__content"
+                >
+                  <div
+                    class="ods-alert__content"
+                  >
+                    Hello There!
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        `);
+  });
+
   test('checks custom icon', () => {
     setup({ icon: <StarOutline /> });
 
     expect(document.querySelector('.ods-alert')).toMatchInlineSnapshot(`
-    <div
-      class="ods-alert ods-alert--default ods-alert--long"
-      role="alert"
-    >
       <div
-        class="ods-alert__header"
+        class="ods-alert ods-alert--default ods-alert--long"
+        role="alert"
       >
-        <div
-          class="ods-alert__icon"
-        >
-          mock-start-circle-outline
-        </div>
-        <div
-          class="alert__content"
-        >
+        <div>
           <div
-            class="ods-alert__content"
+            class="ods-alert__header"
           >
-            Hello There!
+            <div
+              class="ods-alert__icon"
+            >
+              mock-start-circle-outline
+            </div>
+            <div
+              class="alert__content"
+            >
+              <div
+                class="ods-alert__content"
+              >
+                Hello There!
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
     `);
   });
 });
diff --git a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
index f48896408..d84dd9f2c 100644
--- a/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
+++ b/packages/ocean-react/src/Alert/stories/Alert.stories.mdx
@@ -139,20 +139,21 @@ You can set the `button` that display on the alert.
 
 ## CSS
 
-| Global class                 | Description                                             |
-| ---------------------------- | ------------------------------------------------------- |
-| .ods-alert                   | Styles applied to the root element.                     |
-| .ods-alert--long             | Styles applied to the root element when is long size.   |
-| .ods-alert--error            | Styles applied to the root element with a error type.   |
-| .ods-alert--warning          | Styles applied to the root element with a warning type. |
-| .ods-alert--success          | Styles applied to the root element with a success type. |
-| .ods-alert\_\_header         | Styles applied to the header element.                   |
-| .ods-alert\_\_header--margin | Styles applied to the header element with bottom margin |
-| .ods-alert\_\_icon           | Styles applied to the icon element.                     |
-| .ods-alert\_\_title          | Styles applied to the title element.                    |
-| .ods-alert\_\_content        | Styles applied to the content element.                  |
-| .ods-alert\_\_button         | Styles applied to the button element.                   |
-| .ods-alert\_\_button--mobile | Styles applied to the button element in mobile view.    |
+| Global class                     | Description                                                      |
+| -------------------------------- | ---------------------------------------------------------------- |
+| .ods-alert                       | Styles applied to the root element.                              |
+| .ods-alert--long                 | Styles applied to the root element when is long size.            |
+| .ods-alert--with-button-no-title | Styles applied to the root element has button and without title. |
+| .ods-alert--error                | Styles applied to the root element with a error type.            |
+| .ods-alert--warning              | Styles applied to the root element with a warning type.          |
+| .ods-alert--success              | Styles applied to the root element with a success type.          |
+| .ods-alert\_\_header             | Styles applied to the header element.                            |
+| .ods-alert\_\_header--margin     | Styles applied to the header element with bottom margin          |
+| .ods-alert\_\_icon               | Styles applied to the icon element.                              |
+| .ods-alert\_\_title              | Styles applied to the title element.                             |
+| .ods-alert\_\_content            | Styles applied to the content element.                           |
+| .ods-alert\_\_button             | Styles applied to the button element.                            |
+| .ods-alert\_\_button--mobile     | Styles applied to the button element in mobile view.             |
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Alert/Alert.tsx) for more detail.
 
diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
index b0bbec7bf..4e08ca9f8 100644
--- a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -41,7 +41,7 @@ test('renders breadcrumb with array elements', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
@@ -83,7 +83,54 @@ test('renders breadcrumb with array string', () => {
         >
           <path
             clip-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
+            fill-rule="evenodd"
+          />
+        </svg>
+        <span>
+          item 3
+        </span>
+      </button>
+    </div>
+  `);
+});
+
+test('renders mobile breadcrumb with array string', () => {
+  window.matchMedia = jest.fn().mockImplementation((query) => ({
+    matches: query === '(max-width: 576px)',
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    isMobile: query === '(max-width: 576px)',
+  }));
+
+  render(
+    <Breadcrumb
+      data-testid="breadcrumb-test"
+      className="custom-class"
+      key="test23"
+      items={['item 1', 'item 2', 'item 3']}
+    />
+  );
+
+  expect(screen.getByTestId('breadcrumb-test')).toMatchInlineSnapshot(`
+    <div
+      class="ods-breadcrumb custom-class"
+      data-testid="breadcrumb-test"
+    >
+      <button
+        class="ods-breadcrumb__item"
+        type="button"
+      >
+        <svg
+          fill="currentColor"
+          height="12"
+          viewBox="0 0 20 20"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
             fill-rule="evenodd"
           />
         </svg>
diff --git a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
index 3ec02c4a8..08297fdba 100644
--- a/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
+++ b/packages/ocean-react/src/CrossSellCard/__tests__/CrossSellCard.tsx
@@ -65,7 +65,7 @@ test('renders element properly', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
@@ -151,7 +151,7 @@ test('renders component with custom icon', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+              d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
index 7253750b5..e7a4422d7 100644
--- a/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
@@ -74,7 +74,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
index 8b6c3b830..435bf2953 100644
--- a/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
+++ b/packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
@@ -87,7 +87,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
@@ -140,7 +140,7 @@ test('renders element properly', () => {
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
diff --git a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
index c24130ff9..a1c384de1 100644
--- a/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
+++ b/packages/ocean-react/src/FormControl/__tests__/FormControl.test.tsx
@@ -90,7 +90,7 @@ test('renders a Hello World tooltip', () => {
           >
             <path
               clip-rule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              d="M17.391 6.939a7.999 7.999 0 1 1-14.78 6.122 7.999 7.999 0 0 1 14.78-6.122zM11 13.333a1 1 0 1 1-2 0V10a1 1 0 0 1 2 0v3.333zm-1-5.666a1 1 0 1 1 0-2h.008a1 1 0 1 1 0 2H10z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ocean-react/src/Search/__tests__/Search.test.tsx b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
index 90fc0dea6..29bb03bc7 100644
--- a/packages/ocean-react/src/Search/__tests__/Search.test.tsx
+++ b/packages/ocean-react/src/Search/__tests__/Search.test.tsx
@@ -30,7 +30,7 @@ test('renders element properly', () => {
             >
               <path
                 clip-rule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 8a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 2 8z"
                 fill-rule="evenodd"
               />
             </svg>
diff --git a/packages/ocean-react/src/Select/__tests__/Select.test.tsx b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
index f355ab14d..252783d97 100644
--- a/packages/ocean-react/src/Select/__tests__/Select.test.tsx
+++ b/packages/ocean-react/src/Select/__tests__/Select.test.tsx
@@ -106,7 +106,7 @@ test('renders element properly', () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M19 9l-7 7-7-7"
+                  d="m19 9-7 7-7-7"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
diff --git a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
index 8518107e1..c15d89b38 100644
--- a/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
+++ b/packages/ocean-react/src/Snackbar/__tests__/Snackbar.test.tsx
@@ -32,7 +32,7 @@ test('renders element properly', () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 10-18 0 9 9 0 0018 0z"
+              d="M12 16v-4 4zm0-8h.01H12zm9 4a9 9 0 1 0-18 0 9 9 0 0 0 18 0z"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
diff --git a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
index e3d3f908b..0dad97fc2 100644
--- a/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
+++ b/packages/ocean-react/src/TopBar/__tests__/TopBar.test.tsx
@@ -17,44 +17,44 @@ test('renders element properly', () => {
   );
 
   expect(container.firstChild).toMatchInlineSnapshot(`
-<div
-  class="ods-topbar ods-topbar-extend ods-topbar-default"
->
-  <div
-    class="ods-topbar-actions"
-  >
     <div
-      class="ods-topbar-left"
+      class="ods-topbar ods-topbar-extend ods-topbar-default"
     >
-      <span>
-        <svg
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="ods-topbar-actions"
+      >
+        <div
+          class="ods-topbar-left"
         >
-          <path
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-        </svg>
-      </span>
+          <span>
+            <svg
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m10 19-7-7m0 0 7-7m-7 7h18"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div
+        class="ods-topbar-title"
+      >
+        Title
+        <span>
+          Description
+        </span>
+      </div>
     </div>
-  </div>
-  <div
-    class="ods-topbar-title"
-  >
-    Title
-    <span>
-      Description
-    </span>
-  </div>
-</div>
-`);
+  `);
 });
 test('should render the buttons and Click', () => {
   const { container } = render(
diff --git a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
index 4fca4a5a2..0bde71dcd 100644
--- a/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
+++ b/packages/ocean-react/src/UnorderedListItem/__tests__/__snapshots__/HTMLDivElement.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`renders default element properly:
     >
       <path
         clip-rule="evenodd"
-        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+        d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0z"
         fill-rule="evenodd"
       />
     </svg>
@@ -167,7 +167,7 @@ exports[`renders outline element properly with all possible information:
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      d="M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
@@ -263,7 +263,7 @@ exports[`renders solid element properly with all possible information:
   >
     <path
       clip-rule="evenodd"
-      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+      d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1z"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/yarn.lock b/yarn.lock
index 973eca5f8..fc370148c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4486,10 +4486,10 @@
     "@typescript-eslint/types" "5.14.0"
     eslint-visitor-keys "^3.0.0"
 
-"@useblu/ocean-icons-react@1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@useblu/ocean-icons-react/-/ocean-icons-react-1.4.0.tgz#dab6b0fb82013759a8aa10224aee9dd563be6162"
-  integrity sha512-EG2ugojIyVUW3Njyyp4jE5o4RV3DArmz2PKACMWnKiaX/ZYCpveF9snyolNuNRnQ9zjn0NAMctkzhtq1NM6ojA==
+"@useblu/ocean-icons-react@1.23.1":
+  version "1.23.1"
+  resolved "https://registry.yarnpkg.com/@useblu/ocean-icons-react/-/ocean-icons-react-1.23.1.tgz#f893fe6a84ac1eec091424b81963108fba724adb"
+  integrity sha512-ZEJqimv8bXpx22CNGCGvu3SDLYnvXRi4CTlhvfA5Hx5jGGS3c5lA9r7exEE2cCQ5YVmrq5aShAO2zy+c11nc9w==
 
 "@useblu/ocean-tokens@3.8.0":
   version "3.8.0"