uikit-react-public 0.25.3 → 0.25.5

package/lib/components/MenuNew/MenuHead.tsx

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { UclLogoNew } from '../UclLogoNew';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import { useDropdownContextOptional } from '../Dropdown/Dropdown.context';
+
+export const NAME = 'ucl-uikit-menu__head';
+
+export interface MenuHeadProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  onClose?: () => void;
+  closeButtonAriaLabel?: string;
+}
+
+const MenuHead = ({
+  testId = NAME,
+  onClose,
+  closeButtonAriaLabel = 'Close menu',
+  className,
+  ...props
+}: MenuHeadProps) => {
+  const [theme] = useTheme();
+  const dropdownContext = useDropdownContextOptional();
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    margin: 0 0 48px;
+    padding: 0 ${theme.padding.p8};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+      padding: 0 ${theme.padding.p16};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const closeButtonStyle = css`
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <UclLogoNew
+        testId={`${testId}__logo`}
+        height={30}
+      />
+      <IconButton
+        testId={`${testId}__close-button`}
+        aria-label={closeButtonAriaLabel}
+        onClick={() => {
+          onClose?.();
+          dropdownContext?.setIsOpen(false);
+        }}
+        className={closeButtonStyle}
+      >
+        <Icon.X size={32} />
+      </IconButton>
+    </div>
+  );
+};
+
+export default MenuHead;

package/lib/components/MenuNew/MenuHeading.tsx

@@ -20,6 +20,7 @@ const MenuHeading = ({
   const baseStyle = css`
     box-sizing: border-box;
     margin: ${theme.margin.m32} 0 ${theme.margin.m16};
+    padding: 0 ${theme.padding.p16};
     text-transform: uppercase;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -26,6 +26,7 @@ const PrimaryMenuItem = ({
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
+    padding: 0 ${theme.padding.p16};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: 0 ${theme.padding.p16};

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -25,8 +25,12 @@ const SecondaryMenuItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    padding-inline: ${theme.margin.m16};
+    padding: 0 ${theme.padding.p16};
     color: ${theme.colour.text.secondary};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p16};
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

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

@@ -26,6 +26,31 @@ describe('Menu', () => {
     expect(heading).not.toHaveAttribute('role', 'button');
   });
 
+  test('renders head item', () => {
+    const onClose = vi.fn();
+
+    wrap(
+      <Menu>
+        <Menu.Head onClose={onClose} />
+      </Menu>
+    );
+
+    const head = screen.getByTestId('ucl-uikit-menu__head');
+    const logo = screen.getByTestId('ucl-uikit-menu__head__logo');
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-menu__head__close-button'
+    );
+
+    expect(head).toBeInTheDocument();
+    expect(logo).toBeInTheDocument();
+    expect(closeButton).toBeInTheDocument();
+    expect(head).toHaveClass('ucl-uikit-menu__head');
+    expect(head).not.toHaveAttribute('role', 'button');
+
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   test('renders semantic section wrapper', () => {
     wrap(
       <Menu>

package/lib/components/MenuNew/index.ts

@@ -2,6 +2,7 @@ export { default } from './Menu';
 export type {
   MenuProps,
   MenuDividerProps,
+  MenuHeadProps,
   MenuHeadingProps,
   MenuSectionProps,
   MenuAccordionProps,

package/lib/hooks/useMediaQuery.ts

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 
 const getInitialMatch = (query: string): boolean => {
   if (typeof window === 'undefined') return false;
+  if (typeof window.matchMedia !== 'function') return false;
   return window.matchMedia(query).matches;
 };
 
@@ -12,6 +13,7 @@ const useMediaQuery = (query: string): boolean => {
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
+    if (typeof window.matchMedia !== 'function') return;
 
     const mediaQueryList = window.matchMedia(query);
 

package/package.json

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