@patternfly/react-core 5.0.0-alpha.127 → 5.0.0-alpha.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.127",
+  "version": "5.0.0-alpha.128",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f1282915e0812f4ad8f0dd4c5cc7687b169e864f"
+  "gitHead": "2b592aa9bf296839044c74cba7dc2dd346574288"
 }

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,30 +1,29 @@
-import * as React from 'react';
+import React from 'react';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
-// eslint-disable-next-line camelcase
-// import c_background_image_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
-export interface BackgroundImageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'src'> {
-  /** Additional classes added to the background image. */
-  className?: string;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** The URL or file path of the image for the background */
   src: string;
+  /** Additional classes added to the background image. */
+  className?: string;
 }
 
 export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
   className,
-  // src,
+  src,
   ...props
 }: BackgroundImageProps) => (
   <div
     className={css(styles.backgroundImage, className)}
-    /* eslint-disable camelcase */
-    style={{
-      // [c_background_image_BackgroundImage.name as string]: `url(${src})`
-    }}
-    /* eslint-enable camelcase */
+    style={
+      {
+        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+      } as React.CSSProperties
+    }
     {...props}
-  ></div>
+  />
 );
 
 BackgroundImage.displayName = 'BackgroundImage';

package/src/components/BackgroundImage/__tests__/BackgroundImage.test.tsx

@@ -1,21 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
-import * as React from 'react';
-import { render } from '@testing-library/react';
 
-const images = {
-  lg: '/assets/images/pfbg_1200.jpg',
-  sm: '/assets/images/pfbg_768.jpg',
-  sm2x: '/assets/images/pfbg_768@2x.jpg',
-  xs: '/assets/images/pfbg_576.jpg',
-  xs2x: '/assets/images/pfbg_576@2x.jpg'
-};
+test('has default className and src URL applied to style', () => {
+  render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
 
-test('BackgroundImage', () => {
-  const { asFragment } = render(<BackgroundImage src={images} />);
-  expect(asFragment()).toMatchSnapshot();
+  const backgroundImage = screen.getByTestId('test-id');
+  const backgroundImageStyle = backgroundImage.getAttribute('style');
+
+  expect(backgroundImage).toHaveClass('pf-v5-c-background-image');
+  expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage');
+  expect(backgroundImageStyle).toContain('/image/url.png');
 });
 
-test('allows passing in a single string as the image src', () => {
-  const { asFragment } = render(<BackgroundImage src={images.lg} />);
-  expect(asFragment()).toMatchSnapshot();
+test('has additional className when one is provided', () => {
+  render(<BackgroundImage src="/image/url.png" className="another-class" data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id')).toHaveClass('another-class');
 });

package/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-background-image"
-    src="Background src"
+    style="--pf-v5-c-background-image--BackgroundImage: url(Background src);"
   />
   <div
     class="pf-v5-c-login"

package/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BackgroundImage 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-background-image"
-    src="[object Object]"
-  />
-</DocumentFragment>
-`;
-
-exports[`allows passing in a single string as the image src 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-background-image"
-    src="/assets/images/pfbg_1200.jpg"
-  />
-</DocumentFragment>
-`;