feat(header): add new TEDI-Ready component #506

package.json

@@ -43,7 +43,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "6.0.1",
+    "@tedi-design-system/core": "6.1.2",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",

skills/tedi-react/references/components.md

@@ -286,6 +286,45 @@ Same as Checkbox (without indeterminate)
 
 Sub-component: `VerticalSpacing.Item`
 
+### Header
+**Props:** `HeaderProps`
+- `children: ReactNode` (required)
+- `toggle?: ReactNode` — mobile side navigation toggle
+- `bottom?: ReactNode` — content below header on mobile
+
+Sub-components: `Header.Logo`, `Header.Center`, `Header.Actions`, `Header.Language`, `Header.Login`, `Header.Logout`, `Header.Profile`, `Header.Role`, `Header.Search`
+
+**Header.Logo:** `logo: ReactNode`, `logoDark?: ReactNode`, `href?: string`, `showLogo?: boolean = true`
+**Header.Center:** `children: ReactNode`, `alignment?: 'flex-start' | 'center' | 'space-between' = 'center'`
+**Header.Actions:** `children: ReactNode`
+**Header.Role:** `representatives: Representative[]`, `label?: ReactNode`, `showDescription?: boolean = true`, `accordionLabels?: { open?, close? }`, `onRepresentativeChange?`, `onRoleSelectionToggle?`
+**Header.Language:** bp — language selector
+**Header.Login:** bp — login button
+**Header.Logout:** bp — logout button
+**Header.Profile:** bp — user profile display
+**Header.Search:** wrapper that accepts a Search child (and optional `mobileVariant`). `children: ReactNode`, `mobileVariant?: 'modal' | 'inline'`, `mobileLabels?: { button?, modalTitle? }`, `disabled?: boolean`
+
+```tsx
+<Header
+  toggle={<SideNav.Toggle />}
+  bottom={
+    <Header.Search mobileVariant="inline">
+      <Search label="Search" hideLabel id="header-search" />
+    </Header.Search>
+  }
+>
+  <Header.Logo logo={<img src="/logo.svg" alt="Logo" />} href="/" />
+  <Header.Center><Link href="/about">About</Link></Header.Center>
+  <Header.Actions>
+    <Header.Search>
+      <Search label="Search" hideLabel id="header-search" />
+    </Header.Search>
+    <Header.Language />
+    <Header.Login />
+  </Header.Actions>
+</Header>
+```
+
 ### SideNav
 **Props:** `SideNavProps<C>` | poly
 - `ariaLabel: string` (required)
@@ -524,7 +563,8 @@ Import from `@tedi-design-system/react/community`. These are community-contribut
 ## Layout
 
 ### Header
-Comprehensive header with sub-components: HeaderContent, HeaderActions, HeaderNavigation, HeaderLanguage, HeaderRole, HeaderSettings, HeaderNotifications, HeaderLogo
+- Sub-components: HeaderContent, HeaderActions, HeaderNavigation, HeaderLanguage, HeaderRole, HeaderSettings, HeaderNotifications, HeaderLogo
+- **Note:** The TEDI-Ready Header is now available with a different sub-component API. Prefer the TEDI-Ready version for new work.
 
 ## Misc
 

src/community/components/layout/header/header.stories.tsx

@@ -17,6 +17,11 @@ import Header, { HeaderProps } from './header/header';
 export default {
   component: Header,
   title: 'Community/Layout/Header',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 } as Meta;
 type Story = StoryObj<typeof Header>;
 

src/tedi/components/buttons/button-content/button-content.module.scss

@@ -382,7 +382,7 @@ $btn-width-large: 3.72rem;
   }
 }
 
