diff --git a/packages/styles/src/message-strip.scss b/packages/styles/src/message-strip.scss index e7065a003e..e5e7225b10 100644 --- a/packages/styles/src/message-strip.scss +++ b/packages/styles/src/message-strip.scss @@ -163,6 +163,7 @@ $block: #{$fd-namespace}-message-strip; @include fd-reset(); line-height: 1rem; + white-space: normal; word-break: break-word; color: var(--fdMessageStrip_Text_Color); } diff --git a/packages/styles/src/notification.scss b/packages/styles/src/notification.scss index 9b3946b3b6..185f05531f 100644 --- a/packages/styles/src/notification.scss +++ b/packages/styles/src/notification.scss @@ -5,145 +5,176 @@ $block: #{$fd-namespace}-notification; .#{$block} { - // Notification - --fdNotification_Max_Width: 40rem; - --fdNotification_Border_Radius: 0.25rem; - --fdNotification_Background: var(--sapList_Background); - --fdNotification_Box_Shadow: var(--sapContent_Shadow0); - - // Notification Body - --fdNotification_Item_Background: var(--sapList_Background); - --fdNotification_Item_Box_Shadow: var(--sapContent_Shadow0); - --fdNotification_Item_Border_Radius: 0.25rem; - --fdNotification_Item_Max_Width: 40rem; - --fdNotification_Item_Paddign_Y: 1rem; - --fdNotification_Item_Paddign_Left: 1rem; - --fdNotification_Item_Paddign_Right: 0.5rem; - --fdNotification_Item_Spacing: 1rem; - - // Notification Indicator - --fdNotification_Indicator_Color: var(--sapErrorColor); - - // Notification Title - --fdNotification_Item_Title_Margin_Bottom: 0.25rem; - --fdNotification_Item_Title_Line_Height: 1.25rem; - --fdNotification_Item_Title_Color: var(--sapTextColor); - --fdNotification_Item_Title_Font_Family: var(--sapFontFamily); - --fdNotification_Item_Title_Font_Weight: var(--sapFontHeaderWeight); - - // Notification Paragraph - --fdNotification_Item_Paragraph_Font_Size: var(--sapFontSize); - --fdNotification_Item_Paragraph_Color: var(--sapTextColor); - - // Notification Footer - --fdNotification_Item_Footer_Font_Size: var(--sapFontSize); - --fdNotification_Item_Footer_Color: var(--sapTextColor); - - // Notification Group - --fdNotification_Group_Item_Border_Color: var(--fdNotification_Group_Item_Border_Color_Normal); - --fdNotification_Group_Item_Border_Bottom_Color: var(--fdNotification_Group_Item_Border_Bottom_Color_Normal); - --fdNotification_Group_Item_Children_Indicator_Display: none; - --fdNotification_Group_Item_Background: var(--sapList_Background); - - // Notification Limit - --fdNotification_Limit_Padding_Block: 1rem; - --fdNotification_Limit_Padding_Inline: 1rem; - - // Border - $fd-notification-border: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); - - @mixin fd-notification-mobile() { - .#{$block}__body:last-of-type { - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + --fdNotification_Content_Gap: 0.75rem; + --fdNotification_Actions_Offset: -0.25rem; + --fdNotification_Title_Font_Weight: normal; + --fdNotification_Title_Line_Height: 1.25rem; + --fdNotification_Title_One_Button_Offset: 2rem; + --fdNotification_Title_Two_Buttons_Offset: 4.375rem; + + @mixin notification-states() { + --fdNotification_Background: var(--sapList_Background); + --fdNotification_Title_Color: var(--sapList_TextColor); + --fdNotification_Paragraph_Color: var(--sapList_TextColor); + --fdNotification_Separator_Color: var(--sapContent_LabelColor); + --fdNotification_Footer_Content_Color: var(--sapContent_LabelColor); + --fdNotification_Border_Block_End_Color: var(--sapList_BorderColor); + --fdNotification_Border_Block_Start_Color: var(--fdNotification_Border_Top_Color); + --fdNotification_Border_Inline_Color: var(--fdNotification_Border_Left_Right_Color); + + cursor: pointer; + position: relative; + padding-block: 1rem; + border-style: solid; + padding-inline: 1rem; + border-width: var(--sapList_BorderWidth); + background: var(--fdNotification_Background); + border-radius: var(--fdNotification_Border_Radius); + border-inline-color: var(--fdNotification_Border_Inline_Color); + border-block-end-color: var(--fdNotification_Border_Block_End_Color); + border-block-start-color: var(--fdNotification_Border_Block_Start_Color); + + @include fd-hover() { + --fdNotification_Background: var(--fdNotification_Background_Hover); + } + + @include fd-active() { + --fdNotification_Background: var(--fdNotification_Background_Active); + --fdNotification_Title_Color: var(--fdNotification_Title_Color_Active); + --fdNotification_Paragraph_Color: var(--fdNotification_Paragraph_Color_Active); + --fdNotification_Footer_Content_Color: var(--fdNotification_Footer_Content_Color_Active); + --fdNotification_Separator_Color: var(--fdNotification_Separator_Color_Active); + --fdNotification_Border_Inline_Color: var(--fdNotification_Border_Inline_Color_Active); + --fdNotification_Border_Block_Start_Color: var(--fdNotification_Border_Block_Start_Color_Active); + --fdNotification_Border_Block_End_Color: var(--fdNotification_Border_Block_End_Color_Active); + } + + @include fd-selected() { + --fdNotification_Background: var(--fdNotification_Background_Selected); + --fdNotification_Border_Inline_Color: var(--fdNotification_Border_Left_Right_Color_Selected); + --fdNotification_Border_Block_Start_Color: var(--fdNotification_Border_Top_Color_Selected); + --fdNotification_Border_Block_End_Color: var(--fdNotification_Border_Block_End_Color_Selected); + + @include fd-hover() { + --fdNotification_Background: var(--fdNotification_Background_Selected_Hover); + } + } + + @include fd-focus() { + outline-offset: -0.25rem; + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); } } @include fd-reset(); + @include notification-states(); - width: 100%; - max-width: var(--fdNotification_Max_Width); - background: var(--fdNotification_Background); - box-shadow: var(--fdNotification_Box_Shadow); - border-radius: var(--fdNotification_Border_Radius); + &:has(.#{$block}__actions):has(button) { + .#{$block}__title { + padding-inline-end: var(--fdNotification_Title_One_Button_Offset); + } + } + + &:has(.#{$block}__actions):has(button + button) { + .#{$block}__title { + padding-inline-end: var(--fdNotification_Title_Two_Buttons_Offset); + } + } &__body { @include fd-reset(); @include fd-flex() { - gap: var(--fdNotification_Item_Spacing); - } - - @include fd-set-paddings-y-equal(var(--fdNotification_Item_Paddign_Y)); - @include fd-set-paddings-x(var(--fdNotification_Item_Paddign_Left), var(--fdNotification_Item_Paddign_Right)); - - position: relative; - background: var(--fdNotification_Item_Background); - border-radius: var(--fdNotification_Item_Border_Radius); + gap: 0.75rem; + }; } &__content { @include fd-reset(); @include fd-flex(column) { - gap: 0.5rem; - } + align-items: flex-start; + gap: var(--fdNotification_Content_Gap); + }; + + width: 100%; + } + + &__header { + @include fd-reset(); + + @include fd-flex() { + gap: 0.25rem; + }; width: 100%; - overflow: auto; + + & > [class*="sap-icon"] { + padding-block-start: 0.125rem; + } + } + + &__actions { + @include fd-reset(); + @include fd-set-position-right(0); + + @include fd-flex() { + gap: 0.125rem; + }; + + top: 0; + position: absolute; + padding-block: 0.5rem 0; + padding-inline: 0.25rem 0.5rem; } - .#{$block}__title { + &__title { @include fd-reset(); @include fd-line-clamp(2); + flex: 1; + color: var(--sapList_TextColor); font-size: var(--sapFontHeader6Size); - color: var(--fdNotification_Item_Title_Color); - font-weight: var(--fdNotification_Item_Title_Font_Weight); - line-height: var(--fdNotification_Item_Title_Line_Height); - font-family: var(--fdNotification_Item_Title_Font_Family); - margin-block-end: var(--fdNotification_Item_Title_Margin_Bottom); - max-height: calc(2 * var(--fdNotification_Item_Title_Line_Height)); - + line-height: var(--fdNotification_Title_Line_Height); + font-weight: var(--fdNotification_Title_Font_Weight); + max-height: calc(2 * var(--fdNotification_Title_Line_Height)); + + &--unread { - --fdNotification_Item_Title_Font_Weight: bold; + --fdNotification_Title_Font_Weight: bold; } } - .#{$block}__paragraph { + &__paragraph { @include fd-reset(); @include fd-line-clamp(2); max-height: 2.75rem; - color: var(--fdNotification_Item_Paragraph_Color); - font-size: var(--fdNotification_Item_Paragraph_Font_Size); + font-size: var(--sapFontSize); + color: var(--sapList_TextColor); } - .#{$block}__footer { + &__footer { @include fd-reset(); @include fd-flex(); + } - color: var(--fdNotification_Item_Footer_Color); - - &-content { - @include fd-ellipsis(); + &__footer-content { + @include fd-ellipsis(); - max-width: 50%; - font-size: var(--fdNotification_Item_Footer_Font_Size); + max-width: 50%; + color: var(--sapContent_LabelColor); - &:only-child { - max-width: 100%; - } + &:only-child { + max-width: 100%; } } - .#{$block}__separator { + &__separator { @include fd-reset(); - margin-block: 0; margin-inline: 0.5rem; - font-size: var(--sapFontSize); + color: var(--sapContent_LabelColor); &::before { content: '\00b7'; @@ -152,328 +183,161 @@ $block: #{$fd-namespace}-notification; &__message-container { @include fd-reset(); - @include fd-set-paddings-y(1rem, 0); - @include fd-set-paddings-x(1rem, 0.5rem); - } - - &__header { - @include fd-reset(); - display: flex; + margin-block-end: 1rem; } - &__actions { - @include fd-reset(); - - @include fd-flex() { - gap: 0.5rem; - align-items: flex-start; - } + // Banner Notification + &--banner { + @include fd-set-position-right(2rem); + + top: 2rem; + position: absolute; + box-shadow: var(--sapContent_Shadow2); } - &__limit { - @include fd-reset(); - - text-align: center; - padding-block: var(--fdNotification_Limit_Padding_Block); - padding-inline: var(--fdNotification_Limit_Padding_Inline); - - &--title { - @include fd-reset(); - - font-size: var(--sapFontHeader5Size); - white-space: break-spaces; - } - - &--description { - @include fd-reset(); - - margin-block: 0.5rem 0; - margin-inline: 0; - white-space: break-spaces; - } + .#{$block}__link { + margin-inline-start: 1rem; } - &__indicator { + // Message Strip Container + &-message-strip { @include fd-reset(); - - padding-block-start: 0.1875rem; - margin-inline-end: 0.5rem; - color: var(--fdNotification_Indicator_Color); - - &--error { - @include fd-icon('message-error'); - - --fdNotification_Indicator_Color: var(--sapErrorColor); - } - - &--success { - @include fd-icon('message-success'); - - --fdNotification_Indicator_Color: var(--sapSuccessColor); - } - - &--warning { - @include fd-icon('message-warning'); - - --fdNotification_Indicator_Color: var(--sapWarningColor); - } - - &--information { - @include fd-icon('message-information'); - - --fdNotification_Indicator_Color: var(--sapInformationColor); - } + + padding-block: 0.5rem; + padding-inline: 0.5rem; } - - &__unread-indicator { + + // Notification List + &-list { @include fd-reset(); - @include fd-set-square(0.5rem); - @include fd-set-position-right(0.5rem); - @include fd-absolute-vertical-center(); - - position: absolute; - border-radius: 100%; - background-color: var(--fdNotification_Unread_Indicator_Background); + + list-style: none; } - - &.#{$block}--group { + + // Notification Group + &-group { @include fd-reset(); - @include fd-notification-mobile(); - @include fd-set-paddings-x-equal(0); - - --fdNotification_Item_Border_Radius: 0; - - overflow: hidden; - height: 100%; - - .#{$block}__body { - border-bottom: $fd-notification-border; + + list-style: none; + + &__wrapper { + @include fd-reset(); } - - .#{$block}__group-header { + + &__header { @include fd-reset(); - @include fd-set-paddings-y(0.75rem, 0.25rem); - @include fd-set-paddings-x(1rem, 0.5rem); - @include fd-flex() { - align-items: baseline; + @include fd-flex-vertical-center() { + gap: 0.75rem; + }; + + cursor: pointer; + padding-inline: 0.5rem; + height: var(--sapElement_LineHeight); + background: var(--sapList_GroupHeaderBackground); + margin-block: var(--fdNotification_Group_Header_Margin_Block); + border-block-end: var(--sapList_BorderWidth) solid var(--fdNotification_Group_Header_Border_Bottom_Color); + + @include fd-focus() { + outline-offset: -0.25rem; + outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); } - - border-bottom: $fd-notification-border; } - } - - &.#{$block}--padding { - padding-block: 0.75rem; - padding-inline: 0.75rem; - } - - &--mobile { - @include fd-notification-mobile(); + + &__header-arrow { + @include fd-reset(); + @include fd-inline-flex-center(); + + font-size: 1rem; + margin-inline: 0.5rem; - padding-inline: 0; - padding-block: 0; - overflow: hidden; + [class*="sap-icon"] { + @include fd-flex-center(); + @include fd-set-square(1rem); - .#{$block}__indicator { - padding-inline-end: 0.25rem; + color: var(--sapContent_IconColor); + } } - - .#{$block}__group-header { - padding-block: 0.5rem 0; - padding-inline: 0.5rem; + + &__header-title { + @include fd-reset(); + @include fd-ellipsis(); + + line-height: 2rem; + font-family: var(--sapFontHeaderFamily); + color: var(--fdNotification_Group_Header_Title_Color); + font-size: var(--fdNotification_Group_Header_Title_Font_Size); + font-weight: var(--fdNotification_Group_Header_Title_Font_Weight); } + + &__list { + @include fd-reset(); - .#{$block}__body { + @include fd-flex(column) { + gap: var(--fdNotification_Group_List_Gap); + }; + + list-style: none; + margin-block: var(--fdNotification_Group_List_Margin_Block); + margin-inline: var(--fdNotification_Group_List_Margin_Inline); + } + + &__growing-item { + @include fd-reset(); + @include notification-states(); + + @include fd-flex(column) { + gap: 0.5rem; + align-items: center; + justify-content: center; + }; + padding-block: 1rem; - padding-inline: 0.75rem 0.5rem; + padding-inline: 1rem; + margin-inline: var(--fdNotification_Growing_Item_Margin_Inline); + margin-block-end: var(--fdNotification_Growing_Item_Margin_Block_End); } + + &__growing-item-title { + @include fd-reset(); - .#{$block}__content { - margin-inline-start: 0.75rem; + color: var(--fdNotification_Growing_Item_Title_Color); + font-size: var(--fdNotification_Growing_Item_Title_Font_Size); + font-family: var(--fdNotification_Growing_Item_Title_Font_Family); + font-weight: var(--fdNotification_Growing_Item_Title_Font_Weight); } - } - &--in-dialog { - box-shadow: none; - margin-block-end: 0; - border-bottom: $fd-notification-border; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + &__growing-item-subtitle { + @include fd-reset(); - &:last-of-type { - border-bottom: none; + color: var(--sapContent_LabelColor); } } + + // Notification Popover + &-popover { + --fdNotification_Popover_Width: 27rem; + --fdNotification_Popover_Max_Width: 27rem; + + @include fd-reset(); - // BTP NOTIFICATION - &--btp { - // Notification - --fdNotification_Box_Shadow: none; - --fdNotification_Border_Radius: var(--sapElement_BorderCornerRadius); - - // Notification Body - --fdNotification_Item_Box_Shadow: none; - --fdNotification_Item_Spacing: 0.75rem; - --fdNotification_Item_Paddign_Y: 0.75rem; - --fdNotification_Item_Paddign_Left: 1rem; - --fdNotification_Item_Paddign_Right: 1.5rem; - --fdNotification_Item_Border_Radius: var(--sapElement_BorderCornerRadius); - - // Notification Paragraph - --fdNotification_Item_Paragraph_Font_Size: var(--sapFontSmallSize); - - // Notification Title - --fdNotification_Item_Title_Margin_Bottom: 0; - --fdNotification_Item_Title_Line_Height: 1.25rem; - --fdNotification_Item_Title_Color: var(--sapTitleColor); - --fdNotification_Item_Title_Font_Family: var(--sapFontSemiboldFamily); - - // Notification Footer - --fdNotification_Item_Footer_Font_Size: var(--sapFontSmallSize); - - // Notification Limit - --fdNotification_Limit_Padding_Block: 1.5rem; - --fdNotification_Limit_Padding_Inline: 0; - - .#{$block}__body { - cursor: pointer; - border: 0.0625rem solid var(--fdNotification_Item_Border_Color); - - @include fd-hover() { - --fdNotification_Item_Background: var(--sapList_Hover_Background); - } - - @include fd-active() { - --fdNotification_Item_Background: var(--sapList_Active_Background); - --fdNotification_Item_Title_Color: var(--fdNotification_Item_Title_Color_Active); - --fdNotification_Item_Paragraph_Color: var(--fdNotification_Item_Paragraph_Color_Active); - --fdNotification_Item_Footer_Color: var(--fdNotification_Item_Footer_Color_Active); - - @include fd-focus() { - --fdNotification_Item_Background: var(--sapList_Active_Background); - - outline: none; - } - } - - @include fd-focus() { - --fdNotification_Item_Background: var(--sapList_Background); - - outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor); - } + max-height: 40rem; + overflow-y: scroll; + width: var(--fdNotification_Popover_Width); + max-width: var(--fdNotification_Popover_Max_Width); + + @include fd-media-sm() { + --fdNotification_Popover_Width: auto; + --fdNotification_Popover_Max_Width: 25rem; } + } - &.#{$block}--group { - --fdNotification_Border_Radius: 0; - --fdNotification_Background: transparent; - --fdNotification_Item_Border_Radius: var(--sapElement_BorderCornerRadius); - - overflow: visible; - - .#{$block}__group-header { - @include fd-set-paddings-x-equal(0.75rem); - @include fd-set-paddings-y-equal(0.5rem); - - @include fd-flex-vertical-center() { - gap: 0.4375rem; - justify-content: space-between; - } - - @include fd-icon-selector() { - @include fd-flex-center(); - - color: inherit; - width: 0.75rem; - height: 0.75rem; - font-size: 0.75rem; - display: var(--fdNotification_Group_Item_Children_Indicator_Display); - } - - height: 2rem; - cursor: pointer; - min-width: 20rem; - max-width: 24rem; - margin-block-end: 0.125rem; - color: var(--fdNotification_Group_Item_Color); - transition: var(--fdNotification_Group_Item_Transition); - background: var(--fdNotification_Group_Item_Background); - border-radius: var(--fdNotification_Group_Item_Border_Radius); - border: 0.0625rem solid var(--fdNotification_Group_Item_Border_Color); - border-bottom: 0.0625rem solid var(--fdNotification_Group_Item_Border_Bottom_Color); - - @include fd-hover() { - --fdNotification_Group_Item_Children_Indicator_Display: inline-flex; - --fdNotification_Group_Item_Background: var(--sapList_Hover_Background); - --fdNotification_Group_Item_Border_Color: var(--fdNotification_Group_Item_Border_Color_Hover); - } - - @include fd-active() { - --fdNotification_Group_Item_Children_Indicator_Display: inline-flex; - --fdNotification_Group_Item_Background: var(--sapList_Active_Background); - --fdNotification_Group_Item_Border_Color: var(--fdNotification_Group_Item_Border_Color_Active); - --fdNotification_Group_Item_Color: var(--fdNotification_Group_Item_Color_Active); - - @include fd-focus() { - --fdNotification_Group_Item_Children_Indicator_Display: inline-flex; - --fdNotification_Group_Item_Background: var(--sapList_Active_Background); - --fdNotification_Group_Item_Border_Color: var(--fdNotification_Group_Item_Border_Color_Active); - --fdNotification_Group_Item_Border_Bottom_Color: var(--fdNotification_Group_Item_Border_Color_Active); - - outline: none; - } - } - - @include fd-focus() { - --fdNotification_Group_Item_Background: var(--sapList_Background); - --fdNotification_Group_Item_Border_Bottom_Color: transparent; - --fdNotification_Group_Item_Border_Color: var(--fdNotification_Group_Item_Border_Color_Focused); - --fdNotification_Group_Item_Children_Indicator_Display: inline-flex; - - outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor); - } - - &--collapsed, - &.is-collapsed, - &.collapsed { - --fdNotification_Group_Item_Children_Indicator_Display: inline-flex; - - max-height: 2rem; - - @include fd-icon-selector() { - transform: rotate(-90deg); - - @include fd-rtl() { - transform: rotate(90deg); - } - } - } - } - - .#{$block}__group-header-title { - @include fd-reset(); - @include fd-ellipsis(); - - width: 100%; - color: inherit; - font-size: var(--sapFontSmallSize); - font-weight: semibold; - } - - .#{$block}__body { - margin-block-end: 0.125rem; - border: 0.0625rem solid var(--fdNotification_Item_Border_Color); - - &:last-of-type { - border-bottom-left-radius: var(--sapElement_BorderCornerRadius); - border-bottom-right-radius: var(--sapElement_BorderCornerRadius); - margin-block-end: 1.5rem; - border-bottom: 0.0625rem solid var(--fdNotification_Item_Border_Color); - - --fdNotification_Item_Border_Radius: var(--sapElement_BorderCornerRadius); - } - } - } + // Compact Mode + @include fd-compact-and-condensed() { + --fdNotification_Content_Gap: 0.5rem; + --fdNotification_Title_Offset: 4rem; + --fdNotification_Title_One_Button_Offset: 2.75rem; + --fdNotification_Title_Two_Buttons_Offset: 4.875rem; } } diff --git a/packages/styles/src/theming/common/notification/_sap_fiori.scss b/packages/styles/src/theming/common/notification/_sap_fiori.scss index ded56f12bd..e0f76d9a07 100644 --- a/packages/styles/src/theming/common/notification/_sap_fiori.scss +++ b/packages/styles/src/theming/common/notification/_sap_fiori.scss @@ -1,19 +1,44 @@ @use "sass:map"; :root { - --fdNotification_Unread_Indicator_Background: var(--sapHighlightColor); - --fdNotification_Item_Border_Color: transparent; - --fdNotification_Group_Item_Border_Radius: 0.375rem; - --fdNotification_Group_Item_Transition: background-color 0.3s ease-in-out; - --fdNotification_Group_Item_Color: var(--sapContent_LabelColor); - --fdNotification_Group_Item_Color_Active: var(--sapContent_ContrastTextColor); - --fdNotification_Group_Item_Border_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Bottom_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Color_Hover: transparent; - --fdNotification_Group_Item_Border_Color_Active: transparent; - --fdNotification_Group_Item_Border_Color_Focused: transparent; - --fdNotification_Item_Title_Color_Active: var(--sapContent_ContrastTextColor); - --fdNotification_Item_Paragraph_Color_Active: var(--sapContent_ContrastTextColor); - --fdNotification_Item_Footer_Color_Active: var(--sapContent_ContrastTextColor); - --fdNotification_Group_Header_Color_Active: var(--sapContent_ContrastTextColor); + // Notification Item + --fdNotification_Border_Radius: 0; + --fdNotification_Border_Left_Right_Color: transparent; + --fdNotification_Border_Top_Color: transparent; + --fdNotification_Border_Left_Right_Color_Selected: transparent; + --fdNotification_Border_Top_Color_Selected: transparent; + --fdNotification_Border_Block_End_Color_Selected: var(--sapList_BorderColor); + + // States + --fdNotification_Background_Hover: var(--sapList_Background); + --fdNotification_Background_Active: var(--sapList_Background); + --fdNotification_Background_Selected: var(--sapList_Background); + --fdNotification_Background_Selected_Hover: var(--sapList_Background); + --fdNotification_Title_Color_Active: var(--sapList_TextColor); + --fdNotification_Paragraph_Color_Active: var(--sapList_TextColor); + --fdNotification_Footer_Content_Color_Active: var(--sapContent_LabelColor); + --fdNotification_Separator_Color_Active: var(--sapContent_LabelColor); + --fdNotification_Border_Inline_Color_Active: transparent; + --fdNotification_Border_Block_Start_Color_Active: transparent; + --fdNotification_Border_Block_End_Color_Active: var(--sapList_BorderColor); + + // Group Header + --fdNotification_Group_Header_Border_Bottom_Color: var(--sapList_GroupHeaderBorderColor); + --fdNotification_Group_Header_Margin_Block: 0; + --fdNotification_Group_Header_Title_Font_Weight: bold; + --fdNotification_Group_Header_Title_Font_Size: var(--sapFontHeader6Size); + --fdNotification_Group_Header_Title_Color: var(--sapList_TableGroupHeaderTextColor); + + // Group List + --fdNotification_Group_List_Margin_Block: 0; + --fdNotification_Group_List_Margin_Inline: 0; + --fdNotification_Group_List_Gap: 0; + + // Growing Item + --fdNotification_Growing_Item_Margin_Inline: 0; + --fdNotification_Growing_Item_Margin_Block_End: 0; + --fdNotification_Growing_Item_Title_Color: var(--sapGroup_TitleTextColor); + --fdNotification_Growing_Item_Title_Font_Family: var(--sapFontHeaderFamily); + --fdNotification_Growing_Item_Title_Font_Size: var(--sapFontHeader5Size); + --fdNotification_Growing_Item_Title_Font_Weight: var(--sapFontHeaderWeight); } diff --git a/packages/styles/src/theming/common/notification/_sap_fiori_hc.scss b/packages/styles/src/theming/common/notification/_sap_fiori_hc.scss deleted file mode 100644 index c93b093ef9..0000000000 --- a/packages/styles/src/theming/common/notification/_sap_fiori_hc.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "sass:map"; - -@import "./sap_fiori"; - -:root { - --fdNotification_Unread_Indicator_Background: var(--sapContent_IconColor); - --fdNotification_Item_Border_Color: var(--sapGroup_ContentBorderColor); - --fdNotification_Group_Item_Border_Radius: 0; - --fdNotification_Group_Item_Transition: none; - --fdNotification_Group_Item_Color: var(--sapList_TextColor); - --fdNotification_Group_Item_Color_Active: var(--sapContent_ContrastTextColor); - --fdNotification_Group_Item_Border_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Bottom_Color_Normal: var(--sapList_BorderColor); - --fdNotification_Group_Item_Border_Color_Hover: var(--sapList_SelectionBorderColor); - --fdNotification_Group_Item_Border_Color_Active: var(--sapList_SelectionBorderColor); - --fdNotification_Group_Item_Border_Color_Focused: transparent; -} diff --git a/packages/styles/src/theming/common/notification/_sap_horizon.scss b/packages/styles/src/theming/common/notification/_sap_horizon.scss index 96ad11403f..bea1c03bbe 100644 --- a/packages/styles/src/theming/common/notification/_sap_horizon.scss +++ b/packages/styles/src/theming/common/notification/_sap_horizon.scss @@ -1,18 +1,44 @@ @use "sass:map"; :root { - --fdNotification_Unread_Indicator_Background: var(--sapHighlightColor); - --fdNotification_Item_Border_Color: transparent; - --fdNotification_Group_Item_Border_Radius: 0.375rem; - --fdNotification_Group_Item_Transition: background-color 0.3s ease-in-out; - --fdNotification_Group_Item_Color: var(--sapContent_LabelColor); - --fdNotification_Group_Item_Color_Active: var(--sapContent_LabelColor); - --fdNotification_Group_Item_Border_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Bottom_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Color_Hover: transparent; - --fdNotification_Group_Item_Border_Color_Active: transparent; - --fdNotification_Group_Item_Border_Color_Focused: transparent; - --fdNotification_Item_Title_Color_Active: var(--sapTitleColor); - --fdNotification_Item_Paragraph_Color_Active: var(--sapTextColor); - --fdNotification_Item_Footer_Color_Active: var(--sapTextColor); + // Notification Item + --fdNotification_Border_Radius: var(--sapTile_BorderCornerRadius); + --fdNotification_Border_Left_Right_Color: var(--sapList_BorderColor); + --fdNotification_Border_Top_Color: var(--sapList_BorderColor); + --fdNotification_Border_Left_Right_Color_Selected: var(--sapList_SelectionBorderColor); + --fdNotification_Border_Top_Color_Selected: var(--sapList_SelectionBorderColor); + --fdNotification_Border_Block_End_Color_Selected: var(--sapList_SelectionBorderColor); + + // States + --fdNotification_Background_Hover: var(--sapList_Hover_Background); + --fdNotification_Background_Active: var(--sapList_Active_Background); + --fdNotification_Background_Selected: var(--sapList_SelectionBackgroundColor); + --fdNotification_Background_Selected_Hover: var(--sapList_Hover_SelectionBackground); + --fdNotification_Title_Color_Active: var(--sapList_Active_TextColor); + --fdNotification_Paragraph_Color_Active: var(--sapList_Active_TextColor); + --fdNotification_Footer_Content_Color_Active: var(--sapList_Active_TextColor); + --fdNotification_Separator_Color_Active: var(--sapList_Active_TextColor); + --fdNotification_Border_Inline_Color_Active: var(--sapList_Active_Background); + --fdNotification_Border_Block_Start_Color_Active: var(--sapList_Active_Background); + --fdNotification_Border_Block_End_Color_Active: var(--sapList_Active_Background); + + // Group Header + --fdNotification_Group_Header_Border_Bottom_Color: transparent; + --fdNotification_Group_Header_Margin_Block: 0.75rem 0.5rem; + --fdNotification_Group_Header_Title_Font_Weight: normal; + --fdNotification_Group_Header_Title_Font_Size: var(--sapFontHeader5Size); + --fdNotification_Group_Header_Title_Color: var(--sapGroup_TitleTextColor); + + // Group List + --fdNotification_Group_List_Margin_Block: 0 0.5rem; + --fdNotification_Group_List_Margin_Inline: 0.5rem; + --fdNotification_Group_List_Gap: 0.5rem; + + // Growing Item + --fdNotification_Growing_Item_Margin_Inline: 0.5rem; + --fdNotification_Growing_Item_Margin_Block_End: 0.5rem; + --fdNotification_Growing_Item_Title_Color: var(--sapButton_TextColor); + --fdNotification_Growing_Item_Title_Font_Family: var(--sapFontFamily); + --fdNotification_Growing_Item_Title_Font_Size: var(--sapFontSize); + --fdNotification_Growing_Item_Title_Font_Weight: bold; } diff --git a/packages/styles/src/theming/common/notification/_sap_horizon_hc.scss b/packages/styles/src/theming/common/notification/_sap_horizon_hc.scss deleted file mode 100644 index 57573fcd10..0000000000 --- a/packages/styles/src/theming/common/notification/_sap_horizon_hc.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "sass:map"; - -@import "./sap_horizon"; - -:root { - --fdNotification_Unread_Indicator_Background: var(--sapContent_IconColor); - --fdNotification_Item_Border_Color: var(--sapGroup_ContentBorderColor); - --fdNotification_Group_Item_Border_Radius: 0; - --fdNotification_Group_Item_Transition: none; - --fdNotification_Group_Item_Color: var(--sapList_TextColor); - --fdNotification_Group_Item_Color_Active: var(--sapList_TextColor); - --fdNotification_Group_Item_Border_Color_Normal: transparent; - --fdNotification_Group_Item_Border_Bottom_Color_Normal: var(--sapList_BorderColor); - --fdNotification_Group_Item_Border_Color_Hover: var(--sapList_SelectionBorderColor); - --fdNotification_Group_Item_Border_Color_Active: var(--sapList_SelectionBorderColor); - --fdNotification_Group_Item_Border_Color_Focused: transparent; -} diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index b2aa46b812..745017737c 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -49,7 +49,6 @@ @import "./common/step-input/sap_fiori"; @import "./common/object-status/sap_fiori_hc"; @import "./common/tokenizer/sap_fiori"; -@import "./common/notification/sap_fiori_hc"; @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation/sap_fiori_hc"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index ad8c9c4285..a6e9b44539 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -42,7 +42,6 @@ @import "./common/calendar/sap_fiori"; @import "./common/object-status/sap_fiori_hc"; @import "./common/tokenizer/sap_fiori"; -@import "./common/notification/sap_fiori_hc"; @import "./common/pagination/sap_fiori"; @import "./common/search-field/sap_fiori_hc"; @import "./common/navigation/sap_fiori_hc"; diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index 8f0828932c..81da11c0a3 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -44,7 +44,6 @@ @import "./common/step-input/sap_horizon"; @import "./common/object-status/sap_horizon_hc"; @import "./common/tokenizer/sap_horizon"; -@import "./common/notification/sap_horizon_hc"; @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation/sap_horizon_hc"; diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index 791bdc7725..d216a509d5 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -45,7 +45,6 @@ @import "./common/step-input/sap_horizon"; @import "./common/object-status/sap_horizon_hc"; @import "./common/tokenizer/sap_horizon"; -@import "./common/notification/sap_horizon_hc"; @import "./common/pagination/sap_horizon"; @import "./common/search-field/sap_horizon_hc"; @import "./common/navigation/sap_horizon_hc"; diff --git a/packages/styles/stories/Components/notification/banner.example.html b/packages/styles/stories/Components/notification/banner.example.html new file mode 100644 index 0000000000..a8e39b5db5 --- /dev/null +++ b/packages/styles/stories/Components/notification/banner.example.html @@ -0,0 +1,29 @@ +
+
+
+ + + +
+
+ +

