uikit-react-public 0.30.1 → 0.32.4

package/lib/components/Dropdown/Dropdown.stories.tsx

@@ -8,7 +8,6 @@ import IconButton from '../IconButton';
 import LabelledCheckbox from '../Checkbox/LabelledCheckbox';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
-import { ThemeContextProvider, lightTheme } from '../../theme';
 
 const meta = {
   title: 'Components/Dropdown',
@@ -74,55 +73,53 @@ export const HeaderResponsiveTrigger: Story = {
     `;
 
     return (
-      <ThemeContextProvider initialTheme={lightTheme}>
-        <div className={containerStyle}>
-          <HeaderNew title='Name of the application'>
-            <HeaderNew.MenuContainer>
-              <Dropdown {...args}>
-                <Dropdown.Trigger>
-                  {isDesktop ? (
-                    <Button
-                      variant='primary-subtle'
-                      size='small'
-                      icon={<Icon.Menu size={20} />}
-                      aria-label='Menu'
-                    >
-                      Menu
-                    </Button>
-                  ) : (
-                    <IconButton
-                      className={iconButtonStyle}
-                      aria-label='Menu'
-                    >
-                      <Icon.Menu size={20} />
-                    </IconButton>
-                  )}
-                </Dropdown.Trigger>
-                <Dropdown.Content className={menuStyle}>
-                  <button
-                    type='button'
-                    className={menuItemStyle}
+      <div className={containerStyle}>
+        <HeaderNew title='Name of the application'>
+          <HeaderNew.MenuContainer>
+            <Dropdown {...args}>
+              <Dropdown.Trigger>
+                {isDesktop ? (
+                  <Button
+                    variant='primary-subtle'
+                    size='small'
+                    icon={<Icon.Menu size={20} />}
+                    aria-label='Menu'
                   >
-                    View profile
-                  </button>
-                  <button
-                    type='button'
-                    className={menuItemStyle}
+                    Menu
+                  </Button>
+                ) : (
+                  <IconButton
+                    className={iconButtonStyle}
+                    aria-label='Menu'
                   >
-                    Team settings
-                  </button>
-                  <button
-                    type='button'
-                    className={menuItemStyle}
-                  >
-                    Sign out
-                  </button>
-                </Dropdown.Content>
-              </Dropdown>
-            </HeaderNew.MenuContainer>
-          </HeaderNew>
-        </div>
-      </ThemeContextProvider>
+                    <Icon.Menu size={20} />
+                  </IconButton>
+                )}
+              </Dropdown.Trigger>
+              <Dropdown.Content className={menuStyle}>
+                <button
+                  type='button'
+                  className={menuItemStyle}
+                >
+                  View profile
+                </button>
+                <button
+                  type='button'
+                  className={menuItemStyle}
+                >
+                  Team settings
+                </button>
+                <button
+                  type='button'
+                  className={menuItemStyle}
+                >
+                  Sign out
+                </button>
+              </Dropdown.Content>
+            </Dropdown>
+          </HeaderNew.MenuContainer>
+        </HeaderNew>
+      </div>
     );
   },
 };
@@ -152,33 +149,31 @@ export const StandaloneInfoPanel: Story = {
     `;
 
     return (
-      <ThemeContextProvider initialTheme={lightTheme}>
-        <div className={containerStyle}>
-          <Dropdown {...args}>
-            <Dropdown.Trigger>
-              <Button
-                variant='secondary'
-                size='small'
-                icon={<Icon.Info size={20} />}
-              >
-                Notification preferences
-              </Button>
-            </Dropdown.Trigger>
-            <Dropdown.Content
-              className={infoContentStyle}
-              align='left'
+      <div className={containerStyle}>
+        <Dropdown {...args}>
+          <Dropdown.Trigger>
+            <Button
+              variant='secondary'
+              size='small'
+              icon={<Icon.Info size={20} />}
             >
-              <p className={infoTitleStyle}>Weekly update</p>
-              <p className={infoBodyStyle}>
-                Get a summary of new activity in your workspace every Friday.
-              </p>
-              <LabelledCheckbox id='storybook-weekly-update-checkbox'>
-                Email me the weekly summary
-              </LabelledCheckbox>
-            </Dropdown.Content>
-          </Dropdown>
-        </div>
-      </ThemeContextProvider>
+              Notification preferences
+            </Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content
+            className={infoContentStyle}
+            align='left'
+          >
+            <p className={infoTitleStyle}>Weekly update</p>
+            <p className={infoBodyStyle}>
+              Get a summary of new activity in your workspace every Friday.
+            </p>
+            <LabelledCheckbox id='storybook-weekly-update-checkbox'>
+              Email me the weekly summary
+            </LabelledCheckbox>
+          </Dropdown.Content>
+        </Dropdown>
+      </div>
     );
   },
 };

