Skip to content

Commit

Permalink
refactor: webnotification component
Browse files Browse the repository at this point in the history
  • Loading branch information
@leonardodouradol
leonardodouradol committed Aug 15, 2024
1 parent 3e1f3ac commit 8c78dfd
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 91 deletions.
89 changes: 44 additions & 45 deletions packages/ocean-core/src/components/_web-notification.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,39 +26,41 @@ $max-notifications: 10;
.ods-web-notification {
align-items: center;
background: $color-interface-dark-deep;
border-radius: $border-radius-sm;
border-radius: $border-radius-tiny;
bottom: $initial-bottom;
display: flex;
min-height: 63px;
position: fixed;

width: 348px;

&__action {
align-items: center;
color: $color-status-positive-pure;
cursor: pointer;
display: flex;
font-family: $font-family-base;
font-size: $font-size-xxs;
font-weight: $font-weight-bold;
justify-content: center;
}

&__action-text-info {
color: $color-brand-primary-up;
}

&__action-text-negative {
color: $color-status-negative-pure;
&:hover,
&:focus,
&:active {
color: $color-brand-primary-up;
}
}

&__action-text-positive {
color: $color-status-positive-pure;

&:hover,
&:focus,
&:active {
color: $color-status-positive-pure;
}
}

&__action-text-warning {
color: $color-status-warning-pure;

&:hover,
&:focus,
&:active {
color: $color-status-warning-pure;
}
}

&__bottom-left-action {
Expand All @@ -81,57 +83,48 @@ $max-notifications: 10;
display: flex;
gap: $spacing-inline-xxs-extra;
max-width: 328px;
padding: $spacing-inline-xxs-extra $spacing-inline-xs;
padding: 12px 8px 12px 16px;
width: 328px;
z-index: 1;
}

&__container {
&__wrapper {
align-items: center;
display: flex;
flex-direction: row;
gap: $spacing-inline-xxs-extra;
min-height: 39px;
min-width: 233px;
width: 100%;
}

&__description {
color: $color-interface-light-down;
font-family: $font-family-base;
font-size: $font-size-xxxs;
font-weight: $font-weight-regular;
line-height: 18px;
margin: 0;
padding: 0;
word-break: break-word;
a {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.ods-link {
font-weight: $font-weight-bold;
}
}

&__main-content {
&__body {
display: flex;
flex-direction: column;
width: 100%;
}

&__title {
align-items: center;
color: $color-interface-light-pure;
display: flex;
flex: 1;
font-family: $font-family-base;
font-size: $font-size-xxs;
font-weight: $font-weight-regular;
line-height: 21px;
margin: 0;
padding: 0;
word-break: break-word;
p {
word-break: break-word;
}
}

&__wrapper {
&__close-button {
color: #b6b9cc;
cursor: pointer;
height: 20px;
width: 24px;
display: flex;
padding: 0 $spacing-inline-xxxs $spacing-inline-xxxs;
}

@for $i from 2 through $max-notifications {
Expand Down Expand Up @@ -213,3 +206,9 @@ $max-notifications: 10;
width: 100%;
}
}

.ods-typography {
&__caption {
color: $color-interface-light-down;
}
}
48 changes: 22 additions & 26 deletions packages/ocean-react/src/WebNotification/WebNotification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import React, {
import { X } from '@useblu/ocean-icons-react';
import classNames from 'classnames';
import useWebNotification from './hook/useWebNotification';
import Typography from '../Typography';
import Link from '../Link';

export type Position = 'bottom-left' | 'bottom-right';

Expand All @@ -21,7 +23,6 @@ export type WebNotificationProps = {
position?: Position;
className?: string;
title?: string;
onKeyDown?: React.KeyboardEventHandler;
} & React.ComponentPropsWithoutRef<'div'>;

const WebNotification = React.forwardRef<HTMLDivElement, WebNotificationProps>(
Expand All @@ -36,7 +37,6 @@ const WebNotification = React.forwardRef<HTMLDivElement, WebNotificationProps>(
position = 'bottom-right',
className,
title,
onKeyDown,
},
ref
) => {
Expand All @@ -52,12 +52,14 @@ const WebNotification = React.forwardRef<HTMLDivElement, WebNotificationProps>(

useEffect(() => {
if (isOpen) {
const notifications = Array.from(
const allOpenedNotifications = Array.from(
document.querySelectorAll('.ods-web-notification')
).reverse();
const index =
notifications.findIndex((el) => el === notificationRef.current) + 1;
setNotificationIndex(index);
const notificationPosition =
allOpenedNotifications.findIndex(
(el) => el === notificationRef.current
) + 1;
setNotificationIndex(notificationPosition);
}
}, [isOpen]);

Expand Down Expand Up @@ -88,33 +90,27 @@ const WebNotification = React.forwardRef<HTMLDivElement, WebNotificationProps>(
data-testid="web-notification-test"
>
<div className="ods-web-notification__content">
<div className="ods-web-notification__container">
<div className="ods-web-notification__main-content">
<div className="ods-web-notification__title">{title}</div>
<div className="ods-web-notification__description">
{description}
</div>
<div className="ods-web-notification__wrapper">
<div className="ods-web-notification__body">
<Typography variant="description" inverse>
{title}
</Typography>
<Typography variant="caption">{description}</Typography>
</div>
{action && (
<div
className="ods-web-notification__action"
onClick={dispatchAction}
onKeyDown={onKeyDown}
>
<div
<>
<Link
onClick={dispatchAction}
className={`ods-web-notification__action-text-${type}`}
size="sm"
>
{actionLabel ?? 'action'}
</div>
</div>
</Link>
</>
)}
</div>
<div
className="ods-web-notification__wrapper"
onClick={closeWebNotification}
onKeyDown={onKeyDown}
>
<X size={16} />
<div className="ods-web-notification__close-button">
<X size={16} onClick={closeWebNotification} />
</div>
</div>
</div>
Expand Down
23 changes: 17 additions & 6 deletions packages/ocean-react/src/WebNotification/__tests__/WebNotification.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,27 @@ test('renders element properly', () => {
data-testid="web-notification-test"
>
<div class="ods-web-notification__content">
<div class="ods-web-notification__container">
<div class="ods-web-notification__title">
Title
<div class="ods-web-notification__wrapper">
<div class="ods-web-notification__body">
<div
class="ods-typography ods-typography--description ods-typography--inverse"
>
Title
</div>
<div
class="ods-typography ods-typography--caption"
>
Hello, this is a notification
</div>
</div>
<div class="ods-web-notification__description">
Hello, this is a notification
<div
class="ods-web-notification__action-text-info"
>
Action Label
</div>
</div>
<div
class="ods-web-notification__wrapper"
class="ods-web-notification__close-button"
>
<svg
fill="none"
Expand Down
39 changes: 25 additions & 14 deletions ...ges/ocean-react/src/WebNotification/__tests__/__snapshots__/WebNotification.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,27 @@ exports[`renders element properly:
data-testid="web-notification-test"
>
<div class="ods-web-notification__content">
<div class="ods-web-notification__container">
<div class="ods-web-notification__title">
Title
<div class="ods-web-notification__wrapper">
<div class="ods-web-notification__body">
<div
class="ods-typography ods-typography--description ods-typography--inverse"
>
Title
</div>
<div
class="ods-typography ods-typography--caption"
>
Hello, this is a notification
</div>
</div>
<div class="ods-web-notification__description">
Hello, this is a notification
<div
class="ods-web-notification__action-text-info"
>
Action Label
</div>
</div>
<div
class="ods-web-notification__wrapper"
class="ods-web-notification__close-button"
>
<svg
fill="none"
Expand Down Expand Up @@ -44,23 +55,23 @@ exports[`renders element properly:
class="ods-web-notification__content"
>
<div
class="ods-web-notification__container"
class="ods-web-notification__wrapper"
>
<div
class="ods-web-notification__main-content"
class="ods-web-notification__body"
>
<div
class="ods-web-notification__title"
<p
class="ods-typography ods-typography__description ods-typography--inverse"
/>
<div
class="ods-web-notification__description"
<p
class="ods-typography ods-typography__caption"
>
Hello, this is a notification
</div>
</p>
</div>
</div>
<div
class="ods-web-notification__wrapper"
class="ods-web-notification__close-button"
>
<svg
fill="currentColor"
Expand Down

0 comments on commit 8c78dfd

Please sign in to comment.