feat: Selected -style for ActionBarSubItem

City-of-Helsinki · Nov 14, 2024 · 5bbe27c · 5bbe27c
1 parent a493c1f
commit 5bbe27c
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 6 deletions.
diff --git a/...ges/react/.loki/reference/chrome_iphone7_Components_Header_With_Custom_Menu.png b/...ges/react/.loki/reference/chrome_iphone7_Components_Header_With_Custom_Menu.png
diff --git a/...ages/react/.loki/reference/chrome_laptop_Components_Header_With_Custom_Menu.png b/...ages/react/.loki/reference/chrome_laptop_Components_Header_With_Custom_Menu.png
diff --git a/packages/react/src/components/header/Header.stories.tsx b/packages/react/src/components/header/Header.stories.tsx
@@ -761,3 +761,38 @@ export const WithUserMenu = (args: HeaderProps) => {
     </>
   );
 };
+
+export const WithCustomMenu = (args: HeaderProps) => {
+  const lang = 'fi';
+  const I18n = translations[lang];
+  const versions = ['Version 4.0.0', 'Version 3.11.0', 'Version 2.17.1'];
+  const selectedVersion = 'Version 3.11.0';
+
+  return (
+    <>
+      <Header {...args}>
+        <Header.SkipLink skipTo="#content" label={I18n.skipToContent} />
+        <Header.ActionBar
+          frontPageLabel={I18n.frontPage}
+          title={translations[lang].headerTitle}
+          titleAriaLabel={translations[lang].headerAriaLabel}
+          titleHref="https://hel.fi"
+          logo={
+            <Logo
+              src={logoSrcFromLanguageAndTheme(lang, args.theme as HeaderTheme)}
+              alt={translations[lang].headerTitle}
+            />
+          }
+          logoAriaLabel={I18n.ariaLogo}
+        >
+          <Header.ActionBarItem id="VersionMenu" label={selectedVersion} fixedRightPosition>
+            {versions.map((version) => (
+              <Header.ActionBarSubItem label={version} selected={version === selectedVersion} href="/" />
+            ))}
+          </Header.ActionBarItem>
+        </Header.ActionBar>
+      </Header>
+      <div id="content" />
+    </>
+  );
+};
diff --git a/...eact/src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss b/...eact/src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss
@@ -152,6 +152,10 @@
     & > h4 {
       padding: 0 !important;
     }
+
+    &.selected {
+      border-left: 4px solid var(--color-black);
+    }
   }
 
   & .dropdownItem button {

diff --git a/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItem.tsx b/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItem.tsx
@@ -141,6 +141,7 @@ export const HeaderActionBarItem = (properties: HeaderActionBarItemProps) => {
           activeStateLabel: closeLabel,
         }
       : {};
+  const heading = visible && !fullWidth && label && avatar;
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   return (
@@ -165,7 +166,7 @@ export const HeaderActionBarItem = (properties: HeaderActionBarItemProps) => {
       {hasSubItems && (
         <div className={classes.dropdownWrapper}>
           <div id={`${id}-dropdown`} className={dropdownClassName} ref={dropdownContentElementRef}>
-            {visible && !fullWidth && label && <h3>{label}</h3>}
+            {heading && <h3>{label}</h3>}
             <ul>{children}</ul>
           </div>
         </div>

diff --git a/...rc/components/header/components/headerActionBarSubItem/HeaderActionBarSubItem.module.scss b/...rc/components/header/components/headerActionBarSubItem/HeaderActionBarSubItem.module.scss
@@ -24,6 +24,10 @@ h4.actionBarSubItem {
     font-weight: bold;
   }
 
+  &.selected {
+    text-decoration: underline;
+  }
+
   &:focus-visible {
     border: none;
     outline: 0;

diff --git a/.../react/src/components/header/components/headerActionBarSubItem/HeaderActionBarSubItem.tsx b/.../react/src/components/header/components/headerActionBarSubItem/HeaderActionBarSubItem.tsx
@@ -47,6 +47,10 @@ export interface HeaderActionBarSubItemProps extends ElementProps {
    * If bold
    */
   bold?: boolean;
+  /**
+   * If selected
+   */
+  selected?: boolean;
   /**
    * Hypertext Reference of the link.
    */
@@ -75,6 +79,7 @@ export const HeaderActionBarSubItem = forwardRef<HTMLButtonElement | HTMLAnchorE
       onClick,
       className,
       bold,
+      selected,
       external,
       openInExternalDomainAriaLabel,
       ...rest
@@ -85,6 +90,7 @@ export const HeaderActionBarSubItem = forwardRef<HTMLButtonElement | HTMLAnchorE
       [classes.actionBarSubItem]: true,
       ...(className && { [className]: true }),
       [classes.bold]: bold,
+      [classes.selected]: selected,
     });
 
     const composeAriaLabel = () => {
@@ -151,7 +157,14 @@ export const HeaderActionBarSubItem = forwardRef<HTMLButtonElement | HTMLAnchorE
         return isHeading ? (
           <h4 className={itemClassName}>{children}</h4>
         ) : (
-          <li className={actionBarItemClasses.dropdownItem}>{children}</li>
+          <li
+            className={classNames({
+              [actionBarItemClasses.dropdownItem]: true,
+              [actionBarItemClasses.selected]: selected,
+            })}
+          >
+            {children}
+          </li>
         );
       },
       [isHeading, itemClassName],

diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -147,7 +147,8 @@ const Layout = ({ location, children, pageContext }) => {
   const pathParts = pathName.split('/');
   const version = pathParts[1].startsWith('release-') ? pathParts[1] : undefined;
   const locationWithoutVersion = hrefWithoutVersion(pathName, version);
-  const versionLabel = version ? `Version ${version.replace('release-', '')}` : `Version ${versions[0]}`;
+  const versionNumber = version ? version.replace('release-', '') : versions[0];
+  const versionLabel = `Version ${versionNumber}`;
 
   // Some hrefs of internal links can't be replaced with MDXProvider's replace component logic.
   // this code will take care of those
@@ -272,11 +273,12 @@ const Layout = ({ location, children, pageContext }) => {
             logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}
           >
             <Header.ActionBarItem label={versionLabel} fixedRightPosition>
-              {versions.map((versionNumber, index) => (
+              {versions.map((itemVersion, index) => (
                 <Header.ActionBarSubItem
-                  label={`Version ${versionNumber}`}
+                  label={`Version ${itemVersion}`}
+                  selected={itemVersion === versionNumber}
                   href={index > 0
-                    ? hrefWithVersion(locationWithoutVersion, `release-${versionNumber}`)
+                    ? hrefWithVersion(locationWithoutVersion, `release-${itemVersion}`)
                     : withPrefix(locationWithoutVersion)}
                 />
               ))}