Notification Title (unread)

+
+

Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit.

+
+ Product Name + + Feature Name + + 11:11 + More +
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/packages/styles/stories/Components/notification/error.example.html b/packages/styles/stories/Components/notification/error.example.html deleted file mode 100644 index c2bf64d16f..0000000000 --- a/packages/styles/stories/Components/notification/error.example.html +++ /dev/null @@ -1,35 +0,0 @@ -
-
-
- -

- Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. -

- -
-
-
- -
-
-

You have new items

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

- SAP Analytics Cloud - - 7 minutes ago -

-
-
- - -
-
-
diff --git a/packages/styles/stories/Components/notification/in-dialog.example.html b/packages/styles/stories/Components/notification/in-dialog.example.html deleted file mode 100644 index 66cbaa807f..0000000000 --- a/packages/styles/stories/Components/notification/in-dialog.example.html +++ /dev/null @@ -1,71 +0,0 @@ - -
- -
diff --git a/packages/styles/stories/Components/notification/information.example.html b/packages/styles/stories/Components/notification/information.example.html deleted file mode 100644 index fd693424b1..0000000000 --- a/packages/styles/stories/Components/notification/information.example.html +++ /dev/null @@ -1,34 +0,0 @@ -
-
-
- -

- Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. -

- -
-
-
- -
-
-

