uikit-react-public 0.11.13

package/lib/components/Alert/AlertMessage.tsx

@@ -0,0 +1,35 @@
+import { css, cx } from '@emotion/css';
+import { theme } from '../../theme';
+import { HTMLAttributes } from 'react';
+
+export const NAME = 'ucl-uikit-alert__message';
+
+export interface AlertMessageProps
+  extends HTMLAttributes<HTMLParagraphElement> {
+  testId?: string;
+}
+
+const AlertMessage = ({
+  testId = NAME,
+  className,
+  children,
+}: AlertMessageProps) => {
+  const messageStyles = css`
+    font-size: ${theme.font.size.f16};
+    color: ${theme.color.text.primary};
+    margin: 0;
+    line-height: 1.5;
+  `;
+  const style = cx(messageStyles, NAME, className);
+
+  return (
+    <p
+      className={style}
+      data-testid={testId}
+    >
+      {children}
+    </p>
+  );
+};
+
+export default AlertMessage;

package/lib/components/Alert/AlertTitle.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/css';
+import { theme } from '../../theme';
+import { HTMLAttributes } from 'react';
+
+export const NAME = 'ucl-uikit-alert__title';
+
+export interface AlertTitleProps
+  extends HTMLAttributes<HTMLHeadingElement> {
+  testId?: string;
+}
+
+const AlertTitle = ({
+  children,
+  testId = NAME,
+}: AlertTitleProps) => {
+  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.color.text.primary};
+  `;
+
+  return (
+    <h3
+      className={titleStyles}
+      data-test-id={testId}
+    >
+      {children}
+    </h3>
+  );
+};
+
+export default AlertTitle;

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

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Alert from '../Alert';
+
+describe('Alert', () => {
+  // Snapshot tests
+
+  test('snapshot: type=info, no title', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Alert type='info'>
+          <Alert.Message>
+            This is an informational alert.
+          </Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  test('snapshot: type=success', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Alert type='success'>
+          <Alert.Title>Success</Alert.Title>
+          <Alert.Message>
+            Your operation completed successfully.
+          </Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  test('snapshot: type=warning', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Alert type='warning'>
+          <Alert.Title>Warning</Alert.Title>
+          <Alert.Message>
+            This operation may have unintended consequences.
+          </Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+
+  test('snapshot: type=error', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Alert type='error'>
+          <Alert.Title>Error Alert</Alert.Title>
+          <Alert.Message>
+            The operation failed.
+          </Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,198 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert > snapshot: type=error 1`] = `
+<div
+  class="ucl-uikit-alert css-4sws8a"
+  data-testid="ucl-uikit-alert"
+  role="alert"
+>
+  <svg
+    class="ucl-uikit-icon css-nysdxe"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <line
+      x1="15"
+      x2="9"
+      y1="9"
+      y2="15"
+    />
+    <line
+      x1="9"
+      x2="15"
+      y1="9"
+      y2="15"
+    />
+  </svg>
+  <div>
+    <h3
+      class="css-1ybx1vr"
+      data-test-id="ucl-uikit-alert__title"
+    >
+      Error Alert
+    </h3>
+    <p
+      class="css-omeh0l ucl-uikit-alert__message"
+      data-testid="ucl-uikit-alert__message"
+    >
+      The operation failed.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Alert > snapshot: type=info, no title 1`] = `
+<div
+  class="ucl-uikit-alert css-lzalin"
+  data-testid="ucl-uikit-alert"
+  role="alert"
+>
+  <svg
+    class="ucl-uikit-icon css-1oh4ubr"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <line
+      x1="12"
+      x2="12"
+      y1="16"
+      y2="12"
+    />
+    <line
+      x1="12"
+      x2="12.01"
+      y1="8"
+      y2="8"
+    />
+  </svg>
+  <div>
+    <p
+      class="css-omeh0l ucl-uikit-alert__message"
+      data-testid="ucl-uikit-alert__message"
+    >
+      This is an informational alert.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Alert > snapshot: type=success 1`] = `
+<div
+  class="ucl-uikit-alert css-148uiho"
+  data-testid="ucl-uikit-alert"
+  role="alert"
+>
+  <svg
+    class="ucl-uikit-icon css-4xbsfp"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
+    />
+    <polyline
+      points="22 4 12 14.01 9 11.01"
+    />
+  </svg>
+  <div>
+    <h3
+      class="css-1ybx1vr"
+      data-test-id="ucl-uikit-alert__title"
+    >
+      Success
+    </h3>
+    <p
+      class="css-omeh0l ucl-uikit-alert__message"
+      data-testid="ucl-uikit-alert__message"
+    >
+      Your operation completed successfully.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Alert > snapshot: type=warning 1`] = `
+<div
+  class="ucl-uikit-alert css-uvjxfs"
+  data-testid="ucl-uikit-alert"
+  role="alert"
+>
+  <svg
+    class="ucl-uikit-icon css-dwkbnw"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    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"
+    />
+  </svg>
+  <div>
+    <h3
+      class="css-1ybx1vr"
+      data-test-id="ucl-uikit-alert__title"
+    >
+      Warning
+    </h3>
+    <p
+      class="css-omeh0l ucl-uikit-alert__message"
+      data-testid="ucl-uikit-alert__message"
+    >
+      This operation may have unintended consequences.
+    </p>
+  </div>
+</div>
+`;

