uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Datepicker/subcomponents/Panel.tsx

@@ -7,7 +7,11 @@ interface PanelProps {
 
 const NAME = 'ucl-uikit-datepicker__panel';
 
-const Panel = ({ zIndex = 10, children }: PanelProps) => {
+const Panel = ({
+  zIndex = 10,
+  children,
+}: PanelProps) => {
+
   const datepickerHeight = 48;
   const gapFromDatepicker = 8;
 
@@ -27,6 +31,6 @@ const Panel = ({ zIndex = 10, children }: PanelProps) => {
       {children}
     </div>
   );
-};
+}
 
 export default Panel;

package/lib/components/Datepicker/subcomponents/VisibleField.tsx

@@ -1,8 +1,9 @@
 import { css, cx } from '@emotion/css';
 import { DatepickerInput } from './';
-import { Icon } from '../../..';
+import { Icon, IconButton } from '../../..';
 import { useTheme } from '../../../theme';
 import React from 'react';
+import type { InputProps } from './DatepickerInput';
 
 interface VisibleFieldProps {
   inputValue: string;
@@ -10,8 +11,12 @@ interface VisibleFieldProps {
   onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   onInputFocus: () => void;
   onButtonClick: () => void;
+  onClear: (event: React.SyntheticEvent) => void;
   disabled: boolean;
+  clearable?: boolean;
+  hasValue?: boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
+  inputProps: InputProps;
 }
 
 const NAME = 'ucl-uikit-datepicker__visible-field';
@@ -22,8 +27,12 @@ const VisibleField = ({
   onInputKeyDown,
   onInputFocus,
   onButtonClick,
+  onClear,
   disabled,
+  clearable = false,
+  hasValue = false,
   inputRef,
+  inputProps,
 }: VisibleFieldProps) => {
   const [theme] = useTheme();
 
@@ -61,9 +70,17 @@ const VisibleField = ({
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 16px 0 4px;
+    padding: 0 16px;
+    border: none;
+    background: transparent;
+    // padding: 0 16px 0 4px;
     height: 100%;
     cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
   `;
 
   // `min-width` here accounts for a recurring problem,
@@ -76,6 +93,9 @@ const VisibleField = ({
       : '#8C8C8C'}; // TODO: Needs a design token
   `;
 
+  // Determine which icon to show
+  const showClearIcon = clearable && hasValue && !disabled;
+
   const style = cx(NAME, baseStyle, disabled && disabledStyle);
 
   return (
@@ -90,13 +110,31 @@ const VisibleField = ({
         onFocus={onInputFocus}
         disabled={disabled}
         ref={inputRef}
+        {...inputProps}
       />
-      <div
-        onClick={onButtonClick}
-        className={iconButtonStyle}
-      >
-        <Icon.Calendar className={iconStyle} />
-      </div>
+      {showClearIcon ? (
+        <IconButton
+          type='button'
+          onClick={onClear}
+          className={iconButtonStyle}
+          aria-label='Clear date'
+          data-testid={`${NAME}-icon-button`}
+        >
+          <Icon.X className={iconStyle} />
+        </IconButton>
+      ) : (
+        <IconButton
+          type='button'
+          onClick={onButtonClick}
+          className={iconButtonStyle}
+          aria-label='Open calendar'
+          data-testid={`${NAME}-icon-button`}
+          tabIndex={-1}
+          disabled={disabled}
+        >
+          <Icon.Calendar className={iconStyle} />
+        </IconButton>
+      )}
     </div>
   );
 };

package/lib/components/Datepicker/subcomponents/index.ts

@@ -1,5 +1,4 @@
 export { default as CustomDatepicker } from './CustomDatepicker';
-export { default as NativeDatepicker } from './NativeDatepicker';
 export { default as VisibleField } from './VisibleField';
 export { default as DatepickerInput } from './DatepickerInput';
 export { default as Panel } from './Panel';

package/lib/components/Datepicker/utils/index.ts

@@ -1,2 +1 @@
-export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';
 export { default as parseInputValue } from './parseInputValue/parseInputValue';

package/lib/components/Dialog/BaseDialog.tsx

@@ -4,10 +4,12 @@ import React, {
   memo,
   useEffect,
   useRef,
+  useContext,
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { DialogContext } from './Dialog';
 
 export const NAME = 'ucl-uikit-base-dialog';
 export const SMALL_WIDTH = 495;
@@ -27,6 +29,7 @@ export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
   finalFocusRef?: React.RefObject<HTMLElement>;
   disableFocusTrap?: boolean;
   restoreFocus?: boolean;
+  skipCloseOnInitialFocus?: boolean;
   testId?: string;
 }
 
@@ -44,6 +47,7 @@ const BaseDialog = ({
   finalFocusRef,
   disableFocusTrap = false,
   restoreFocus = true,
+  skipCloseOnInitialFocus = false,
   testId = NAME,
   ...props
 }: BaseDialogProps) => {
@@ -58,6 +62,10 @@ const BaseDialog = ({
   const dialogRef = useRef<HTMLDialogElement>(null);
   const previousActiveElement = useRef<HTMLElement | null>(null);
 
+  const context = useContext(DialogContext);
+  const dialogHeaderId = context?.dialogHeaderId;
+  const dialogBodyId = context?.dialogBodyId;
+
   // Use the focus trap hook
   useFocusTrap({
     isActive: open && modal && !disableFocusTrap,
@@ -65,6 +73,7 @@ const BaseDialog = ({
     initialFocusRef,
     finalFocusRef,
     restoreFocus,
+    skipFirstFocusable: skipCloseOnInitialFocus,
   });
 
   const hideBodyScroll = css`
@@ -165,11 +174,11 @@ const BaseDialog = ({
 
     @media (min-width: ${theme.breakpoints.tablet}px) {
       width: ${width}px;
-      max-width: calc(100vw - ${theme.margin.m16}px);
+      max-width: calc(100vw - ${theme.margin.m16});
       height: fit-content;
 
       &:modal {
-        max-width: ${MEDIUM_WIDTH}px;
+        max-width: min(${width}px, calc(100vw - ${theme.margin.m16}));
         max-height: calc(100vh - 32px);
       }
     }
@@ -190,6 +199,8 @@ const BaseDialog = ({
         onClick={handleClick}
         onClose={handleDialogClose}
         aria-modal={modal ? 'true' : 'false'}
+        aria-labelledby={dialogHeaderId}
+        aria-describedby={dialogBodyId}
         {...props}
       >
         {children}

package/lib/components/Dialog/Dialog.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Dialog from './Dialog';
 
 const meta = {
-  title: 'Components/Work in progress/Dialog',
+  title: 'Components/Dialog',
   component: Dialog,
   parameters: {
     docs: {

package/lib/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useId } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import BaseDialog, { BaseDialogProps } from './BaseDialog';
@@ -9,6 +9,8 @@ import DialogFooter from './DialogFooter';
 export const NAME = 'ucl-uikit-dialog';
 
 interface DialogContextValue {
+  dialogHeaderId?: string;
+  dialogBodyId?: string;
   onClose?: (ev: React.MouseEvent) => void;
   onSecondaryAction?: () => void;
   onAction?: () => void;
@@ -31,8 +33,12 @@ const Dialog = ({
   ...props
 }: DialogProps) => {
   const [theme] = useTheme();
+  const dialogHeaderId = useId();
+  const dialogBodyId = useId();
 
   const contextValue: DialogContextValue = {
+    dialogHeaderId,
+    dialogBodyId,
     onClose,
     onAction,
     onSecondaryAction,
@@ -50,6 +56,7 @@ const Dialog = ({
         onClose={onClose}
         testId={testId}
         className={style}
+        skipCloseOnInitialFocus={true}
         {...props}
       >
         {children}

package/lib/components/Dialog/DialogBody.tsx

@@ -1,6 +1,7 @@
-import { memo, HTMLAttributes } from 'react';
+import { memo, HTMLAttributes, useContext } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import { DialogContext } from './Dialog';
 
 export const NAME = 'ucl-uikit-dialog__body';
 
@@ -15,6 +16,8 @@ const DialogBody = ({
 }: DialogBodyProps) => {
   const [theme] = useTheme();
 
+  const { dialogBodyId } = useContext(DialogContext);
+
   const contentStyle = css`
     margin: ${theme.padding.p24} ${theme.padding.p32};
   `;
@@ -23,6 +26,7 @@ const DialogBody = ({
 
   return (
     <div
+      id={dialogBodyId}
       className={style}
       data-testid={testId}
       role='document'

package/lib/components/Dialog/DialogHeader.tsx

@@ -23,7 +23,7 @@ const DialogHeader = ({
   testId = NAME,
   className,
 }: DialogHeaderProps) => {
-  const { onClose } = useContext(DialogContext);
+  const { onClose, dialogHeaderId } = useContext(DialogContext);
 
   const [theme] = useTheme();
 
@@ -73,6 +73,7 @@ const DialogHeader = ({
         level={3}
         margins={false}
         {...headingProps}
+        id={dialogHeaderId}
       >
         {children}
       </Heading>

package/lib/components/Divider/Divider.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Divider from './Divider';
 
 const meta = {
-  title: 'Components/Ready to use/Divider',
+  title: 'Components/Divider',
   component: Divider,
   parameters: {
     layout: 'padded',

package/lib/components/Divider/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap

@@ -2,15 +2,15 @@
 
 exports[`Breadcrumbs > Snapshot: No props 1`] = `
 <nav
-  class="ucl-timetable-breadcrumbs"
-  data-testid="ucl-timetable-breadcrumbs"
+  class="ucl-uikit-breadcrumbs"
+  data-testid="ucl-uikit-breadcrumbs"
 >
   <span
     class="css-cdcdpg"
   >
     <span
-      class="css-0 ucl-timetable-breadcrumb ucl-timetable-breadcrumb--active"
-      data-testid="ucl-timetable-breadcrumb"
+      class="css-0 ucl-uikit-breadcrumb ucl-uikit-breadcrumb--active"
+      data-testid="ucl-uikit-breadcrumb"
     >
       Home
     </span>
@@ -35,8 +35,8 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-cdcdpg"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-1tsyuoi"
-      data-testid="ucl-timetable-breadcrumb"
+      class="ucl-link ucl-uikit-breadcrumb ucl-uikit-breadcrumb--inactive css-1tsyuoi"
+      data-testid="ucl-uikit-breadcrumb"
       href="/showcase"
     >
       Timetable
@@ -62,8 +62,8 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-cdcdpg"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-1tsyuoi"
-      data-testid="ucl-timetable-breadcrumb"
+      class="ucl-link ucl-uikit-breadcrumb ucl-uikit-breadcrumb--inactive css-1tsyuoi"
+      data-testid="ucl-uikit-breadcrumb"
       href="/showcase/breadcrumbs"
     >
       Personal
@@ -74,14 +74,14 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
 
 exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
 <nav
-  class="ucl-timetable-breadcrumbs"
+  class="ucl-uikit-breadcrumbs"
   data-testid="custom-testid"
 >
   <span
     class="css-cdcdpg"
   >
     <span
-      class="css-0 ucl-timetable-breadcrumb ucl-timetable-breadcrumb--active"
+      class="css-0 ucl-uikit-breadcrumb ucl-uikit-breadcrumb--active"
       data-testid="custom-testid-1"
     >
       Home
@@ -107,7 +107,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-cdcdpg"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-1tsyuoi"
+      class="ucl-link ucl-uikit-breadcrumb ucl-uikit-breadcrumb--inactive css-1tsyuoi"
       data-testid="custom-testid-2"
       href="/showcase"
     >
@@ -134,7 +134,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-cdcdpg"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-1tsyuoi"
+      class="ucl-link ucl-uikit-breadcrumb ucl-uikit-breadcrumb--inactive css-1tsyuoi"
       data-testid="custom-testid-3"
       href="/showcase/breadcrumbs"
     >

package/lib/components/FeedbackDialog/FeedbackDialog.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import FeedbackDialog from './FeedbackDialog';
 
 const meta = {
-  title: 'Components/Work in progress/FeedbackDialog',
+  title: 'Components/FeedbackDialog',
   component: FeedbackDialog,
   parameters: {
     docs: {

package/lib/components/FeedbackDialog/FeedbackDialog.tsx

@@ -31,9 +31,7 @@ const FeedbackDialog = ({
   const [theme] = useTheme();
 
   const {
-    color: {
-      system: { green70, orange70, red70 },
-    },
+    colour: { icon: iconColour },
   } = theme;
 
   const iconBaseStyle = css`
@@ -48,15 +46,15 @@ const FeedbackDialog = ({
     iconBaseStyle,
     type === 'success' &&
       css`
-        color: ${green70};
+        color: ${iconColour.success};
       `,
     type === 'warning' &&
       css`
-        color: ${orange70};
+        color: ${iconColour.warning};
       `,
     type === 'error' &&
       css`
-        color: ${red70};
+        color: ${iconColour.critical};
       `
   );
 

package/lib/components/Field/CharacterCount.tsx

@@ -21,7 +21,7 @@ const CharacaterCount = ({
   const { disabled, charCount } = use(FieldContext);
 
   const baseStyle = css`
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-size: ${theme.font.size.f14};
     font-family: ${theme.font.family.primary};
     line-height: ${theme.font.lineHeight.h120};
@@ -29,7 +29,7 @@ const CharacaterCount = ({
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
+    color: ${theme.colour.text.disabled};
   `;
 
   const style = cx(NAME, baseStyle, disabled && disabledStyle, className);

package/lib/components/Field/ErrorText.tsx

@@ -26,7 +26,7 @@ const ErrorText = ({
     align-items: flex-start;
     gap: 8px;
     margin-top: 8px;
-    color: ${theme.color.system.red70};
+    color: ${theme.colour.text.critical};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f14};
     line-height: ${theme.font.lineHeight.h120};
@@ -45,6 +45,7 @@ const ErrorText = ({
       className={style}
       data-testid={testId}
       {...props}
+      role='alert'
     >
       <Icon.Info className={iconStyle} />
       {children}

package/lib/components/Field/Field.stories.tsx

@@ -9,7 +9,7 @@ import Input from '../Input/Input';
 import Textarea from '../Textarea/Textarea';
 
 const meta = {
-  title: 'Components/Ready to use/Field',
+  title: 'Components/Field',
   component: Field,
   parameters: { layout: 'padded' },
 } satisfies Meta<typeof Field>;

package/lib/components/Field/Field.tsx

@@ -60,7 +60,7 @@ const Field = ({
 
   const errorStyle = css`
     padding-left: 16px;
-    border-left: 4px solid ${theme.color.system.red70};
+    border-left: 4px solid ${theme.colour.border.critical};
   `;
 
   const style = cx(

package/lib/components/Field/HelperText.tsx

@@ -20,7 +20,9 @@ const HelperText = ({
   const { disabled } = use(FieldContext);
 
   const baseStyle = css`
-    color: ${disabled ? theme.color.text.disabled : theme.color.text.secondary};
+    color: ${disabled
+      ? theme.colour.text.disabled
+      : theme.colour.text.secondary};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
     line-height: ${theme.font.lineHeight.h120};

package/lib/components/Field/__tests__/Field.test.tsx

@@ -507,4 +507,17 @@ describe('Field', () => {
     expect(label2).not.toHaveAttribute('for', idForField2);
     expect(textarea1).not.toHaveAttribute('id', idForField1);
   });
+
+  test('Field.ErrorText has role alert', () => {
+    const testId = 'error-text-01';
+    render(
+      <ThemeContextProvider>
+        <Field error>
+          <Field.ErrorText testId={testId}> Error text </Field.ErrorText>
+        </Field>
+      </ThemeContextProvider>
+    );
+    const errorText = screen.getByTestId(testId);
+    expect(errorText).toHaveAttribute('role', 'alert');
+  });
 });

package/lib/components/FileInput/FileInput.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import FileInput from './FileInput';
 
 const meta = {
-  title: 'Components/WorkInProgress/FileInput',
+  title: 'Components/FileInput',
   component: FileInput,
   parameters: {
     layout: 'centered',

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

@@ -12,6 +12,7 @@ exports[`Input > snapshot: no props 1`] = `
       class="ucl-uikit-icon css-148hpxb"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="24"
       stroke="currentColor"
       stroke-linecap="round"
@@ -22,16 +23,7 @@ exports[`Input > snapshot: no props 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-      />
-      <polyline
-        points="17 8 12 3 7 8"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="3"
-        y2="15"
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"
       />
     </svg>
     Upload File
@@ -57,6 +49,7 @@ exports[`Input > snapshot: value prop 1`] = `
       class="ucl-uikit-icon css-148hpxb"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="24"
       stroke="currentColor"
       stroke-linecap="round"
@@ -67,16 +60,7 @@ exports[`Input > snapshot: value prop 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-      />
-      <polyline
-        points="17 8 12 3 7 8"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="3"
-        y2="15"
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"
       />
     </svg>
     Upload File/Image

package/lib/components/Footer/Footer.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Footer from './Footer';
 
 const meta = {
-  title: 'Components/Ready to use/Footer',
+  title: 'Components/Footer',
   component: Footer,
   parameters: {
     layout: 'fullscreen',