Skip to content

Commit

Permalink
fix(styles): update Notifications for VEGA [ci visual]
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Jan 13, 2025
1 parent b2f523e commit ca9ca27
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 65 deletions.
37 changes: 27 additions & 10 deletions packages/styles/src/notification.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ $block: #{$fd-namespace}-notification;

&__footer {
@include fd-reset();
@include fd-flex();
@include fd-flex-vertical-center();
}

&__footer-content {
Expand Down Expand Up @@ -198,15 +198,6 @@ $block: #{$fd-namespace}-notification;
}
}

// Banner Notification
&--banner {
@include fd-set-position-right(2rem);

top: 2rem;
position: absolute;
box-shadow: var(--sapContent_Shadow2);
}

.#{$block}__link {
margin-inline-start: 1rem;
}
Expand Down Expand Up @@ -344,6 +335,32 @@ $block: #{$fd-namespace}-notification;
}
}

// Banner
&-banner {
@include fd-reset();
@include fd-set-position-right(0);

@include fd-flex(column) {
gap: 0.5rem;
};

top: 0;
align-items: flex-end;
position: absolute;
margin-inline-end: 2rem;
margin-block-start: 2rem;
max-width: var(--fdNotification_Popover_Max_Width, 26rem);

.#{$block} {
width: 100%;
box-shadow: var(--sapContent_Shadow2);

@include fd-media-sm() {
--fdNotification_Popover_Max_Width: 24rem;
}
}
}

// Compact Mode
@include fd-compact-and-condensed() {
--fdNotification_Content_Gap: 0.5rem;
Expand Down
75 changes: 53 additions & 22 deletions packages/styles/stories/Components/notification/banner.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,59 @@
<div style="position: relative; width: 100%; min-height: 300px; border: 2px solid #a5a2a2">
<div class="fd-notification fd-notification--banner" tabindex="0" style="max-width: 500px;">
<div class="fd-notification__body">
<span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
<i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
</span>
<div class="fd-notification__content">
<div class="fd-notification__header">
<span class="sap-icon sap-icon--error sap-icon--color-negative"></span>
<h4 class="fd-notification__title fd-notification__title--unread">Notification Title (unread)</h4>
<div style="position: relative; width: 100%; min-height: 600px; border: 2px solid #a5a2a2">
<div class="fd-notification-banner">
<div class="fd-notification" tabindex="0">
<div class="fd-notification__body">
<span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
<i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
</span>
<div class="fd-notification__content">
<div class="fd-notification__header">
<h4 class="fd-notification__title fd-notification__title--unread">Sales Order #65665 for Lorem Inc is about to expire</h4>
</div>
<p class="fd-notification__paragraph">Sales order expires in 1 day</p>
<div class="fd-notification__footer">
<span class="fd-notification__footer-content">Lorem</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">Sales</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">11:11 AM</span>
</div>
</div>
<p class="fd-notification__paragraph">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<div class="fd-notification__footer">
<span class="fd-notification__footer-content">Product Name</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">Feature Name</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">11:11</span>
<a href="#" class="fd-link fd-notification__link" tabindex="0"><span class="fd-link__content">More</span></a>
<div class="fd-notification__actions">
<button class="fd-button fd-button--transparent" aria-label="More">
<i class="sap-icon--overflow"></i>
</button>
<button class="fd-button fd-button--transparent " aria-label="Close">
<i class="sap-icon--decline"></i>
</button>
</div>
</div>
<div class="fd-notification__actions">
<button class="fd-button fd-button--transparent " aria-label="Close">
<i class="sap-icon--decline"></i>
</button>
</div>
<div class="fd-notification" tabindex="0">
<div class="fd-notification__body">
<span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
<i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
</span>
<div class="fd-notification__content">
<div class="fd-notification__header">
<h4 class="fd-notification__title fd-notification__title--unread">Notification Title Lorem Ipsum</h4>
</div>
<p class="fd-notification__paragraph">Description of notification topic</p>
<div class="fd-notification__footer">
<span class="fd-notification__footer-content">Product Name</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">Feature Name</span>
<span class="fd-notification__separator"></span>
<span class="fd-notification__footer-content">11:12 AM</span>
</div>
</div>
<div class="fd-notification__actions">
<button class="fd-button fd-button--transparent" aria-label="More">
<i class="sap-icon--overflow"></i>
</button>
<button class="fd-button fd-button--transparent " aria-label="Close">
<i class="sap-icon--decline"></i>
</button>
</div>
</div>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/styles/stories/Components/notification/notification-group.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
onclick="onPopoverClick('popoverNotificationsGroup');"
role="button">
<i class="sap-icon--bell" role="presentation"></i>
<span class="fd-button__badge">30</span>
</button>
</div>
<div class="fd-popover__body" aria-hidden="false" id="popoverNotificationsGroup">
Expand All @@ -23,7 +24,7 @@ <h2 class="fd-title fd-title--h4 fd-toolbar__title">Notifications (30)</h2>
<i class="sap-icon--sort"></i>
</button>
<button aria-label="Add to cart" class="fd-button fd-button--transparent">
<i class="sap-icon--settings"></i>
<i class="sap-icon--action-settings"></i>
</button>
</div>

Expand Down
6 changes: 3 additions & 3 deletions packages/styles/stories/Components/notification/primary.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h4 class="fd-notification__title fd-notification__title--unread">Notification T
<div class="fd-notification__content">
<div class="fd-notification__header">
<span class="sap-icon sap-icon--sys-enter-2 sap-icon--color-positive"></span>
<h4 class="fd-notification__title">Notification Title Notification Title (unread) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
<h4 class="fd-notification__title">Notification Title Notification Title (read) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
</div>
<p class="fd-notification__paragraph">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</p>
<div class="fd-notification__footer">
Expand Down Expand Up @@ -96,12 +96,12 @@ <h4 class="fd-notification__title">Notification Title</h4>

<div class="fd-notification" tabindex="0">
<div class="fd-notification__body">
<span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
<span class="fd-avatar fd-avatar--circle fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
<i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
</span>
<div class="fd-notification__content">
<div class="fd-notification__header">
<h4 class="fd-notification__title fd-notification__title--unread">Notification Title</h4>
<h4 class="fd-notification__title fd-notification__title--unread">Notification Title (unread)</h4>
</div>
<p class="fd-notification__paragraph">Description of notification topic</p>
<div class="fd-notification__footer">
Expand Down
Loading

0 comments on commit ca9ca27

Please sign in to comment.