HDS-2115 fix header children

packages/react/src/components/header/Header.stories.tsx

@@ -10,7 +10,7 @@ import { HeaderLink } from './components/headerLink/HeaderLink';
 import { HeaderNavigationMenu } from './components/headerNavigationMenu';
 import { HeaderTheme } from './Header.type';
 import { LanguageOption } from './LanguageContext';
-import { IconSignout, IconSignin } from '../../icons';
+import { IconSignout, IconSignin, IconSearch } from '../../icons';
 import { Logo, logoFi, logoFiDark, logoSv, logoSvDark } from '../logo';
 import { useMediaQueryLessThan } from '../../hooks/useMediaQuery';
 
@@ -260,6 +260,12 @@ const FullFeaturedActionBar = ({ I18n, lang, theme }) => {
  <Header.ActionBarSubItem label="InfoFinland.fi" external href="www.example.com" lang="fi" />
  </Header.ActionBarSubItemGroup>
  </Header.LanguageSelector>
+ <Header.ActionBarButton
+ label="Haku"
+ icon={<IconSearch />}
+ id="action-bar-search"
+ onClick={() => action(`Search clicked`)()}
+ />
  <Header.ActionBarButton
  label="Kirjaudu"
  icon={<IconSignin />}
@@ -703,7 +709,7 @@ export const WithFullFeaturesCustomTheme = (args) => {
  );
 };
 
-export const Login = (args) => {
+export const WithUserMenu = (args) => {
  const lang = 'fi';
  const I18n = translations[lang];
 

packages/react/src/components/header/components/headerActionBar/HeaderActionBar.tsx

@@ -7,6 +7,7 @@ import React, {
  useEffect,
  useMemo,
  useRef,
+ ReactNode,
 } from 'react';
 
 import styles from './HeaderActionBar.module.scss';
@@ -252,24 +253,20 @@ export const HeaderActionBar = ({
  titleProps.onKeyPress = handleKeyPress;
  titleProps.onClick = handleClick;
  }
- const childrenWithId = (Array.isArray(children) ? children : [children])
- .filter((item) => React.isValidElement(item))
- .map((item) => item as ReactElement)
- .map((item, idx) => ((item.props as HeaderActionBarItemProps)?.id ? item : { ...item, id: `item${idx}` }));
+ const validatedChildren = (Array.isArray(children) ? children : [children]).filter((item) =>
+ React.isValidElement(item),
+ );
+
+ const getFixedRightPosition = (item: ReactElement | ReactNode) =>
+ !!((item as ReactElement).props as HeaderActionBarItemProps).fixedRightPosition;
 
- const childrenLeft =
- childrenWithId.length > 1
- ? childrenWithId.filter(
- (item) => React.isValidElement(item) && !(item.props as HeaderActionBarItemProps).fixedRightPosition,
- )
- : [childrenWithId];
- const childrenRight =
- childrenWithId.length > 1
- ? childrenWithId.filter(
- (item) => React.isValidElement(item) && !!(item.props as HeaderActionBarItemProps).fixedRightPosition,
- )
- : [];
- const { children: lsChildren, props: lsProps, componentExists } = getLanguageSelectorComponentProps(childrenWithId);
+ const childrenLeft = validatedChildren.filter((item) => !getFixedRightPosition(item));
+ const childrenRight = validatedChildren.filter((item) => getFixedRightPosition(item));
+ const {
+ children: lsChildren,
+ props: lsProps,
+ componentExists,
+ } = getLanguageSelectorComponentProps(validatedChildren);
  const languageSelectorChildren = useMemo(() => {
  return lsChildren ? getChildElementsEvenIfContainersInbetween(lsChildren) : null;
  }, [lsChildren]);
@@ -293,8 +290,8 @@ export const HeaderActionBar = ({
  {componentExists && (
  <HeaderLanguageSelectorConsumer {...lsProps}>{languageSelectorChildren}</HeaderLanguageSelectorConsumer>
  )}
- {!isSmallScreen && childrenLeft}
- {(hasNavigationContent || childrenWithId.length > 0) && isSmallScreen && (
+ {childrenLeft}
+ {(hasNavigationContent || childrenRight.length > 0) && isSmallScreen && (
  <HeaderActionBarItem
  id="Menu"
  label={menuButtonLabel}
@@ -319,7 +316,7 @@ export const HeaderActionBar = ({
  logo={logo}
  logoProps={logoProps}
  openFrontPageLinksAriaLabel={openFrontPageLinksAriaLabel}
- actionBarItems={(Array.isArray(children) ? children : [children]) as HeaderActionBarItemProps[]}
+ actionBarItems={childrenRight as HeaderActionBarItemProps[]}
  />
  )}
  </div>

packages/react/src/components/header/components/headerLanguageSelector/HeaderLanguageSelector.tsx

@@ -60,7 +60,7 @@ export const LanguageButton = ({ value, label }: LanguageOption) => {
 
 const renderLanguageNode = (language: LanguageOption, primary: boolean) => {
  const Label = <LanguageButton key={language.value} value={language.value} label={language.label} />;
- return primary ? Label : <HeaderActionBarSubItem label={Label} />;
+ return primary ? Label : <HeaderActionBarSubItem label={Label} key={language.value} />;
 };
 
 export const SimpleLanguageOptions = ({ languages }: { languages: LanguageOption[] }) => {