@patternfly/react-core 5.0.0-alpha.69 → 5.0.0-alpha.70

package/src/components/Form/examples/FormState.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  ActionGroup,
+  Button,
+  ButtonType,
+  ButtonVariant,
+  Divider,
+  Form,
+  FormContextProvider,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  TextArea,
+  TextInput
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+export const FormState = () => {
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const [formStateExpanded, setFormStateExpanded] = React.useState(false);
+
+  return (
+    <FormContextProvider initialValues={{ 'select-id': 'Option 1' }}>
+      {({ setValue, getValue, setError, values, errors }) => (
+        <Form>
+          <FormGroup label="Input value" fieldId="input-id" isRequired>
+            <TextInput
+              id="input-id"
+              onChange={(value) => {
+                setValue('input-id', value);
+                setError('input-id', undefined);
+              }}
+              value={getValue('input-id')}
+              validated={errors['input-id'] ? 'error' : 'default'}
+            />
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem
+                  variant={errors['input-id'] ? 'error' : 'default'}
+                  {...(errors['input-id'] && { icon: <ExclamationCircleIcon /> })}
+                >
+                  {errors['input-id']}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          </FormGroup>
+
+          <TextArea
+            id="textarea-id"
+            aria-label="Form state TextArea"
+            onChange={(value) => setValue('textarea-id', value)}
+            value={getValue('textarea-id')}
+          />
+
+          <Select
+            id="select-id"
+            selected={getValue('select-id')}
+            isOpen={isSelectOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={(isOpen) => setIsSelectOpen(isOpen)}
+                isExpanded={isSelectOpen}
+                style={
+                  {
+                    width: '200px'
+                  } as React.CSSProperties
+                }
+              >
+                {getValue('select-id')}
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
+            onSelect={(_, itemId) => {
+              setValue('select-id', itemId as string);
+              setIsSelectOpen(false);
+            }}
+          >
+            <SelectList>
+              <SelectOption itemId="Option 1">Option 1</SelectOption>
+              <SelectOption itemId="Option 2">Option 2</SelectOption>
+              <SelectOption itemId="Option 3">Option 3</SelectOption>
+            </SelectList>
+          </Select>
+
+          <ActionGroup>
+            <Button
+              type={ButtonType.submit}
+              onClick={(e) => {
+                e.preventDefault();
+
+                if (!values['input-id']) {
+                  setError('input-id', 'Input value is required.');
+                } else {
+                  alert(`Form submitted with: \n ${JSON.stringify(values)}`);
+                }
+              }}
+            >
+              Submit
+            </Button>
+            <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>
+              {`${formStateExpanded ? 'Hide' : 'Show'} form state`}
+            </Button>
+          </ActionGroup>
+          {formStateExpanded && (
+            <>
+              <Divider />
+              <pre>{JSON.stringify({ values, errors }, null, 2)}</pre>
+            </>
+          )}
+        </Form>
+      )}
+    </FormContextProvider>
+  );
+};

package/src/components/Form/index.ts

@@ -7,3 +7,4 @@ export * from './FormFieldGroupHeader';
 export * from './FormGroup';
 export * from './FormHelperText';
 export * from './FormSection';
+export * from './FormContext';

package/src/components/LoginPage/LoginPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 
-import { BackgroundImage, BackgroundImageSrcMap } from '../BackgroundImage';
+import { BackgroundImage } from '../BackgroundImage';
 import { Brand } from '../Brand';
 import { List, ListVariant } from '../List';
 
@@ -22,9 +22,7 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
   /** Attribute that specifies the URL of the background image for the login page */
-  backgroundImgSrc?: string | BackgroundImageSrcMap;
-  /** Attribute that specifies the alt text of the background image for the login page */
-  backgroundImgAlt?: string;
+  backgroundImgSrc?: string;
   /** Content rendered inside of the text component of the login page */
   textContent?: string;
   /** Items rendered inside of the footer list component of the login page */
@@ -53,7 +51,6 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   brandImgSrc = '',
   brandImgAlt = '',
   backgroundImgSrc = '',
-  backgroundImgAlt = '',
   footerListItems = null,
   textContent = '',
   footerListVariants,
@@ -81,7 +78,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
 
   return (
     <React.Fragment>
-      {backgroundImgSrc && <BackgroundImage src={backgroundImgSrc} alt={backgroundImgAlt} />}
+      {backgroundImgSrc && <BackgroundImage src={backgroundImgSrc} />}
       <Login header={Header} footer={Footer} className={css(className)} {...props}>
         <LoginMainHeader title={loginTitle} subtitle={loginSubtitle} headerUtilities={headerUtilities} />
         <LoginMainBody>{children}</LoginMainBody>

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

@@ -17,7 +17,6 @@ test('check loginpage example against snapshot', () => {
       brandImgSrc="Brand src"
       brandImgAlt="Pf-logo"
       backgroundImgSrc="Background src"
-      backgroundImgAlt="Pf-background"
       footerListItems="English"
       textContent="This is placeholder text only."
       loginTitle="Log into your account"

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

@@ -3,17 +3,9 @@
 exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div
-    alt="Pf-background"
     class="pf-c-background-image"
-    src="Background src"
-  >
-    <svg
-      class="pf-c-background-image__filter"
-      height="0"
-      width="0"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-  </div>
+    style="--pf-c-background-image--BackgroundImage: url(Background src);"
+  />
   <div
     class="pf-c-login"
   >

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -115,20 +115,12 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
     />
   );
 
-  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'
-  };
-
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc={images}
+      backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -174,20 +174,12 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     />
   );
 
-  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'
-  };
-
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc={images}
+      backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -116,20 +116,12 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
     />
   );
 
