uikit-react-public 0.39.0 → 0.40.0

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

@@ -3,23 +3,27 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import Icon from '../Icon/Icon';
 import { useAccordionContext } from './Accordion';
+import Heading, { HeadingProps } from '../Heading';
 
 export const NAME = 'ucl-uikit-accordion__heading';
 export const ICON_NAME = 'ucl-uikit-accordion__heading__icon';
 
 export interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
-  as?: keyof HTMLElementTagNameMap;
+  as?: HeadingProps['as'];
   testId?: string;
 }
 
 const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   children,
-  as: Component = 'div',
+  as,
   testId = NAME,
   className,
 }) => {
   const [theme] = useTheme();
   const { isOpen, toggleAccordion, disabled, size } = useAccordionContext();
+  const isLarge = size === 'large';
+  const headingLevel = isLarge ? 'md' : 'xs';
+  const headingElement = as ?? (isLarge ? 'h4' : 'h6');
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
     if (disabled) return;
@@ -37,7 +41,6 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     padding: ${theme.padding.p16};
     background-color: ${theme.colour.fill.inverse};
     cursor: pointer;
-    font-weight: ${theme.font.weight.bold};
     transition: background-color 0.15s ease;
     margin: 0;
     border: none;
@@ -55,6 +58,16 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
         color: ${theme.colour.icon.default};
       }
     }
+
+    &:focus-visible {
+      background-color: ${theme.colour.fill.inverse};
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+
+      [class*='${ICON_NAME}'] {
+        color: ${theme.colour.icon.brand};
+      }
+    }
   `;
 
   const disabledStyle = css`
