uikit-react-public 0.17.4 → 0.21.8

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

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

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

@@ -5,6 +5,7 @@ import Icon from '../Icon/Icon';
 import { useAccordionContext } from './Accordion';
 
 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;
@@ -28,44 +29,61 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     }
   };
 
-  const headingStyle = cx(
-    NAME,
-    css`
-      display: flex;
-      position: relative;
-      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;
-      margin: 0;
-      border: none;
-      outline: none;
-      text-decoration: none;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: inherit;
-      line-height: inherit;
+  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;
 
-      &:hover {
-        background-color: ${!disabled
-          ? theme.color.neutral.grey5
-          : theme.color.text.disabled};
-      }
+    &:hover {
+      background-color: ${theme.colour.surface.brandHover};
 
-      &:focus-visible {
-        outline: none;
-        box-shadow: ${theme.boxShadow.focus};
-        z-index: 20;
+      [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}
@@ -79,13 +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: ${disabled
-            ? theme.color.text.disabled
-            : theme.color.interaction.blue70};
-        `}
+        className={iconStyle}
       />
     </Component>
   );

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

@@ -29,11 +29,7 @@ const AccordionPanel: React.FC<AccordionPanelProps> = ({
       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;

package/lib/components/Accordion/Accordion.tsx

@@ -59,34 +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`
-      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`
-        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};
-      `,
+    baseStyle,
+    size === 'small' && sizeSmallStyle,
+    size === 'medium' && sizeMediumStyle,
+    disabled && disabledStyle,
     className
   );
 
@@ -100,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-uikit-accordion css-rs0koa"
+  class="ucl-uikit-accordion css-1o0gcpe"
   data-testid="ucl-uikit-accordion"
 >
   <div
     aria-expanded="false"
-    class="ucl-uikit-accordion__heading css-1yg3n9"
+    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-uikit-accordion css-rs0koa"
+  class="ucl-uikit-accordion css-1o0gcpe"
   data-testid="abc"
 >
   <div
     aria-expanded="false"
-    class="ucl-uikit-accordion__heading css-1yg3n9"
+    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/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};
       `
   );
 

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

@@ -11,6 +11,7 @@ exports[`Alert > snapshot: type=error 1`] = `
     class="ucl-uikit-icon css-nysdxe"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -25,17 +26,8 @@ exports[`Alert > snapshot: type=error 1`] = `
       cy="12"
       r="10"
     />
-    <line
-      x1="15"
-      x2="9"
-      y1="9"
-      y2="15"
-    />
-    <line
-      x1="9"
-      x2="15"
-      y1="9"
-      y2="15"
+    <path
+      d="m15 9-6 6m0-6 6 6"
     />
   </svg>
   <div>
@@ -57,7 +49,7 @@ exports[`Alert > snapshot: type=error 1`] = `
 
 exports[`Alert > snapshot: type=info, no title 1`] = `
 <div
-  class="ucl-uikit-alert css-lzalin"
+  class="ucl-uikit-alert css-153fxq6"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -66,6 +58,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
     class="ucl-uikit-icon css-1oh4ubr"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -80,17 +73,8 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
       cy="12"
       r="10"
     />
-    <line
-      x1="12"
-      x2="12"
-      y1="16"
-      y2="12"
-    />
-    <line
-      x1="12"
-      x2="12.01"
-      y1="8"
-      y2="8"
+    <path
+      d="M12 16v-4m0-4h.01"
     />
   </svg>
   <div>
@@ -115,6 +99,7 @@ exports[`Alert > snapshot: type=success 1`] = `
     class="ucl-uikit-icon css-4xbsfp"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -127,8 +112,8 @@ exports[`Alert > snapshot: type=success 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <div>