You have new items

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

- SAP Analytics Cloud - Just now -

-
-
- - -
-
-
diff --git a/packages/styles/stories/Components/notification/mobile.example.html b/packages/styles/stories/Components/notification/mobile.example.html deleted file mode 100644 index a636273f35..0000000000 --- a/packages/styles/stories/Components/notification/mobile.example.html +++ /dev/null @@ -1,376 +0,0 @@ -
- -
-
- -
-
-
-

Your leave request has been accepted

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- SAP Analytics Cloud - - 7 minutes ago -

-
-
-
-
- -
- -
- -
-
-
-
-

-
-
- -
-
- -
-
-
-

Today (5)

-
-
-
- -
-
-
- JD -
-
-
-

You've got new item

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- SAP Teamm dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - - 7 minutes ago -

-
-
-
-
- -
- -
- -
-
-
- -
-
-
-

The title you've already read.

-
-

Lagna aliqua.

-

- SAP Analytics Cloud very long author name to test truncate - - 7 minutes ago long long time ago ages ago years ago -

-
-
-
-
- -
- -
- -
-
-
- - -
-
diff --git a/packages/styles/stories/Components/notification/no-avatar.example.html b/packages/styles/stories/Components/notification/no-avatar.example.html deleted file mode 100644 index 68da10ed1f..0000000000 --- a/packages/styles/stories/Components/notification/no-avatar.example.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
-
-
-

