From e58002fc241ddde6f1ea519a2f2ffbe732a66e3d Mon Sep 17 00:00:00 2001 From: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com> Date: Thu, 12 Dec 2024 10:20:53 -0500 Subject: [PATCH 1/2] docs: document where to target PRs in a table in the README (#3344) * docs: document where to target PRs in a table in the README * docs: remove redundant breaking change information --- README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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. From 8a828cf0935e214b8f04b46dff0594c058b06b44 Mon Sep 17 00:00:00 2001 From: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com> Date: Thu, 12 Dec 2024 10:53:03 -0500 Subject: [PATCH 2/2] feat: use data uri for card fallback image (#3323) --- src/Card/CardFallbackDefaultImage.js | 1 + src/Card/CardImageCap.jsx | 2 +- src/Card/fallback-default.png | Bin 613 -> 0 bytes src/Card/tests/CardImageCap.test.jsx | 6 +++--- 4 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 src/Card/CardFallbackDefaultImage.js delete mode 100644 src/Card/fallback-default.png 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 b18d751d2639cff402d41d2eb7db5a4fe560b19c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 613 zcmeAS@N?(olHy`uVBq!ia0y~yV5|YMdpOvDWIdBmI*{Tl@Q5sCVBi)8VMc~ob0mO* zjKx9jP7LeL$-D$|SkfJR9T^xl_H+M9WChCo@^oK zZ0PKWd2eaW@aOJ5W{0K^j7ly10*W;a91odYIOG+aelQ3gV($>Jb7&cr8gijAk1^v` b=1u', () => { 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); }); });