package/lib/components/Heading/Documentation.mdx

@@ -15,8 +15,7 @@ export const usage = {
   level2: `<Heading level={2}>Level 2 Heading</Heading>`,
   level3: `<Heading level={3}>Level 3 Heading</Heading>`,
   level4: `<Heading level={4}>Level 4 Heading</Heading>`,
-  withMargins: `<Heading margins={true} >Heading with margins</Heading>`,
-  noMargins: `<Heading margins={false} >Heading with no margins</Heading>`,
+  withMargins: `<Heading mb="24">Heading with bottom margin</Heading>`,
 };
 
 <Meta of={HeadingStories} />
@@ -52,7 +51,8 @@ All screens in UCL Experience apps should have a sensible semantic hierarchy. Th
 ### Props
 
 - `level`: A **number** from 1 to 4, corresponding to the level of the HTML heading element to be rendered. Default is 1, if otherwise unspecified.
-- `margins`: A **boolean** value. If `false`, the heading will have no margins. Default is `true`.
+- `m`, `mv`, `mh`, `mt`, `mb`, `ml`, `mr`: common margin props for applying theme spacing.
+- `margins`: Deprecated. If `false`, the heading will have no margins.
 - `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-uikit-heading` is used.
 
 Pass the text you want in the heading as children: `<Heading>My heading text</Heading>`.
@@ -99,20 +99,10 @@ Custom CSS styling can be added as with all UIKit-React components by passing an
 
 Red lines are added to the examples below to show the margins of the heading element.
 
-Note that `margins={true}` in the below example merely specifies explicitly the default behaviour.
-
 <Canvas
-  of={HeadingStories.Margins}
+  of={HeadingStories.withMargins}
   sourceState='shown'
   source={{
     code: usage.withMargins,
   }}
 />
-
-<Canvas
-  of={HeadingStories.NoMargins}
-  sourceState='shown'
-  source={{
-    code: usage.noMargins,
-  }}
-/>

package/lib/components/Heading/Heading.stories.tsx

@@ -21,45 +21,31 @@ export const Default: Story = {
   },
 };
 