Your leave request has been accepted

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- SAP Analytics Cloud - - 7 minutes ago -

-
-
- - -
-
-
diff --git a/packages/styles/stories/Components/notification/notification-group-btp.example.html b/packages/styles/stories/Components/notification/notification-group-btp.example.html deleted file mode 100644 index 9c86a85310..0000000000 --- a/packages/styles/stories/Components/notification/notification-group-btp.example.html +++ /dev/null @@ -1,134 +0,0 @@ -
-
-
- -
-
-
-
-
- Today - -
- -
- -
-
-

Welcome back, Jonathan

-
-

Et harum quidem rerum facilis est et expedita distinctio.

-

- 7 minutes ago -

-
- -
-
- JD -
-
-

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

-
-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

-

- 7 minutes ago -

-
- -
-
- - - -
-
-

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt porro quisquam est, qui dolorem ipsum quia dolor sit amet. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

-

- 7 minutes ago -

-
- -
-
-
-
- Today - -
- -
- -
-
-

Welcome back, Jonathan

-
-

Et harum quidem rerum facilis est et expedita distinctio.

-

- 7 minutes ago -

-
- -
-
- IA -
-
-

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

-
-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

-

- 7 minutes ago -

-
- -
-
- MJ -
-
-

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt porro quisquam est, qui dolorem ipsum quia dolor sit amet. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

