uikit-react-public 0.26.0 → 0.26.3

package/lib/components/HeaderNew/HeaderItem.tsx

@@ -23,7 +23,13 @@ const HeaderItem = ({
     min-height: 40px;
 
     &:not(:first-of-type) {
-      margin-left: ${theme.margin.m8};
+      margin-left: ${theme.margin.m16};
+    }
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      &:not(:first-of-type) {
+        margin-left: 0;
+      }
     }
   `;
 

package/lib/components/HeaderNew/__tests__/Header.test.tsx

@@ -39,4 +39,34 @@ describe('Header', () => {
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toBe('/');
   });
+
+  test('spaces subsequent header items on smaller screens and resets spacing on desktop', () => {
+    render(
+      <ThemeContextProvider>
+        <Header title='LIDS'>
+          <Header.MenuContainer>
+            <Header.Item testId='first-header-item'>First</Header.Item>
+            <Header.Item testId='second-header-item'>Second</Header.Item>
+          </Header.MenuContainer>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    const firstItem = screen.getByTestId('first-header-item');
+    const secondItem = screen.getByTestId('second-header-item');
+    const generatedClass = [...secondItem.classList].find((className) =>
+      className.startsWith('css-')
+    );
+    const styles = document.head.textContent;
+
+    expect(firstItem).toHaveClass('ucl-uikit-header__item');
+    expect(secondItem).toHaveClass('ucl-uikit-header__item');
+    expect(generatedClass).toBeDefined();
+    expect(styles).toContain(
+      `.${generatedClass}:not(:first-of-type){margin-left:16px;}`
+    );
+    expect(styles).toContain(
+      `@media (min-width: 1056px){.${generatedClass}:not(:first-of-type){margin-left:0;}}`
+    );
+  });
 });

package/lib/components/MenuNew/MenuAccordion/MenuAccordion.tsx

@@ -14,6 +14,7 @@ import MenuAccordionChevron from './MenuAccordionChevron';
 import MenuAccordionItem, { MenuAccordionItemProps } from './MenuAccordionItem';
 
 export const NAME = 'ucl-uikit-menu__accordion';
+const FOCUS_RING_GUTTER_PX = 6;
 
 export interface MenuAccordionProps extends Omit<
   MenuBaseItemProps,
@@ -60,8 +61,35 @@ const MenuAccordion = ({
   `;
 
   const bodyStyle = css`
+    display: grid;
+    grid-template-rows: 0fr;
     width: 100%;
+    margin-top: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      grid-template-rows 200ms ease-in-out,
+      margin-top 200ms ease-in-out,
+      opacity 200ms ease-in-out;
+  `;
+
+  const bodyExpandedStyle = css`
+    grid-template-rows: 1fr;
     margin-top: ${theme.margin.m8};
+    opacity: 1;
+    pointer-events: auto;
+    transition:
+      grid-template-rows 200ms ease-in-out,
+      margin-top 200ms ease-in-out,
+      opacity 200ms ease-in-out;
+  `;
+
+  const bodyInnerStyle = css`
+    min-height: 0;
+    padding-top: ${FOCUS_RING_GUTTER_PX}px;
+    padding-bottom: ${FOCUS_RING_GUTTER_PX}px;
+    overflow: hidden;
   `;
 
   const handleClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -74,7 +102,7 @@ const MenuAccordion = ({
       <MenuBaseItem
         className={style}
         iconPosition='left'
-        underlineOnHover={false}
+        hoverMode='background'
         onClick={handleClick}
         endAdornment={<MenuAccordionChevron expanded={expanded} />}
         aria-expanded={expanded}
@@ -84,7 +112,13 @@ const MenuAccordion = ({
           <MenuItemText className={textStyle}>{label}</MenuItemText>
         </span>
       </MenuBaseItem>
-      {expanded && <div className={bodyStyle}>{children}</div>}
+      <div
+        className={cx(bodyStyle, expanded && bodyExpandedStyle)}
+        aria-hidden={!expanded}
+        inert={!expanded}
+      >
+        <div className={bodyInnerStyle}>{children}</div>
+      </div>
     </>
   );
 };

package/lib/components/MenuNew/MenuAccordion/MenuAccordionChevron.tsx

@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import Icon from '../../Icon';
 
 export interface MenuAccordionChevronProps {
@@ -8,23 +9,24 @@ export interface MenuAccordionChevronProps {
 const MenuAccordionChevron = ({
   expanded,
   className,
-}: MenuAccordionChevronProps) =>
-  expanded ? (
-    <Icon.ChevronUp
-      className={className}
-      size={24}
-      aria-hidden='true'
-      focusable='false'
-      testId='ucl-uikit-menu__accordion__icon--chevron-up'
-    />
-  ) : (
+}: MenuAccordionChevronProps) => {
+  const baseStyle = css`
+    transition: transform 150ms ease-in-out;
+  `;
+
+  const expandedStyle = css`
+    transform: rotate(180deg);
+  `;
+
+  return (
     <Icon.ChevronDown
-      className={className}
+      className={cx(baseStyle, expanded && expandedStyle, className)}
       size={24}
       aria-hidden='true'
       focusable='false'
       testId='ucl-uikit-menu__accordion__icon--chevron-down'
     />
   );
+};
 
 export default MenuAccordionChevron;

package/lib/components/MenuNew/MenuAccordion/MenuAccordionItem.tsx

@@ -5,6 +5,7 @@ import MenuItemText from '../MenuItemText';
 import { useTheme } from '../../../theme';
 
 export const NAME = 'ucl-uikit-menu__accordion-item';
+const FOCUS_RING_GUTTER_PX = 6;
 
 export interface MenuAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;
@@ -21,11 +22,12 @@ const MenuAccordionItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    margin: 0;
-    padding-left: ${theme.padding.p40};
+    width: calc(100% - ${FOCUS_RING_GUTTER_PX * 2}px);
+    margin: 0 ${FOCUS_RING_GUTTER_PX}px;
+    padding-left: calc(${theme.padding.p40} - ${FOCUS_RING_GUTTER_PX}px);
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
-      padding: 0 ${theme.padding.p56};
+      padding: 0 calc(${theme.padding.p56} - ${FOCUS_RING_GUTTER_PX}px);
     }
   `;
 

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -6,7 +6,7 @@ export interface MenuBaseItemProps extends HTMLAttributes<HTMLDivElement> {
   icon?: ReactNode;
   iconPosition?: 'left' | 'right';
   endAdornment?: ReactNode;
-  underlineOnHover?: boolean;
+  hoverMode?: 'background' | 'underline';
   asChild?: boolean;
 }
 
@@ -20,7 +20,7 @@ const MenuBaseItem = ({
   onKeyDown,
   role,
   tabIndex,
-  underlineOnHover = true,
+  hoverMode = 'background',
   asChild = false,
   ...props
 }: MenuBaseItemProps) => {
@@ -63,15 +63,26 @@ const MenuBaseItem = ({
     &:focus-within {
       box-shadow: ${theme.boxShadow.focus};
     }
+  `;
 
-    ${underlineOnHover &&
-    `
-      &:hover .ucl-uikit-menu__item-text {
-        text-decoration: underline;
-      }
-    `}
+  const backgroundOnHoverStyle = css`
+    &:hover {
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
   `;
-  const style = cx(baseStyle, className);
+
+  const underlineStyleOnHoverStyle = css`
+    &:hover .ucl-uikit-menu__item-text {
+      text-decoration: underline;
+    }
+  `;
+
+  const style = cx(
+    baseStyle,
+    hoverMode === 'underline' && underlineStyleOnHoverStyle,
+    hoverMode === 'background' && backgroundOnHoverStyle,
+    className
+  );
 
   const endAdornmentStyle = css`
     margin-left: auto;

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -49,6 +49,7 @@ const SecondaryMenuItem = ({
     <MenuBaseItem
       className={style}
       asChild={asChild}
+      hoverMode='underline'
       {...props}
     >
       <span className={contentStyle}>

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -86,7 +86,7 @@ describe('Menu', () => {
     ).toBeInTheDocument();
   });
 
-  test('accordion toggles to expanded state with up chevron', () => {
+  test('accordion toggles to expanded state with rotated down chevron', () => {
     wrap(
       <Menu>
         <Menu.Accordion
@@ -98,14 +98,51 @@ describe('Menu', () => {
       </Menu>
     );
 
-    expect(screen.queryByText('Library')).not.toBeInTheDocument();
+    const accordionContent = screen
+      .getByText('Library')
+      .closest('[aria-hidden]');
+    expect(accordionContent).toHaveAttribute('aria-hidden', 'true');
     fireEvent.click(screen.getByText('Services'));
+    expect(accordionContent).toHaveAttribute('aria-hidden', 'false');
     expect(
-      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-up')
+      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-down')
     ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ucl-uikit-menu__accordion__icon--chevron-up')
+    ).not.toBeInTheDocument();
     expect(screen.getByText('Library')).toBeInTheDocument();
   });
 
+  test('accordion items allow space for focus borders', () => {
+    wrap(
+      <Menu>
+        <Menu.Accordion
+          label='Services'
+          defaultExpanded
+        >
+          <Menu.Accordion.Item>Library</Menu.Accordion.Item>
+        </Menu.Accordion>
+      </Menu>
+    );
+
+    const accordionItem = screen
+      .getByText('Library')
+      .closest('.ucl-uikit-menu__accordion-item');
+    const accordionContentInner = accordionItem?.parentElement;
+
+    expect(accordionItem).toHaveStyle({
+      marginTop: '0px',
+      marginLeft: '6px',
+      marginRight: '6px',
+      marginBottom: '0px',
+      width: 'calc(100% - 12px)',
+    });
+    expect(accordionContentInner).toHaveStyle({
+      paddingTop: '6px',
+      paddingBottom: '6px',
+    });
+  });
+
   test('accordion item supports asChild link content', () => {
     wrap(
       <Menu>
@@ -220,10 +257,10 @@ describe('Menu', () => {
     expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
   });
 
-  test('can disable hover underline', () => {
+  test('primary items use background hover instead of underline hover', () => {
     wrap(
       <Menu>
-        <Menu.PrimaryItem underlineOnHover={false}>Home</Menu.PrimaryItem>
+        <Menu.PrimaryItem>Home</Menu.PrimaryItem>
       </Menu>
     );
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.26.0",
+  "version": "0.26.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",