@@ -75,7 +88,7 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   const iconBaseStyle = css`
     transform: rotate(${isOpen ? '180deg' : '0deg'});
     transition: transform 0.15s ease;
-    color: ${theme.colour.icon.brand};
+    color: ${theme.colour.icon.default};
   `;
 
   const iconDisabledStyle = css`
@@ -85,9 +98,12 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   const iconStyle = cx(ICON_NAME, iconBaseStyle, disabled && iconDisabledStyle);
 
   return (
-    <Component
+    <Heading
+      level={headingLevel}
+      as={headingElement}
+      noMargins
       className={headingStyle}
-      data-testid={testId}
+      testId={testId}
       onKeyDown={handleKeyDown}
       onClick={!disabled ? toggleAccordion : undefined}
       role='button'
@@ -96,10 +112,10 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     >
       {children}
       <Icon.ChevronDown
-        size={size === 'medium' ? 32 : 24}
+        size={24}
         className={iconStyle}
       />
-    </Component>
+    </Heading>
   );
 };
 

package/lib/components/Accordion/Accordion.Panel.tsx

@@ -2,6 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import { useAccordionContext } from './Accordion';
+import Paragraph from '../Paragraph';
 
 export const NAME = 'ucl-uikit-accordion__panel';
 
@@ -29,7 +30,6 @@ const AccordionPanel: React.FC<AccordionPanelProps> = ({
       min-width: 0;
       flex-shrink: 1;
       padding: ${theme.padding.p16};
-      font-weight: ${theme.font.weight.regular};
       box-sizing: border-box;
       overflow: hidden;
       overflow-wrap: break-word;
@@ -39,12 +39,15 @@ const AccordionPanel: React.FC<AccordionPanelProps> = ({
   );
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='md'
+      noMargins
       className={panelStyle}
-      data-testid={testId}
+      testId={testId}
     >
       {children}
-    </div>
+    </Paragraph>
   );
 };
 

package/lib/components/Accordion/Accordion.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   },
   argTypes: {
     size: {
-      options: ['small', 'medium'],
+      options: ['default', 'large'],
       control: { type: 'select' },
       type: 'string',
     },
@@ -33,7 +33,7 @@ const meta = {
   args: {
     isOpen: false,
     disabled: false,
-    size: 'medium',
+    size: 'default',
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Accordion>;
@@ -46,7 +46,7 @@ export const Default: Story = {
   args: {
     isOpen: false,
     disabled: false,
-    size: 'medium',
+    size: 'default',
   },
   render: (args) => (
     <Accordion {...args}>
@@ -60,7 +60,7 @@ export const Disabled: Story = {
   args: {
     isOpen: false,
     disabled: true,
-    size: 'medium',
+    size: 'default',
   },
   render: (args) => (
     <Accordion {...args}>
@@ -70,11 +70,11 @@ export const Disabled: Story = {
   ),
 };
 
-export const SmallSize: Story = {
+export const LargeSize: Story = {
   args: {
     isOpen: false,
     disabled: false,
-    size: 'small',
+    size: 'large',
   },
   render: (args) => (
     <Accordion {...args}>
@@ -88,7 +88,7 @@ export const CustomHeadingElement: Story = {
   args: {
     isOpen: false,
     disabled: false,
-    size: 'medium',
+    size: 'large',
   },
   render: (args) => (
     <Accordion {...args}>
@@ -104,7 +104,7 @@ export const MultipleAccordions: Story = {
   args: {
     isOpen: false,
     disabled: false,
-    size: 'medium',
+    size: 'default',
   },
   render: (args) => (
     <div style={{ width: '100%', maxWidth: 660 }}>

package/lib/components/Accordion/Accordion.tsx

@@ -11,11 +11,21 @@ import useTheme from '../../theme/useTheme';
 
 export const NAME = 'ucl-uikit-accordion';
 
+export type AccordionSize =
+  | 'default'
+  | 'large'
+  /** @deprecated Use `default` instead. */
+  | 'small'
+  /** @deprecated Use `large` instead. */
+  | 'medium';
+
+type NormalizedAccordionSize = Exclude<AccordionSize, 'small' | 'medium'>;
+
 interface AccordionContextProps {
   isOpen: boolean;
   toggleAccordion: () => void;
   disabled: boolean;
-  size: 'small' | 'medium';
+  size: NormalizedAccordionSize;
 }
 
 const AccordionContext = createContext<AccordionContextProps | undefined>(
@@ -34,7 +44,7 @@ export const useAccordionContext = () => {
 
 export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
-  size?: 'small' | 'medium';
+  size?: AccordionSize;
   disabled?: boolean;
   isOpen?: boolean;
 }
@@ -43,7 +53,7 @@ const Accordion: React.FC<AccordionProps> & {
   Heading: typeof AccordionHeading;
   Panel: typeof AccordionPanel;
 } = ({
-  size = 'medium',
+  size = 'default',
   disabled = false,
   isOpen = false,
   children,
@@ -52,6 +62,8 @@ const Accordion: React.FC<AccordionProps> & {
 }) => {
   const [open, setOpen] = useState(isOpen);
   const [theme] = useTheme();
+  const normalizedSize: NormalizedAccordionSize =
+    size === 'small' ? 'default' : size === 'medium' ? 'large' : size;
 
   const toggleAccordion = () => {
     if (!disabled) {
@@ -67,34 +79,16 @@ const Accordion: React.FC<AccordionProps> & {
     border: 1px solid ${theme.colour.border.default};
     background-color: ${theme.colour.surface.default};
     color: ${theme.colour.text.default};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
     flex-shrink: 1;
   `;
 
-  const sizeSmallStyle = css`
-    font-size: ${theme.font.size.f16};
-    line-height: ${theme.height.h24};
-  `;
-
-  const sizeMediumStyle = css`
-    font-size: ${theme.font.size.f20};
-  `;
-
   const disabledStyle = css`
     pointer-events: none;
     background-color: ${theme.colour.fill.inverse};
     color: ${theme.colour.text.disabled};
   `;
 
-  const style = cx(
-    NAME,
-    baseStyle,
-    size === 'small' && sizeSmallStyle,
-    size === 'medium' && sizeMediumStyle,
-    disabled && disabledStyle,
-    className
-  );
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   return (
     <AccordionContext.Provider
@@ -102,7 +96,7 @@ const Accordion: React.FC<AccordionProps> & {
         isOpen: open,
         toggleAccordion,
         disabled,
-        size,
+        size: normalizedSize,
       }}
     >
       <div

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