-

- 7 minutes ago -

-
- -
-
- -
-
-
-
- Last week - -
-
-
-
- Last Month - -
-
-
-
-
-
- - - - - diff --git a/packages/styles/stories/Components/notification/notification-group-header-btp.example.html b/packages/styles/stories/Components/notification/notification-group-header-btp.example.html deleted file mode 100644 index 94506ad454..0000000000 --- a/packages/styles/stories/Components/notification/notification-group-header-btp.example.html +++ /dev/null @@ -1,40 +0,0 @@ -

normal

-
-
- Group - -
-
-
-

hover

-
-
- Group - -
-
-
-

active

-
-
- Group - -
-
-
-

focus

-
-
- Group - -
-
-
-

collapsed

-
-
- Group - -
-
- diff --git a/packages/styles/stories/Components/notification/notification-group.example.html b/packages/styles/stories/Components/notification/notification-group.example.html index 6ec04d4726..47d4e8450d 100644 --- a/packages/styles/stories/Components/notification/notification-group.example.html +++ b/packages/styles/stories/Components/notification/notification-group.example.html @@ -1,228 +1,221 @@ -
- -
-
- -
-
-
-

Today (5)

-
-
-
- - -
-
- JD -
-
-
-

You've got new item

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- SAP Team dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor consectetur adipiscing elit -

