uikit-react-public 0.11.13

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

@@ -0,0 +1,264 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Avatar from '../Avatar';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Avatar', () => {
+  // Snapshot tests
+
+  test('Snapshot: Default', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: Default with disabled prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar disabled />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: icon variant with no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar variant='icon' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: icon variant with disabled prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='icon'
+          disabled
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: initials variant with no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar variant='initials' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: initials variant with name prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='initials'
+          name='John Doe'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: initials variant with name prop and disabled prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='initials'
+          name='John Doe'
+          disabled
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: image variant with no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar variant='image' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: image variant with name prop only', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          name='John Doe'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: image variant with imageUrl prop only', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          imageUrl='https://www.example.com/image.jpg'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: image variant with imageUrl and name props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          imageUrl='https://www.example.com/image.jpg'
+          name='John Doe'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: image variant with imageUrl, name and disabled props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          imageUrl='https://www.example.com/image.jpg'
+          name='John Doe'
+          disabled
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('Can be found with default testId', () => {
+    const defaultTestId = 'ucl-uikit-avatar';
+    render(
+      <ThemeContextProvider>
+        <Avatar />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(defaultTestId)).toBeInTheDocument();
+  });
+
+  test('Can be found with custom testId', () => {
+    const testId = 'abc';
+    render(
+      <ThemeContextProvider>
+        <Avatar testId={testId} />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('Displays image by default when imageUrl prop is provided', () => {
+    const imageUrl = 'https://www.example.com/image.jpg';
+    render(
+      <ThemeContextProvider>
+        <Avatar imageUrl={imageUrl} />
+      </ThemeContextProvider>
+    );
+    const image = screen.getByTestId('ucl-uikit-avatar-image');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', imageUrl);
+  });
+
+  test('Displays image when variant = image & imageUrl prop is provided', () => {
+    const imageUrl = 'https://www.example.com/image.jpg';
+    render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          imageUrl={imageUrl}
+        />
+      </ThemeContextProvider>
+    );
+    const image = screen.getByTestId('ucl-uikit-avatar-image');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', imageUrl);
+  });
+
+  test('Displays fallback initials when variant = image & imageUrl prop is not provided & name is provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='image'
+          name='Rupert Blimp'
+        />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('RB')).toBeInTheDocument();
+  });
+
+  test('Displays fallback icon when variant = image & imageUrl prop is not provided & name is not provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Avatar variant='image' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-icon')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ucl-uikit-avatar-image')
+    ).not.toBeInTheDocument();
+  });
+
+  test('Displays initials when variant = initials & name prop is provided', () => {
+    const name = 'Hester McFortune';
+    render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='initials'
+          name={name}
+        />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('HM')).toBeInTheDocument();
+  });
+
+  test('Displays initials when variant = initials & imageUrl prop is provided & name prop is provided', () => {
+    const name = 'Hester McFortune';
+    const imageUrl = 'https://www.example.com/image.jpg';
+    render(
+      <ThemeContextProvider>
+        <Avatar
+          variant='initials'
+          imageUrl={imageUrl}
+          name={name}
+        />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('HM')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ucl-uikit-avatar-image')
+    ).not.toBeInTheDocument();
+  });
+
+  test('Displays icon when variant = initials & name prop is not provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Avatar variant='initials' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-icon')).toBeInTheDocument();
+  });
+
+  test('Displays icon when variant = icon', () => {
+    const defaultIconTestId = 'ucl-uikit-icon';
+    render(
+      <ThemeContextProvider>
+        <Avatar variant='icon' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(defaultIconTestId)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,260 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Avatar > Snapshot: Default 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
+<button
+  class="ucl-uikit-avatar css-x8e1am"
+  data-testid="ucl-uikit-avatar"
+  disabled=""
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
+<button
+  class="ucl-uikit-avatar css-x8e1am"
+  data-testid="ucl-uikit-avatar"
+  disabled=""
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Avatar > Snapshot: icon variant with no props 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Avatar > Snapshot: image variant with imageUrl and name props 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <img
+    alt="John Doe"
+    class="css-e7jagv"
+    data-testid="ucl-uikit-avatar-image"
+    src="https://www.example.com/image.jpg"
+  />
+</button>
+`;
+
+exports[`Avatar > Snapshot: image variant with imageUrl prop only 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <img
+    alt=""
+    class="css-e7jagv"
+    data-testid="ucl-uikit-avatar-image"
+    src="https://www.example.com/image.jpg"
+  />
+</button>
+`;
+
+exports[`Avatar > Snapshot: image variant with imageUrl, name and disabled props 1`] = `
+<button
+  class="ucl-uikit-avatar css-x8e1am"
+  data-testid="ucl-uikit-avatar"
+  disabled=""
+>
+  <img
+    alt="John Doe"
+    class="css-qrytbt"
+    data-testid="ucl-uikit-avatar-image"
+    src="https://www.example.com/image.jpg"
+  />
+</button>
+`;
+
+exports[`Avatar > Snapshot: image variant with name prop only 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <span
+    class="css-gtnz"
+  >
+    JD
+  </span>
+</button>
+`;
+
+exports[`Avatar > Snapshot: image variant with no props 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;
+
+exports[`Avatar > Snapshot: initials variant with name prop 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <span
+    class="css-gtnz"
+  >
+    JD
+  </span>
+</button>
+`;
+
+exports[`Avatar > Snapshot: initials variant with name prop and disabled prop 1`] = `
+<button
+  class="ucl-uikit-avatar css-x8e1am"
+  data-testid="ucl-uikit-avatar"
+  disabled=""
+>
+  <span
+    class="css-gtnz"
+  >
+    JD
+  </span>
+</button>
+`;
+
+exports[`Avatar > Snapshot: initials variant with no props 1`] = `
+<button
+  class="ucl-uikit-avatar css-46vibo"
+  data-testid="ucl-uikit-avatar"
+>
+  <svg
+    class="ucl-uikit-icon css-1kjizvt"
+    data-testid="ucl-uikit-icon"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M4 20.9995C4.49232 17.0534 7.8586 14 11.938 14C16.0175 14 19.5077 17.0539 20 21C18 23 15 24 12 24C9 24 6 23 4 20.9995Z"
+      fill-rule="evenodd"
+    />
+    <circle
+      cx="12"
+      cy="9"
+      r="4"
+    />
+  </svg>
+</button>
+`;

package/lib/components/Avatar/index.ts

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

package/lib/components/Avatar/utils/extractInitials.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from 'vitest';
+import extractInitials from './extractInitials';
+
+describe('extractInitials', () => {
+  test('Returns a string from a string', () => {
+    const result = extractInitials('Bob Ross');
+    expect(typeof result).toBe('string');
+  });
+
+  test('Returns a string from an empty string', () => {
+    const result = extractInitials('');
+    expect(typeof result).toBe('string');
+  });
+
+  test('Returns an empty string from null or undefined', () => {
+    // @ts-expect-error - Expected behaviour is a string to be returned
+    const result = extractInitials(null);
+    expect(typeof result).toBe('string');
+    // @ts-expect-error - Expected behaviour is a string to be returned
+    const result2 = extractInitials(undefined);
+    expect(typeof result2).toBe('string');
+  });
+
+  test("Returns A B from 'Alice Bobbington'", () => {
+    const result = extractInitials('Alice Bobbington');
+    expect(result).toBe('AB');
+  });
+
+  test("Returns A from 'Alice'", () => {
+    const result = extractInitials('Alice');
+    expect(result).toBe('A');
+  });
+
+  test("Returns A C from 'Alice Jane Carter'", () => {
+    const result = extractInitials('Alice Jane Carter');
+    expect(result).toBe('AC');
+  });
+
+  test('Returns X Y from Xavier Jo Bob Billy Dave Carter Yahtzee', () => {
+    const result = extractInitials('Xavier Jo Bob Billy Dave Carter Yahtzee');
+    expect(result).toBe('XY');
+  });
+
+  test('Can handle leading and trailing spaces', () => {
+    const result = extractInitials('  Jeff Gonzo  ');
+    expect(result).toBe('JG');
+  });
+
+  test('Can handle lowercase names', () => {
+    const result = extractInitials('keith runway');
+    expect(result).toBe('KR');
+  });
+
+  test('Can handle uppercase names', () => {
+    const result = extractInitials('JIMMY BONES');
+    expect(result).toBe('JB');
+  });
+
+  test('Returns an empty string from 123', () => {
+    // @ts-expect-error - Expected behaviour is a string to be returned
+    const result = extractInitials(123);
+    console.log(result);
+    expect(result).toBe('');
+  });
+});

package/lib/components/Avatar/utils/extractInitials.ts

@@ -0,0 +1,24 @@
+const extractInitials = (name: string) => {
+  if (
+    typeof name !== 'string' ||
+    name === '' ||
+    name === null ||
+    name === undefined
+  ) {
+    return '';
+  }
+
+  const nameArray = name.trim().split(' ');
+  if (nameArray.length === 1) {
+    return nameArray[0].charAt(0).toUpperCase();
+  } else if (nameArray.length >= 2) {
+    return (
+      nameArray[0].charAt(0).toUpperCase() +
+      nameArray[nameArray.length - 1].charAt(0).toUpperCase()
+    );
+  } else {
+    return '';
+  }
+};
+
+export default extractInitials;

package/lib/components/Blanket/Blanket.stories.tsx

@@ -0,0 +1,67 @@
+import { CSSProperties } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Blanket from './Blanket';
+
+const meta = {
+  title: 'Components/Ready to use/Blanket',
+  component: Blanket,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Blanket>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    return <Blanket {...args} />;
+  },
+};
+
+export const AlertOnClick: Story = {
+  name: 'Trigger alert on click',
+  args: {
+    onClick: () => alert('You clicked the Blanket!'),
+  },
+  render: (args) => {
+    return <Blanket {...args} />;
+  },
+};
+
+export const InFrontOfElement: Story = {
+  name: 'In front of an element',
+  render: (args) => {
+    const anotherElementStyle: CSSProperties = {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: 1,
+      backgroundColor: 'grey',
+      padding: '2rem',
+      fontSize: '1.5rem',
+    };
+    return (
+      <>
+        <div style={anotherElementStyle}>Another element</div>
+        <Blanket {...args} />
+      </>
+    );
+  },
+};
+
+export const WithColour: Story = {
+  name: 'With a colour',
+  render: (args) => {
+    const style = {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    };
+    return (
+      <Blanket
+        {...args}
+        style={style}
+      />
+    );
+  },
+};