package/lib/components/Alert/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Alert';
+export { default as AlertTitle } from './AlertTitle';
+export { default as AlertMessage } from './AlertMessage';
+export type { AlertProps } from './Alert';
+export type { AlertTitleProps } from './AlertTitle';
+export type { AlertMessageProps } from './AlertMessage';

package/lib/components/AppHeader/AppHeader.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/css';
+
+import AppHeader from './AppHeader';
+import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
+import AppMenu from '../AppMenu/AppMenu';
+import Icon from '../Icon/Icon';
+import { useTheme } from '../../theme';
+
+const meta = {
+  title: 'Components/Deprecated/AppHeader',
+  component: AppHeader,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof AppHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithBreadcrumbs: Story = {
+  name: 'With breadcrumbs',
+
+  render: () => {
+    const [theme] = useTheme();
+
+    // This ought to be done in`<Breadcrumb>`or in `<AppHeader.Bottom>`!
+    const invertedTextStyle = css`
+      color: ${theme.color.text.inverted};
+    `;
+
+    return (
+      <AppHeader className={invertedTextStyle}>
+        <AppHeader.Top />
+        <AppHeader.Bottom>
+          <Breadcrumbs>
+            <Breadcrumbs.Breadcrumb uri='/'>Home</Breadcrumbs.Breadcrumb>
+          </Breadcrumbs>
+        </AppHeader.Bottom>
+      </AppHeader>
+    );
+  },
+};
+
+export const WithoutBreadcrumbs: Story = {
+  name: 'Without breadcrumbs',
+  render: () => {
+    return (
+      <AppHeader>
+        <AppHeader.Top />
+        <AppHeader.Bottom />
+      </AppHeader>
+    );
+  },
+};
+
+export const WithMultipleBreadcrumbs: Story = {
+  name: 'With multiple breadcrumbs',
+  render: () => {
+    const [theme] = useTheme();
+    const invertedTextStyle = css`
+      color: ${theme.color.text.inverted};
+    `;
+    return (
+      <AppHeader>
+        <AppHeader.Top />
+        <AppHeader.Bottom className={invertedTextStyle}>
+          <Breadcrumbs>
+            <Breadcrumbs.Breadcrumb uri='/'>Home</Breadcrumbs.Breadcrumb>
+            <Breadcrumbs.Breadcrumb uri='/showcase'>
+              Component Library
+            </Breadcrumbs.Breadcrumb>
+            <Breadcrumbs.Breadcrumb uri='/showcase/app-header'>
+              App Header
+            </Breadcrumbs.Breadcrumb>
+          </Breadcrumbs>
+        </AppHeader.Bottom>
+      </AppHeader>
+    );
+  },
+};
+
+export const WithAppMenu: Story = {
+  name: 'With AppMenu',
+  render: () => {
+    const [theme] = useTheme();
+
+    const centerVerticalStyle = css`
+      display: flex;
+      align-items: center;
+    `;
+
+    const invertedTextStyle = css`
+      color: ${theme.color.text.inverted};
+    `;
+
+    return (
+      <AppHeader>
+        <AppHeader.Top className={centerVerticalStyle}>
+          <AppMenu>
+            <AppMenu.Trigger>
+              <Icon.Menu />
+            </AppMenu.Trigger>
+            <AppMenu.Content>
+              <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+                Item 1
+              </AppMenu.MenuItem>
+              <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+                Item 2
+              </AppMenu.MenuItem>
+              <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+                Item 3
+              </AppMenu.MenuItem>
+              <AppMenu.Divider />
+              <AppMenu.MenuItem icon={<Icon.Settings size={24} />}>
+                Settings
+              </AppMenu.MenuItem>
+              <AppMenu.MenuItem icon={<Icon.HelpCircle size={24} />}>
+                Help
+              </AppMenu.MenuItem>
+              <AppMenu.Divider />
+              <AppMenu.MenuItem icon={<Icon.ArrowLeft size={24} />}>
+                Log out
+              </AppMenu.MenuItem>
+            </AppMenu.Content>
+          </AppMenu>
+        </AppHeader.Top>
+        <AppHeader.Bottom className={invertedTextStyle}>
+          <Breadcrumbs.Breadcrumb uri='/'>Home</Breadcrumbs.Breadcrumb>
+        </AppHeader.Bottom>
+      </AppHeader>
+    );
+  },
+};

package/lib/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,90 @@
+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 AppHeaderBottom, {
+  HEIGHT as APP_HEADER_BOTTOM_HEIGHT,
+} from './AppHeaderBottom';
+import AppHeaderNav from './AppHeaderNav';
+
+export const NAME = 'ucl-timetable-app-header';
+
+export const Z_INDEX = 3;
+
+export const HEIGHT =
+  APP_HEADER_TOP_HEIGHT + APP_HEADER_BOTTOM_HEIGHT;
+
+export interface AppHeaderProps
+  extends HTMLAttributes<HTMLDivElement> {
+  fixed?: boolean;
+  sticky?: boolean;
+  testId?: string;
+}
+
+const AppHeader = ({
+  fixed = true,
+  sticky = false,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: AppHeaderProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    background-color: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+  `;
+
+  const fixedStyle = css`
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: ${Z_INDEX};
+  `;
+
+  const stickyStyle = css`
+    position: sticky;
+    top: -${APP_HEADER_TOP_HEIGHT}px;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    fixed && fixedStyle,
+    sticky && stickyStyle,
+    className
+  );
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MemoAppHeader = memo(AppHeader);
+
+export interface IHeaderSubComponents {
+  Top: typeof AppHeaderTop;
+  Bottom: typeof AppHeaderBottom;
+  Nav: typeof AppHeaderNav;
+}
+
+const AppHeaderWithSubComponents =
+  MemoAppHeader as typeof MemoAppHeader &
+    IHeaderSubComponents;
+
+AppHeaderWithSubComponents.Top = AppHeaderTop;
+AppHeaderWithSubComponents.Bottom = AppHeaderBottom;
+AppHeaderWithSubComponents.Nav = AppHeaderNav;
+
+export default AppHeaderWithSubComponents;

package/lib/components/AppHeader/AppHeaderBottom.tsx

@@ -0,0 +1,46 @@
+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 HEIGHT = 48;
+
+export interface AppHeaderBottomProps
+  extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const AppHeaderBottom = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: AppHeaderBottomProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: ${HEIGHT}px;
+    padding: 0 ${theme.padding.p16};
+    line-height: 48px;
+    display: flex;
+    align-items: center;
+    background-color: ${theme.color.display
+      .greenDark}; // default header/logo colour
+    color: inherit;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default memo(AppHeaderBottom);

package/lib/components/AppHeader/AppHeaderNav.tsx

@@ -0,0 +1,39 @@
+import { memo, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+
+export const NAME = 'ucl-timetable-app-header__nav';
+
+export interface AppHeaderNavProps
+  extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const AppHeaderNav = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: AppHeaderNavProps) => {
+  const baseStyle = css`
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+
+      {/* <img src={burgerIcon} className={menuIconStyle}/> */}
+    </div>
+  );
+};
+
+export default memo(AppHeaderNav);