refactor(app): refine file upload component

adds focus state, file name truncation, test, and story for FileUpload component

closes PLAT-292

app/src/molecules/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import testFile from './__tests__/test-file.png'
+import { FileUpload } from '.'
+
+import type { StoryFn, Meta } from '@storybook/react'
+
+const file = new File([testFile], 'a-file-to-test.png')
+const handleClick = (): void => console.log('clicked the file')
+
+export default {
+  title: 'App/Molecules/FileUpload',
+  component: FileUpload,
+} as Meta
+
+const FileUploadTemplate: StoryFn<
+  React.ComponentProps<typeof FileUpload>
+> = args => <FileUpload {...args} />
+
+export const FileUploadComponent = FileUploadTemplate.bind({})
+FileUploadComponent.args = {
+  file,
+  fileError: null,
+  handleClick,
+}
+
+export const FileUploadError = FileUploadTemplate.bind({})
+FileUploadError.args = {
+  file,
+  fileError: 'a terrible file',
+  handleClick,
+}

app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { FileUpload } from '..'
+import testFile from './test-file.png'
+
+const render = (props: React.ComponentProps<typeof FileUpload>) => {
+  return renderWithProviders(<FileUpload {...props} />, {
+    i18nInstance: i18n,
+  })[0]
+}
+
+const handleClick = vi.fn()
+
+describe('FileUpload', () => {
+  let props: React.ComponentProps<typeof FileUpload>
+
+  beforeEach(() => {
+    const file = new File([testFile], 'a-file-to-test.png')
+
+    props = {
+      file,
+      fileError: null,
+      handleClick,
+    }
+  })
+  it('renders file upload', () => {
+    render(props)
+    screen.getByText('a-file-to-test.png')
+    const removeFile = screen.getByLabelText('remove_file')
+    removeFile.click()
+    expect(handleClick).toBeCalled()
+  })
+
+  it('renders file upload error', () => {
+    render({ ...props, fileError: 'oops this is a bad file' })
+    screen.getByText('oops this is a bad file')
+  })
+})

app/src/molecules/FileUpload/index.tsx

@@ -12,6 +12,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
   StyledText,
+  truncateString,
 } from '@opentrons/components'
 
 const FILE_UPLOAD_STYLE = css`
@@ -23,6 +24,13 @@ const FILE_UPLOAD_STYLE = css`
 }
 `
 
+const FILE_UPLOAD_FOCUS_VISIBLE = css`
+  &:focus-visible {
+    border-radius: ${BORDERS.borderRadius4};
+    box-shadow: 0 0 0 ${SPACING.spacing2} ${COLORS.blue50};
+  }
+`
+
 interface FileUploadProps {
   file: File
   fileError: string | null
@@ -36,7 +44,11 @@ export function FileUpload({
 }: FileUploadProps): JSX.Element {
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-      <Btn onClick={handleClick} aria-label="remove_file">
+      <Btn
+        onClick={handleClick}
+        aria-label="remove_file"
+        css={FILE_UPLOAD_FOCUS_VISIBLE}
+      >
         <Flex
           alignItems={ALIGN_CENTER}
           backgroundColor={fileError == null ? COLORS.grey20 : COLORS.red30}
@@ -46,7 +58,7 @@ export function FileUpload({
           padding={SPACING.spacing8}
           css={FILE_UPLOAD_STYLE}
         >
-          <StyledText as="p">{file.name}</StyledText>
+          <StyledText as="p">{truncateString(file.name, 34, 19)}</StyledText>
           <Icon name="close" size="1.5rem" borderRadius="50%" />
         </Flex>
       </Btn>