refactor: change a file name (#447)

* refactor: file upload component

* refactor: changed name of a function and added a new line
This commit is contained in:
2024-11-23 00:14:49 -06:00
committed by GitHub
parent a5e921fd75
commit 3abb11734a
5 changed files with 21 additions and 26 deletions

View File

@@ -1,21 +1,16 @@
import { colorsFlattened } from '@shared/util/themeColors';
import type { Meta, StoryObj } from '@storybook/react';
import InputButton from '@views/components/common/InputButton';
import FileUpload from '@views/components/common/FileUpload';
import React from 'react';
import AddIcon from '~icons/material-symbols/add';
import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
import DescriptionIcon from '~icons/material-symbols/description';
import ImagePlaceholderIcon from '~icons/material-symbols/image';
import HappyFaceIcon from '~icons/material-symbols/mood';
import ReviewsIcon from '~icons/material-symbols/reviews';
/**
* Stole this straight from Button.stories.tsx to test the input
*/
const meta = {
title: 'Components/Common/InputButton',
component: InputButton,
title: 'Components/Common/FileUpload',
component: FileUpload,
parameters: {
layout: 'centered',
},
@@ -39,7 +34,7 @@ const meta = {
},
onChange: { action: 'file selected' }, // action to show when file is selected
},
} satisfies Meta<typeof InputButton>;
} satisfies Meta<typeof FileUpload>;
export default meta;
type Story = StoryObj<typeof meta>;
@@ -64,17 +59,17 @@ export const Grid: Story = {
render: props => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
<div style={{ display: 'flex', gap: '15px' }}>
<InputButton {...props} variant='filled' color='ut-black' />
<InputButton {...props} variant='outline' color='ut-black' />
<InputButton {...props} variant='single' color='ut-black' />
<FileUpload {...props} variant='filled' color='ut-black' />
<FileUpload {...props} variant='outline' color='ut-black' />
<FileUpload {...props} variant='single' color='ut-black' />
</div>
<hr />
<div style={{ display: 'flex', gap: '15px' }}>
<InputButton {...props} variant='filled' color='ut-black' disabled />
<InputButton {...props} variant='outline' color='ut-black' disabled />
<InputButton {...props} variant='single' color='ut-black' disabled />
<FileUpload {...props} variant='filled' color='ut-black' disabled />
<FileUpload {...props} variant='outline' color='ut-black' disabled />
<FileUpload {...props} variant='single' color='ut-black' disabled />
</div>
</div>
),
@@ -92,15 +87,15 @@ export const PrettyColors: Story = {
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
{colorsNames.map(color => (
<div style={{ display: 'flex', gap: '15px' }} key={color}>
<InputButton {...props} variant='filled' color={color}>
<FileUpload {...props} variant='filled' color={color}>
Button
</InputButton>
<InputButton {...props} variant='outline' color={color}>
</FileUpload>
<FileUpload {...props} variant='outline' color={color}>
Button
</InputButton>
<InputButton {...props} variant='single' color={color}>
</FileUpload>
<FileUpload {...props} variant='single' color={color}>
Button
</InputButton>
</FileUpload>
</div>
))}
</div>