fix(design-system): Allow additional bundles for IconsProvider (#4201)

Talend · Jul 8, 2022 · 71a7367 · 71a7367
1 parent 59faf83
commit 71a7367
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/unlucky-trees-look.md b/.changeset/unlucky-trees-look.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix(design-system): Allow additional bundles for IconsProvider
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.spec.tsx
@@ -56,4 +56,12 @@ context('<IconsProvider />', () => {
 		);
 		cy.getByTestId('wrapper').find('symbol').should('have.length', 2);
 	});
+	it('should support additionalBundles props', () => {
+		const additionalBundles = ['/some/other/icons', '/more/icons/is/better'];
+		cy.intercept('/some/other/icons', '<svg data-test="other-icons"></svg>').as('getOtherBundle');
+		cy.intercept('/more/icons/is/better', '<svg data-test="more-icons"></svg>').as('getMoreBundle');
+		cy.mount(<IconsProvider bundles={[]} additionalBundles={additionalBundles} />);
+		cy.getByTest('other-icons').should('to.exist');
+		cy.getByTest('more-icons').should('to.exist');
+	});
 });
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
@@ -119,10 +119,12 @@ function isRootProvider(ref: RefObject<any>) {
  */
 export function IconsProvider({
 	bundles = DEFAULT_BUNDLES,
+	additionalBundles = [],
 	defaultIcons = {},
 	icons = {},
 }: {
-	bundles?: string[] | [];
+	bundles?: string[];
+	additionalBundles?: string[];
 	defaultIcons?: Record<string, ReactElement>;
 	icons?: Record<string, ReactElement>;
 }) {
@@ -131,10 +133,12 @@ export function IconsProvider({
 	const [shouldRender, setShouldRender] = useState(true);
 
 	useEffect(() => {
-		if (!Array.isArray(bundles)) {
+		if (!Array.isArray(bundles) || !Array.isArray(additionalBundles)) {
 			return;
 		}
+
 		bundles
+			.concat(additionalBundles)
 			.filter(url => !hasBundle(url))
 			.forEach(url => {
 				FETCHING_BUNDLES[url] = fetch(url)
@@ -143,7 +147,7 @@ export function IconsProvider({
 						delete FETCHING_BUNDLES[url];
 					});
 			});
-	}, [bundles]);
+	}, [bundles, additionalBundles]);
 
 	useEffect(() => {
 		if (!isRootProvider(ref)) {