-  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'
-  };
-
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc={images}
+      backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/dist/esm/components/AboutModal/AboutModalBoxHero.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {
-    /** Background image data or file path  */
-    backgroundImageSrc?: string;
-}
-export declare const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps>;
-//# sourceMappingURL=AboutModalBoxHero.d.ts.map

package/dist/esm/components/AboutModal/AboutModalBoxHero.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalBoxHero.d.ts","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalBoxHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7E,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAe7E,CAAC"}

package/dist/esm/components/AboutModal/AboutModalBoxHero.js

@@ -1,16 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
-// eslint-disable-next-line camelcase
-import c_about_modal_box__hero_sm_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box__hero_sm_BackgroundImage';
-export const AboutModalBoxHero = (_a) => {
-    var { backgroundImageSrc } = _a, props = __rest(_a, ["backgroundImageSrc"]);
-    return (React.createElement("div", Object.assign({ style: 
-        /* eslint-disable camelcase */
-        backgroundImageSrc !== ''
-            ? { [c_about_modal_box__hero_sm_BackgroundImage.name]: `url(${backgroundImageSrc})` }
-            : {}, className: css(styles.aboutModalBoxHero) }, props)));
-};
-AboutModalBoxHero.displayName = 'AboutModalBoxHero';
-//# sourceMappingURL=AboutModalBoxHero.js.map

package/dist/esm/components/AboutModal/AboutModalBoxHero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalBoxHero.js","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalBoxHero.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,MAAM,MAAM,uEAAuE,CAAC;AAC3F,qCAAqC;AACrC,OAAO,0CAA0C,MAAM,8EAA8E,CAAC;AAOtI,MAAM,CAAC,MAAM,iBAAiB,GAAoD,CAAC,EAG1D,EAAE,EAAE;QAHsD,EACjF,kBAAkB,OAEK,EADpB,KAAK,cAFyE,sBAGlF,CADS;IACoB,OAAA,CAC5B,2CACE,KAAK;QACH,8BAA8B;QAC9B,kBAAkB,KAAK,EAAE;YACvB,CAAC,CAAC,EAAE,CAAC,0CAA0C,CAAC,IAAc,CAAC,EAAE,OAAO,kBAAkB,GAAG,EAAE;YAC/F,CAAC,CAAC,EAAE,EAGR,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,iBAAiB,CAAC,IACpC,KAAK,EACT,CACH,CAAA;CAAA,CAAC;AACF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}

package/dist/js/components/AboutModal/AboutModalBoxHero.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {
-    /** Background image data or file path  */
-    backgroundImageSrc?: string;
-}
-export declare const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps>;
-//# sourceMappingURL=AboutModalBoxHero.d.ts.map

