uikit-react-public 0.41.0 → 0.42.0

package/lib/components/Callout/Callout.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import Callout from './Callout';
+import Icon from '../Icon';
+
+const meta = {
+  title: 'Components/Callout',
+  component: Callout,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
+    showIcon: { control: { type: 'boolean' } },
+    icon: { control: false },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+  },
+  args: {
+    heading: 'Nobody at UCL will ever ask you for your password',
+    children:
+      "If you're unsure a request is genuine, contact OneDesk IT before entering anything.",
+    showIcon: true,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Callout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutIcon: Story = {
+  args: {
+    showIcon: false,
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    icon: <Icon.Info size={24} />,
+  },
+};
+
+export const ConstrainedWidth: Story = {
+  render: (args) => (
+    <div
+      className={css`
+        width: 420px;
+      `}
+    >
+      <Callout {...args} />
+    </div>
+  ),
+};

package/lib/components/Callout/Callout.tsx

@@ -0,0 +1,109 @@
+import { HTMLAttributes, ReactNode, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import Heading from '../Heading';
+import Icon from '../Icon';
+import Paragraph from '../Paragraph';
+
+export const NAME = 'ucl-uikit-callout';
+
+export interface CalloutBaseProps extends HTMLAttributes<HTMLDivElement> {
+  heading?: ReactNode;
+  icon?: ReactNode;
+  showIcon?: boolean;
+  testId?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+export type CalloutProps = CalloutBaseProps & MarginProps;
+
+const Callout = ({
+  heading,
+  icon,
+  showIcon = true,
+  testId = NAME,
+  className,
+  children,
+  ref,
+  ...props
+}: CalloutProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px;
+    width: 100%;
+    padding: ${theme.padding.p24};
+    background-color: ${theme.colour.surface.brand};
+    border: 1px solid ${theme.colour.border.brand};
+  `;
+
+  const rowStyle = css`
+    display: flex;
+    align-items: flex-start;
+    gap: ${theme.padding.p16};
+    width: 100%;
+  `;
+
+  const iconStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.brand};
+  `;
+
+  const contentStyle = css`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: ${theme.padding.p8};
+    min-width: 0;
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    >
+      <div className={rowStyle}>
+        {showIcon && (
+          <span
+            className={iconStyle}
+            aria-hidden='true'
+          >
+            {icon ?? <Icon.Info size={24} />}
+          </span>
+        )}
+        <div className={contentStyle}>
+          {heading && (
+            <Heading
+              level='xs'
+              as='h3'
+              noMargins
+            >
+              {heading}
+            </Heading>
+          )}
+          {children && (
+            <Paragraph
+              level='md'
+              noMargins
+            >
+              {children}
+            </Paragraph>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(Callout);

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

@@ -0,0 +1,59 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Callout from '../Callout';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('Callout', () => {
+  test('renders with default test id', () => {
+    const { getByTestId } = wrap(<Callout />);
+
+    expect(getByTestId('ucl-uikit-callout')).toBeInTheDocument();
+  });
+
+  test('renders heading and children', () => {
+    wrap(
+      <Callout heading='Nobody at UCL will ever ask you for your password'>
+        If you're unsure a request is genuine, contact OneDesk IT before
+        entering anything.
+      </Callout>
+    );
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Nobody at UCL will ever ask you for your password',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /If you're unsure a request is genuine, contact OneDesk IT/
+      )
+    ).toBeInTheDocument();
+  });
+
+  test('applies custom test id and className', () => {
+    const { getByTestId } = wrap(
+      <Callout
+        testId='custom-callout'
+        className='custom-class'
+      />
+    );
+
+    expect(getByTestId('custom-callout')).toBeInTheDocument();
+    expect(getByTestId('custom-callout').classList).toContain('custom-class');
+  });
+
+  test('renders an icon by default', () => {
+    const { container } = wrap(<Callout />);
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('can hide the icon', () => {
+    const { container } = wrap(<Callout showIcon={false} />);
+
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+});

package/lib/components/Callout/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Callout';
+export type { CalloutProps } from './Callout';

package/lib/components/index.ts

@@ -13,6 +13,9 @@ export type { StandaloneLinkProps } from './StandaloneLink';
 export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
 
+export { default as Callout } from './Callout';
+export type { CalloutProps } from './Callout';
+
 export { default as Label } from './Label';
 export type { LabelProps } from './Label';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",