pkp/pkp-lib#9890 Update the design for the focused item state in Side…

…Menu (pkp#408) * pkp/pkp-lib#9890 Define outline config in tailwind * pkp/pkp-lib#9890 Map index in items data for sidemenu component * pkp/pkp-lib#9890 Define border and outline classes for SideMenu component * pkp/pkp-lib#9890 Update menu items mapping in sidenav for sidemenu * pkp/pkp-lib#9890 Update links to sidemenu stories * pkp/pkp-lib#9890 Add command on root items to navigate to links * pkp/pkp-lib#9890 Add new colorVariant 'attention' to Badge component * pkp/pkp-lib#9890 Remove added outlineColor in tailwind config * pkp/pkp-lib#9890 Change background color when an item is infocus in sidemenu component * pkp/pkp-lib#9890 Add onActionFn parameter in useSideMenu api and map item.command function to handle click events * pkp/pkp-lib#9890 Add link color override in DropdownActions component * pkp/pkp-lib#9890 Add comment on setting the css property for itemlink in SideMenu component * pkp/pkp-lib#9890 Use SideNav component in Page story * pkp/pkp-lib#9890 Remove app__nav css in Page container vue * pkp/pkp-lib#9890 Wrap item label in a span - SideMenu component * pkp/pkp-lib#9890 Update items when links get updated in SideNav component
blesildaramirez · Sep 18, 2024 · 3d775e8 · 3d775e8
1 parent 7cd7278
commit 3d775e8
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 228 deletions.
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
@@ -54,6 +54,7 @@ export default {
 					'negative-bg',
 					'stage-in-review-bg',
 					'success-bg',
+					'attention',
 				].includes(prop),
 		},
 		/**  */
@@ -74,13 +75,17 @@ export default {
 				const colorVariant = this.colorVariant;
 				return {
 					// base
-					'inline-block py-1 px-4 text-base-normal rounded-[1.2em] border': true,
+					'inline-block py-1 px-3 text-base-normal rounded-[1.2em] border': true,
 					// default
 					'text-default border-light': colorVariant === 'default',
 					// default-on-dark
 					'text-on-dark border-light': colorVariant === 'default-on-dark',
 					// primary
-					'border-primary text-primary': colorVariant === 'primary',
+					'border-primary text-primary bg-secondary':
+						colorVariant === 'primary',
+					// attention-border
+					'border-attention text-attention bg-secondary':
+						colorVariant === 'attention',
 					// primary-bg
 					'bg-primary text-on-dark border-primary':
 						colorVariant === 'primary-bg',

diff --git a/src/components/Container/Page.stories.js b/src/components/Container/Page.stories.js
@@ -1,6 +1,7 @@
 import {computed} from 'vue';
 import Page from './Page.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
+import SideNav from '@/components/SideNav/SideNav.vue';
 import PageMock from '@/mocks/page';
 
 export default {
@@ -10,7 +11,7 @@ export default {
 
 export const Default = {
 	render: (args) => ({
-		components: {Page, Dropdown},
+		components: {Page, Dropdown, SideNav},
 		setup() {
 			const classes = computed(() => {
 				let _classes = [];
@@ -108,50 +109,8 @@ export const Default = {
 				</header>
 
 				<div class="app__body">
-					<nav
-						v-if="!!menu && Object.keys(menu).length > 1"
-						class="app__nav"
-						aria-label="Site Navigation"
-					>
-						<ul>
-							<li
-								v-for="(menuItem, key) in menu"
-								:key="key"
-								:class="!!menuItem.submenu ? 'app__navGroup' : ''"
-							>
-								<div
-									v-if="!!menuItem.submenu"
-									class="app__navItem app__navItem--hasSubmenu"
-								>
-									{{ menuItem.name }}
-								</div>
-								<a
-									v-else
-									class="app__navItem"
-									:class="menuItem.isCurrent ? 'app__navItem--isCurrent' : ''"
-									:href="menuItem.url"
-								>
-									{{ menuItem.name }}
-								</a>
-								<ul v-if="!!menuItem.submenu">
-									<li
-										v-for="(submenuItem, submenuKey) in menuItem.submenu"
-										:key="submenuKey"
-									>
-										<a
-											class="app__navItem"
-											:class="
-												submenuItem.isCurrent ? 'app__navItem--isCurrent' : ''
-											"
-											:href="submenuItem.url"
-										>
-											{{ submenuItem.name }}
-										</a>
-									</li>
-								</ul>
-							</li>
-						</ul>
-					</nav>
+					<SideNav :links="menu" aria-label="Site Navigation">
+					</SideNav>
 					<main class="app__main">
 						<div class="app__page">
 							<nav

diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
@@ -371,73 +371,6 @@ export default {
 	align-items: stretch;
 }
 
-.app__nav {
-	flex: 0 0 15rem;
-	padding-top: 1.5rem;
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
-	font-size: @font-sml;
-	line-height: 1.5rem;
-
-	ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-}
-
-.app__navGroup {
-	margin-top: 2rem;
-	margin-bottom: 2rem;
-}
-
-.app__navItem {
-	display: inline-block;
-	padding: 0.25rem 0.5rem;
-	color: @bg-anchor;
-
-	.app__navItem {
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
-.app__navItem--hasSubmenu {
-	font-weight: @bold;
-}
-
-a.app__navItem {
-	text-decoration: none;
-
-	&:hover {
-		color: @primary;
-	}
-
-	&:focus {
-		box-shadow: 0 0 0 1px @primary;
-		border-radius: @radius;
-		outline: 0;
-		color: @bg-anchor;
-	}
-}
-
-a.app__navItem--isCurrent {
-	background: @bg-anchor;
-	border-radius: @radius;
-	font-weight: bold;
-	color: #fff;
-
-	&:hover {
-		color: #fff;
-	}
-
-	&:focus {
-		box-shadow: none;
-		background: @primary;
-		color: #fff;
-	}
-}
-
 .app__main {
 	padding: 1rem;
 	width: 100%;

diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue
@@ -126,3 +126,14 @@ const isValidAction = (action) => {
 	return action?.label && (action?.url || action?.name);
 };
 </script>
+
+<style lang="less" scoped>
+@import '../../styles/_import';
+
+/* Override legacy styles for: a:hover, a:focus, where the color is being set to #008acb */
+a.text-on-dark:hover,
+a.text-on-dark:focus,
+a.text-on-dark:active {
+	color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+</style>
diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js
@@ -513,10 +513,9 @@ const SideModalWithSideMenu = {
 			},
 		];
 
-		const {sideMenuProps, setExpandedKeys} = useSideMenu(
-			items,
-			'review_round_1',
-		);
+		const {sideMenuProps, setExpandedKeys} = useSideMenu(items, {
+			activeItemKey: 'review_round_1',
+		});
 		setExpandedKeys(['workflow', 'review', 'publication']);
 
 		return {metadata, generalInformation, items, sideMenuProps};