@openedx/paragon 23.0.0 → 23.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.0.0",
+  "version": "23.1.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -115,7 +115,7 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/eslint-config": "^4.2.0",
+    "@edx/eslint-config": "^4.3.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",

package/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==';

package/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;

package/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('<CardImageCap />', () => {
     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(<CardImageCapWrapper src="fakeURL" fallbackSrc="fakeURL" srcAlt="Src alt text" />);
 
     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);
   });
 });

package/styles/css/core/custom-media-breakpoints.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated. while transforming design tokens.
- * See <root>/tokens/README.md for more details.
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
  */
 
 @custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px);

package/styles/css/core/variables.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated. while transforming design tokens.
- * See <root>/tokens/README.md for more details.
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
  */
 
 :root {

package/styles/css/themes/light/utility-classes.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated. while transforming design tokens.
- * See <root>/tokens/README.md for more details.
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
  */
 
 .bg-accent-a {

package/styles/css/themes/light/variables.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated. while transforming design tokens.
- * See <root>/tokens/README.md for more details.
+ * Do not edit directly, this file was auto-generated.
+ * See <PARAGON_ROOT>/tokens/README.md for more details.
  */
 
 :root {

package/tokens/style-dictionary.js

@@ -410,8 +410,8 @@ const initializeStyleDictionary = async ({ themes }) => {
   StyleDictionary.registerFileHeader({
     name: 'customFileHeader',
     fileHeader: (defaultMessage) => [
-      `${defaultMessage} while transforming design tokens.`,
-      'See <root>/tokens/README.md for more details.',
+      `${defaultMessage}`,
+      'See <PARAGON_ROOT>/tokens/README.md for more details.',
     ],
   });