uikit-react-public 0.43.0 → 0.43.2

package/lib/components/Accordion/Accordion.Heading.tsx

@@ -71,11 +71,8 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   `;
 
   const disabledStyle = css`
-    cursor: 'not-allowed';
-
-    &:hover {
-      background-color: ${theme.colour.text.disabled};
-    }
+    cursor: not-allowed;
+    color: ${theme.colour.text.disabled};
   `;
 
   const headingStyle = cx(

package/lib/components/Accordion/Accordion.tsx

@@ -47,6 +47,7 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
   size?: AccordionSize;
   disabled?: boolean;
   isOpen?: boolean;
+  variant?: 'no-background' | 'on-background';
 }
 
 const Accordion: React.FC<AccordionProps> & {
@@ -56,6 +57,7 @@ const Accordion: React.FC<AccordionProps> & {
   size = 'default',
   disabled = false,
   isOpen = false,
+  variant = 'no-background',
   children,
   className,
   testId = NAME,
@@ -76,7 +78,8 @@ const Accordion: React.FC<AccordionProps> & {
     min-width: 288px;
     max-width: 660px;
     box-sizing: border-box;
-    border: 1px solid ${theme.colour.border.default};
+    border-top: 1px solid ${theme.colour.border.default};
+    border-bottom: 1px solid ${theme.colour.border.default};
     background-color: ${theme.colour.surface.default};
     color: ${theme.colour.text.default};
     flex-shrink: 1;
@@ -88,7 +91,17 @@ const Accordion: React.FC<AccordionProps> & {
     color: ${theme.colour.text.disabled};
   `;
 
-  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
+  const onBackgroundStyle = css`
+    border: 1px solid ${theme.colour.border.default};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    disabled && disabledStyle,
+    variant === 'on-background' && onBackgroundStyle,
+    className
+  );
 
   return (
     <AccordionContext.Provider

package/lib/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Accordion > snapshot: no props 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-cn49eu"
+  class="ucl-uikit-accordion css-1pwsm43"
   data-testid="ucl-uikit-accordion"
 >
   <h6
@@ -39,7 +39,7 @@ exports[`Accordion > snapshot: no props 1`] = `
 exports[`Accordion > snapshot: testId prop 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-cn49eu"
+  class="ucl-uikit-accordion css-1pwsm43"
   data-testid="abc"
 >
   <h6

package/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,20 +1,39 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, NamedExoticComponent, memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Icon } from '../';
+import { themes, useTheme } from '../../theme';
+import Icon from '../Icon';
+import BreadcrumbsNew, {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps as BreadcrumbsNewProps,
+  BreadcrumbsSize,
+} from '../BreadcrumbsNew';
 import Breadcrumb from './Breadcrumb';
+import { BreadcrumbProps } from './Breadcrumb';
 
 const NAME = 'ucl-uikit-breadcrumbs';
 
-export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+export interface LegacyBreadcrumbsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-const Breadcrumbs = ({
+export type BreadcrumbsProps = Omit<BreadcrumbsNewProps, 'children'> &
+  LegacyBreadcrumbsProps;
+
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsSize,
+};
+
+const LegacyBreadcrumbsRoot = ({
   testId = NAME,
   className,
   children,
   ...props
-}: BreadcrumbsProps) => {
+}: LegacyBreadcrumbsProps) => {
   const separatorStyle = css`
     display: inline-flex;
     align-items: center;
@@ -55,6 +74,146 @@ const Breadcrumbs = ({
   );
 };
 
-Breadcrumbs.Breadcrumb = Breadcrumb;
+export interface LegacyBreadcrumbsComponent extends NamedExoticComponent<LegacyBreadcrumbsProps> {
+  Breadcrumb: typeof Breadcrumb;
+}
+
+export const LegacyBreadcrumbs = Object.assign(memo(LegacyBreadcrumbsRoot), {
+  Breadcrumb,
+}) as LegacyBreadcrumbsComponent;
+
+const Breadcrumbs = ({
+  size,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BreadcrumbsProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyBreadcrumbs
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyBreadcrumbs>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew
+      size={size}
+      testId={testId}
+      className={className}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew>
+  );
+};
+
+type BreadcrumbBridgeProps = BreadcrumbProps & {
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+};
+
+const BreadcrumbBridge = ({
+  uri,
+  isActive,
+  component,
+  separator,
+  back,
+  size,
+  testId,
+  className,
+  children,
+  ...props
+}: BreadcrumbBridgeProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <Breadcrumb
+        uri={uri}
+        isActive={isActive}
+        component={component}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Breadcrumb>
+    );
+  }
+
+  const activeBreadcrumb =
+    isActive ??
+    (typeof window !== 'undefined' && window.location.pathname === uri);
+
+  if (activeBreadcrumb) {
+    return (
+      <BreadcrumbsNew.Current
+        separator={separator}
+        size={size}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Current>
+    );
+  }
+
+  if (component) {
+    return (
+      <BreadcrumbsNew.Link
+        separator={separator}
+        back={back}
+        size={size}
+        testId={testId}
+        className={className}
+        component={component}
+        to={uri}
+        {...props}
+      >
+        {children}
+      </BreadcrumbsNew.Link>
+    );
+  }
+
+  return (
+    <BreadcrumbsNew.Link
+      separator={separator}
+      back={back}
+      size={size}
+      testId={testId}
+      className={className}
+      href={uri}
+      {...props}
+    >
+      {children}
+    </BreadcrumbsNew.Link>
+  );
+};
+
+export interface BreadcrumbsComponent extends NamedExoticComponent<BreadcrumbsProps> {
+  Breadcrumb: typeof BreadcrumbBridge;
+  BaseItem: typeof BreadcrumbsNew.BaseItem;
+  Link: typeof BreadcrumbsNew.Link;
+  Current: typeof BreadcrumbsNew.Current;
+}
+
+const MemoBreadcrumbs = memo(Breadcrumbs);
+
+const BreadcrumbsWithSubComponents = Object.assign(MemoBreadcrumbs, {
+  Breadcrumb: BreadcrumbBridge,
+  BaseItem: BreadcrumbsNew.BaseItem,
+  Link: BreadcrumbsNew.Link,
+  Current: BreadcrumbsNew.Current,
+}) as BreadcrumbsComponent;
 