-
-
-
-
- + +
- - - -
-
-
- -
-
-
-

The title you've already read.

-
-

Lagna aliqua.

-

- SAP Analytics Cloud very long author name to test truncate - - 7 minutes ago long long time ago ages ago years ago -

-
-
- - - -
-
-
- -
-
-
-

Your leave request has been rejected. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- SAP Analytics Cloud - - 7 minutes ago m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor -

-
-
- - -
-
-
-

There are 30 more notifications

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
- - diff --git a/packages/styles/stories/Components/notification/notification-item-btp.example.html b/packages/styles/stories/Components/notification/notification-item-btp.example.html deleted file mode 100644 index 9783ef6ecd..0000000000 --- a/packages/styles/stories/Components/notification/notification-item-btp.example.html +++ /dev/null @@ -1,67 +0,0 @@ -

normal

-
-
- -
-
-

Welcome back, Jonathan

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- 7 minutes ago -

-
- -
-
-
-

hover

-
-
- -
-
-

Welcome back, Jonathan

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- 7 minutes ago -

-
- -
-
-
-

active

-
-
- -
-
-

Welcome back, Jonathan

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- 7 minutes ago -

-
- -
-
-
-

focus

-
-
- -
-
-

Welcome back, Jonathan

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- 7 minutes ago -

