uikit-react-public 0.11.24 → 0.17.4

package/dist/theme/defaultTheme.d.ts

@@ -20,6 +20,7 @@ declare const blackAndWhite: {
     white: string;
 };
 declare const theme: {
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -35,6 +36,7 @@ declare const theme: {
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -114,7 +116,9 @@ declare const theme: {
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -122,6 +126,7 @@ declare const theme: {
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -153,6 +158,7 @@ declare const theme: {
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -170,6 +176,7 @@ declare const theme: {
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

package/dist/theme/useTheme.d.ts

@@ -3,6 +3,7 @@ export declare const ThemeContextProvider: React.FC<{
     children: ReactNode;
 }>;
 declare const useTheme: () => [{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -18,6 +19,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -97,7 +99,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -105,6 +109,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -136,6 +141,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -153,6 +159,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;
@@ -244,6 +251,7 @@ declare const useTheme: () => [{
         custom: (breakpoint: number) => string;
     };
 }, import('react').Dispatch<import('react').SetStateAction<{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -259,6 +267,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -338,7 +347,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -346,6 +357,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -377,6 +389,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -394,6 +407,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

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

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

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

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

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/capitalise.d.ts

@@ -0,0 +1,2 @@
+declare const capitalise: (text: string) => string;
+export default capitalise;

package/dist/utils/index.d.ts

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

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

@@ -1,14 +1,13 @@
-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';
 
-interface AccordionHeadingProps
-  extends HTMLAttributes<HTMLElement> {
-  as?: keyof JSX.IntrinsicElements;
+export interface AccordionHeadingProps extends HTMLAttributes<HTMLElement> {
+  as?: keyof HTMLElementTagNameMap;
   testId?: string;
 }
 
@@ -19,13 +18,21 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   className,
 }) => {
   const [theme] = useTheme();
-  const { isOpen, toggleAccordion, disabled, size } =
-    useAccordionContext();
+  const { isOpen, toggleAccordion, disabled, size } = useAccordionContext();
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {
+    if (disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleAccordion();
+    }
+  };
 
   const headingStyle = cx(
     NAME,
     css`
       display: flex;
+      position: relative;
       justify-content: space-between;
       align-items: center;
       padding: ${theme.padding.p16};
@@ -35,6 +42,14 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
       transition:
         background-color 0.3s ease,
         box-shadow 0.3s ease;
+      margin: 0;
+      border: none;
+      outline: none;
+      text-decoration: none;
+      box-sizing: border-box;
+      width: 100%;
+      font-size: inherit;
+      line-height: inherit;
 
       &:hover {
         background-color: ${!disabled
@@ -45,6 +60,7 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
       &:focus-visible {
         outline: none;
         box-shadow: ${theme.boxShadow.focus};
+        z-index: 20;
       }
     `,
     className
@@ -54,6 +70,7 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     <Component
       className={headingStyle}
       data-testid={testId}
+      onKeyDown={handleKeyDown}
       onClick={!disabled ? toggleAccordion : undefined}
       role='button'
       tabIndex={0}
@@ -65,7 +82,9 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
         className={css`
           transform: rotate(${isOpen ? '180deg' : '0deg'});
           transition: transform 0.15s ease;
-          color: ${theme.color.interaction.blue70};
+          color: ${disabled
+            ? theme.color.text.disabled
+            : theme.color.interaction.blue70};
         `}
       />
     </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,21 @@ 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;
@@ -63,11 +62,15 @@ const Accordion: React.FC<AccordionProps> & {
   const accordionStyle = cx(
     NAME,
     css`
-      max-width: 600px;
+      width: 660px;
+      min-width: 288px;
+      max-width: 660px;
+      box-sizing: border-box;
       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};
+      flex-shrink: 1;
     `,
     size === 'small' &&
       css`
@@ -83,7 +86,6 @@ const Accordion: React.FC<AccordionProps> & {
         pointer-events: none;
         background-color: ${theme.color.link.disabled};
         color: ${theme.color.text.muted};
-        // border-color: ${theme.color.text.muted};
       `,
     className
   );

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

@@ -3,13 +3,13 @@
 exports[`Accordion > snapshot: no props 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-accordion css-1czwoas"
-  data-testid="ucl-accordion"
+  class="ucl-uikit-accordion css-rs0koa"
+  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-1yg3n9"
+    data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >
@@ -38,13 +38,13 @@ 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-rs0koa"
   data-testid="abc"
 >
   <div
     aria-expanded="false"
-    class="ucl-accordion__heading css-11x7r0n"
-    data-testid="ucl-accordion__heading"
+    class="ucl-uikit-accordion__heading css-1yg3n9"
+    data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
   >

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

@@ -5,6 +5,7 @@ import AlertMessage from './AlertMessage';
 import AlertTitle from './AlertTitle';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 import { useTheme } from '../../theme';
+import capitalise from '../../utils/capitalise';
 
 export const NAME = 'ucl-uikit-alert';
 
@@ -38,6 +39,8 @@ const Alert = ({
   className,
   ...props
 }: AlertProps) => {
+  const typeName = capitalise(type);
+
   const [theme] = useTheme();
 
   const { padding } = theme;
@@ -117,7 +120,10 @@ const Alert = ({
         role='alert'
         {...props}
       >
-        <IconComp className={iconStyle} />
+        <IconComp
+          className={iconStyle}
+          aria-label={typeName}
+        />
         <div>{children}</div>
       </div>
     </AlertContext.Provider>

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

@@ -7,6 +7,7 @@ exports[`Alert > snapshot: type=error 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Error"
     class="ucl-uikit-icon css-nysdxe"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -61,6 +62,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Info"
     class="ucl-uikit-icon css-1oh4ubr"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -109,6 +111,7 @@ exports[`Alert > snapshot: type=success 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Success"
     class="ucl-uikit-icon css-4xbsfp"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -152,6 +155,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Warning"
     class="ucl-uikit-icon css-dwkbnw"
     data-testid="ucl-uikit-icon"
     fill="none"