-.tedi-btn--text-color {
+.tedi-btn--text {
   &.tedi-btn--link {
     @include link-variant(
       inherit,

src/tedi/components/buttons/button-content/button-content.tsx

@@ -35,7 +35,7 @@ export type ButtonContentProps<
      */
     fullWidth?: boolean;
     /**
-     * Color schema for button. PS text-color works only with link type links.
+     * Color scheme of the button. The 'text' value is only supported when visualType is 'link'.
      * @default default
      */
     color?: ButtonColor;

src/tedi/components/cards/card/card-stories-templates.tsx

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import { StoryFn } from '@storybook/react/*';
+import { StoryFn } from '@storybook/react';
 
 import { Icon } from '../../base/icon/icon';
 import { Heading } from '../../base/typography/heading/heading';

src/tedi/components/layout/header/components/header-language/header-language.module.scss

@@ -0,0 +1,45 @@
+.tedi-header-language {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+
+  [data-name='button'] {
+    color: var(--header-dropdown-link);
+  }
+
+  &__icon {
+    transition: transform 0.2s ease-in-out;
+
+    &--open {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &__mobile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--layout-header-mobile-button-size);
+    min-width: var(--layout-header-mobile-button-min-size);
+    height: var(--layout-header-mobile-button-min-size);
+  }
+
+  &__selected {
+    display: flex;
+    gap: var(--link-inner-spacing-x);
+    align-items: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--layout-grid-gutters-08);
+    align-items: flex-start;
+
+    [data-name='button'] {
+      color: var(--header-dropdown-link);
+    }
+  }
+}

src/tedi/components/layout/header/components/header-language/header-language.spec.tsx

@@ -0,0 +1,132 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { isBreakpointBelow, useBreakpoint, useBreakpointProps } from '../../../../../helpers';
+import { useLabels } from '../../../../../providers/label-provider';
+import { HeaderLanguage, Language } from './header-language';
+
+import '@testing-library/jest-dom';
+
+jest.mock('../../../../../helpers', () => ({
+  ...jest.requireActual('../../../../../helpers'),
+  useBreakpoint: jest.fn(),
+  isBreakpointBelow: jest.fn(),
+  useBreakpointProps: jest.fn(),
+}));
+
+jest.mock('../../../../../providers/label-provider', () => ({
+  useLabels: jest.fn(),
+}));
+
+const mockLanguages: Language[] = [
+  { label: 'EST', locale: 'et' as never, isSelected: true, 'aria-label': 'Estonian' },
+  { label: 'ENG', locale: 'en' as never, isSelected: false, 'aria-label': 'English' },
+  { label: 'RUS', locale: 'ru' as never, isSelected: false, 'aria-label': 'Russian' },
+];
+
+describe('HeaderLanguage component', () => {
+  const mockSetLocale = jest.fn();
+  const mockGetLabel = jest.fn((key: string) => key);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useBreakpoint as jest.Mock).mockReturnValue('lg');
+    (isBreakpointBelow as jest.Mock).mockReturnValue(false);
+    (useBreakpointProps as jest.Mock).mockReturnValue({
+      getCurrentBreakpointProps: jest.fn((props: Record<string, unknown>) => props),
+    });
+    (useLabels as jest.Mock).mockReturnValue({
+      getLabel: mockGetLabel,
+      setLocale: mockSetLocale,
+      locale: 'et',
+    });
+  });
+
+  it('renders the current language label', () => {
+    render(<HeaderLanguage languages={mockLanguages} />);
+
+    expect(screen.getByText('EST')).toBeInTheDocument();
+  });
+
+  it('renders the select label text', () => {
+    render(<HeaderLanguage languages={mockLanguages} selectLabel="Choose language" />);
+
+    expect(screen.getByText('Choose language')).toBeInTheDocument();
+  });
+
+  it('falls back to i18n label when selectLabel is not provided', () => {
+    render(<HeaderLanguage languages={mockLanguages} />);
+
+    expect(mockGetLabel).toHaveBeenCalledWith('header.select-lang');
+  });
+
+  it('opens language dropdown on trigger click', () => {
+    render(<HeaderLanguage languages={mockLanguages} />);
+
+    const trigger = screen.getByRole('button', { expanded: false });
+    fireEvent.click(trigger);
+
+    expect(screen.getByText('ENG')).toBeInTheDocument();
+    expect(screen.getByText('RUS')).toBeInTheDocument();
+  });
+
+  it('changes displayed language on selection', () => {
+    render(<HeaderLanguage languages={mockLanguages} />);
+
+    const trigger = screen.getByRole('button', { expanded: false });
+    fireEvent.click(trigger);
+
+    const engOption = screen.getAllByText('ENG');
+    fireEvent.click(engOption[engOption.length - 1]);
+
+    expect(mockSetLocale).toHaveBeenCalledWith('en');
+  });
+
+  it('uses currentLanguage prop as initial label', () => {
+    (useLabels as jest.Mock).mockReturnValue({
+      getLabel: mockGetLabel,
+      setLocale: mockSetLocale,
+      locale: undefined,
+    });
+
+    render(<HeaderLanguage languages={mockLanguages} currentLanguage="ENG" />);
+
+    expect(screen.getByText('ENG')).toBeInTheDocument();
+  });
+
+  it('falls back to first language when no locale or currentLanguage is set', () => {
+    (useLabels as jest.Mock).mockReturnValue({
+      getLabel: mockGetLabel,
+      setLocale: mockSetLocale,
+      locale: undefined,
+    });
+
+    render(<HeaderLanguage languages={mockLanguages} />);
+
+    expect(screen.getByText('EST')).toBeInTheDocument();
+  });
+
+  it('calls custom onClick handler when provided', () => {
+    const mockOnClick = jest.fn();
+    const languagesWithClick: Language[] = [
+      { label: 'EST', isSelected: true },
+      { label: 'ENG', onClick: mockOnClick },
+    ];
+
+    render(<HeaderLanguage languages={languagesWithClick} />);
+
+    const trigger = screen.getByRole('button', { expanded: false });
+    fireEvent.click(trigger);
+
+    const engOption = screen.getAllByText('ENG');
+    fireEvent.click(engOption[engOption.length - 1]);
+
+    expect(mockOnClick).toHaveBeenCalledWith(expect.objectContaining({ onToggle: expect.any(Function) }));
+    expect(mockSetLocale).not.toHaveBeenCalled();
+  });
+
+  it('renders expand icon', () => {
+    const { container } = render(<HeaderLanguage languages={mockLanguages} />);
+
+    expect(container.querySelector('[class*="header-language__icon"]')).toBeInTheDocument();
+  });
+});