refactor: [M3-7544, M3-7552] - ErrorState and FileUploader v7 stories (…

…linode#9982)

* converted stories and added test

* moving around a lot of stuff for better organization??

* update imports

* stories

* tests

* changeset, additional comments

* feedback pass 1

* feedback round 2

packages/manager/.changeset/pr-9981-tech-stories-1702058586434.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+ErrorState and FileUploader v7 storybook migrations ([#9981](https://github.com/linode/manager/pull/9981))

packages/manager/src/components/ErrorState/ErrorState.stories.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { ErrorState } from './ErrorState';
+
+import type { ErrorStateProps } from './ErrorState';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<ErrorStateProps> = {
+ args: {
+ compact: false,
+ errorText: 'An error has occurred.',
+ },
+ render: (args) => {
+ return <ErrorState {...args} />;
+ },
+};
+
+const meta: Meta<ErrorStateProps> = {
+ component: ErrorState,
+ title: 'Components/Error State',
+};
+
+export default meta;

packages/manager/src/components/ErrorState/ErrorState.test.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import PendingIcon from 'src/assets/icons/pending.svg';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ErrorState } from './ErrorState';
+
+const errorText = 'Some error text here';
+const props = {
+ CustomIcon: PendingIcon,
+ errorText,
+};
+
+describe('Removable Selections List', () => {
+ it('renders the ErrorState with specified text properly', () => {
+ const screen = renderWithTheme(<ErrorState errorText={props.errorText} />);
+ expect(screen.getByText(errorText)).toBeVisible();
+ expect(screen.getByTestId('ErrorOutlineIcon')).toBeVisible();
+ });
+
+ it('renders the ErrorState with a custom icon image', () => {
+ const screen = renderWithTheme(<ErrorState {...props} />);
+ expect(screen.getByText(errorText)).toBeVisible();
+ expect(screen.queryByTestId('ErrorOutlineIcon')).not.toBeInTheDocument();
+
+ const icon = screen.container.querySelector('[data-qa-error-icon="true"]');
+ expect(icon).toBeVisible();
+ expect(icon?.getAttribute('style')).toBe(null);
+ });
+
+ it('renders the ErrorState with a custom icon and custom icon styling', () => {
+ const screen = renderWithTheme(
+ <ErrorState {...props} CustomIconStyles={{ height: 72, width: 72 }} />
+ );
+
+ const icon = screen.container.querySelector('[data-qa-error-icon="true"]');
+ expect(icon).toBeVisible();
+ expect(icon?.getAttribute('style')).toBe('height: 72px; width: 72px;');
+ });
+});

packages/manager/src/components/ErrorState/ErrorState.tsx

@@ -7,16 +7,27 @@ import { Typography } from 'src/components/Typography';
 
 import { SvgIconProps } from '../SvgIcon';
 
-interface ErrorStateProps {
+export interface ErrorStateProps {
+ /**
+ * An SVG to display in place of the error icon.
+ */
  CustomIcon?: React.ComponentType<SvgIconProps>;
+ /**
+ * CSS properties to apply to the custom icon.
+ */
  CustomIconStyles?: React.CSSProperties;
+ /**
+ * Reduces the padding on the root element.
+ */
  compact?: boolean;
- cozy?: boolean;
+ /**
+ * The error text to display.
+ */
  errorText: JSX.Element | string;
 }
 
 export const ErrorState = (props: ErrorStateProps) => {
- const { CustomIcon } = props;
+ const { CustomIcon, compact } = props;
  const theme = useTheme();
 
  const sxIcon = {
@@ -27,7 +38,12 @@ export const ErrorState = (props: ErrorStateProps) => {
  };
 
  return (
- <ErrorStateRoot alignItems="center" container justifyContent="center">
+ <ErrorStateRoot
+ alignItems="center"
+ compact={compact}
+ container
+ justifyContent="center"
+ >
  <Grid data-testid="error-state">
  <StyledIconContainer>
  {CustomIcon ? (
@@ -63,11 +79,7 @@ const StyledIconContainer = styled('div')({
 const ErrorStateRoot = styled(Grid)<Partial<ErrorStateProps>>(
  ({ theme, ...props }) => ({
  marginLeft: 0,
- padding: props.compact
- ? theme.spacing(5)
- : props.cozy
- ? theme.spacing(1)
- : theme.spacing(10),
+ padding: props.compact ? theme.spacing(5) : theme.spacing(10),
  width: '100%',
  })
 );

packages/manager/src/features/ObjectStorage/ObjectUploader/FileUpload.tsx → packages/manager/src/components/Uploaders/FileUpload.tsx

@@ -32,6 +32,11 @@ export interface FileUploadProps {
  url?: string;
 }
 
+/**
+ * This component enables users to attach and upload files from a device.
+ * - Include any file restrictions or limits in the helper text.
+ * - Dragover effect and release capability occurs when a user drags a file or files directly onto the file upload box. This is called the “drop zone”.
+ */
 export const FileUpload = React.memo((props: FileUploadProps) => {
  const { classes, cx } = useStyles();
 

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { ImageUploader } from './ImageUploader';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * This component enables users to attach and upload custom Images.
+ */
+export const _ImageUploader: StoryObj<typeof ImageUploader> = {
+ args: {
+ description: 'My Ubuntu Image for Production',
+ dropzoneDisabled: false,
+ label: 'file upload',
+ region: 'us-east-1',
+ },
+ render: (args) => {
+ return <ImageUploader {...args} />;
+ },
+};
+
+const meta: Meta<typeof ImageUploader> = {
+ component: ImageUploader,
+ title: 'Components/File Uploaders/Image Uploader',
+};
+
+export default meta;