uikit-react-public 0.14.21 → 0.21.8

package/dist/utils/__tests__/announce.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/addAlphaToHex.d.ts

@@ -0,0 +1,5 @@
+declare const tokenToHex: (token: {
+    hex: string;
+    alpha?: number;
+}) => string;
+export default tokenToHex;

package/dist/utils/announce.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Announces a message to screen readers.
+ */
+declare const announce: (message: string, force?: boolean) => void;
+export declare const __resetForTesting: () => void;
+export default announce;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as announce } from './announce';

package/dist/utils/scrollToTop.d.ts

@@ -0,0 +1,2 @@
+declare const scrollToTop: () => void;
+export default scrollToTop;

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

@@ -1,14 +1,14 @@
-import React, { HTMLAttributes, JSX } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import Icon from '../Icon/Icon';
 import { useAccordionContext } from './Accordion';
 
-export const NAME = 'ucl-accordion__heading';
+export const NAME = 'ucl-uikit-accordion__heading';
+export const ICON_NAME = 'ucl-uikit-accordion__heading__icon';
 
-interface AccordionHeadingProps
-  extends HTMLAttributes<HTMLElement> {
-  as?: keyof JSX.IntrinsicElements;
+export interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
+  as?: keyof HTMLElementTagNameMap;
   testId?: string;
 }
 
@@ -19,41 +19,76 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   className,
 }) => {
   const [theme] = useTheme();
-  const { isOpen, toggleAccordion, disabled, size } =
-    useAccordionContext();
+  const { isOpen, toggleAccordion, disabled, size } = useAccordionContext();
 
-  const headingStyle = cx(
-    NAME,
-    css`
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: ${theme.padding.p16};
-      background-color: ${theme.color.neutral.white};
-      cursor: ${disabled ? 'not-allowed' : 'pointer'};
-      font-weight: ${theme.font.weight.bold};
-      transition:
-        background-color 0.3s ease,
-        box-shadow 0.3s ease;
+  const handleKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
+    if (disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleAccordion();
+    }
+  };
 
-      &:hover {
-        background-color: ${!disabled
-          ? theme.color.neutral.grey5
-          : theme.color.text.disabled};
-      }
+  const baseStyle = css`
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    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;
+    outline: none;
+    text-decoration: none;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: inherit;
+    line-height: inherit;
 
-      &:focus-visible {
-        outline: none;
-        box-shadow: ${theme.boxShadow.focus};
+    &:hover {
+      background-color: ${theme.colour.surface.brandHover};
+
+      [class*='${ICON_NAME}'] {
+        color: ${theme.colour.icon.default};
       }
-    `,
+    }
+  `;
+
+  const disabledStyle = css`
+    cursor: 'not-allowed';
+
+    &:hover {
+      background-color: ${theme.colour.text.disabled};
+    }
+  `;
+
+  const headingStyle = cx(
+    NAME,
+    baseStyle,
+    disabled && disabledStyle,
     className
   );
 
+  const iconBaseStyle = css`
+    transform: rotate(${isOpen ? '180deg' : '0deg'});
+    transition: transform 0.15s ease;
+    color: ${theme.colour.icon.brand};
+  `;
+
+  const iconDisabledStyle = css`
+    color: ${theme.colour.icon.disabled};
+  `;
+
+  const iconStyle = cx(ICON_NAME, iconBaseStyle, disabled && iconDisabledStyle);
+
   return (
     <Component
       className={headingStyle}
       data-testid={testId}
+      onKeyDown={handleKeyDown}
       onClick={!disabled ? toggleAccordion : undefined}
       role='button'
       tabIndex={0}
@@ -62,11 +97,7 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
       {children}
       <Icon.ChevronDown
         size={size === 'medium' ? 32 : 24}
-        className={css`
-          transform: rotate(${isOpen ? '180deg' : '0deg'});
-          transition: transform 0.15s ease;
-          color: ${theme.color.interaction.blue70};
-        `}
+        className={iconStyle}
       />
     </Component>
   );

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

@@ -3,10 +3,9 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import { useAccordionContext } from './Accordion';
 
-export const NAME = 'ucl-accordion__panel';
+export const NAME = 'ucl-uikit-accordion__panel';
 
-interface AccordionPanelProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
 }
 
@@ -24,12 +23,17 @@ const AccordionPanel: React.FC<AccordionPanelProps> = ({
     NAME,
 
     css`
+      position: relative;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      flex-shrink: 1;
       padding: ${theme.padding.p16};
-      font-family: ${theme.font.family.primary};
       font-weight: ${theme.font.weight.regular};
-      background-color: ${theme.color.neutral.white};
-      font-size: ${theme.font.size.f16};
-      color: ${theme.color.text.primary};
+      box-sizing: border-box;
+      overflow: hidden;
+      overflow-wrap: break-word;
+      word-break: break-word;
     `,
     className
   );

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

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium'],
+      control: { type: 'select' },
+      type: 'string',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+    },
+    isOpen: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+    },
+    testId: {
+      control: { type: 'text' },
+      type: 'string',
+    },
+    className: {
+      control: { type: 'text' },
+      type: 'string',
+    },
+  },
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    isOpen: false,
+    disabled: true,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const SmallSize: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'small',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading>Heading</Accordion.Heading>
+      <Accordion.Panel>Panel Content</Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const CustomHeadingElement: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <Accordion.Heading as='h2'>Custom Heading as H2</Accordion.Heading>
+      <Accordion.Panel>
+        <p>This is the content of the accordion.</p>
+      </Accordion.Panel>
+    </Accordion>
+  ),
+};
+
+export const MultipleAccordions: Story = {
+  args: {
+    isOpen: false,
+    disabled: false,
+    size: 'medium',
+  },
+  render: (args) => (
+    <div style={{ width: '100%', maxWidth: 660 }}>
+      <Accordion {...args}>
+        <Accordion.Heading>Heading</Accordion.Heading>
+        <Accordion.Panel>
+          <p>
+            This accordion reveals additional details. For enquiries, email
+            <a href='mailto:admissions@ucl.ac.uk'> admissions@ucl.ac.uk</a>.
+          </p>
+          <p>
+            You can also visit our FAQs for more information and guidance on
+            next steps.
+          </p>
+        </Accordion.Panel>
+      </Accordion>
+      <Accordion {...args}>
+        <Accordion.Heading>Heading</Accordion.Heading>
+        <Accordion.Panel>
+          <p>
+            This accordion reveals additional details. For enquiries, email
+            <a href='mailto:admissions@ucl.ac.uk'> admissions@ucl.ac.uk</a>.
+          </p>
+          <p>
+            You can also visit our FAQs for more information and guidance on
+            next steps.
+          </p>
+        </Accordion.Panel>
+      </Accordion>
+    </div>
+  ),
+};

