diff --git a/README.md b/README.md
index 1583346cdb..04bda87aca 100644
--- a/README.md
+++ b/README.md
@@ -123,6 +123,14 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
## Contributing
+The branch to target with your PR depends on the type of change you are contributing to Paragon.
+
+| Branch to Target | Type of Change | Documentation Site |
+| - | - | - |
+| [`release-22.x`](https://github.com/openedx/paragon/tree/release-22.x) | Bug fix/security patch | https://paragon-openedx-v22.netlify.app/ |
+| [`release-23.x`](https://github.com/openedx/paragon/tree/release-23.x) | Bug fix/security patch/new (non-breaking) feature | https://paragon-openedx-v23.netlify.app/ |
+| [`next`](https://github.com/openedx/paragon/tree/next) | Breaking change | https://paragon-openedx.netlify.app/ |
+
Please refer to the ["How to Contribute"](https://openedx.org/r/how-to-contribute) documentation and [Code of Conduct](https://openedx.org/code-of-conduct/) from Open edX.
The Paragon Working Group accepts bug fixes, new features, documentation, and security patches. You may find open issues [here](https://github.com/openedx/paragon/issues) or by visiting the Paragon Working Group [project board](https://github.com/orgs/openedx/projects/43/views/15).
@@ -463,11 +471,6 @@ perf(pencil): remove graphiteWidth option
BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reason.
```
-#### Opening Pull Requests for Breaking Changes
-
-Pull requests that include Breaking Changes must be opened against the `next` branch instead of `release-x.x`.
-This ensures that breaking changes are accumulated and released together in the next major version, minimizing disruption for consumers.
-
## Treeshaking
Paragon is distributed on npm as ES6 modules. This means that webpack can use treeshaking on any Paragon components that a consuming app is not using, resulting in greatly reduced bundle sizes.
diff --git a/src/Card/CardFallbackDefaultImage.js b/src/Card/CardFallbackDefaultImage.js
new file mode 100644
index 0000000000..e1df625d35
--- /dev/null
+++ b/src/Card/CardFallbackDefaultImage.js
@@ -0,0 +1 @@
+export const cardSrcFallbackImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAACMCAYAAAB/AhJnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH6SURBVHgB7dRBEYBADACxwuDf5j0QUXywiYhc7zk7APzd3gNAgvABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIp4BaNpp2Q/3/wfPkGyXOQAAAABJRU5ErkJggg==';
diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index e271246e43..eb27d912b2 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import Skeleton from 'react-loading-skeleton';
import CardContext from './CardContext';
-import cardSrcFallbackImg from './fallback-default.png';
+import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
const SKELETON_HEIGHT_VALUE = 140;
const LOGO_SKELETON_HEIGHT_VALUE = 41;
diff --git a/src/Card/fallback-default.png b/src/Card/fallback-default.png
deleted file mode 100644
index b18d751d26..0000000000
Binary files a/src/Card/fallback-default.png and /dev/null differ
diff --git a/src/Card/tests/CardImageCap.test.jsx b/src/Card/tests/CardImageCap.test.jsx
index e459413d65..f0ef086d03 100644
--- a/src/Card/tests/CardImageCap.test.jsx
+++ b/src/Card/tests/CardImageCap.test.jsx
@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
import { render, fireEvent, screen } from '@testing-library/react';
import CardImageCap from '../CardImageCap';
import CardContext from '../CardContext';
+import { cardSrcFallbackImg } from '../CardFallbackDefaultImage';
// eslint-disable-next-line react/prop-types
function CardImageCapWrapper({ orientation = 'vertical', isLoading, ...props }) {
@@ -119,13 +120,12 @@ describe('', () => {
expect(logoImg.className).toEqual('pgn__card-logo-cap');
});
- it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
+ it('renders the default image if both src and fallbackSrc fail to load', () => {
render();
const srcImg = screen.getByAltText('Src alt text');
fireEvent.load(srcImg);
fireEvent.error(srcImg);
- // test-file-stub is what our fileMock.js returns for all images
- expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
+ expect(srcImg.src).toEqual(cardSrcFallbackImg);
});
});