@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.4

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import {
+  Card,
+  DataList,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+    onDropdownFocus();
+  };
+  const onDropdownFocus = () => {
+    const element = document.getElementById('toggle-id');
+    element?.focus();
+  };
+  const onSelectDataListItem = (_event, id) => {
+    setSelectedDataListItemId(id);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ '2xl': 'width_75' }}>
+      <DrawerHead>
+        <Title size="lg" headingLevel="h2">
+          Patternfly-elements
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="data-list-data-toolbar" usePageInsets>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Dropdown
+              onSelect={onDropdownSelect}
+              isOpen={isDropdownOpen}
+              onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+              toggle={(toggleRef) => (
+                <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>
+                  Dropdown
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="option1">Option 1</DropdownItem>
+                <DropdownItem key="option2">Option 2</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="selectable data list example"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 1">
+                  <div>Node 1</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 2">
+                  <div>Node 2</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 3">
+                  <div>Node 3</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 4">
+                  <div>Node 4</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 5">
+                  <div>Node 5</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  Card,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  SimpleList,
+  SimpleListGroup,
+  SimpleListItem,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onSelectListItem = (_listItem, listItemProps) => {
+    const id = listItemProps.children;
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ xl: 'width_75' }}>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          {`List item ${drawerPanelBodyContent} details`}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <SimpleList onSelect={onSelectListItem}>
+        <SimpleListGroup title="Section 1" id="simple-list-section-1">
+          <SimpleListItem key="item1" isActive>
+            List item 1
+          </SimpleListItem>
+          <SimpleListItem key="item2">List item 2</SimpleListItem>
+          <SimpleListItem key="item3">List item 3</SimpleListItem>
+          <SimpleListItem key="item4">List item 4</SimpleListItem>
+        </SimpleListGroup>
+        <SimpleListGroup title="Section 2" id="section-2">
+          <SimpleListItem key="item5">List item 5</SimpleListItem>
+          <SimpleListItem key="item6">List item 6</SimpleListItem>
+          <SimpleListItem key="item7">List item 7</SimpleListItem>
+          <SimpleListItem key="item8">List item 8</SimpleListItem>
+          <SimpleListItem key="item9">List item 9</SimpleListItem>
+        </SimpleListGroup>
+      </SimpleList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Wizard/InModal.tsx

@@ -18,8 +18,8 @@ export const WizardInModalDemo: React.FunctionComponent = () => (
     <DashboardWrapper hasPageTemplateTitle>
       <PageSection isWidthLimited>
         <Gallery hasGutter>
-          {Array.from({ length: 10 }).map((_, i) => (
-            <GalleryItem key={i}>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
               <Card>
                 <CardBody>This is a card</CardBody>
               </Card>

package/src/deprecated/components/ContextSelector/__tests__/ContextSelectorToggle.test.tsx

@@ -24,7 +24,7 @@ describe('ContextSelectorToggle', () => {
 
   test('Verify ESC press', async () => {
     const user = userEvent.setup();
-    
+
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
     await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
@@ -33,7 +33,7 @@ describe('ContextSelectorToggle', () => {
 
   test('Verify ESC press with not isOpen', async () => {
     const user = userEvent.setup();
-    
+
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} id="toggle-id" />);
 
     await user.type(screen.getByRole('button'), `{${KeyTypes.Escape}}`);
@@ -42,7 +42,7 @@ describe('ContextSelectorToggle', () => {
 
   test('Verify keydown tab ', async () => {
     const user = userEvent.setup();
-    
+
     const { asFragment } = render(<ContextSelectorToggle isOpen id="toggle-id" />);
 
     await user.type(screen.getByRole('button'), `{${KeyTypes.Tab}}`);
@@ -51,7 +51,7 @@ describe('ContextSelectorToggle', () => {
 
   test('Verify keydown enter ', async () => {
     const user = userEvent.setup();
-    
+
     const { asFragment } = render(<ContextSelectorToggle onToggle={jest.fn()} onEnter={jest.fn()} id="toggle-id" />);
 
     await user.type(screen.getByRole('button'), `{${KeyTypes.Enter}}`);

package/src/deprecated/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -187,7 +187,7 @@ describe('DropdownToggle', () => {
     });
 
     test('action split button - renders secondary variant', () => {
-      const { asFragment } = render(
+      render(
         <DropdownToggle
           id="Dropdown Toggle"
           toggleVariant="secondary"

package/src/deprecated/components/Select/__tests__/Select.test.tsx

@@ -123,7 +123,7 @@ describe('Select', () => {
 
   describe('custom select filter', () => {
     test('filters properly', async () => {
-      const customFilter = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
+      const customFilter = (e: React.ChangeEvent<HTMLInputElement>, _value: string) => {
         let input: RegExp;
         try {
           input = new RegExp(e.target.value, 'i');

package/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -29,7 +29,7 @@ describe('Wizard', () => {
       { name: 'C', id: 'step-C', component: <p>Step 4</p> },
       { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
-    const onBack: WizardStepFunctionType = step => {
+    const onBack: WizardStepFunctionType = (step) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
@@ -62,7 +62,7 @@ describe('Wizard', () => {
       { name: 'C', component: <p>Step 4</p> },
       { name: 'D', component: <p>Step 5</p> }
     ];
-    const onBack: WizardStepFunctionType = step => {
+    const onBack: WizardStepFunctionType = (step) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
@@ -289,7 +289,7 @@ test('startAtStep can be used to externally control the current step of the wiza
     const [step, setStep] = React.useState(1);
 
     const incrementStep = () => {
-      setStep(prevStep => prevStep + 1);
+      setStep((prevStep) => prevStep + 1);
     };
 
     const steps: WizardStep[] = [

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const { asFragment } = render(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(<GenerateId>{(id) => <div id={id}>div with random ID</div>}</GenerateId>);
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/OUIA/__mocks__/ouia.ts

@@ -0,0 +1,6 @@
+import { OUIAProps } from '../../index';
+
+export const useOUIAProps = () => ({});
+export const getOUIAProps = () => ({});
+export const getDefaultOUIAId = () => '';
+export { OUIAProps };

package/src/helpers/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from '../OUIA/__mocks__/ouia';
+export * from './util';

package/src/helpers/__tests__/fileUtils.test.ts

@@ -3,15 +3,12 @@ import { readFile, fileReaderType } from '../fileUtils';
 describe('readFile', () => {
   const file = new File(['File contents here'], 'testfile.txt');
 
-  test('text file', () => {
-    return expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here');
-  });
+  test('text file', () => expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here'));
 
-  test('dataURL file', () => {
-    return expect(readFile(file, fileReaderType.dataURL)).resolves.toBe('data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl');
-  });
+  test('dataURL file', () =>
+    expect(readFile(file, fileReaderType.dataURL)).resolves.toBe(
+      'data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl'
+    ));
 
-  test('rejects on unknown type', () => {
-    return expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type');
-  });
+  test('rejects on unknown type', () => expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type'));
 });

package/src/helpers/__tests__/util.test.ts

@@ -14,7 +14,7 @@ import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 const createMockHtmlElement = (bounds: Partial<DOMRect>) =>
   ({
     getBoundingClientRect: () => bounds
-  } as HTMLElement);
+  }) as HTMLElement;
 
 test('capitalize', () => {
   expect(capitalize('foo')).toBe('Foo');

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -23,7 +23,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-    render(<Bullseye component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });

package/src/layouts/Grid/__tests__/GridItem.test.tsx

@@ -18,7 +18,7 @@ test('adds row class', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-Object.keys(DeviceSizes).forEach(size => {
+Object.keys(DeviceSizes).forEach((size) => {
   test(`adds ${size} span class`, () => {
     const props = { [size]: 4 };
     const { asFragment } = render(<GridItem {...props} />);

package/src/components/Page/examples/page.css

@@ -1,3 +0,0 @@
-.pf-v5-c-page__sidebar-body {
-  color: var(--pf-v5-global--Color--light-100);
-}