my account navigation

libs/base/ui/action/button/button.model.ts

@@ -118,4 +118,6 @@ export const enum ButtonType {
    * A button which is rendered as icon.
    */
   Icon = 'icon',
+
+  Tile = 'tile',
 }

libs/base/ui/action/button/button.styles.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { HeadingTag, headingUtil } from '../../structure/heading/src';
 
 const baseStyles = css`
   :host {
@@ -259,9 +260,33 @@ const loadingStyles = css`
   }
 `;
 
+const tileStyles = css`
+  :host([type='tile']) {
+    color: var(--oryx-button-color, var(--_text-color));
+  }
+
+  :host([type='tile']) :is(a, button),
+  :host([type='tile']) ::slotted(:is(a, button)) {
+    --oryx-icon-size: 32px;
+
+    ${headingUtil(HeadingTag.Subtitle)}
+
+    text-transform: uppercase;
+    height: 68px;
+    width: 62px;
+    /* max-width: 62px; */
+    display: grid;
+    align-content: center;
+    justify-items: center;
+    gap: 5px;
+    padding: 12px 8px;
+  }
+`;
+
 export const buttonStyles = css`
   ${baseStyles}
   ${sizeStyles}
   ${colorStyles}
   ${loadingStyles}
+  ${tileStyles}
 `;

libs/base/ui/action/link/src/styles/storefront.styles.ts

@@ -5,6 +5,7 @@ export const storefrontLinkStyles = css`
     position: relative;
     display: inline-flex;
     width: var(--oryx-link-width);
+    cursor: pointer;
   }
 
   :host([icon]) {

libs/base/ui/graphical/icon/src/icon.types.ts

@@ -100,6 +100,7 @@ export enum IconTypes {
   Carrier = 'carrier',
   Location = 'location_on',
   Login = 'login',
+  Logout = 'logout',
   List = 'list',
   ViewList = 'view_list',
   BulletList = 'format_list_bulleted',

libs/base/ui/overlays/dropdown/dropdown.styles.ts

@@ -5,7 +5,6 @@ import { Position } from './dropdown.model';
 
 export const dropdownBaseStyles = css`
   :host {
-    --oryx-popover-top-space: 4px;
     --oryx-popover-vertical-offset: 10px;
     --oryx-popover-maxwidth: 206px;
 
@@ -32,7 +31,7 @@ export const dropdownBaseStyles = css`
       ),
       var(--oryx-popover-maxheight, ${unsafecss(POPOVER_HEIGHT)}px)
     );
-    width: var(--_oryx-dropdown-width);
+    width: var(--oryx-dropdown-width, var(--_oryx-dropdown-width));
     inset-block-start: 0;
     inset-inline: var(--_oryx-dropdown-start-offset, auto)
       var(--_oryx-dropdown-end-offset, auto);
@@ -49,9 +48,8 @@ export const dropdownBaseStyles = css`
 
   ${featureVersion >= `1.3`
     ? css`
