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-ds · Jul 2, 2024 · 3386652 · 3386652
1 parent 341af77
commit 3386652
Show file tree

Hide file tree

Showing 17 changed files with 252 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.