Merge pull request #108 from fourkitchens/develop

Release - 06/26/2024
youonlylivetwice · Jun 26, 2024 · 9dbcfab · 9dbcfab
2 parents 60e08de + e98d5eb
commit 9dbcfab
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/src/lib/components/02-components/cards/nav-highlight/nav-highlight.tsx b/src/lib/components/02-components/cards/nav-highlight/nav-highlight.tsx
@@ -49,15 +49,13 @@ export default function CardNavHighlight({
       href={url}
       component={LinkComponent}
       className={'h-full w-full'}
-      {...props}
-    >
+      {...props}>
       <div
         className={cn(
           'group relative flex h-full w-full overflow-hidden rounded-m bg-gradient-to-tr from-violette-darker to-violette',
           cardStyles[size].wrap,
           className,
-        )}
-      >
+        )}>
         {/* Link icon */}
         {icon && (
           <div className={cardStyles[size].icon}>
@@ -84,15 +82,13 @@ export default function CardNavHighlight({
           className={cn(
             'flex flex-1 flex-col justify-between',
             cardStyles[size].content,
-          )}
-        >
+          )}>
           <div>
             <span
               className={cn(
-                'mb-5 flex items-center gap-xs font-medium text-white',
+                'text-wrap mb-5 flex items-center gap-xs font-medium text-white [overflow-wrap:anywhere]',
                 cardStyles[size].title,
-              )}
-            >
+              )}>
               {title}
               <ChevronRightIcon
                 className={cn('sm:hidden', {
@@ -111,8 +107,7 @@ export default function CardNavHighlight({
               animated
               component="span"
               endIcon={<ArrowRightIcon />}
-              className="ml-auto hidden text-[16px] font-normal !text-white rtl:ml-0 rtl:mr-auto sm:block"
-            >
+              className="ml-auto hidden text-[16px] font-normal !text-white rtl:ml-0 rtl:mr-auto sm:block">
               {ctaButton}
             </Link>
           )}

diff --git a/src/lib/components/02-components/menus/main-menu/main-menu.stories.tsx b/src/lib/components/02-components/menus/main-menu/main-menu.stories.tsx
@@ -75,7 +75,7 @@ const menuItems: MainMenuItemProps[] = [
             alignment: 'left_align',
             below: [
               {
-                title: 'Forcepoint ONE SSE',
+                title: 'Datensicherheit – überall',
                 url: '#',
                 display: 'image_with_content',
                 width: 'full_width',

diff --git a/src/lib/components/02-components/menus/main-menu/main-menu.tsx b/src/lib/components/02-components/menus/main-menu/main-menu.tsx
@@ -340,10 +340,13 @@ export default function MainMenu({
     const lastItem = item.below?.[item.below?.length - 1];
 
     const subClasses = cn(
+      `depth: ${depth}`,
       {
         'py-lg gap-y-md lg:gap-y-sm lg:px-lg lg:gap-x-0 lg:h-full lg:content-start':
           depth === 1 && isGroup,
       },
+      lastItem?.display === 'button' &&
+        'rtl:flex rtl:flex-row-reverse rtl:gap-x-md rtl:justify-end rtl:w-fit',
       isGroup && lastItem?.width && [itemWidthSchema[lastItem?.width].parent],
       !grouping(lastItem?.display) && [
         `menu-item--wrapper-${lastItem?.display}`,
@@ -405,7 +408,7 @@ export default function MainMenu({
           {
             'menu-item__group': isGroup,
             'px-md lg:px-0': depth === 1,
-            'last:lg:pl-[45px]':
+            'ltr:last:lg:pl-[45px] rtl:last:lg:pr-[45px]':
               depth === 2 &&
               item.display === 'no_label' &&
               item.alignment === 'left_align' &&