Merge pull request #330 from wpmudev/new/navigation-design

New/navigation design
wpmudev · Oct 17, 2024 · bdcf45b · bdcf45b
2 parents 29065b6 + 8c0ace7
commit bdcf45b
Show file tree

Hide file tree

Showing 58 changed files with 3,856 additions and 136 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -46,7 +46,7 @@ module.exports = {
 		options: {},
 	},
 	typescript: {
-		reactDocgen: "react-docgen-typescript-plugin",
+		reactDocgen: "none",
 	},
 	docs: {
 		autodocs: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-container.scss b/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-container.scss
@@ -21,6 +21,12 @@
 				background: $color-extended-alpha-grey-90;
 			}
 
+			@include modifier(full) {
+				@include modifies-element(inner) {
+					width: 100%;
+				}
+			}
+
 			@include modifier(has-container) {
 				z-index: 1;
 				width: $drawer-size-lg;

diff --git a/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-header.scss b/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-header.scss
@@ -21,11 +21,19 @@
 				padding: $spacing-lg $spacing-xl;
 			}
 
+			@include element(back) {
+				@include modifier(md) {
+					@include media(min-width, md) {
+						display: none;
+					}
+				}
+			}
+
 			@include element(header-title) {
 				display: flex;
 				align-items: center;
 				font-weight: $font-weight-lg;
-				gap: $spacing-sm;
+				gap: $spacing-md;
 			}
 		}
 	}

diff --git a/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-inner.scss b/packages/assets/css/src/scss/_components/_drawer/_elements/_drawer-inner.scss
@@ -30,6 +30,10 @@
 				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 				visibility: hidden;
 				width: $drawer-size-lg;
+
+				@include media(max-width, sm) {
+					width: 100%;
+				}
 			}
 
 			@include modifier(overlay) {

diff --git a/packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-popover.scss b/packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-popover.scss
@@ -17,7 +17,7 @@
 				top: 100%;
 				left: 0;
 				display: none;
-				margin: $spacing-md 0 0;
+				margin: $spacing-lg 0 0;
 				padding: $spacing-md 0;
 				border-radius: $border-radius-md;
 				background: $color-extended-neutral-100;
@@ -43,6 +43,19 @@
 					}
 				}
 
+				@include modifier(arrow) {
+					position: absolute;
+					top: -#{$dropdown-position-xs};
+					left: $dropdown-position-md;
+					box-shadow: $border-width-sm $border-width-sm 0px $border-width-xs
+						$color-extended-neutral-80 inset;
+					height: $dropdown-size-height-3xs;
+					width: $dropdown-size-width-2xs;
+					height: $dropdown-size-height-2xs;
+					background: $color-extended-neutral-100;
+					transform: rotate(45deg);
+				}
+
 				@include modifier(sm) {
 					min-width: $dropdown-size-width-sm;
 				}

diff --git a/packages/assets/css/src/scss/_components/_dropdown/_modifiers/_dropdown-placement.scss b/packages/assets/css/src/scss/_components/_dropdown/_modifiers/_dropdown-placement.scss
@@ -12,7 +12,12 @@
 			@include element(popover) {
 				@include modifier(placement-left) {
 					left: auto;
-					right: 0;
+					right: -#{$dropdown-position-sm};
+
+					.sui-#{$block}__popover--arrow {
+						right: $dropdown-position-md;
+						left: auto;
+					}
 				}
 
 				@include modifier(placement-top) {

diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-container.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-container.scss
@@ -17,7 +17,7 @@
 			display: flex;
 			gap: $spacing-lg;
 			justify-content: space-between;
-			padding: $spacing-lg $spacing-2xl;
+			padding: $spacing-default $spacing-2xl;
 
 			.sui-dropdown__popover {
 				.sui-dropdown__menu-group-title {
@@ -36,6 +36,29 @@
 				}
 			}
 
+			@include element(drawer) {
+				.sui-drawer {
+					top: 118px;
+					border-top: $border-width-sm solid $color-extended-neutral-80;
+				}
+			}
+
+			@include element(actions) {
+				display: flex;
+				align-items: center;
+				gap: $spacing-lg;
+				padding-left: $spacing-lg;
+				border-left: $border-width-sm solid $color-extended-neutral-80;
+
+				.sui-dropdown {
+					display: flex;
+				}
+
+				.sui-button {
+					margin: 0;
+				}
+			}
+
 			@include media(max-width, md) {
 				padding: $spacing-xl;
 			}

diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-nav.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-nav.scss
@@ -18,14 +18,12 @@
 				justify-content: flex-end;
 				gap: $spacing-md;
 				margin: 0;
-
-				@include media(max-width, md) {
-					gap: $spacing-lg;
-				}
 			}
 
 			@include element(nav-item) {
+				display: flex;
 				margin: 0;
+				gap: $spacing-md;
 			}
 		}
 	}

diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-user.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-user.scss
@@ -26,6 +26,31 @@
 					color: $color-extended-neutral-60;
 				}
 			}
+
+			@include element(dropdown) {
+				.sui-dropdown__popover {
+					border: $border-width-sm solid $color-extended-neutral-80;
+				}
+				@include modifier(split) {
+					.sui-dropdown__menu-items {
+						.sui-dropdown__menu-item {
+							&:last-child {
+								position: relative;
+								margin-top: $spacing-lg;
+
+								&:after {
+									content: "";
+									position: absolute;
+									top: -#{$spacing-md};
+									left: 0;
+									right: 0;
+									border-top: $border-width-sm solid $color-extended-neutral-80;
+								}
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 

diff --git a/packages/assets/css/src/scss/_components/_wpmudev/_elements/_elements.scss b/packages/assets/css/src/scss/_components/_wpmudev/_elements/_elements.scss
@@ -0,0 +1 @@
+@forward "./wpmudev-list";