-
- -
-
diff --git a/packages/styles/stories/Components/notification/notification.stories.js b/packages/styles/stories/Components/notification/notification.stories.js index f207bc0f67..8693e6f120 100644 --- a/packages/styles/stories/Components/notification/notification.stories.js +++ b/packages/styles/stories/Components/notification/notification.stories.js @@ -1,31 +1,24 @@ -import inDialogExampleHtml from "./in-dialog.example.html?raw"; -import mobileExampleHtml from "./mobile.example.html?raw"; import notificationGroupExampleHtml from "./notification-group.example.html?raw"; -import errorExampleHtml from "./error.example.html?raw"; -import warningExampleHtml from "./warning.example.html?raw"; -import informationExampleHtml from "./information.example.html?raw"; -import noAvatarExampleHtml from "./no-avatar.example.html?raw"; import primaryExampleHtml from "./primary.example.html?raw"; -import notificationItemBtpHtml from "./notification-item-btp.example.html?raw"; -import notificationGroupHeaderBtpHtml from "./notification-group-header-btp.example.html?raw"; -import notificationGroupBtpHtml from "./notification-group-btp.example.html?raw"; +import bannerExampleHtml from "./banner.example.html?raw"; import '../../../src/button.scss'; import '../../../src/icon.scss'; import '../../../src/notification.scss'; -import '../../../src/tabs.scss'; +import '../../../src/toolbar.scss'; import '../../../src/avatar.scss'; import '../../../src/popover.scss'; import '../../../src/menu.scss'; import '../../../src/message-strip.scss'; -import '../../../src/dialog.scss'; import '../../../src/bar.scss'; import '../../../src/title.scss'; +import '../../../src/link.scss'; +import '../../../src/object-status.scss'; import '../../../src/btp/avatar.scss'; export default { title: 'Components/Notifications', parameters: { - tags: ['f3', 'a11y', 'theme', 'development'], + tags: ['development'], description: ` Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways. @@ -39,102 +32,41 @@ Notifications are used to relay information to the user about a situation or tas } }; export const Primary = () => primaryExampleHtml; +Primary.storyName = 'Notification Item'; Primary.parameters = { docs: { description: { - story: ` -Primary notifications display a container with an avatar, content area with text, as well as an open and close button. To display primary notifications, use the \`fd-notification\` class. -` - } - } -}; -export const NoAvatar = () => noAvatarExampleHtml; -NoAvatar.parameters = { - docs: { - description: { - story: ` -Notifications can be displayed without an avatar by adding the \`fd-notification__content--no-avatar\` modifier class together with the \`fd-notification__content\` class. -` - } - } -}; -export const Information = () => informationExampleHtml; -Information.parameters = { - docs: { - description: { - story: ` -Notifications can also include alerts, and in this case it is informative. You can display information alerts by adding the \`fd-message-strip fd-message-strip--information fd-message-strip--dismissible\`. To add text to the message, add the \`fd-message-strip__text\` class before the text in paragraph tags. -` - } - } -}; -export const Warning = () => warningExampleHtml; -Warning.parameters = { - docs: { - description: { - story: ` -Notifications can display warning alerts by adding the \`fd-message-strip fd-message-strip--warning fd-message-strip--dismissible\` class. -` - } - } -}; -export const Error = () => errorExampleHtml; -Error.parameters = { - docs: { - description: { - story: ` -Notifications can display error alerts by adding the \`fd-message-strip fd-message-strip--error fd-message-strip--dismissible\` class. + story: `Notification items display a container with: + ` } } }; + export const NotificationGroup = () => notificationGroupExampleHtml; NotificationGroup.parameters = { docs: { description: { - story: `You can display a group of notifications in a list format, and the user can sort them from the header. To display a notification group, add the \`fd-notification fd-notification__group\` class. + story: `You can display a group of notifications in a list format, and the user can sort them from the header. A Message Strip can be places after the group header. To load more notifications, the list can have a Growing Item placed at the bottom of the group. ` } } }; -export const Mobile = () => mobileExampleHtml; -Error.mobile = { - docs: {} -}; -export const InDialog = () => inDialogExampleHtml; -InDialog.parameters = { - docs: { - description: { - story: `If you want to show the notification in a dialog, you need to add the fd-notification--in-dialog class to the notification. - Also, you need to apply \`fd-dialog__body--no-vertical-padding fd-dialog__body--no-horizontal-padding\` classes to the dialog body.` - } - } -}; -// BTP Examples -export const NotificationItemBTP = () => notificationItemBtpHtml; -NotificationItemBTP.parameters = { +export const NotificationBanner = () => bannerExampleHtml; +NotificationBanner.storyName = 'Notification Banner'; +NotificationBanner.parameters = { docs: { description: { - story: `` + story: `Notifications can be displayed as banners in the top right corner. Apply the modifier class \`fd-notification--banner\` for this option.` } } }; - -export const NotificationGroupHeaderBTP = () => notificationGroupHeaderBtpHtml; -NotificationGroupHeaderBTP.parameters = { - docs: { - description: { - story: `` - } - } -}; - -export const NotificationGroupBTP = () => notificationGroupBtpHtml; -NotificationGroupBTP.parameters = { - docs: { - description: { - story: `` - } - } -}; \ No newline at end of file diff --git a/packages/styles/stories/Components/notification/primary.example.html b/packages/styles/stories/Components/notification/primary.example.html index d5ffc41321..b015307a79 100644 --- a/packages/styles/stories/Components/notification/primary.example.html +++ b/packages/styles/stories/Components/notification/primary.example.html @@ -1,23 +1,125 @@ -
+
- + + +
-
-

