diff --git a/packages/styles/src/mixins/_mixins.scss b/packages/styles/src/mixins/_mixins.scss index e8e2406f78..9fd0dcd309 100644 --- a/packages/styles/src/mixins/_mixins.scss +++ b/packages/styles/src/mixins/_mixins.scss @@ -814,6 +814,15 @@ } } +@mixin fd-collapsed() { + @at-root { + [class*="-collapsed"], + &[class*="-collapsed"] { + @content; + } + } +} + @mixin fd-last-child() { &:last-child, &.is-last-child { diff --git a/packages/styles/src/navigation-list.scss b/packages/styles/src/navigation-list.scss index 5ce37bbabc..94a3b4e49a 100644 --- a/packages/styles/src/navigation-list.scss +++ b/packages/styles/src/navigation-list.scss @@ -23,7 +23,9 @@ $block: #{$fd-namespace}-navigation-list; // Expander --fdNavigationList_Expander_Width: 2.25rem; + --fdNavigationList_Expander_Height: 2.25rem; --fdNavigationList_Expander_Font_Size: 1rem; + --fdNavigationList_Expander_Color: var(--sapList_TextColor); @include fd-reset(); @@ -55,26 +57,92 @@ $block: #{$fd-namespace}-navigation-list; margin-block: 0.5rem; background: var(--sapToolbar_SeparatorColor); } + + &--group { + --fdNavigationList_Text_Color: var(--sapContent_LabelColor); + --fdNavigationList_Text_Font_Size: var(--sapFontSize); + --fdNavigationList_Text_Font_Family: var(--sapFontFamily); + + margin-block-start: var(--fdNavigationList_Group_Item_Margin_Top, 0.5rem); + } + + &--quick-create { + --fdNavigationList_Text_Color: var(--sapButton_TextColor); + + .#{$block}__content { + --fdNavigationList_Content_Border_Top_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Bottom_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Right_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Left_Color: var(--sapButton_BorderColor); + + @include fd-hover() { + --fdNavigationList_Content_Border_Top_Color: var(--sapButton_Hover_BorderColor); + --fdNavigationList_Content_Border_Bottom_Color: var(--sapButton_Hover_BorderColor); + --fdNavigationList_Content_Border_Right_Color: var(--sapButton_Hover_BorderColor); + --fdNavigationList_Content_Border_Left_Color: var(--sapButton_Hover_BorderColor); + } + + @include fd-active() { + --fdNavigationList_Content_Border_Top_Color: var(--sapButton_Active_BorderColor); + --fdNavigationList_Content_Border_Bottom_Color: var(--sapButton_Active_BorderColor); + --fdNavigationList_Content_Border_Right_Color: var(--sapButton_Active_BorderColor); + --fdNavigationList_Content_Border_Left_Color: var(--sapButton_Active_BorderColor); + } + + @include fd-focus() { + --fdNavigationList_Content_Border_Top_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Bottom_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Right_Color: var(--sapButton_BorderColor); + --fdNavigationList_Content_Border_Left_Color: var(--sapButton_BorderColor); + } + } + } + + &--two-click { + .#{$block}__navigation-indicator { + position: relative; + + &::before { + left: -0.25rem; + position: absolute; + content: ""; + width: 0.0625rem; + height: var(--sapElement_Compact_Height); + background: var(--sapToolbar_SeparatorColor); + } + + @include fd-rtl() { + &::before { + left: auto; + right: -0.25rem; + } + } + } + } } &__content { @include fd-reset(); @include fd-flex-vertical-center() { - gap: 0.5rem; + gap: var(--fdNavigationList_Content_Gap, 0.5rem); }; cursor: pointer; position: relative; overflow: hidden; - padding-inline-end: 0.375rem; + padding-inline-end: var(--fdNavigationList_Content_Padding_Inline_End, 1rem); border-radius: var(--fdNavigationList_Content_Border_Radius); height: var(--fdNavigationList_Content_Height); + min-width: var(--fdNavigationList_Content_Width, 100%); background: var(--fdNavigationList_Content_Background); border-width: var(--sapList_BorderWidth); border-style: solid; border-color: var(--fdNavigationList_Content_Border_Top_Color, transparent) var(--fdNavigationList_Content_Border_Right_Color, transparent) var(--fdNavigationList_Content_Border_Bottom_Color, var(--fdNavigationList_Content_Border_Color)) var(--fdNavigationList_Content_Border_Left_Color, transparent); + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0.375rem; + } &::before { content: ""; @@ -106,6 +174,7 @@ $block: #{$fd-namespace}-navigation-list; @include fd-active() { --fdNavigationList_Text_Color: var(--sapList_Active_TextColor); + --fdNavigationList_Expander_Color: var(--sapList_Active_TextColor); --fdNavigationList_Content_Background: var(--sapList_Active_Background); --fdNavigationList_Content_Border_Top_Color: var(--fdNavigationList_Content_Border_Color); --fdNavigationList_Content_Border_Left_Color: var(--fdNavigationList_Content_Border_Color); @@ -161,6 +230,9 @@ $block: #{$fd-namespace}-navigation-list; color: var(--fdNavigationList_Text_Color); [class*="sap-icon"] { + @include fd-flex-center(); + + width: 1rem; font-size: var(--fdNavigationList_Icon_Font_Size); } @@ -178,24 +250,138 @@ $block: #{$fd-namespace}-navigation-list; font-size: var(--fdNavigationList_Text_Font_Size); font-family: var(--fdNavigationList_Text_Font_Family); padding-inline-start: var(--fdNavigationList_Text_Offset); + display: var(--fdNavigationList_Text_Display, inline-block); } - &__expander { + &__navigation-indicator { @include fd-reset(); @include fd-flex-center(); @include fd-set-width(var(--fdNavigationList_Expander_Width)); + @include fd-set-height(var(--fdNavigationList_Expander_Height)); height: 100%; - color: var(--fdNavigationList_Text_Color); + color: var(--fdNavigationList_Expander_Color); + display: var(--fdNavigationList_Expander_Display, inline-flex); + border-radius: var(--sapButton_BorderCornerRadius); [class*="sap-icon"] { font-size: var(--fdNavigationList_Expander_Font_Size); } } - @include fd-compact-or-condensed() { + &__indication-arrow { + @include fd-reset(); + @include fd-flex-center(); + @include fd-set-width(var(--fdNavigationList_Expander_Width)); + + height: 100%; + color: var(--fdNavigationList_Expander_Color); + display: var(--fdNavigationList_Indicator_Display, inline-flex); + + [class*="sap-icon"] { + font-size: var(--fdNavigationList_Expander_Font_Size); + } + } + + .#{$block}__popover-body { + padding-block: 0.5rem; + padding-inline: 0.5rem; + } + + @include fd-compact() { --fdNavigationList_Icon_Font_Size: 1rem; --fdNavigationList_Text_Font_Size: var(--sapFontSize); --fdNavigationList_Content_Height: var(--sapElement_Compact_LineHeight); + --fdNavigationList_Expander_Height: 1.5625rem; + --fdNavigationList_Expander_Width: 2rem; + + } + + @include fd-collapsed() { + --fdNavigationList_Content_Width: 3rem; + --fdNavigationList_Text_Display: none; + --fdNavigationList_Content_Padding_Inline_End: 0; + --fdNavigationList_Indicator_Display: none; + --fdNavigationList_Group_Item_Margin_Top: 0.25rem; + + .#{$block}__content { + --fdNavigationList_Expander_Width: 0.75rem; + --fdNavigationList_Expander_Font_Size: 0.875rem; + + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0; + --fdNavigationList_Content_Gap: 0.125rem; + } + + &:not([aria-expanded="true"]) { + @include fd-hover() { + --fdNavigationList_Content_Width: fit-content; + --fdNavigationList_Text_Display: inline-block; + --fdNavigationList_Expander_Display: inline-flex; + --fdNavigationList_Indicator_Display: inline-flex; + --fdNavigationList_Content_Padding_Inline_End: 1rem; + --fdNavigationList_Expander_Width: 2.25rem; + --fdNavigationList_Expander_Font_Size: 1rem; + + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0.375rem; + --fdNavigationList_Content_Gap: 0.5rem; + } + } + + @include fd-active() { + --fdNavigationList_Content_Width: fit-content; + --fdNavigationList_Text_Display: inline-block; + --fdNavigationList_Expander_Display: inline-flex; + --fdNavigationList_Indicator_Display: inline-flex; + --fdNavigationList_Content_Padding_Inline_End: 1rem; + --fdNavigationList_Expander_Width: 2.25rem; + --fdNavigationList_Expander_Font_Size: 1rem; + + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0.375rem; + --fdNavigationList_Content_Gap: 0.5rem; + } + } + + @include fd-focus() { + --fdNavigationList_Content_Width: fit-content; + --fdNavigationList_Text_Display: inline-block; + --fdNavigationList_Expander_Display: inline-flex; + --fdNavigationList_Indicator_Display: inline-flex; + --fdNavigationList_Content_Padding_Inline_End: 1rem; + --fdNavigationList_Expander_Width: 2.25rem; + --fdNavigationList_Expander_Font_Size: 1rem; + + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0.375rem; + --fdNavigationList_Content_Gap: 0.5rem; + } + } + } + } + + .#{$block}__popover-body .#{$block}__content { + --fdNavigationList_Content_Width: fit-content; + --fdNavigationList_Text_Display: inline-block; + --fdNavigationList_Expander_Display: inline-flex; + --fdNavigationList_Indicator_Display: inline-flex; + --fdNavigationList_Content_Padding_Inline_End: 1rem; + --fdNavigationList_Expander_Width: 2.25rem; + --fdNavigationList_Expander_Font_Size: 1rem; + + &:has(.#{$block}__navigation-indicator, .#{$block}__indication-arrow) { + --fdNavigationList_Content_Padding_Inline_End: 0.375rem; + --fdNavigationList_Content_Gap: 0.5rem; + } + + .#{$block}.level-2 { + overflow: visible; + } + } + + .fd-navigation-list__item--group > .fd-navigation-list__content{ + display: none; + } } } diff --git a/packages/styles/src/side-nav.scss b/packages/styles/src/side-nav.scss index f08808ad6e..fb7f3f77a7 100644 --- a/packages/styles/src/side-nav.scss +++ b/packages/styles/src/side-nav.scss @@ -9,155 +9,49 @@ $block-nested-list: #{$fd-namespace}-nested-list; .#{$block} { @include fd-reset(); + @include fd-flex(column); - background-color: var(--sapList_Background); - width: 15rem; - border-right: var(--sapList_BorderWidth) solid; - border-right-color: var(--sapGroup_ContentBorderColor); - display: flex; - flex-direction: column; - justify-content: space-between; - text-shadow: var(--fdSideNav_Text_Shadow); height: 100%; + max-height: 100%; + background: var(--sapList_Background); + width: var(--fdSideNav_Width, 100%); - &__skip-link { + &__container { @include fd-reset(); - @include fd-screen-reader-only(); - - &:focus { - @include fd-link(); + @include fd-flex(column); + + padding-inline: 0.5rem; + + &--top { + flex: 1; + height: 100%; + overflow-y: var(--fdSideNav_Overflow, scroll); + position: relative; + padding-block-start: 0.5rem; + } - position: static; - width: auto; - height: auto; + &--bottom { + padding-block-end: 0.5rem; } } - &__group-header { + &__separator { @include fd-reset(); - height: 2.75rem; - background: var(--sapList_GroupHeaderBackground); - border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); - color: var(--sapList_GroupHeaderTextColor); - display: flex; - align-items: flex-end; - font-size: var(--sapFontSize); - font-weight: bold; - line-height: 2rem; - padding-inline: 1rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + height: 0.0625rem; + min-height: 0.0625rem; + margin-block: 0.25rem; + margin-inline: 0.5rem; + background: var(--sapToolbar_SeparatorColor); } - &__main-navigation { + &__group-header { @include fd-reset(); } - &__utility { - @include fd-reset(); - - margin-top: 3rem; - - &::before { - content: " "; - display: block; - border-top: 0.125rem solid; - border-top-color: var(--sapList_GroupHeaderBorderColor); - margin-block: 0.25rem; - margin-inline: 0.5rem; - } + @include fd-collapsed() { + --fdSideNav_Width: 4rem; + --fdSideNav_Overflow: visible; } - &--condensed { - width: 2.75rem; - - .#{$fd-namespace}-nested-list { - &__title, - &__group-header, - &__button { - display: none; - } - - &__link, - &__content { - border-bottom: none; - text-shadow: var(--fdSideNav_Text_Shadow); - - @include fd-selected() { - border-bottom: var(--sapList_BorderWidth) solid; - border-bottom-color: var(--sapList_SelectionBorderColor); - } - - &.has-child { - position: relative; - - &::after { - content: ""; - min-width: 0; - min-height: 0; - margin-inline-end: 0.125rem; - margin-block-end: 0.0625rem; - border-style: solid; - border-width: 0.375rem 0.375rem 0 0; - border-color: transparent var(--sapContent_IconColor) transparent transparent; - right: 0; - bottom: 0; - position: absolute; - } - } - } - } - } - - .#{$fd-namespace}-nested-list { - &__icon { - color: var(--sapContent_IconColor); - } - - &__link { - &.has-child { - &::after { - color: var(--sapContent_IconColor); - } - - &:active::after { - color: var(--sapList_Active_TextColor); - } - } - } - } - - @include fd-rtl() { - border-right: none; - border-left: var(--sapList_BorderWidth) solid; - border-left-color: var(--sapGroup_ContentBorderColor); - - &.#{$block}--condensed { - width: 2.75rem; - - .#{$block-nested-list}__item { - .#{$block-nested-list}__content, - .#{$block-nested-list}__link { - &.has-child { - &::after { - right: auto; - left: 0; - transform: rotate(90deg); - } - } - } - } - - &__item { - .#{$block-nested-list}__item { - .#{$block-nested-list}__link, - .#{$block-nested-list}__content { - padding-inline: 1rem; - } - } - } - } - } } diff --git a/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss b/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss index e7c4049d1a..76eb46d85f 100644 --- a/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss +++ b/packages/styles/src/theming/common/navigation-list/_sap_horizon.scss @@ -3,5 +3,5 @@ :root { --fdNavigationList_Content_Border_Radius: var(--sapButton_BorderCornerRadius); --fdNavigationList_Content_Border_Color: transparent; - --fdNavigationList_Content_Outline_Offset: 0; + --fdNavigationList_Content_Outline_Offset: -0.125rem; } diff --git a/packages/styles/stories/Components/side-navigation/collapsed.example.html b/packages/styles/stories/Components/side-navigation/collapsed.example.html new file mode 100644 index 0000000000..0471c9be84 --- /dev/null +++ b/packages/styles/stories/Components/side-navigation/collapsed.example.html @@ -0,0 +1,373 @@ +
+
+ +
+
+ + + diff --git a/packages/styles/stories/Components/side-navigation/expanded.example.html b/packages/styles/stories/Components/side-navigation/expanded.example.html new file mode 100644 index 0000000000..f14a6eb218 --- /dev/null +++ b/packages/styles/stories/Components/side-navigation/expanded.example.html @@ -0,0 +1,269 @@ +
+ +
+ + + diff --git a/packages/styles/stories/Components/side-navigation/floating.example.html b/packages/styles/stories/Components/side-navigation/floating.example.html new file mode 100644 index 0000000000..3ef18ce81f --- /dev/null +++ b/packages/styles/stories/Components/side-navigation/floating.example.html @@ -0,0 +1,295 @@ +
+
+
+ +
+
+ +
+
+ + + + + + + + + + +
+ + + diff --git a/packages/styles/stories/Components/side-navigation/side-navigation.stories.js b/packages/styles/stories/Components/side-navigation/side-navigation.stories.js new file mode 100644 index 0000000000..e3a6567eaf --- /dev/null +++ b/packages/styles/stories/Components/side-navigation/side-navigation.stories.js @@ -0,0 +1,78 @@ + +import collapsedExampleHtml from "./collapsed.example.html?raw"; +import expandedExampleHtml from "./expanded.example.html?raw"; +import floatingExampleHtml from "./floating.example.html?raw"; +import '../../../src/side-nav.scss'; +import '../../../src/navigation-list.scss'; +import '../../../src/button.scss'; +import '../../../src/icon.scss'; +import '../../../src/_nested-list.scss'; +import '../../../src/popover.scss'; +export default { + title: 'Components/Side Navigation', + parameters: { + description: `The Side Navigation is an additional option to add a navigation to an application. Same as the vertical navigation it offers the user easy access to multiple pages per space. Side Navigation is triggered by the Menu Icon in Shellbar and can be hidden, collapsed or expanded. + +## Anatomy +The Side Navigation consists of the following elements:
+ + + +The List structure is based on **Navigation List** + + + `, + tags: [] + } +}; +export const Expanded = () => expandedExampleHtml; +Expanded.storyName = 'Expanded State, Defaut (fixed) Style'; +Expanded.parameters = { + docs: { + description: { + story: `` + } + } +}; + +export const Collapsed = () => collapsedExampleHtml; +Collapsed.storyName = 'Collapsed State, Defaut (fixed) Style'; +Collapsed.parameters = { + docs: { + description: { + story: `` + } + } +}; + +export const Floating = () => floatingExampleHtml; +Floating.storyName = 'Floating (Overlay) Style, Always Expanded'; +Floating.parameters = { + docs: { + description: { + story: `Additional to the fixed default style a floating variant of the Side Navigation is possible. This is always expanded.` + } + } +}; \ No newline at end of file diff --git a/packages/styles/stories/Components/user-menu/default.example.html b/packages/styles/stories/Components/user-menu/default.example.html index 7e8599410e..e8a9edcff7 100644 --- a/packages/styles/stories/Components/user-menu/default.example.html +++ b/packages/styles/stories/Components/user-menu/default.example.html @@ -176,259 +176,3 @@

Other Accounts (2)

- - - - - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/complex-cozy-side-nav.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/complex-cozy-side-nav.example.html deleted file mode 100644 index c5da0e7d2f..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/complex-cozy-side-nav.example.html +++ /dev/null @@ -1,94 +0,0 @@ -
- Skip navigation -
- Group Header 1 -
- - -
diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/condensed-state-cozy.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/condensed-state-cozy.example.html deleted file mode 100644 index 65f4d7f08c..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/condensed-state-cozy.example.html +++ /dev/null @@ -1,55 +0,0 @@ - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/cozy-grouping.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/cozy-grouping.example.html deleted file mode 100644 index b9d1f14e7e..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/cozy-grouping.example.html +++ /dev/null @@ -1,74 +0,0 @@ -
- Skip navigation - - -
diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/cozy-icons.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/cozy-icons.example.html deleted file mode 100644 index 48c3e0c445..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/cozy-icons.example.html +++ /dev/null @@ -1,47 +0,0 @@ -
- Skip navigation - - -
diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/cozy.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/cozy.example.html deleted file mode 100644 index c2db778617..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/cozy.example.html +++ /dev/null @@ -1,41 +0,0 @@ -
- Skip navigation - - -
diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-popover.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-popover.example.html deleted file mode 100644 index 265bec95fd..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-popover.example.html +++ /dev/null @@ -1,71 +0,0 @@ -
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-group-headers.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-group-headers.example.html deleted file mode 100644 index 0877c0526d..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-group-headers.example.html +++ /dev/null @@ -1,121 +0,0 @@ - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-icons-only-in-first-level.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-icons-only-in-first-level.example.html deleted file mode 100644 index ffef43a5a4..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-icons-only-in-first-level.example.html +++ /dev/null @@ -1,115 +0,0 @@ - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-icons.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-icons.example.html deleted file mode 100644 index 6399ed2c82..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-icons.example.html +++ /dev/null @@ -1,157 +0,0 @@ - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-links.example.html b/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-links.example.html deleted file mode 100644 index 2d72fc8fb7..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-links.example.html +++ /dev/null @@ -1,115 +0,0 @@ - diff --git a/packages/styles/stories/Deprecated/Components/side-navigation/side-navigation.stories.js b/packages/styles/stories/Deprecated/Components/side-navigation/side-navigation.stories.js deleted file mode 100644 index 340af2c48c..0000000000 --- a/packages/styles/stories/Deprecated/Components/side-navigation/side-navigation.stories.js +++ /dev/null @@ -1,143 +0,0 @@ -import nestedListPopoverExampleHtml from "./nested-list-popover.example.html?raw"; -import nestedListWithoutLinksExampleHtml from "./nested-list-without-links.example.html?raw"; -import nestedListWithGroupHeadersExampleHtml from "./nested-list-with-group-headers.example.html?raw"; -import nestedListWithIconsOnlyInFirstLevelExampleHtml from "./nested-list-with-icons-only-in-first-level.example.html?raw"; -import nestedListWithoutIconsExampleHtml from "./nested-list-without-icons.example.html?raw"; -import condensedStateCozyExampleHtml from "./condensed-state-cozy.example.html?raw"; -import complexCozySideNavExampleHtml from "./complex-cozy-side-nav.example.html?raw"; -import cozyGroupingExampleHtml from "./cozy-grouping.example.html?raw"; -import cozyIconsExampleHtml from "./cozy-icons.example.html?raw"; -import cozyExampleHtml from "./cozy.example.html?raw"; -import '../../../../src/side-nav.scss'; -import '../../../../src/button.scss'; -import '../../../../src/icon.scss'; -import '../../../../src/_nested-list.scss'; -import '../../../../src/popover.scss'; -export default { - title: 'Deprecated/Components/Side Navigation', - parameters: { - description: ` -## DEPRECATED - -This component is deprecated in favor of the vertical navigation component. -The side navigation area can be used to display navigation structures with up to two levels and contains links that change the content area. -The side navigation consists of two container sections: the **main navigation section** (top-aligned) with links used to navigate within the user’s current work context, -and the **utility section** (bottom-aligned) that contains links to additional information. Both of these sections use a nested list to display navigation items. - -##Usage -**Use the side navigation if:** - -- You need to display global navigation structures of up to two levels. -- Your scenarios are in the tooling or administration space. -- If you want the entries to change as though they are dynamic content. - - -**Do not use the side navigation if:** - -- Your scenarios are not in the tooling or administration space. -- You want the entries to open a new browser window. - -##States -Side navigation can be viewed in three different states: - -- **Expanded:** everything is shown; icons and/or text. -- **Condensed:** only icons are shown; text-only condensed state is not supported. -- **Off-canvas:** side navigation is completely off-screen, and can be triggered via the menu icon in the shellbar. - -**Note:** It is recommend to use only two states per device. - - `, - tags: ['f3', 'a11y', 'theme'] - } -}; -export const Cozy = () => cozyExampleHtml; -Cozy.storyName = 'Default'; -Cozy.parameters = { - docs: { - description: { - story: ` -The default side navigation is displayed in cozy mode with one navigation level. Because there is only one level, all further navigation is shown in the content area. The \`fd-nested-list--text-only\` modifier class should be added to the lists in both the main and utility sections. - ` - } - } -}; -export const CozyIcons = () => cozyIconsExampleHtml; -CozyIcons.storyName = 'Icons'; -CozyIcons.parameters = { - docs: { - description: { - story: ` -Side navigation can be displayed with icons. In the expanded state, entries can consist of only text or an icon with text. The use or non-use of icons must be consistent for all links on one level. Do not combine entries with and without icons on the same level. To display icons in list items, add the \`fd-nested-list__icon\` class within the list items. - ` - } - } -}; -export const CozyGrouping = () => cozyGroupingExampleHtml; -CozyGrouping.storyName = 'Group'; -CozyGrouping.parameters = { - docs: { - description: { - story: ` -Side navigation can be displayed with group headers that organize the entries, which is ideal for when there is more than one level of hierarchy. When they are grouped, the entries on the first level are just headers and don't trigger navigation themselves. -

It's recommended to use up to two levels of navigation, however; for more levels of navigation, use the content area. When expanded, the \`is-expanded\` class should also be extended to the content element. To trigger another level, use the \`fd-nested-list__button\` element. - ` - } - } -}; -export const ComplexCozySideNav = () => complexCozySideNavExampleHtml; -ComplexCozySideNav.storyName = 'Complex'; -ComplexCozySideNav.parameters = { - docs: { - description: { - story: ` -Side navigation can display several different features such as icons, group headers, and two levels of navigation. - ` - } - } -}; -export const CondensedStateCozy = () => condensedStateCozyExampleHtml; -CondensedStateCozy.storyName = 'Condensed'; -CondensedStateCozy.parameters = { - docs: { - description: { - story: ` -Side navigation can be displayed in a condensed state, showing only icons that represent the navigation entries. When the user selects an entry from the navigation, a **Popover** is displayed. The default size for the popover body is often longer than the text length. However, the length can be adjusted to match the text length by adding the \`fd-popover__body--dropdown-fill\` class to the \`fd-popover__body\` element. -

To display a condensed side navigation, add the \`fd-side-nav--condensed\` modifier class to the main element. - ` - } - } -}; -export const NestedListWithoutIcons = () => nestedListWithoutIconsExampleHtml; -NestedListWithoutIcons.parameters = { - docs: { - disable: true - } -}; -export const NestedListWithIconsOnlyInFirstLevel = () => nestedListWithIconsOnlyInFirstLevelExampleHtml; -NestedListWithIconsOnlyInFirstLevel.parameters = { - docs: { - disable: true - } -}; -export const NestedListWithGroupHeaders = () => nestedListWithGroupHeadersExampleHtml; -NestedListWithGroupHeaders.parameters = { - docs: { - disable: true - } -}; -export const NestedListWithoutLinks = () => nestedListWithoutLinksExampleHtml; -NestedListWithoutLinks.parameters = { - docs: { - disable: true - } -}; -export const NestedListPopover = () => nestedListPopoverExampleHtml; -NestedListPopover.parameters = { - docs: { - description: { - story: ` -Nested list can be displayed inside popover. - ` - } - } -}; \ No newline at end of file diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index a2755eef86..37d6f31bef 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -42362,207 +42362,649 @@ exports[`Check stories > Components/Shellbar > Story Responsiveness > Should mat " `; -exports[`Check stories > Components/Skeleton > Story Circle > Should match snapshot 1`] = ` -"
- - - - - - - - - - - - - - - -
-" -`; - -exports[`Check stories > Components/Skeleton > Story ComplexExamples > Should match snapshot 1`] = ` -"
- - - - - - - - - - - - - - - - - - - - -
-" -`; - -exports[`Check stories > Components/Skeleton > Story Lines > Should match snapshot 1`] = ` -"

3 lines

-
- - - - - - - - - - - - - - - - +exports[`Check stories > Components/Side Navigation > Story Collapsed > Should match snapshot 1`] = ` +"
+
+
-
-
-
+ +
+ +
+ +
+
-

-

Hover (on one handle)

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

-

Active (on one handle)

-
-
-
-
-
-
-
-
-
-
-
-
-
+" +`; -

-

Focus

-
-
-
-
-
-
-
-
-
-
-
-
+exports[`Check stories > Components/Side Navigation > Story Expanded > Should match snapshot 1`] = ` +"
+
@@ -42570,99 +43012,606 @@ exports[`Check stories > Components/Slider > Story Range > Should match snapshot " `; -exports[`Check stories > Components/Slider > Story Standard > Should match snapshot 1`] = ` -" -
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-

-
-
-
-
-
-
-
+exports[`Check stories > Components/Side Navigation > Story Floating > Should match snapshot 1`] = ` +"
+
+
+
-
-
-

-
-
-
-
-
-
-
+
+
+ + + + + + + + + +
+ + " `; -exports[`Check stories > Components/Slider > Story Ticks > Should match snapshot 1`] = ` -" -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+exports[`Check stories > Components/Skeleton > Story Circle > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + +
" `; -exports[`Check stories > Components/Slider > Story TicksAndLabels > Should match snapshot 1`] = ` +exports[`Check stories > Components/Skeleton > Story ComplexExamples > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + + + + + + + +
" -
-
-
-
-
-
-
-
-
-
-
-
+`; + +exports[`Check stories > Components/Skeleton > Story Lines > Should match snapshot 1`] = ` +"

3 lines

+
+ + + + + + + + + + + + + + + + + + + +
+ +

2 lines

+
+ + + + + + + + + + + + + + + + + + +
+" +`; + +exports[`Check stories > Components/Skeleton > Story Skeleton > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + + + + + + + + + +
+" +`; + +exports[`Check stories > Components/Slider > Story MobileMode > Should match snapshot 1`] = ` +" +
+
+
+
+
+
+
+
+
+
+" +`; + +exports[`Check stories > Components/Slider > Story Range > Should match snapshot 1`] = ` +"

Regular

+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

+

Hover (on one handle)

+
+
+
+
+
+
+
+
+
+
+
+
+
+ +

+

Active (on one handle)

+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +

+

Focus

+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +" +`; + +exports[`Check stories > Components/Slider > Story Standard > Should match snapshot 1`] = ` +" +
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+ +" +`; + +exports[`Check stories > Components/Slider > Story Ticks > Should match snapshot 1`] = ` +" +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+" +`; + +exports[`Check stories > Components/Slider > Story TicksAndLabels > Should match snapshot 1`] = ` +" +
+
+
+
+
+
+
+
+
+
+
+
@@ -50189,262 +51138,6 @@ exports[`Check stories > Components/User Menu > Story Default > Should match sna
- - - - - " `; @@ -50482,1245 +51175,749 @@ exports[`Check stories > Components/User Menu > Story Mobile > Should match snap
-
-
-
-
-
- -
-

Other Accounts (2)

-
- - -
-
-
-
    -
  • - LM -
    -
    Lisa Miller
    -
    test.lisa.miller@test.com
    -
    -
    • -
  • - - -
    -
    Lisa Miller
    -
    lisa.miller@test.com
    -
    -
    • -
-
-
-
    -
  • -
    -
    - - - - Settings -
    -
    - -
    -
    -
    • -
  • -
    -
    - - - - Legal Information -
    -
    -
    • -
  • -
    -
    - - - - About -
    -
    -
    • -
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
Settings
-
-
-
-
-
    -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
  • -
    -
    - - - - Settings Item -
    -
    -
    • -
-
-
-
-
- -
-
-
-
-
-
-" -`; - -exports[`Check stories > Components/Variant Management > Story DirtyLabel > Should match snapshot 1`] = ` -" -
-
-

- Unsaved Variant Title -

- * - -
-
-
-
-

- Unsaved Variant Title -

- - changed - - -
-
-" -`; - -exports[`Check stories > Components/Variant Management > Story Sizes > Should match snapshot 1`] = ` -"
-
-

- Variant Title H1 -

- -
-
-
-
-
-

- Variant Title H2 -

- -
-
-
-
-
-

- Variant Title H3 -

- -
-
-
-
-
-

- Variant Title H4 -

- -
-
-
-
-
-
- Variant Title H5 -
- -
-
-
-
-
-
- Variant Title H6 -
- -
-
-
-
-
-
- Object Header -
- -
-
-
-
-
-
- Snapped Object Header -
- -
-
-
-
-
-
- Table Header -
- -
-
-
-
-
-

- Disabled Variant Title H4 -

- -
-
" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Condensed > Should match snapshot 1`] = ` -"
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Cozy > Should match snapshot 1`] = ` -"
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Grouping > Should match snapshot 1`] = ` -"
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story GroupingOverflow > Should match snapshot 1`] = ` -"
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Indication > Should match snapshot 1`] = ` -"
- -
-

-
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Text > Should match snapshot 1`] = ` -"
- -
-" -`; - -exports[`Check stories > Components/Vertical Navigation > Story Utility > Should match snapshot 1`] = ` -"
- - -
-

-
- - -
-" -`; +
+
+
+
+ +
+
+
+
+
-exports[`Check stories > Components/Wizard > Story Customized > Should match snapshot 1`] = ` -"
-
- -
  • -
    - - 3 -
    - Step 3: Branching +
    • +
  • +
    +
    + + + + Settings Item +
    -     - -
    • - - - -
    -
    -
    - Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat -
    -
    - + +
  • +
    +
    + + + + Settings Item +
    +
    +
    • +
  • +
    +
    + + + + Settings Item +
    +
    +
    • +
  • +
    +
    + + + + Settings Item +
    +
    +
    • +
  • +
    +
    + + + + Settings Item +
    +
    +
    • +
  • +
    +
    + + + + Settings Item +
    +
    +
    • +
    -
    -
    - - +
    +
    +" +`; + +exports[`Check stories > Components/Variant Management > Story DirtyLabel > Should match snapshot 1`] = ` +" +
    +
    +

    + Unsaved Variant Title +

    + * + +
    +
    +
    +
    +

    + Unsaved Variant Title +

    + + changed + + +
    +
    " `; -exports[`Check stories > Components/Wizard > Story DefaultExample > Should match snapshot 1`] = ` -"
    -
    + " `; -exports[`Check stories > Components/Wizard > Story Mobile > Should match snapshot 1`] = ` -"
    -
    -

    Next Step button after content

    -
    -
    -
    + +
  • + + Deliveries +
    • + + +
    +" +`; -
    -

    Next Step button above the floating footer

    -
    - +
    +

    +
    +
    + +
  • + + Customers +
    • +
  • + + Deliveries +
    • + + " `; -exports[`Check stories > Components/Wizard > Story Responsive > Should match snapshot 1`] = ` -"
    -
    + + +
    +

    Next Step button above the floating footer

    +
    +
    - -
  • -
    - - - - -
    - Products - (Optional) +
    • +
  • +
    + + + + +
    + Contact + (Optional) +
    +     + +
    +
    • +
  • +
    +
    +
    + + + + +
    + Payment +
    +     +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    +
    • +
  • +
    + + + + +
    + Bill To +
    +     + +
    +
    • +
  • +
    + + + + +
    + Ship To +
    +     + +
    +
    • +
  • +
    + + + + +
    + Products + (Optional) +
    +     +
    - - - -
    • -
  • -
    - - - - -
    - Additional Information +
    • +
  • +
    + + + + +
    + Additional Information +
    +     +
    - - +
    • + + +
    +
    +
    +
    + +
    - - - -
    -
    -
    - Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat -
    -
    - -
    -
    -
    -
    + - + + + + " `; -exports[`Check stories > Components/Wizard > Story RevertedSteps > Should match snapshot 1`] = ` +exports[`Check stories > Components/Wizard > Story Responsive > Should match snapshot 1`] = ` "
    + + + +

    + +
    + +
    +
    +
    + Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat +
    +
    + +
    +
    +
    + +
    -exports[`Check stories > Deprecated/Components/Side Navigation > Story NestedListWithoutIcons > Should match snapshot 1`] = ` -" - -
  • - - Level 1 Item - -
    • -
  • - - Level 1 Item - -
    • - -" -`; - -exports[`Check stories > Deprecated/Components/Side Navigation > Story NestedListWithoutLinks > Should match snapshot 1`] = ` -" + + " `;