feat(SW-272) link style changes

2024-09-26 11:17:56 +02:00
parent 44d201c8a1
commit 3f7b8a524e
8 changed files with 64 additions and 42 deletions
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -1,6 +1,5 @@
 "use client"

-import Link from "next/link"
 import { useIntl } from "react-intl"

 import { MembershipLevelEnum } from "@/constants/membershipLevels"
@@ -9,6 +8,7 @@ import { trpc } from "@/lib/trpc/client"

 import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
@@ -70,6 +70,7 @@ export default function MyPagesMenuContent({
                  <Link
                    href={link.originalUrl || link.url}
                    onClick={toggleOpenStateFn}
+                    variant="menu"
                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
                  >
                    {link.linkText}
@@ -82,6 +83,7 @@ export default function MyPagesMenuContent({
                  <Link
                    href={logout[lang]}
                    prefetch={false}
+                    variant="menu"
                    className={`${styles.link} ${styles.smallLink}`}
                  >
                    {intl.formatMessage({ id: "Log out" })}
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -32,26 +32,6 @@
  list-style: none;
 }

-.link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-  padding: var(--Spacing-x1);
-  gap: var(--Spacing-x-one-and-half);
-  color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  border-radius: var(--Corner-radius-Medium);
-}
-
-.link:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
-}
-
 .link.smallLink {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
@@ -64,6 +44,10 @@
  opacity: 0;
 }

+.arrow {
+  flex-shrink: 0;
+}
+
@media screen and (min-width: 768px) {
  .myPagesMenuContent {
    padding: var(--Spacing-x2) var(--Spacing-x4);
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -11,7 +11,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"

 import styles from "./megaMenu.module.css"

-import { MegaMenuProps } from "@/types/components/header/megaMenu"
+import type { MegaMenuProps } from "@/types/components/header/megaMenu"

 export default function MegaMenu({
  isMobile,
@@ -60,7 +60,7 @@ export default function MegaMenu({
          {submenu.map((item) => (
            <li key={item.title} className={styles.submenusItem}>
              <Caption textTransform="uppercase" asChild>
-                <span>{item.title}</span>
+                <span className={styles.submenuTitle}>{item.title}</span>
              </Caption>
              <ul className={styles.submenu}>
                {item.links.map(({ title, link }) =>
@@ -68,11 +68,15 @@ export default function MegaMenu({
                    <li key={title} className={styles.submenuItem}>
                      <Link
                        href={link.url}
-                        color="burgundy"
+                        variant="menu"
                        className={styles.link}
                        onClick={closeMegaMenu}
                      >
                        {title}
+                        <ArrowRightIcon
+                          color="burgundy"
+                          className={styles.arrow}
+                        />
                      </Link>
                    </li>
                  ) : null
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
@@ -13,8 +13,10 @@
 .submenus {
  list-style: none;
  display: grid;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x2) var(--Spacing-x4);
+}
+
+.submenuTitle {
+  padding-left: var(--Spacing-x1);
 }

 .submenu {
@@ -31,10 +33,16 @@
  align-content: start;
 }

-.link {
-  padding: var(--Spacing-x1) 0;
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  width: 100%;
+.linkIcon {
+  display: none;
+}
+
+.link:not(:hover) .arrow {
+  opacity: 0;
+}
+
+.arrow {
+  flex-shrink: 0;
 }

 .backWrapper {
@@ -68,10 +76,17 @@
    grid-template-rows: max-content 1fr max-content;
  }

+  .submenus {
+    padding: var(--Spacing-x2);
+  }
+
  .submenusItem:first-child {
    padding-bottom: var(--Spacing-x2);
    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  }
+  .submenusItem:last-child {
+    padding-top: var(--Spacing-x3);
+  }

  .cardWrapper {
    background-color: var(--Base-Surface-Secondary-light-Normal);
@@ -104,11 +119,16 @@
  .submenus {
    grid-area: submenus;
    grid-template-columns: repeat(2, 1fr);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
  }

  .submenusItem:first-child {
+    padding-right: var(--Spacing-x5);
    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  }
+  .submenusItem:last-child {
+    padding-left: var(--Spacing-x5);
+  }

  .cardWrapper {
    grid-area: card;
--- a/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -85,17 +85,6 @@
    transform: rotate(180deg);
  }

-  /* Triangle dropdown */
-  .dropdown::before {
-    content: "";
-    position: absolute;
-    right: 2.4rem;
-    border-width: 0.75rem;
-    border-style: solid;
-    border-color: var(--Base-Surface-Primary-light-Normal) transparent
-      transparent transparent;
-  }
-
  .bottom .dropdown {
    transition: none;
    height: auto;
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -196,3 +196,25 @@
  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
  line-height: var(--typography-Caption-Bold-lineHeight);
 }
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  width: 100%;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.menu:hover {
+  color: var(--Base-Text-High-contrast);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -31,6 +31,7 @@ export const linkVariants = cva(styles.link, {
      icon: styles.icon,
      underscored: styles.underscored,
      myPageMobileDropdown: styles.myPageMobileDropdown,
+      menu: styles.menu,
      shortcut: styles.shortcut,
      sidebar: styles.sidebar,
      tab: styles.tab,
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -1,4 +1,4 @@
-.caption {
+p.caption {
  margin: 0;
  padding: 0;
 }