@@ -3,71 +3,71 @@
 exports[`Accordion > snapshot: no props 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-1o0gcpe"
+  class="ucl-uikit-accordion css-cn49eu"
   data-testid="ucl-uikit-accordion"
 >
-  <div
+  <h6
     aria-expanded="false"
-    class="ucl-uikit-accordion__heading css-18gluve"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >
     Heading
     <svg
-      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-o97cjm"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2eekj2"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
-      height="32"
+      height="24"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
       viewBox="0 0 24 24"
-      width="32"
+      width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="m6 9 6 6 6-6"
       />
     </svg>
-  </div>
+  </h6>
 </div>
 `;
 
 exports[`Accordion > snapshot: testId prop 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-1o0gcpe"
+  class="ucl-uikit-accordion css-cn49eu"
   data-testid="abc"
 >
-  <div
+  <h6
     aria-expanded="false"
-    class="ucl-uikit-accordion__heading css-18gluve"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >
     Heading
     <svg
-      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-o97cjm"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2eekj2"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
-      height="32"
+      height="24"
       stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
       viewBox="0 0 24 24"
-      width="32"
+      width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="m6 9 6 6 6-6"
       />
     </svg>
-  </div>
+  </h6>
 </div>
 `;

package/lib/components/Alert/Alert.tsx

@@ -47,7 +47,6 @@ const Alert = ({
 
   const baseStyles = css`
     display: flex;
-    font-family: ${theme.font.family.primary};
     align-items: flex-start;
     gap: ${theme.margin.m8};
     padding: ${padding.p16} ${padding.p12} ${padding.p16} ${padding.p8};

package/lib/components/Alert/AlertMessage.tsx

@@ -1,6 +1,6 @@
-import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
+import { cx } from '@emotion/css';
 import { HTMLAttributes } from 'react';
+import Paragraph from '../Paragraph';
 
 export const NAME = 'ucl-uikit-alert__message';
 
@@ -12,24 +12,20 @@ const AlertMessage = ({
   testId = NAME,
   className,
   children,
+  ...props
 }: AlertMessageProps) => {
-  const [theme] = useTheme();
-
-  const messageStyles = css`
-    font-size: ${theme.font.size.f16};
-    color: ${theme.colour.text.default};
-    margin: 0;
-    line-height: 1.5;
-  `;
-  const style = cx(messageStyles, NAME, className);
+  const style = cx(NAME, className);
 
   return (
-    <p
+    <Paragraph
+      level='md'
+      noMargins
+      testId={testId}
       className={style}
-      data-testid={testId}
+      {...props}
     >
       {children}
-    </p>
+    </Paragraph>
   );
 };
 

package/lib/components/Alert/AlertTitle.tsx

@@ -1,6 +1,7 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 import { HTMLAttributes } from 'react';
+import Text from '../Text';
 
 export const NAME = 'ucl-uikit-alert__title';
 
@@ -8,23 +9,25 @@ export interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   testId?: string;
 }
 
-const AlertTitle = ({ children, testId = NAME }: AlertTitleProps) => {
+const AlertTitle = ({
+  children,
+  testId = NAME,
+  className,
+  ...props
+}: AlertTitleProps) => {
   const [theme] = useTheme();
 
   const titleStyles = css`
     margin: 0 0 ${theme.margin.m8} 0;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    font-weight: 700;
-    color: ${theme.colour.text.default};
   `;
 
   return (
     <h3
-      className={titleStyles}
+      className={cx(NAME, titleStyles, className)}
       data-test-id={testId}
+      {...props}
     >
-      {children}
+      <Text level='md-semibold'>{children}</Text>
     </h3>
   );
 };

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

@@ -2,7 +2,7 @@
 
 exports[`Alert > snapshot: type=error 1`] = `
 <div
-  class="ucl-uikit-alert css-4sws8a"
+  class="ucl-uikit-alert css-1eemwvm"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -32,13 +32,18 @@ exports[`Alert > snapshot: type=error 1`] = `
   </svg>
   <div>
     <h3
-      class="css-1ybx1vr"
+      class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"
     >
-      Error Alert
+      <span
+        class="ucl-uikit-text css-1w35ze4"
+        data-testid="ucl-uikit-text"
+      >
+        Error Alert
+      </span>
     </h3>
     <p
-      class="css-omeh0l ucl-uikit-alert__message"
+      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       The operation failed.
@@ -49,7 +54,7 @@ exports[`Alert > snapshot: type=error 1`] = `
 
 exports[`Alert > snapshot: type=info, no title 1`] = `
 <div
-  class="ucl-uikit-alert css-153fxq6"
+  class="ucl-uikit-alert css-1d2q0wf"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -79,7 +84,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   </svg>
   <div>
     <p
-      class="css-omeh0l ucl-uikit-alert__message"
+      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This is an informational alert.
@@ -90,7 +95,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
 
 exports[`Alert > snapshot: type=success 1`] = `
 <div
-  class="ucl-uikit-alert css-148uiho"
+  class="ucl-uikit-alert css-1p0xqd2"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -118,13 +123,18 @@ exports[`Alert > snapshot: type=success 1`] = `
   </svg>
   <div>
     <h3
-      class="css-1ybx1vr"
+      class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"
     >
-      Success
+      <span
+        class="ucl-uikit-text css-1w35ze4"
+        data-testid="ucl-uikit-text"
+      >
+        Success
+      </span>
     </h3>
     <p
-      class="css-omeh0l ucl-uikit-alert__message"
+      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       Your operation completed successfully.
@@ -135,7 +145,7 @@ exports[`Alert > snapshot: type=success 1`] = `
 
 exports[`Alert > snapshot: type=warning 1`] = `
 <div
-  class="ucl-uikit-alert css-uvjxfs"
+  class="ucl-uikit-alert css-1ks795a"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -160,13 +170,18 @@ exports[`Alert > snapshot: type=warning 1`] = `
   </svg>
   <div>
     <h3
-      class="css-1ybx1vr"
+      class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"
     >
-      Warning
+      <span
+        class="ucl-uikit-text css-1w35ze4"
+        data-testid="ucl-uikit-text"
+      >
+        Warning
+      </span>
     </h3>
     <p
-      class="css-omeh0l ucl-uikit-alert__message"
+      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This operation may have unintended consequences.

package/lib/components/AppHeader/AppHeader.tsx

@@ -32,7 +32,6 @@ const AppHeader = ({
   const baseStyle = css`
     background-color: ${theme.colour.surface.default};
     color: ${theme.colour.text.default};
-    font-family: ${theme.font.family.primary};
   `;
 
   const fixedStyle = css`

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

@@ -2,7 +2,7 @@
 
 exports[`AppHeader > snapshot: no props 1`] = `
 <div
-  class="ucl-uikit-app-header css-1seij5g"
+  class="ucl-uikit-app-header css-1xtg6wh"
   data-testid="ucl-uikit-app-header"
 />
 `;

package/lib/components/AppMenu/AppMenu.tsx

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
 import AppMenuProvider from './AppMenu.context';
 import AppMenuContent from './AppMenuContent';
 import AppMenuItem from './AppMenuItem';
@@ -9,8 +8,7 @@ import AppMenuTrigger from './AppMenuTrigger';
 
 export const NAME = 'ucl-app-menu';
 
-export interface AppMenuProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppMenuProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
   defaultOpen?: boolean;
 }
@@ -22,11 +20,8 @@ const AppMenu = ({
   className,
   ...props
 }: AppMenuProps) => {
-  const [theme] = useTheme();
-
   const baseStyle = css`
     position: relative;
-    font-family: ${theme.font.family.primary};
   `;
 
   const style = cx(NAME, baseStyle, className);
@@ -37,9 +32,7 @@ const AppMenu = ({
       data-testid={testId}
       {...props}
     >
-      <AppMenuProvider defaultOpen={defaultOpen}>
-        {children}
-      </AppMenuProvider>
+      <AppMenuProvider defaultOpen={defaultOpen}>{children}</AppMenuProvider>
     </div>
   );
 };

package/lib/components/AppMenu/AppMenuItem.tsx

@@ -37,6 +37,7 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
       return window.location.pathname === internalLink;
     return false;
   }, [isActive, internalLink]);
+  const { mdSemibold } = theme.typography.body;
 
   const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
     if (isCurrent) {
@@ -53,8 +54,11 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
     padding: 0 16px;
     display: flex;
     align-items: center;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
+    font-family: ${mdSemibold.fontFamily};
+    font-feature-settings: ${mdSemibold.fontSettings};
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
     color: ${theme.colour.text.secondary};
   `;