@@ -156,9 +141,10 @@ exports[`Alert > snapshot: type=warning 1`] = `
 >
   <svg
     aria-label="Warning"
-    class="ucl-uikit-icon css-dwkbnw"
+    class="ucl-uikit-icon css-1k868z9"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -169,19 +155,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-    />
-    <line
-      x1="12"
-      x2="12"
-      y1="9"
-      y2="13"
-    />
-    <line
-      x1="12"
-      x2="12.01"
-      y1="17"
-      y2="17"
+      d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4m0 4h.01"
     />
   </svg>
   <div>

package/lib/components/AppHeader/AppHeader.tsx

@@ -1,23 +1,19 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../lib';
-import AppHeaderTop, {
-  HEIGHT as APP_HEADER_TOP_HEIGHT,
-} from './AppHeaderTop';
+import AppHeaderTop, { HEIGHT as APP_HEADER_TOP_HEIGHT } from './AppHeaderTop';
 import AppHeaderBottom, {
   HEIGHT as APP_HEADER_BOTTOM_HEIGHT,
 } from './AppHeaderBottom';
 import AppHeaderNav from './AppHeaderNav';
 
-export const NAME = 'ucl-timetable-app-header';
+export const NAME = 'ucl-uikit-app-header';
 
 export const Z_INDEX = 3;
 
-export const HEIGHT =
-  APP_HEADER_TOP_HEIGHT + APP_HEADER_BOTTOM_HEIGHT;
+export const HEIGHT = APP_HEADER_TOP_HEIGHT + APP_HEADER_BOTTOM_HEIGHT;
 
-export interface AppHeaderProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {
   fixed?: boolean;
   sticky?: boolean;
   testId?: string;
@@ -79,9 +75,8 @@ export interface IHeaderSubComponents {
   Nav: typeof AppHeaderNav;
 }
 
-const AppHeaderWithSubComponents =
-  MemoAppHeader as typeof MemoAppHeader &
-    IHeaderSubComponents;
+const AppHeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
+  IHeaderSubComponents;
 
 AppHeaderWithSubComponents.Top = AppHeaderTop;
 AppHeaderWithSubComponents.Bottom = AppHeaderBottom;

package/lib/components/AppHeader/AppHeaderBottom.tsx

@@ -2,12 +2,11 @@ import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../lib';
 
-export const NAME = 'ucl-timetable-app-header__bottom';
+export const NAME = 'ucl-uikit-app-header__bottom';
 
 export const HEIGHT = 48;
 
-export interface AppHeaderBottomProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderBottomProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
 }
 

package/lib/components/AppHeader/AppHeaderNav.tsx

@@ -1,10 +1,9 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 
-export const NAME = 'ucl-timetable-app-header__nav';
+export const NAME = 'ucl-uikit-app-header__nav';
 
-export interface AppHeaderNavProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderNavProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
 }
 

package/lib/components/AppHeader/AppHeaderTop.tsx

@@ -2,7 +2,7 @@ import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { UclLogo, useTheme } from '../../';
 
-export const NAME = 'ucl-timetable-app-header__top';
+export const NAME = 'ucl-uikit-app-header__top';
 
 export const HEIGHT = 56;
 

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

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

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

@@ -19,6 +19,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
       class="ucl-uikit-icon css-148hpxb"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="24"
       stroke="currentColor"
       stroke-linecap="round"
@@ -28,23 +29,8 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="3"
-        x2="21"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="6"
-        y2="6"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="18"
-        y2="18"
+      <path
+        d="M3 12h18M3 6h18M3 18h18"
       />
     </svg>
   </button>
@@ -71,6 +57,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
           class="ucl-uikit-icon css-148hpxb"
           data-testid="ucl-uikit-icon"
           fill="none"
+          focusable="false"
           height="24"
           stroke="currentColor"
           stroke-linecap="round"
@@ -80,8 +67,8 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="15 18 9 12 15 6"
+          <path
+            d="m15 18-6-6 6-6"
           />
         </svg>
       </span>

package/lib/components/Badge/Badge.stories.tsx

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