@availity/mui-progress 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-progress@0.2.2...@availity/mui-progress@0.3.0) (2024-09-03)
+
+
+### Features
+
+* **mui-progress:** add LinearProgress component ([1f82d8f](https://github.com/Availity/element/commit/1f82d8f0691e1dc5d6b5f86993dfc2a0e2e1aeb8))
+
 ## [0.2.2](https://github.com/Availity/element/compare/@availity/mui-progress@0.2.1...@availity/mui-progress@0.2.2) (2024-08-08)
 
 ### Dependency Updates

package/README.md

@@ -48,14 +48,16 @@ yarn add @availity/mui-progress
 
 ### Usage
 
+The two progress components we have are `CircularProgress` and `LinearProgress`.
+
 #### Import through @availity/element
 
 ```tsx
-import { CircularProgress } from '@availity/element';
+import { CircularProgress, LinearProgress } from '@availity/element';
 ```
 
 #### Direct import
 
 ```tsx
-import { CircularProgress } from '@availity/mui-progress';
+import { CircularProgress, LinearProgress } from '@availity/mui-progress';
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-progress",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Availity MUI Progress Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/CircularProgress.stories.tsx

@@ -4,14 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CircularProgress, CircularProgressProps } from './CircularProgress';
 
 const meta: Meta<typeof CircularProgress> = {
-  title: 'Components/Progress/Progress',
+  title: 'Components/Progress/CircularProgress',
   component: CircularProgress,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-export const _Progress: StoryObj<typeof CircularProgress> = {
+export const _CircularProgress: StoryObj<typeof CircularProgress> = {
   render: (args: CircularProgressProps) => <CircularProgress {...args} />,
   args: {},
 };

package/src/lib/LinearProgress.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LinearProgress, LinearProgressProps } from './LinearProgress';
+
+const meta: Meta<typeof LinearProgress> = {
+  title: 'Components/Progress/LinearProgress',
+  component: LinearProgress,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _LinearProgress: StoryObj<typeof LinearProgress> = {
+  render: (args: LinearProgressProps) => <LinearProgress {...args} />,
+  args: {
+    value: 50,
+  },
+};

package/src/lib/LinearProgress.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+
+import { LinearProgress } from './LinearProgress';
+
+describe('LinearProgress', () => {
+  test('should render successfully', () => {
+    render(<LinearProgress />);
+
+    expect(screen.getByRole('progressbar')).toBeDefined();
+  });
+
+  test('should show default value of 0', () => {
+    render(<LinearProgress />);
+    expect(screen.getByText('0%')).toBeDefined();
+  });
+
+  test('should show show value as percentage', () => {
+    render(<LinearProgress value={50} />);
+    expect(screen.getByText('50%')).toBeDefined();
+  });
+
+  test('should show icon when value is 100', () => {
+    const { container } = render(<LinearProgress value={100} />);
+    const svgEl = container.querySelector("[data-icon='complete']") as HTMLImageElement;
+    expect(screen.getByText('100%')).toBeDefined();
+    expect(svgEl.classList.toString()).toContain('MuiSvgIcon-root');
+  });
+});

package/src/lib/LinearProgress.tsx

@@ -0,0 +1,18 @@
+import { SuccessCircleIcon } from '@availity/mui-icon';
+import { Box, Stack } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import MuiLinearProgress, { LinearProgressProps as MuiLinearProgressProps } from '@mui/material/LinearProgress';
+
+export type LinearProgressProps = Omit<MuiLinearProgressProps, 'color'>;
+
+export const LinearProgress = ({ variant = 'determinate', value = 0, sx, ...props }: LinearProgressProps) => {
+  return (
+    <Stack direction="row" alignItems="center">
+      <Box sx={{ width: '100%', mr: 0.5 }}>
+        <MuiLinearProgress variant={variant} {...props} value={value} color="success" sx={{ width: '100%', ...sx }} />
+      </Box>
+      {value === 100 && <SuccessCircleIcon color="success" data-icon="complete" />}
+      <Typography variant="body2" sx={{ color: 'text.secondary', ml: 1 }}>{`${Math.round(value)}%`}</Typography>
+    </Stack>
+  );
+};