How to use the @patternfly/react-core.BackgroundImageSrc.xs2x function in @patternfly/react-core

Kyle Baker
                
              }
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: "/assets/images/pfbg_1200.jpg",
      [BackgroundImageSrc.sm]: "/assets/images/pfbg_768.jpg",
      [BackgroundImageSrc.sm2x]: "/assets/images/pfbg_768@2x.jpg",
      [BackgroundImageSrc.xs]: "/assets/images/pfbg_576.jpg",
      [BackgroundImageSrc.xs2x]: "/assets/images/pfbg_576@2x.jpg",
      [BackgroundImageSrc.filter]:
        "/assets/images/background-filter.svg#image_overlay"
    };

    const Header = (
      }
        toolbar={PageToolbar}
        // avatar={}
        showNavToggle
      />
    );
    const Sidebar = ;
    return (

Terms of Use 
      
      
        Help
      
      
        Privacy Policy
      
    
  );
  const images = {
    [BackgroundImageSrc.lg]: bg_image,
    [BackgroundImageSrc.sm]: bg_image,
    [BackgroundImageSrc.sm2x]: bg_image,
    [BackgroundImageSrc.xs]: bg_image,
    [BackgroundImageSrc.xs2x]: bg_image
  };
  const loginForm = (

render() {
    const { isOpen } = this.state;

    const images = {
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const steps = [
      { name: 'Step 1', component: <p>Step 1</p> },
      {
        name: 'Step 2',
        steps: [
          { name: 'Step 2 - A', component: <p>Step 2 - A</p> },
          { name: 'Step 2 - B', component: <p>Step 2 - B</p> }
        ]
      },
      { name: 'Step 3', component: <p>Step 3</p> },

const pfbg_768 = require('../LoginPageDemo/images/pfbg_768.jpg');
const pfbg_768_2x = require('../LoginPageDemo/images/pfbg_768@2x.jpg');
const pfbg_576 = require('../LoginPageDemo/images/pfbg_576.jpg');
const pfbg_576_2x = require('../LoginPageDemo/images/pfbg_576@2x.jpg');

export class BackgroundImageDemo extends React.Component {
  myBackgroundProps: BackgroundImageProps = {
    /**
     * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
     */
    src: {
      [BackgroundImageSrc.lg]: pfbg_1200,
      [BackgroundImageSrc.sm]: pfbg_768,
      [BackgroundImageSrc.sm2x]: pfbg_768_2x,
      [BackgroundImageSrc.xs]: pfbg_576,
      [BackgroundImageSrc.xs2x]: pfbg_576_2x,
      [BackgroundImageSrc.filter]: ''
    }
  };

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return ;
  }
}

toggle={Kyle Baker}
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
      [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        topNav={PageNav}
      />
    );

    return (

LoginPage,
  BackgroundImageSrc,
  ListItem
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
  [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
  [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
  [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
  [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
  [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
};

class SimpleLoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHelperText: false,
      usernameValue: '',
      isValidUsername: true,
      passwordValue: '',
      isValidPassword: true,
      isRememberMeChecked: false
    };
  }

import pfbg_768_2x from '@patternfly/patternfly/assets/images/pfbg_768@2x.jpg';
import {
  BackgroundImage,
  BackgroundImageSrc,
  BackgroundImageSrcMap,
  Brand,
} from '@patternfly/react-core';
import * as React from 'react';

const defaultProps: IOVRThemeProviderProps = {
  bgImages: {
    [BackgroundImageSrc.lg]: pfbg_1200,
    [BackgroundImageSrc.sm]: pfbg_768,
    [BackgroundImageSrc.sm2x]: pfbg_768_2x,
    [BackgroundImageSrc.xs]: pfbg_576,
    [BackgroundImageSrc.xs2x]: pfbg_576_2x,
    [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
  },
  brandImg: '/assets/images/optaPlannerLogo200px.png',
};

const PatternFlyContext = React.createContext({
  ...defaultProps,
  components: {
    Background: undefined,
    Brand: undefined,
  },
});

export interface IOVRThemeProviderProps {
  bgImages?: BackgroundImageSrcMap | string;
  brandImg?: string;

constructor(props) {
    super(props);
    /**
     * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
     */
    this.images = {
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg'
    };
  }
  render() {

BackgroundImageSrc,
  ListItem,
  ListVariant,
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: ''
};

export interface LoginPageDemoState {
  showHelperText: boolean;
  usernameValue: string;
  isValidUsername: boolean;
  passwordValue: string;
  isValidPassword: boolean;
  isRememberMeChecked: boolean;
}

export class LoginPageDemo extends React.Component, LoginPageDemoState> {
  state = {
    showHelperText: false,
    usernameValue: '',

toggle={Kyle Baker}
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
      [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        showNavToggle
        onNavToggle={this.onNavToggle}
      />
    );
    const Sidebar = ;

    return (