Your leave request has been accepted

+ +

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, adipiscisolutavolup? 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.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

- Long author name - SAP Analytics Cloud incididunt ut labore et dolore magna aliqua +

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. Non?

+
+ Product Name - 7 minutes ago -

+ Feature Name + + 11:11 + More +
+ + + Important + +
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+ +

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.

+
+

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.

+
+ Product Name + + Feature Name + + 11:11 + More +
- - + +
+
+
+ +
+ +
+
+
+
+ +

Notification Title

+
+

Description of notification topic

+
+ Product Name + + Feature Name + + 11:11 +
+
+
+ + +
+
+
+ +
+ +
+
+ + + +
+
+

Notification Title

+
+

Description of notification topic

+
+ Product Name + + Feature Name + + 11:11 +
+
+
+ +
+ diff --git a/packages/styles/stories/Components/notification/warning.example.html b/packages/styles/stories/Components/notification/warning.example.html deleted file mode 100644 index b859f36837..0000000000 --- a/packages/styles/stories/Components/notification/warning.example.html +++ /dev/null @@ -1,35 +0,0 @@ -
-
-
- -

- Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet. -

- -
-
-
- -
-
-

You have new items

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

- Tom Norton Beam - - 7 minutes ago -

-
-
- - -
-
-
diff --git a/packages/styles/stories/Components/user-menu/third-party-content.example.html b/packages/styles/stories/Components/user-menu/third-party-content.example.html index 44c42dbc69..13f4876745 100644 --- a/packages/styles/stories/Components/user-menu/third-party-content.example.html +++ b/packages/styles/stories/Components/user-menu/third-party-content.example.html @@ -137,237 +137,197 @@
-
-
- -
-
- -
-
-

Last 24 Hours (3)

-
-
-
- -
-
-
- -
-
-
-

Notification title

-
-

Notification Description

-

- John Doe - - Yesterday -

-
-
- -
-
-
- -
-
-
-

Notification title

-
-

Notification Description

-

- John Doe - - Yesterday -

-
-
- -
-
-
- -
-
-
-

Notification title

-
-

Notification Description

-

- John Doe - - Yesterday -

-
-
- -
-
- -
- -
-
-

This Week (42)

-
-
-
- -
-
- -
- -
-
-
-

Notification title

-
-

Notification Description

-

- John Doe - - Yesterday -

-
-
- -
-
+
+
+ -