-        :host(:not([vertical-align])) oryx-popover {
-          transform: scaleX(var(--oryx-popover-visible, 0))
-            scaleY(var(--oryx-popover-visible, 0));
+        :host([vertical-align]) oryx-popover {
+          transform: scaleY(var(--oryx-popover-visible, 0));
         }
       `
     : css``}
@@ -95,7 +93,7 @@ export const dropdownBaseStyles = css`
   }
 
   :host([vertical-align]:not([up])) oryx-popover {
-    inset-block-start: calc(100% + var(--oryx-popover-top-space));
+    inset-block-start: calc(100% + var(--oryx-popover-top-space, 4px));
   }
 
   :host([vertical-align][up]) oryx-popover {

libs/base/ui/overlays/popover/src/styles/oryx.styles.ts

@@ -3,8 +3,12 @@ import { css } from 'lit';
 export const popoverStyles = css`
   :host {
     background-color: var(--oryx-color-neutral-1);
-    box-shadow: var(--oryx-elevation-2) var(--oryx-color-elevation);
-    border-radius: var(--oryx-border-radius-small);
+    box-shadow: var(--oryx-shadow-hovering) var(--oryx-color-elevation);
+    border-radius: var(
+      --oryx-popover-border-radius,
+      var(--oryx-border-radius-small)
+    );
     transition: transform var(--oryx-transition-time) ease-in-out;
+    width: var(--oryx-popover-width);
   }
 `;

libs/domain/content/link/link.component.ts

@@ -36,7 +36,7 @@ export class ContentLinkComponent extends ContentMixin<
   protected $link = computed(() => {
     const { url, type, id, params } = this.$options();
     if (url) return of(url);
-    if (type) return this.semanticLinkService.get({ type: type, id, params });
+    if (type) return this.semanticLinkService.get({ type, id, params });
     return of(null);
   });
 
@@ -56,9 +56,9 @@ export class ContentLinkComponent extends ContentMixin<
     const { button, icon, singleLine, color } = this.$options();
 
     if (button) {
-      return html`<oryx-button part="link" }
-        >${this.renderLink(true)}</oryx-button
-      >`;
+      return html`<oryx-button part="link">
+        ${this.renderLink(true)}
+      </oryx-button>`;
     }
 
     return html`<oryx-link
@@ -78,7 +78,7 @@ export class ContentLinkComponent extends ContentMixin<
 
     if (type === RouteType.Category && id) {
       return this.categoryService
-        .get(id)
+        .get({ id })
         .pipe(map((category) => category?.name));
     }
 
@@ -94,7 +94,7 @@ export class ContentLinkComponent extends ContentMixin<
   });
 
   protected renderLink(custom?: boolean): TemplateResult {
-    if (!this.$link()) return html`${this.$text()}`;
+    if (!this.$link()) return html`<a tabindex="0">${this.$text()}</a>`;
 
     const { label, target } = this.$options();
 

libs/domain/content/link/link.styles.ts

@@ -2,6 +2,7 @@ import { css } from 'lit';
 
 export const contentLinkStyles = css`
   :host {
+    display: block;
     padding: var(--oryx-content-link-padding);
   }
 

libs/domain/product/src/services/resolvers/breadcrumb/product-details.resolver.ts

@@ -70,7 +70,7 @@ export class ProductDetailsBreadcrumbResolver implements BreadcrumbResolver {
     }
 
     return combineLatest(
-      categoryIds.map((id) => this.categoryService.getTrail(id))
+      categoryIds.map((id) => this.categoryService.getTrail({ id }))
     ).pipe(
       switchMap((trails) =>
         combineLatest([

libs/domain/search/src/services/resolvers/breadcrumb.resolver.ts

@@ -22,7 +22,7 @@ export class CategoryBreadcrumbResolver implements BreadcrumbResolver {
       switchMap((category) =>
         this.categoryService
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          .getTrail(String((category as ValueFacet).selectedValues![0]))
+          .getTrail({ id: String((category as ValueFacet).selectedValues![0]) })
           .pipe(
             switchMap((trail) =>
               combineLatest(

libs/domain/user/navigation-control/index.ts

@@ -0,0 +1 @@
+export * from './navigation-control.component';

libs/domain/user/navigation-control/navigation-control.component.ts

@@ -0,0 +1,28 @@
+import { AuthService } from '@spryker-oryx/auth';
+import { resolve } from '@spryker-oryx/di';
+import { ContentMixin } from '@spryker-oryx/experience';
+import { ButtonType } from '@spryker-oryx/ui/button';
+import { IconTypes } from '@spryker-oryx/ui/icon';
+import { UserService } from '@spryker-oryx/user';
+import { hydrate, signal } from '@spryker-oryx/utilities';
+import { LitElement, TemplateResult, html } from 'lit';
+
+@hydrate()
+export class UserNavigationControlComponent extends ContentMixin(LitElement) {
+  protected authService = resolve(AuthService);
+  protected userService = resolve(UserService);
+
+  protected $isAuthenticated = signal(this.authService.isAuthenticated());
+  protected $user = signal(this.userService.getUser());
+
+  protected override render(): TemplateResult | void {
+    return html`
+      <oryx-button .type=${ButtonType.Tile}>
+        <oryx-icon .type=${IconTypes.User}></oryx-icon>
+        ${this.$isAuthenticated()
+          ? this.$user()?.firstName ?? ''
+          : this.i18n('auth.login')}
+      </oryx-button>
+    `;
+  }
+}

libs/domain/user/navigation-control/navigation-control.def.ts

@@ -0,0 +1,9 @@
+import { componentDef } from '@spryker-oryx/utilities';
+
+export const userNavigationControlComponent = componentDef({
+  name: 'oryx-user-navigation-control',
+  impl: () =>
+    import('./navigation-control.component.js').then(
+      (m) => m.UserNavigationControlComponent
+    ),
+});

libs/domain/user/src/components.ts

@@ -7,4 +7,5 @@ export * from '../address-list/address-list.def';
 export * from '../address-remove/address-remove.def';
 export * from '../address/address.def';
 export * from '../contact-form/contact-form.def';
+export * from '../navigation-control/navigation-control.def';
 export * from '../registration/registration.def';

libs/platform/auth/logout-link/index.ts

@@ -0,0 +1,3 @@
+export * from './logout-link.component';
+export * from './logout-link.model';
+export * from './logout-link.schema';

libs/platform/auth/logout-link/logout-link.component.spec.ts

@@ -0,0 +1,105 @@
+import { fixture } from '@open-wc/testing-helpers';
+import { AuthService, logoutLinkComponent } from '@spryker-oryx/auth';
+import { createInjector, destroyInjector } from '@spryker-oryx/di';
+import { RouterService } from '@spryker-oryx/router';
+import { useComponent } from '@spryker-oryx/utilities';
+import { html } from 'lit';
+import { of } from 'rxjs';
+import { LogoutLinkComponent } from './logout-link.component';
+
+class MockAuthService implements Partial<AuthService> {
+  logout = vi.fn().mockReturnValue(of(null));
+  isAuthenticated = vi.fn().mockReturnValue(of(false));
+}
+
+class MockRouterService implements Partial<RouterService> {
+  navigate = vi.fn();
+}
+
+describe('LogoutLinkComponent', () => {
+  let element: LogoutLinkComponent;
+  let authService: MockAuthService;
+  let routerService: MockRouterService;
+
+  const clickButton = (): void => {
+    element.renderRoot.querySelector<HTMLElement>('oryx-content-link')?.click();
+  };
+
+  beforeAll(async () => {
+    await useComponent(logoutLinkComponent);
+  });
+
+  beforeEach(async () => {
+    const testInjector = createInjector({
+      providers: [
+        { provide: AuthService, useClass: MockAuthService },
+        { provide: RouterService, useClass: MockRouterService },
+      ],
+    });
+    authService = testInjector.inject<MockAuthService>(AuthService);
+    routerService = testInjector.inject<MockRouterService>(RouterService);
+  });
+
+  afterEach(() => {
+    destroyInjector();
+  });
+
+  describe('when is not authenticated', () => {
+    it('passes the a11y audit', async () => {
+      await expect(element).shadowDom.to.be.accessible();
+    });
+
+    it('should not render anything', () => {
+      expect(element).not.toContainElement('*');
+    });
+  });
+
+  describe.only('when is authenticated', () => {
+    beforeEach(async () => {
+      authService.isAuthenticated = vi.fn().mockReturnValue(of(true));
+      element = await fixture(
+        html`<oryx-auth-logout-link></oryx-auth-logout-link>`
+      );
+    });
+
+    it('passes the a11y audit', async () => {
+      await expect(element).shadowDom.to.be.accessible();
+    });
+
+    describe('and link is clicked', () => {
+      beforeEach(() => {
+        clickButton();
+      });
+
+      it('should emit the logout', () => {
+        expect(authService.logout).toHaveBeenCalled();
+      });
+
+      describe('and redirect route is not provided', () => {
+        beforeEach(async () => {
+          clickButton();
+        });
+
+        it('should redirect to the route', () => {
+          expect(routerService.navigate).not.toHaveBeenCalled();
+        });
+      });
+
+      describe('and redirect route is provided', () => {
+        const redirectUrl = '/test';
+
+        beforeEach(async () => {
+          element = await fixture(html`<oryx-auth-logout-link
+            .options=${{ redirectUrl }}
+          >
+          </oryx-auth-logout-link>`);
+          clickButton();
+        });
+
+        it('should redirect to the route', () => {
+          expect(routerService.navigate).toHaveBeenCalledWith(redirectUrl);
+        });
+      });
+    });
+  });
+});

libs/platform/auth/logout-link/logout-link.component.ts

@@ -0,0 +1,40 @@
+import { AuthService } from '@spryker-oryx/auth';
+import { resolve } from '@spryker-oryx/di';
+import { ContentMixin } from '@spryker-oryx/experience';
+import { RouterService } from '@spryker-oryx/router';
+import { hydrate, signal } from '@spryker-oryx/utilities';
+import { LitElement, TemplateResult, html } from 'lit';
+import { LogoutLinkOptions } from './logout-link.model';
+
+@hydrate({ event: 'window:load' })
+export class LogoutLinkComponent extends ContentMixin<LogoutLinkOptions>(
+  LitElement
+) {
+  protected authService = resolve(AuthService);
+  protected routerService = resolve(RouterService);
+
+  protected $isAuthenticated = signal(this.authService.isAuthenticated());
+
+  protected override render(): TemplateResult | void {
+    if (!this.$isAuthenticated()) return;
+
+    const icon = this.$options()?.icon;
+    return html`
+      <oryx-content-link
+        .options=${{ icon }}
+        .content=${{ text: this.i18n('auth.logout') }}
+        @click=${this.onClick}
+      >
+      </oryx-content-link>
+    `;
+  }
+
+  protected onClick(): void {
+    this.authService.logout().subscribe(() => {
+      const { redirectUrl } = this.$options();
+      if (redirectUrl) {
+        this.routerService.navigate(redirectUrl);
+      }
+    });
+  }
+}

libs/platform/auth/logout-link/logout-link.def.ts

@@ -0,0 +1,16 @@
+import { componentDef } from '@spryker-oryx/utilities';
+import { LogoutLinkOptions } from './logout-link.model';
+
+declare global {
+  interface FeatureOptions {
+    'oryx-auth-logout-link'?: LogoutLinkOptions;
+  }
+}
+
+export const logoutLinkComponent = componentDef({
+  name: 'oryx-auth-logout-link',
+  impl: () =>
+    import('./logout-link.component').then((m) => m.LogoutLinkComponent),
+  schema: () =>
+    import('./logout-link.schema').then((m) => m.logoutLinkComponentSchema),
+});