Merge pull request #689 from Orfium/feat/NDS-817_progress_indicator_v5

[NDS-817] feat: Progress Indicator component
Orfium · Nov 1, 2023 · 1fd4ec3 · 1fd4ec3
2 parents a3e318c + 26477bd
commit 1fd4ec3
Show file tree

Hide file tree

Showing 39 changed files with 1,388 additions and 560 deletions.
diff --git a/src/components/Filter/Filter.test.tsx b/src/components/Filter/Filter.test.tsx
@@ -90,7 +90,7 @@ describe('Generic Filter', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('should display loading dots when isLoading is true', async () => {
+  it('should display progress indicator when isLoading is true', async () => {
     renderFilter({ isSearchable: true, isLoading: true });
 
     const button = screen.getByTestId('filter');
@@ -99,7 +99,7 @@ describe('Generic Filter', () => {
     const selectInput = screen.getByTestId('filter-input');
     userEvent.type(selectInput, 'test');
 
-    await waitFor(() => expect(screen.getByTestId('dots-loading')).toBeVisible());
+    await waitFor(() => expect(screen.getByTestId('search_circular_progress_container')).toBeVisible());
   });
 
   it('should call onAsyncSearch when typing', async () => {

diff --git a/src/components/Filter/components/SingleFilter/components/SearchInput/SearchInput.tsx b/src/components/Filter/components/SingleFilter/components/SearchInput/SearchInput.tsx
@@ -5,7 +5,7 @@ import { generateTestDataId } from 'utils/helpers';
 
 import { textFieldWrapper, iconWrapper } from './SearchInput.style';
 import Icon from 'components/Icon';
-import Loader from 'components/Loader';
+import ProgressIndicator from 'components/ProgressIndicator';
 import TextField from 'components/TextField';
 
 export type SearchInputProps = {
@@ -21,7 +21,7 @@ const SearchInput = ({ onChange, value, dataTestId, isLoading }: SearchInputProp
   const suffix = useMemo(
     () => (
       <div css={iconWrapper()}>
-        {isLoading && <Loader />}
+        {isLoading && <ProgressIndicator type="circular" dataTestPrefixId="search" />}
         <Icon size={20} name="search" color={theme.utils.getColor('lightGrey', 650)} />
       </div>
     ),

diff --git a/src/components/Loader/Loader.stories.mdx b/src/components/Loader/Loader.stories.mdx
diff --git a/src/components/Loader/Loader.style.tsx b/src/components/Loader/Loader.style.tsx
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
diff --git a/src/components/Loader/Loader.utils.tsx b/src/components/Loader/Loader.utils.tsx
diff --git a/src/components/Loader/__snapshots__/Loader.stories.storyshot b/src/components/Loader/__snapshots__/Loader.stories.storyshot