feat: TET-853 add FileItem component

[mjamrozekvl]

What did you implement?

FileUploader component has been implemented. This is one of building blocks of more complex component: FileUploader

• I decided to change a little bit how our stories should look like. I changed number of examples from 4 to 2 in single row:
  
  because of our width limitation to 888px.
• Mentioned component has multiple properties and initial implementation caused a lot of control flow statements in FileItem component. Because of readability I isolated 2 smaller components: CompressedVariant and ExtendedVariant. I discovered that compressed version of FileItem:
  • doesn't have file icon or thumbnail
  • doesn't have time left text
  • structure of internal blocks is different because of size, thumbnail, different location of file size, progress bar
• I also discovered that file item icon is not present in our database of icons and we only have icon for PDF file format. I decided to use existing icon (20-file) instead of icon from Figma:
  
• By design we try to set as much properties as we can to optional and fallback it with default values. I had to use those fallbacks in different places so I thought that defining a type Fallback inside our *.props.ts file and create a constant where all possible fallbacks are hardcoded is a good practice and can be imported in component file, styles builder etc. without need for duplication of our default values.

How it might be Tested?

Run storybook

yarn storybook

• Go to FileItem page
• Check if implementation corresponds to Figma Designs of FileItem component

Checklist:

• I exported my component in src/index.ts file.

[adrian-potepa]

Component with replaceable state should has 40px height:

[adrian-potepa]

Dot and spacing between siblings elements are wrong.

You can place the dot as JSX svg element ;)

[adrian-potepa]

Nice work! It needs only few small things to do :)

[mjamrozekvl]

Component with replaceable state should has 40px height:

Yes. Good catch. I set button paddings to 0px using custom styles and now it is 40px height (also for alert version because it is also a little bit expanded).

[mjamrozekvl]

Dot and spacing between siblings elements are wrong.

You can place the dot as JSX svg element ;)

I made it using styles, wdyt?

    dot: {
      display: 'inline-block',
      mx: '$space-component-gap-small',
      w: '2px',
      h: '2px',
      backgroundColor: '$color-content-secondary',
      verticalAlign: 'middle',
    },

I thought about token instead of ordinary 2px value but I couldn't find any appropriate, only $border-width-200 has 2px.

BTW according to Figma we should have margin: $space-component-gap-small but maybe $space-component-gap-xSmall would be better because of spacing inside letters?

[adrian-potepa]

BTW according to Figma we should have margin: $space-component-gap-small but maybe $space-component-gap-xSmall would be better because of spacing inside letters?

If you style container of HelperText, dot and text as flex you will get good render of spacing ;)

<tet.div display="flex" alignItems="center" gap="$space-component-gap-small">
   <HelperText />
   <Dot />
   <span>some text</span>
</tet.div/>

In that case there is no need to add mx: '$space-component-gap-small' in dot object.

[mjamrozekvl]

BTW according to Figma we should have margin: $space-component-gap-small but maybe $space-component-gap-xSmall would be better because of spacing inside letters?

If you style container of HelperText, dot and text as flex you will get good render of spacing ;)

<tet.div display="flex" alignItems="center" gap="$space-component-gap-small">
   <HelperText />
   <Dot />
   <span>some text</span>
</tet.div/>

In that case there is no need to add mx: '$space-component-gap-small' in dot object.

Initially I thought about it and I was hesitant against overengineering but definitely it ensures accuracy so I introduced it :-)

[adrian-potepa]

🎊