package/dist/js/components/AboutModal/AboutModalBoxHero.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalBoxHero.d.ts","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalBoxHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7E,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAe7E,CAAC"}

package/dist/js/components/AboutModal/AboutModalBoxHero.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AboutModalBoxHero = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_styles_1 = require("@patternfly/react-styles");
-const about_modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/AboutModalBox/about-modal-box"));
-// eslint-disable-next-line camelcase
-const c_about_modal_box__hero_sm_BackgroundImage_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/c_about_modal_box__hero_sm_BackgroundImage'));
-const AboutModalBoxHero = (_a) => {
-    var { backgroundImageSrc } = _a, props = tslib_1.__rest(_a, ["backgroundImageSrc"]);
-    return (React.createElement("div", Object.assign({ style: 
-        /* eslint-disable camelcase */
-        backgroundImageSrc !== ''
-            ? { [c_about_modal_box__hero_sm_BackgroundImage_1.default.name]: `url(${backgroundImageSrc})` }
-            : {}, className: (0, react_styles_1.css)(about_modal_box_1.default.aboutModalBoxHero) }, props)));
-};
-exports.AboutModalBoxHero = AboutModalBoxHero;
-exports.AboutModalBoxHero.displayName = 'AboutModalBoxHero';
-//# sourceMappingURL=AboutModalBoxHero.js.map

package/dist/js/components/AboutModal/AboutModalBoxHero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AboutModalBoxHero.js","sourceRoot":"","sources":["../../../../src/components/AboutModal/AboutModalBoxHero.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,oIAA2F;AAC3F,qCAAqC;AACrC,qKAAsI;AAO/H,MAAM,iBAAiB,GAAoD,CAAC,EAG1D,EAAE,EAAE;QAHsD,EACjF,kBAAkB,OAEK,EADpB,KAAK,sBAFyE,sBAGlF,CADS;IACoB,OAAA,CAC5B,2CACE,KAAK;QACH,8BAA8B;QAC9B,kBAAkB,KAAK,EAAE;YACvB,CAAC,CAAC,EAAE,CAAC,oDAA0C,CAAC,IAAc,CAAC,EAAE,OAAO,kBAAkB,GAAG,EAAE;YAC/F,CAAC,CAAC,EAAE,EAGR,SAAS,EAAE,IAAA,kBAAG,EAAC,yBAAM,CAAC,iBAAiB,CAAC,IACpC,KAAK,EACT,CACH,CAAA;CAAA,CAAC;AAfW,QAAA,iBAAiB,qBAe5B;AACF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}

package/src/components/AboutModal/AboutModalBoxHero.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
-// eslint-disable-next-line camelcase
-import c_about_modal_box__hero_sm_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box__hero_sm_BackgroundImage';
-
-export interface AboutModalBoxHeroProps extends React.HTMLProps<HTMLDivElement> {
-  /** Background image data or file path  */
-  backgroundImageSrc?: string;
-}
-
-export const AboutModalBoxHero: React.FunctionComponent<AboutModalBoxHeroProps> = ({
-  backgroundImageSrc,
-  ...props
-}: AboutModalBoxHeroProps) => (
-  <div
-    style={
-      /* eslint-disable camelcase */
-      backgroundImageSrc !== ''
-        ? { [c_about_modal_box__hero_sm_BackgroundImage.name as string]: `url(${backgroundImageSrc})` }
-        : {}
-      /* eslint-enable camelcase */
-    }
-    className={css(styles.aboutModalBoxHero)}
-    {...props}
-  />
-);
-AboutModalBoxHero.displayName = 'AboutModalBoxHero';

package/src/components/AboutModal/__tests__/AboutModalBoxHero.test.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxHero } from '../AboutModalBoxHero';
-
-test('test About Modal Box SHero', () => {
-  const { asFragment } = render(<AboutModalBoxHero />);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHero.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test About Modal Box SHero 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-about-modal-box__hero"
-    style="--pf-c-about-modal-box__hero--sm--BackgroundImage: url(undefined);"
-  />
-</DocumentFragment>
-`;