package/lib/components/Accordion/Accordion.tsx

@@ -9,7 +9,7 @@ import AccordionPanel from './Accordion.Panel';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 
-export const NAME = 'ucl-accordion';
+export const NAME = 'ucl-uikit-accordion';
 
 interface AccordionContextProps {
   isOpen: boolean;
@@ -18,9 +18,9 @@ interface AccordionContextProps {
   size: 'small' | 'medium';
 }
 
-const AccordionContext = createContext<
-  AccordionContextProps | undefined
->(undefined);
+const AccordionContext = createContext<AccordionContextProps | undefined>(
+  undefined
+);
 
 export const useAccordionContext = () => {
   const context = useContext(AccordionContext);
@@ -32,8 +32,7 @@ export const useAccordionContext = () => {
   return context;
 };
 
-export interface AccordionProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
   size?: 'small' | 'medium';
   disabled?: boolean;
@@ -60,31 +59,40 @@ const Accordion: React.FC<AccordionProps> & {
     }
   };
 
-  const accordionStyle = cx(
+  const baseStyle = css`
+    width: 660px;
+    min-width: 288px;
+    max-width: 660px;
+    box-sizing: border-box;
+    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,
-    css`
-      max-width: 600px;
-      border: 1px solid ${theme.color.neutral.grey10};
-      background-color: ${theme.color.neutral.white};
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
-    `,
-    size === 'small' &&
-      css`
-        font-size: ${theme.font.size.f16};
-        line-height: ${theme.height.h24};
-      `,
-    size === 'medium' &&
-      css`
-        font-size: ${theme.font.size.f20};
-      `,
-    disabled &&
-      css`
-        pointer-events: none;
-        background-color: ${theme.color.link.disabled};
-        color: ${theme.color.text.muted};
-        // border-color: ${theme.color.text.muted};
-      `,
+    baseStyle,
+    size === 'small' && sizeSmallStyle,
+    size === 'medium' && sizeMediumStyle,
+    disabled && disabledStyle,
     className
   );
 
@@ -98,7 +106,7 @@ const Accordion: React.FC<AccordionProps> & {
       }}
     >
       <div
-        className={accordionStyle}
+        className={style}
         aria-disabled={disabled}
         data-testid={testId}
       >

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

@@ -3,21 +3,22 @@
 exports[`Accordion > snapshot: no props 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-accordion css-1czwoas"
-  data-testid="ucl-accordion"
+  class="ucl-uikit-accordion css-1o0gcpe"
+  data-testid="ucl-uikit-accordion"
 >
   <div
     aria-expanded="false"
-    class="ucl-accordion__heading css-11x7r0n"
-    data-testid="ucl-accordion__heading"
+    class="ucl-uikit-accordion__heading css-18gluve"
+    data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >
     Heading
     <svg
-      class="ucl-uikit-icon css-oi0ukk"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-o97cjm"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="32"
       stroke="currentColor"
       stroke-linecap="round"
@@ -27,8 +28,8 @@ exports[`Accordion > snapshot: no props 1`] = `
       width="32"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <polyline
-        points="6 9 12 15 18 9"
+      <path
+        d="m6 9 6 6 6-6"
       />
     </svg>
   </div>
@@ -38,21 +39,22 @@ exports[`Accordion > snapshot: no props 1`] = `
 exports[`Accordion > snapshot: testId prop 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-accordion css-1czwoas"
+  class="ucl-uikit-accordion css-1o0gcpe"
   data-testid="abc"
 >
   <div
     aria-expanded="false"
-    class="ucl-accordion__heading css-11x7r0n"
-    data-testid="ucl-accordion__heading"
+    class="ucl-uikit-accordion__heading css-18gluve"
+    data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >
     Heading
     <svg
-      class="ucl-uikit-icon css-oi0ukk"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-o97cjm"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="32"
       stroke="currentColor"
       stroke-linecap="round"
@@ -62,8 +64,8 @@ exports[`Accordion > snapshot: testId prop 1`] = `
       width="32"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <polyline
-        points="6 9 12 15 18 9"
+      <path
+        d="m6 9 6 6 6-6"
       />
     </svg>
   </div>

package/lib/components/Accordion/index.ts

@@ -1,2 +1,4 @@
 export { default } from './Accordion';
 export type { AccordionProps } from './Accordion';
+export type { AccordionHeadingProps } from './Accordion.Heading';
+export type { AccordionPanelProps } from './Accordion.Panel';

package/lib/components/Alert/Alert.stories.tsx

@@ -21,7 +21,7 @@ const commonMarginPropsInfo = {
 };
 
 const meta = {
-  title: 'Components/Ready to use/Alert',
+  title: 'Components/Alert',
   component: Alert,
   parameters: {
     layout: 'centered',

package/lib/components/Alert/Alert.tsx

@@ -56,23 +56,23 @@ const Alert = ({
   `;
 
   const infoStyle = css`
-    background-color: ${theme.color.interaction.blue10};
-    border-color: ${theme.color.interaction.blue70};
+    background-color: ${theme.colour.surface.brand};
+    border-color: ${theme.colour.border.brand};
   `;
 
   const successStyle = css`
-    background-color: ${theme.color.system.green10};
-    border-color: ${theme.color.system.green70};
+    background-color: ${theme.colour.surface.success};
+    border-color: ${theme.colour.border.success};
   `;
 
   const warningStyle = css`
-    background-color: ${theme.color.system.orange10};
-    border-color: ${theme.color.system.orange70};
+    background-color: ${theme.colour.surface.warning};
+    border-color: ${theme.colour.border.warning};
   `;
 
   const errorStyle = css`
-    background-color: ${theme.color.system.red10};
-    border-color: ${theme.color.system.red70};
+    background-color: ${theme.colour.surface.critical};
+    border-color: ${theme.colour.border.critical};
   `;
 
   const style = cx(
@@ -89,19 +89,19 @@ const Alert = ({
   const iconStyle = cx(
     type === 'info' &&
       css`
-        color: ${theme.color.interaction.blue70};
+        color: ${theme.colour.icon.brand};
       `,
     type === 'success' &&
       css`
-        color: ${theme.color.system.green70};
+        color: ${theme.colour.icon.success};
       `,
     type === 'warning' &&
       css`
-        color: ${theme.color.system.orange70};
+        color: ${theme.colour.icon.warning};
       `,
     type === 'error' &&
       css`
-        color: ${theme.color.system.red70};
+        color: ${theme.colour.icon.critical};
       `
   );