-export const LevelXxl: Story = {
+export const Level1: Story = {
   args: {
-    level: 'xxl',
-    children: 'Heading level XXL',
+    level: 1,
+    children: 'Level 1 Heading',
   },
 };
 
-export const LevelXl: Story = {
+export const Level2: Story = {
   args: {
-    level: 'xl',
-    children: 'Heading level XL',
+    level: 2,
+    children: 'Level 2 Heading',
   },
 };
 
-export const LevelLg: Story = {
+export const Level3: Story = {
   args: {
-    level: 'lg',
-    children: 'Heading level LG',
-  },
-};
-
-export const LevelMd: Story = {
-  args: {
-    level: 'md',
-    children: 'Heading level MD',
-  },
-};
-
-export const LevelSm: Story = {
-  args: {
-    level: 'sm',
-    children: 'Heading level SM',
+    level: 3,
+    children: 'Level 3 Heading',
   },
 };
 
-export const LevelXs: Story = {
+export const Level4: Story = {
   args: {
-    level: 'xs',
-    children: 'Heading level XS',
+    level: 4,
+    children: 'Level 4 Heading',
   },
 };
 
@@ -71,12 +57,12 @@ export const AsSpan: Story = {
   },
 };
 
-export const NoMargins: Story = {
-  name: 'No margins',
+export const withMargins: Story = {
+  name: 'With margins',
   args: {
-    noMargins: true,
+    mb: '24',
     level: 'md',
-    children: 'Heading without margins',
+    children: 'Heading with bottom margin',
   },
   decorators: [
     (Story) => (

package/lib/components/MenuNew/Menu.context.tsx

@@ -0,0 +1,18 @@
+import { ReactNode, createContext, use } from 'react';
+
+interface MenuContextValue {
+  collapsed: boolean;
+}
+
+const MenuContext = createContext<MenuContextValue>({
+  collapsed: false,
+});
+
+export const MenuProvider = ({
+  collapsed,
+  children,
+}: MenuContextValue & { children: ReactNode }) => (
+  <MenuContext value={{ collapsed }}>{children}</MenuContext>
+);
+
+export const useMenu = () => use(MenuContext);

package/lib/components/MenuNew/Menu.tsx

@@ -13,12 +13,14 @@ import ActionMenuButton, { ActionMenuButtonProps } from './ActionMenuButton';
 import PrimaryMenuItem, { PrimaryMenuItemProps } from './PrimaryMenuItem';
 import SecondaryMenuItem, { SecondaryMenuItemProps } from './SecondaryMenuItem';
 import { useTheme } from '../../theme';
+import { MenuProvider } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu';
 
-export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
   border?: boolean;
+  collapsed?: boolean;
 }
 
 export type {
@@ -39,6 +41,7 @@ const Menu = ({
   className,
   children,
   border = false,
+  collapsed = false,
   ...props
 }: MenuProps) => {
   const [theme] = useTheme();
@@ -58,14 +61,16 @@ const Menu = ({
   const style = cx(baseStyle, border && borderStyle, className);
 
   return (
-    <nav
-      className={style}
-      data-testid={testId}
-      role='menu'
-      {...props}
-    >
-      {children}
-    </nav>
+    <MenuProvider collapsed={collapsed}>
+      <nav
+        className={style}
+        data-testid={testId}
+        role='menu'
+        {...props}
+      >
+        {children}
+      </nav>
+    </MenuProvider>
   );
 };
 

package/lib/components/MenuNew/MenuDivider.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__divider';
 
@@ -8,13 +9,23 @@ export interface MenuDividerProps extends HTMLAttributes<HTMLHRElement> {}
 
 const MenuDivider = ({ className, ...props }: MenuDividerProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
   const baseStyle = css`
+    flex: 0 0 1px;
+    min-height: 1px;
+    box-sizing: border-box;
+    width: 100%;
+    align-self: stretch;
     border: 0;
     height: 1px;
     background-color: ${theme.colour.border.subtle};
     margin: ${theme.margin.m16} 0;
   `;
-  const style = cx(NAME, baseStyle, className);
+  const collapsedStyle = css`
+    width: 32px;
+    align-self: center;
+  `;
+  const style = cx(NAME, baseStyle, collapsed && collapsedStyle, className);
 
   return (
     <hr

package/lib/components/MenuNew/MenuHeading.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import Heading from '../Heading';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__heading';
 
@@ -16,6 +17,7 @@ const MenuHeading = ({
   ...props
 }: MenuHeadingProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
 
   const baseStyle = css`
     box-sizing: border-box;
@@ -30,6 +32,10 @@ const MenuHeading = ({
 
   const style = cx(NAME, baseStyle, className);
 
+  if (collapsed) {
+    return null;
+  }
+
   const headingStyle = css`
     color: ${theme.colour.text.secondary};
     text-transform: uppercase;

package/lib/components/MenuNew/MenuItemText.tsx

@@ -13,12 +13,14 @@ export const NAME = 'ucl-uikit-menu__item-text';
 export interface MenuItemTextProps {
   asChild?: boolean;
   className?: string;
+  visuallyHidden?: boolean;
   children?: ReactNode;
 }
 
 const MenuItemText = ({
   asChild = false,
   className,
+  visuallyHidden = false,
   children,
 }: MenuItemTextProps) => {
   const asChildResetStyle = css`
@@ -46,18 +48,40 @@ const MenuItemText = ({
       box-shadow: none;
     }
   `;
-  const style = cx(NAME, className);
+  const visuallyHiddenStyle = css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  `;
+
+  const style = cx(NAME, visuallyHidden && visuallyHiddenStyle, className);
 
   if (asChild) {
+    const visuallyHiddenAsChildStyle = css`
+      color: transparent;
+      font-size: 0;
+      line-height: 0;
+    `;
+
     const child = Children.only(children) as ReactElement<{
       className?: string;
     }>;
 
     if (isValidElement(child)) {
       return (
-        <Text className={style}>
+        <Text className={cx(NAME, className)}>
           {cloneElement(child, {
-            className: cx(asChildResetStyle, child.props.className),
+            className: cx(
+              asChildResetStyle,
+              visuallyHidden && visuallyHiddenAsChildStyle,
+              child.props.className
+            ),
           })}
         </Text>
       );

package/lib/components/MenuNew/MenuSection.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__section';
 
@@ -13,12 +14,22 @@ const MenuSection = ({
   children,
   ...props
 }: MenuSectionProps) => {
+  const { collapsed } = useMenu();
+
   const style = cx(
     NAME,
     css`
+      width: 100%;
+      box-sizing: border-box;
       margin: 0;
       padding: 0;
     `,
+    collapsed &&
+      css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      `,
     className
   );
 

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -4,6 +4,7 @@ import { MenuBaseItemProps } from './MenuBaseItem';
 import MenuBaseItem from './MenuBaseItem';
 import MenuItemText from './MenuItemText';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__primary-item';
 
@@ -20,20 +21,84 @@ const PrimaryMenuItem = ({
   children,
   asChild,
   trailingContent,
+  icon: iconProp,
+  active = false,
   ...props
 }: PrimaryMenuItemProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
     padding: 0 ${theme.padding.p16};
+    white-space: nowrap;
+    border-radius: 4px;
+
+    > svg {
+      width: 20px;
+      height: 20px;
+      flex: 0 0 20px;
+    }
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: 0 ${theme.padding.p16};
     }
+
+    &:focus-visible,
+    &:focus-within {
+      border-radius: 4px;
+      box-shadow: none !important;
+      z-index: 1;
+    }
+
+    &:focus-visible::after,
+    &:focus-within::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      border: 2px solid ${theme.colour.border.brand};
+      pointer-events: none;
+    }
   `;
 
-  const style = cx(NAME, baseStyle, className);
+  const collapsedStyle = css`
+    width: 32px;
+    min-height: 32px;
+    height: 32px;
+    padding: 0;
+    margin-bottom: ${theme.margin.m8};
+    justify-content: center;
+    gap: 0;
+
+    &:focus-visible,
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus} !important;
+    }
+
+    &:focus-visible::after,
+    &:focus-within::after {
+      content: none;
+    }
+  `;
+
+  const collapsedActiveStyle = css`
+    background-color: ${theme.colour.fill.brand};
+    color: ${theme.colour.fill.inverse};
+
+    &:hover {
+      background-color: ${theme.colour.fill.brandHover};
+    }
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    collapsed && collapsedStyle,
+    collapsed && active && collapsedActiveStyle,
+    className
+  );
 
   const textStyle = css``;
 
@@ -48,16 +113,20 @@ const PrimaryMenuItem = ({
       className={style}
       asChild={asChild}
       iconPosition='left'
+      icon={iconProp}
+      active={!collapsed && active}
+      aria-current={active ? 'page' : props['aria-current']}
       {...props}
     >
       <span className={contentStyle}>
         <MenuItemText
           asChild={asChild}
           className={textStyle}
+          visuallyHidden={collapsed}
         >
           {children}
         </MenuItemText>
-        {trailingContent}
+        {!collapsed && trailingContent}
       </span>
     </MenuBaseItem>
   );

package/lib/components/Select/Select.types.ts

@@ -28,13 +28,7 @@ export type OptionData<T> = {
  */
 export type FilterInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  | 'value'
-  | 'onChange'
-  | 'disabled'
-  | 'ref'
-  | 'role'
-  | 'aria-autocomplete'
-  | 'aria-label'
+  'value' | 'onChange' | 'disabled' | 'ref' | 'role' | 'aria-autocomplete'
 >;
 
 export type SelectDropdownWidth = 'content' | 'match-select';