@openedx/paragon 23.0.0 → 23.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -5
- package/dist/Card/CardFallbackDefaultImage.js +1 -0
- package/dist/Card/CardImageCap.js +1 -1
- package/dist/Card/CardImageCap.js.map +1 -1
- package/package.json +2 -2
- package/src/Card/CardFallbackDefaultImage.js +1 -0
- package/src/Card/CardImageCap.jsx +1 -1
- package/src/Card/tests/CardImageCap.test.jsx +3 -3
- package/dist/Card/fallback-default.png +0 -0
- package/src/Card/fallback-default.png +0 -0
package/README.md
CHANGED
|
@@ -137,6 +137,14 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
|
|
|
137
137
|
|
|
138
138
|
## Contributing
|
|
139
139
|
|
|
140
|
+
The branch to target with your PR depends on the type of change you are contributing to Paragon.
|
|
141
|
+
|
|
142
|
+
| Branch to Target | Type of Change | Documentation Site |
|
|
143
|
+
| - | - | - |
|
|
144
|
+
| [`release-22.x`](https://github.com/openedx/paragon/tree/release-22.x) | Bug fix/security patch | https://paragon-openedx-v22.netlify.app/ |
|
|
145
|
+
| [`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/ |
|
|
146
|
+
| [`next`](https://github.com/openedx/paragon/tree/next) | Breaking change | https://paragon-openedx.netlify.app/ |
|
|
147
|
+
|
|
140
148
|
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.
|
|
141
149
|
|
|
142
150
|
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).
|
|
@@ -475,11 +483,6 @@ perf(pencil): remove graphiteWidth option
|
|
|
475
483
|
BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reason.
|
|
476
484
|
```
|
|
477
485
|
|
|
478
|
-
#### Opening Pull Requests for Breaking Changes
|
|
479
|
-
|
|
480
|
-
Pull requests that include Breaking Changes must be opened against the `next` branch instead of `release-x.x`.
|
|
481
|
-
This ensures that breaking changes are accumulated and released together in the next major version, minimizing disruption for consumers.
|
|
482
|
-
|
|
483
486
|
## Treeshaking
|
|
484
487
|
|
|
485
488
|
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.
|
|
@@ -0,0 +1 @@
|
|
|
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==';
|
|
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
|
|
|
9
9
|
import classNames from 'classnames';
|
|
10
10
|
import Skeleton from 'react-loading-skeleton';
|
|
11
11
|
import CardContext from './CardContext';
|
|
12
|
-
import cardSrcFallbackImg from './
|
|
12
|
+
import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
|
|
13
13
|
var SKELETON_HEIGHT_VALUE = 140;
|
|
14
14
|
var LOGO_SKELETON_HEIGHT_VALUE = 41;
|
|
15
15
|
var CardImageCap = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","_ref","ref","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","_useContext","orientation","isLoading","_useState","_useState2","_slicedToArray","showImageCap","setShowImageCap","_useState3","_useState4","showLogoCap","setShowLogoCap","wrapperClassName","concat","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport cardSrcFallbackImg from './
|
|
1
|
+
{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","_ref","ref","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","_useContext","orientation","isLoading","_useState","_useState2","_slicedToArray","showImageCap","setShowImageCap","_useState3","_useState4","showLogoCap","setShowLogoCap","wrapperClassName","concat","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport { cardSrcFallbackImg } from './CardFallbackDefaultImage';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n src,\n fallbackSrc,\n srcAlt,\n logoSrc,\n fallbackLogoSrc,\n logoAlt,\n skeletonHeight,\n skeletonWidth,\n logoSkeleton,\n logoSkeletonHeight,\n logoSkeletonWidth,\n className,\n imageLoadingType,\n}, ref) => {\n const { orientation, isLoading } = useContext(CardContext);\n const [showImageCap, setShowImageCap] = useState(false);\n const [showLogoCap, setShowLogoCap] = useState(false);\n\n const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n if (isLoading) {\n return (\n <div\n className={classNames(wrapperClassName, className)}\n data-testid=\"image-loader-wrapper\"\n >\n <Skeleton\n containerClassName=\"pgn__card-image-cap-loader\"\n height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n width={skeletonWidth}\n />\n {logoSkeleton && (\n <Skeleton\n containerClassName=\"pgn__card-logo-cap\"\n height={logoSkeletonHeight}\n width={logoSkeletonWidth}\n />\n )}\n </div>\n );\n }\n\n const handleSrcFallback = (event, altSrc, imageKey) => {\n const { currentTarget } = event;\n\n if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n if (imageKey === 'imageCap') {\n currentTarget.src = cardSrcFallbackImg;\n } else {\n setShowLogoCap(false);\n }\n\n return;\n }\n\n currentTarget.src = altSrc;\n };\n\n return (\n <div className={classNames(className, wrapperClassName)} ref={ref}>\n {!!src && (\n <img\n className={classNames('pgn__card-image-cap', { show: showImageCap })}\n src={src}\n onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n onLoad={() => setShowImageCap(true)}\n alt={srcAlt}\n loading={imageLoadingType}\n />\n )}\n {!!logoSrc && (\n <img\n className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n src={logoSrc}\n onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n onLoad={() => setShowLogoCap(true)}\n alt={logoAlt}\n loading={imageLoadingType}\n />\n )}\n </div>\n );\n});\n\nCardImageCap.propTypes = {\n /** Specifies class name to append to the base element. */\n className: PropTypes.string,\n /** Specifies image src. */\n src: PropTypes.string,\n /** Specifies fallback image src. */\n fallbackSrc: PropTypes.string,\n /** Specifies image alt text. */\n srcAlt: PropTypes.string,\n /** Specifies logo src to put on top of the image. */\n logoSrc: PropTypes.string,\n /** Specifies fallback image logo src. */\n fallbackLogoSrc: PropTypes.string,\n /** Specifies logo image alt text. */\n logoAlt: PropTypes.string,\n /** Specifies height of Image skeleton in loading state. */\n skeletonHeight: PropTypes.number,\n /** Specifies width of Image skeleton in loading state. */\n skeletonWidth: PropTypes.number,\n /** Specifies whether the cap should be displayed during loading. */\n logoSkeleton: PropTypes.bool,\n /** Specifies height of Logo skeleton in loading state. */\n logoSkeletonHeight: PropTypes.number,\n /** Specifies width of Logo skeleton in loading state. */\n logoSkeletonWidth: PropTypes.number,\n /** Specifies loading type for images */\n imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n};\n\nCardImageCap.defaultProps = {\n src: undefined,\n fallbackSrc: cardSrcFallbackImg,\n logoSrc: undefined,\n fallbackLogoSrc: undefined,\n className: undefined,\n srcAlt: undefined,\n logoAlt: undefined,\n skeletonHeight: SKELETON_HEIGHT_VALUE,\n logoSkeleton: false,\n logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n skeletonWidth: undefined,\n logoSkeletonWidth: undefined,\n imageLoadingType: 'eager',\n};\n\nexport default CardImageCap;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openedx/paragon",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.1.0",
|
|
4
4
|
"description": "Accessible, responsive UI component library based on Bootstrap.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
"@babel/preset-env": "^7.16.8",
|
|
116
116
|
"@babel/preset-react": "^7.16.7",
|
|
117
117
|
"@babel/preset-typescript": "^7.16.7",
|
|
118
|
-
"@edx/eslint-config": "^4.
|
|
118
|
+
"@edx/eslint-config": "^4.3.0",
|
|
119
119
|
"@edx/stylelint-config-edx": "^2.3.0",
|
|
120
120
|
"@edx/typescript-config": "^1.1.0",
|
|
121
121
|
"@formatjs/cli": "^5.0.2",
|
|
@@ -0,0 +1 @@
|
|
|
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==';
|
|
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import Skeleton from 'react-loading-skeleton';
|
|
5
5
|
import CardContext from './CardContext';
|
|
6
|
-
import cardSrcFallbackImg from './
|
|
6
|
+
import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
|
|
7
7
|
|
|
8
8
|
const SKELETON_HEIGHT_VALUE = 140;
|
|
9
9
|
const LOGO_SKELETON_HEIGHT_VALUE = 41;
|
|
@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
|
|
|
3
3
|
import { render, fireEvent, screen } from '@testing-library/react';
|
|
4
4
|
import CardImageCap from '../CardImageCap';
|
|
5
5
|
import CardContext from '../CardContext';
|
|
6
|
+
import { cardSrcFallbackImg } from '../CardFallbackDefaultImage';
|
|
6
7
|
|
|
7
8
|
// eslint-disable-next-line react/prop-types
|
|
8
9
|
function CardImageCapWrapper({ orientation = 'vertical', isLoading, ...props }) {
|
|
@@ -119,13 +120,12 @@ describe('<CardImageCap />', () => {
|
|
|
119
120
|
expect(logoImg.className).toEqual('pgn__card-logo-cap');
|
|
120
121
|
});
|
|
121
122
|
|
|
122
|
-
it('
|
|
123
|
+
it('renders the default image if both src and fallbackSrc fail to load', () => {
|
|
123
124
|
render(<CardImageCapWrapper src="fakeURL" fallbackSrc="fakeURL" srcAlt="Src alt text" />);
|
|
124
125
|
|
|
125
126
|
const srcImg = screen.getByAltText('Src alt text');
|
|
126
127
|
fireEvent.load(srcImg);
|
|
127
128
|
fireEvent.error(srcImg);
|
|
128
|
-
|
|
129
|
-
expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
|
|
129
|
+
expect(srcImg.src).toEqual(cardSrcFallbackImg);
|
|
130
130
|
});
|
|
131
131
|
});
|
|
Binary file
|
|
Binary file
|