-export default Breadcrumbs;
+export default BreadcrumbsWithSubComponents;

package/lib/components/Breadcrumbs/index.ts

@@ -1,2 +1,5 @@
 export { default } from './Breadcrumbs';
+export { LegacyBreadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
+/** @deprecated Use BreadcrumbsProps instead. LegacyBreadcrumbsProps only supports the default theme. */
+export type { LegacyBreadcrumbsProps } from './Breadcrumbs';

package/lib/components/Menu/Menu.tsx

@@ -1,14 +1,31 @@
-import { HTMLAttributes, memo } from 'react';
+import { HTMLAttributes, NamedExoticComponent, ReactNode, memo } from 'react';
 import { css, cx } from '@emotion/css';
+import { themes, useTheme } from '../../theme';
+import Icon from '../Icon';
+import MenuNew, {
+  MenuBaseItemProps,
+  MenuDividerProps,
+  MenuHeadProps,
+  MenuHeadingProps,
+  MenuProps as MenuNewProps,
+  MenuSectionProps as MenuNewSectionProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuButtonProps,
+  MenuAccordionItemProps,
+  MenuAccordionProps,
+} from '../MenuNew';
 import MenuProvider from './Menu.context';
 import MenuContent from './MenuContent';
 import MenuItem from './MenuItem';
+import { MenuItemProps } from './MenuItem';
 import MenuSection from './MenuSection';
+import { MenuSectionProps } from './MenuSection';
 import MenuTrigger from './MenuTrigger';
 
 export const NAME = 'ucl-uikit-menu';
 
-export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+export interface LegacyMenuProps extends HTMLAttributes<HTMLDivElement> {
   defaultOpen?: boolean;
   title?: string;
   menuId?: string;
@@ -16,7 +33,25 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   position?: 'left' | 'right';
 }
 
-const Menu = ({
+export type MenuProps = Omit<MenuNewProps, 'children'> &
+  Pick<LegacyMenuProps, 'defaultOpen' | 'title' | 'menuId' | 'position'> & {
+    children?: ReactNode;
+  };
+
+export type {
+  MenuDividerProps,
+  MenuHeadProps,
+  MenuHeadingProps,
+  MenuNewSectionProps,
+  MenuAccordionProps,
+  MenuAccordionItemProps,
+  MenuBaseItemProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuButtonProps,
+};
+
+const LegacyMenuRoot = ({
   defaultOpen = false,
   title,
   position = 'right',
@@ -25,7 +60,7 @@ const Menu = ({
   children,
   className,
   ...props
-}: MenuProps) => {
+}: LegacyMenuProps) => {
   const baseStyle = css`
     position: relative;
   `;
@@ -52,16 +87,137 @@ const Menu = ({
   );
 };
 
-export interface IMenuSubComponents {
+export interface LegacyMenuComponent extends NamedExoticComponent<LegacyMenuProps> {
   Section: typeof MenuSection;
   Item: typeof MenuItem;
 }
 
-const MemoMenu = memo(Menu);
+export const LegacyMenu = Object.assign(memo(LegacyMenuRoot), {
+  Section: MenuSection,
+  Item: MenuItem,
+}) as LegacyMenuComponent;
 
-const MenuWithSubComponents = MemoMenu as typeof MemoMenu & IMenuSubComponents;
+const Menu = ({
+  defaultOpen,
+  title,
+  position,
+  menuId,
+  testId = NAME,
+  className,
+  children,
+  border,
+  collapsed,
+  ...props
+}: MenuProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyMenu
+        defaultOpen={defaultOpen}
+        title={title}
+        position={position}
+        menuId={menuId}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyMenu>
+    );
+  }
+
+  return (
+    <MenuNew
+      testId={testId}
+      className={className}
+      border={border}
+      collapsed={collapsed}
+      {...props}
+    >
+      {children}
+    </MenuNew>
+  );
+};
+
+const MenuSectionBridge = (props: MenuSectionProps | MenuNewSectionProps) => {
+  const [theme] = useTheme();
+  const Section = theme === themes.default ? MenuSection : MenuNew.Section;
+
+  return <Section {...props} />;
+};
+
+const MenuItemBridge = ({
+  secondary,
+  externalLink,
+  trailingContent,
+  ...props
+}: MenuItemProps & PrimaryMenuItemProps & SecondaryMenuItemProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <MenuItem
+        secondary={secondary}
+        externalLink={externalLink}
+        {...props}
+      />
+    );
+  }
+
+  if (secondary) {
+    return (
+      <MenuNew.SecondaryItem
+        externalLink={externalLink}
+        {...props}
+      />
+    );
+  }
+
+  const resolvedTrailingContent =
+    trailingContent ??
+    (externalLink ? (
+      <Icon.ExternalLink
+        size={16}
+        aria-hidden='true'
+        focusable='false'
+      />
+    ) : undefined);
+
+  return (
+    <MenuNew.PrimaryItem
+      trailingContent={resolvedTrailingContent}
+      {...props}
+    />
+  );
+};
+
+interface MenuComponent extends NamedExoticComponent<MenuProps> {
+  Section: typeof MenuSectionBridge;
+  Item: typeof MenuItemBridge;
+  Head: typeof MenuNew.Head;
+  Heading: typeof MenuNew.Heading;
+  Accordion: typeof MenuNew.Accordion;
+  Divider: typeof MenuNew.Divider;
+  BaseItem: typeof MenuNew.BaseItem;
+  PrimaryItem: typeof MenuNew.PrimaryItem;
+  SecondaryItem: typeof MenuNew.SecondaryItem;
+  ActionButton: typeof MenuNew.ActionButton;
+}
+
+const MemoMenu = memo(Menu);
 
-MenuWithSubComponents.Section = MenuSection;
-MenuWithSubComponents.Item = MenuItem;
+const MenuWithSubComponents = Object.assign(MemoMenu, {
+  Section: MenuSectionBridge,
+  Item: MenuItemBridge,
+  Head: MenuNew.Head,
+  Heading: MenuNew.Heading,
+  Accordion: MenuNew.Accordion,
+  Divider: MenuNew.Divider,
+  BaseItem: MenuNew.BaseItem,
+  PrimaryItem: MenuNew.PrimaryItem,
+  SecondaryItem: MenuNew.SecondaryItem,
+  ActionButton: MenuNew.ActionButton,
+}) as MenuComponent;
 
 export default MenuWithSubComponents;

package/lib/components/Menu/index.ts

@@ -1,8 +1,15 @@
 export { default } from './Menu';
+export { LegacyMenu } from './Menu';
 export type { MenuProps } from './Menu';
+/** @deprecated Use MenuProps instead. LegacyMenuProps only supports the default theme. */
+export type { LegacyMenuProps } from './Menu';
 
+/** @deprecated Use Menu.PrimaryItem/Menu.SecondaryItem from the package root instead. */
 export { default as MenuTrigger } from './MenuTrigger';
+/** @deprecated Use MenuNew component props from the package root instead. */
 export type { MenuTriggerProps } from './MenuTrigger';
 
+/** @deprecated Use Menu.Head/Menu.Section from the package root instead. */
 export { default as MenuContent } from './MenuContent';
+/** @deprecated Use MenuNew component props from the package root instead. */
 export type { MenuContentProps } from './MenuContent';

package/lib/components/MenuNew/ActionMenuButton.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import Button, { ButtonProps } from '../Button';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-menu__action-button';
 

package/lib/components/index.ts

@@ -95,6 +95,10 @@ export type { AppHeaderProps } from './AppHeader';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
 
+/** @deprecated Use Breadcrumbs instead. BreadcrumbsLegacy only supports the default theme. */
+export { LegacyBreadcrumbs as BreadcrumbsLegacy } from './Breadcrumbs';
+export type { LegacyBreadcrumbsProps as BreadcrumbsLegacyProps } from './Breadcrumbs';
+
 export { default as BreadcrumbsNew } from './BreadcrumbsNew';
 export type {
   BaseBreadcrumbsItemProps,
@@ -119,6 +123,10 @@ export type { AppMenuProps } from './AppMenu';
 export { default as Menu } from './Menu';
 export type { MenuProps } from './Menu';
 
+/** @deprecated Use Menu instead. MenuLegacy only supports the default theme. */
+export { LegacyMenu as MenuLegacy } from './Menu';
+export type { LegacyMenuProps as MenuLegacyProps } from './Menu';
+
 export { default as MenuNew } from './MenuNew';
 export type { MenuProps as MenuNewProps } from './MenuNew';
 

package/package.json

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