uikit-react-public 0.11.24 → 0.14.21

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

@@ -9,154 +9,154 @@ import { ThemeContextProvider } from '../../../theme/useTheme';
 describe('Field', () => {
   // Snapshot tests
 
-  test('Snapshot: Default (no children)', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field />
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: Field.HelperText alone', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field.HelperText>Helper text</Field.HelperText>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: Field.ErrorText alone', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field.ErrorText>Error text</Field.ErrorText>
-      </ThemeContextProvider>
-    );
-    // Expected behaviour here is to return `null`
-    // unless <Field> provides `error` via context
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, Input', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field disabled>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop error', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field error>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop optional', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field optional>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, Textarea', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Textarea', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field disabled>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Textarea & prop maxChar', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Textarea />
-          <Field.CharacterCount maxChars={100} />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
+  // test('Snapshot: Default (no children)', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field />
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: Field.HelperText alone', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field.HelperText>Helper text</Field.HelperText>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: Field.ErrorText alone', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field.ErrorText>Error text</Field.ErrorText>
+  //     </ThemeContextProvider>
+  //   );
+  //   // Expected behaviour here is to return `null`
+  //   // unless <Field> provides `error` via context
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, Input', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field disabled>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop error', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field error>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop optional', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field optional>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, Textarea', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Textarea', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field disabled>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Textarea & prop maxChar', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Textarea />
+  //         <Field.CharacterCount maxChars={100} />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
 
   // Interation tests
 

package/lib/components/FileInput/FileInput.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FileInput from './FileInput';
+
+const meta = {
+  title: 'Components/WorkInProgress/FileInput',
+  component: FileInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Upload file or images',
+    testId: 'file-input-default',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: 'Custom Styled File Input',
+    className: 'custom-class',
+    testId: 'file-input-custom',
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    children: 'Upload multiple files',
+    testId: 'file-input-multiple',
+    multiple: true,
+  },
+};
+
+export const NoChildren: Story = {
+  args: {
+    testId: 'file-input-no-children',
+  },
+};
+
+export const WithDecorator: Story = {
+  name: 'FileInput with decorator',
+  args: {
+    children: 'FileInput with a decorator',
+    testId: 'file-input-decorator',
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#0d68cf',
+          }}
+        />
+        <Story />
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#0d68cf',
+          }}
+        />
+      </div>
+    ),
+  ],
+};

package/lib/components/FileInput/FileInput.tsx

@@ -0,0 +1,68 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { InputHTMLAttributes } from 'react';
+import { Icon } from '..';
+import { useRef } from 'react';
+
+export const NAME = 'ucl-uikit-fileinput';
+
+export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  testId?: string;
+  labelId?: string;
+}
+
+const FileInput = ({
+  testId = NAME,
+  children,
+  labelId = '1',
+  ...props
+}: FileInputProps) => {
+  const [theme] = useTheme();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const baseStyle = css`
+    font-size: ${theme.font.size.f16};
+    font-family: ${theme.font.family.primary};
+    color: ${theme.color.link.default};
+  `;
+
+  const hiddenInputContainerStyle = css`
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  `;
+
+  const labelStyle = css`
+    display: inline-flex;
+    text-decoration: underline;
+    gap: 6px;
+    font-weight: 700;
+    margin-top: 3px;
+    cursor: pointer;
+  `;
+
+  const style = cx(NAME, baseStyle, props.className);
+
+  return (
+    <div className={style}>
+      <label
+        htmlFor={`file-input-${labelId}`}
+        className={labelStyle}
+      >
+        <Icon.Upload />
+        {children}
+      </label>
+      <input
+        ref={fileInputRef}
+        type='file'
+        data-testid={testId}
+        className={hiddenInputContainerStyle}
+        id={`file-input-${labelId}`}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default FileInput;

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

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FileInput from '../';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Input', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <FileInput>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: value prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <FileInput testId='test123'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('test ID: default with mutliple attribute', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput multiple={true}>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput testId='custom-test-id'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('custom-test-id');
+    expect(fileInput).toBeDefined();
+  });
+
+  test('snapshot: id prop', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput id='custom-id'>Upload File/Image</FileInput>
+      </ThemeContextProvider>
+    );
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput.id).toBe('custom-id');
+  });
+
+  test('updates file list on file selection', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <FileInput>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+
+    const fileInput = screen.getByTestId(
+      'ucl-uikit-fileinput'
+    ) as HTMLInputElement;
+    const file = new File(['file content'], 'example.txt', {
+      type: 'text/plain',
+    });
+
+    await user.upload(fileInput, file);
+
+    expect(fileInput.files).toHaveLength(1);
+    expect(fileInput.files?.[0].name).toBe('example.txt');
+  });
+
+  test('applies custom className', () => {
+    render(
+      <ThemeContextProvider>
+        <FileInput className='custom-class'>Upload File</FileInput>
+      </ThemeContextProvider>
+    );
+
+    const fileInput = screen.getByTestId('ucl-uikit-fileinput');
+    expect(fileInput).toHaveClass('custom-class');
+  });
+});

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

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input > snapshot: no props 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="ucl-uikit-fileinput"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;
+
+exports[`Input > snapshot: value prop 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File/Image
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="test123"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;

package/lib/components/FileInput/index.ts

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