@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

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

@@ -1,439 +0,0 @@
-import { Fragment, useState } from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Content,
-  DataList,
-  DataListAction,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Flex,
-  FlexItem,
-  InputGroup,
-  InputGroupItem,
-  PageSection,
-  Progress,
-  Stack,
-  StackItem,
-  TextInput,
-  Title,
-  Select,
-  SelectOption,
-  SelectOptionProps,
-  MenuToggle
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
-import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-
-interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
-  label: string;
-}
-
-const statusOptions: SelectOptionType[] = [
-  { value: 'New', label: 'New' },
-  { value: 'Pending', label: 'Pending' },
-  { value: 'Running', label: 'Running' },
-  { value: 'Cancelled', label: 'Cancelled' }
-];
-
-const riskOptions: SelectOptionType[] = [
-  { value: 'Low', label: 'Low' },
-  { value: 'Medium', label: 'Medium' },
-  { value: 'High', label: 'High' }
-];
-
-export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
-  const [inputValue, setInputValue] = useState('');
-  const [statusIsOpen, setStatusIsOpen] = useState(false);
-  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = useState(false);
-  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
-
-  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
-    setStatusSelected(value);
-    setStatusIsOpen(false);
-  };
-
-  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
-    setRiskSelected(value);
-    setRiskIsOpen(false);
-  };
-
-  const onSelectDataListItem = (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
-    id: string
-  ) => {
-    setSelectedDataListItemId(id);
-    setIsDrawerExpanded(true);
-    setDrawerPanelBodyContent(id.charAt(id.length - 1));
-  };
-
-  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {
-    setIsDrawerExpanded(false);
-    setSelectedDataListItemId('');
-  };
-
-  const toggleGroupItems = (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
-      <ToolbarItem>
-        <InputGroup>
-          <InputGroupItem isFill>
-            <TextInput
-              name="content-padding-data-toolbar-input1"
-              id="content-padding-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}
-              value={inputValue}
-            />
-          </InputGroupItem>
-          <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
-          </InputGroupItem>
-        </InputGroup>
-      </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
-        <ToolbarItem>
-          <Select
-            aria-label="Status select"
-            selected={statusSelected}
-            isOpen={statusIsOpen}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}
-                isExpanded={statusIsOpen}
-              >
-                {statusSelected}
-              </MenuToggle>
-            )}
-            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}
-            onSelect={onStatusSelect}
-          >
-            {statusOptions.map(({ label, value }) => (
-              <SelectOption key={label} value={value}>
-                {label}
-              </SelectOption>
-            ))}
-          </Select>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Select
-            aria-label="Risk select"
-            selected={riskSelected}
-            isOpen={riskIsOpen}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}
-                isExpanded={riskIsOpen}
-              >
-                {riskSelected}
-              </MenuToggle>
-            )}
-            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}
-            onSelect={onRiskSelect}
-          >
-            {riskOptions.map(({ label, value }) => (
-              <SelectOption key={label} value={value}>
-                {label}
-              </SelectOption>
-            ))}
-          </Select>
-        </ToolbarItem>
-      </ToolbarGroup>
-    </Flex>
-  );
-
-  const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
-      {toggleGroupItems}
-    </ToolbarToggleGroup>
-  );
-
-  const panelContent = (
-    <DrawerPanelContent isPlain>
-      <DrawerHead>
-        <Title headingLevel="h2" size="xl">
-          node-{drawerPanelBodyContent}
-        </Title>
-        <DrawerActions>
-          <DrawerCloseButton onClick={onCloseDrawerClick} />
-        </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={parseInt(drawerPanelBodyContent) * 10} title="Title" />
-          </FlexItem>
-          <FlexItem>
-            <Progress value={parseInt(drawerPanelBodyContent) * 5} title="Title" />
-          </FlexItem>
-        </Flex>
-      </DrawerPanelBody>
-    </DrawerPanelContent>
-  );
-
-  const drawerContent = (
-    <Fragment>
-      <Toolbar id="content-padding-data-toolbar">
-        <ToolbarContent>{ToolbarItems}</ToolbarContent>
-      </Toolbar>
-      <DataList
-        aria-label="data list"
-        selectedDataListItemId={selectedDataListItemId}
-        onSelectDataListItem={onSelectDataListItem}
-      >
-        <DataListItem id="content-padding-item1">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                    <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
-                    </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
-                  </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item1 content-padding-action1"
-                  id="content-padding-action1"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item2">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                    <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
-                    </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <TimesCircleIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
-                  </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item2 content-padding-action2"
-                  id="content-padding-action2"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item3">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                    <FlexItem>
-                      <p>patternfly</p>
-                      <small>
-                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>
-                      </small>
-                    </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
-                  </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item3 content-padding-action3"
-                  id="content-padding-action3"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-        <DataListItem id="content-padding-item4">
-          <DataListItemRow>
-            <DataListItemCells
-              dataListCells={[
-                <DataListCell key="primary-content">
-                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>
-                    <FlexItem>
-                      <p>patternfly-elements</p>
-                      <small>PatternFly elements</small>
-                    </FlexItem>
-                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-                      <FlexItem>
-                        <RhUiBranchFillIcon /> 10
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCodeIcon /> 4
-                      </FlexItem>
-                      <FlexItem>
-                        <CubeIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiCheckCircleFillIcon /> 7
-                      </FlexItem>
-                      <FlexItem>
-                        <RhUiWarningFillIcon /> 5
-                      </FlexItem>
-                      <FlexItem>
-                        <TimesCircleIcon /> 5
-                      </FlexItem>
-                      <FlexItem>Updated 2 days ago</FlexItem>
-                    </Flex>
-                  </Flex>
-                </DataListCell>,
-                <DataListAction
-                  key="actions"
-                  aria-labelledby="content-padding-item4 content-padding-action4"
-                  id="content-padding-action4"
-                  aria-label="Actions"
-                >
-                  <Stack>
-                    <StackItem>
-                      <Button variant={ButtonVariant.secondary}>Secondary</Button>
-                    </StackItem>
-                    <StackItem>
-                      <Button variant={ButtonVariant.link}>Link Button</Button>
-                    </StackItem>
-                  </Stack>
-                </DataListAction>
-              ]}
-            />
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    </Fragment>
-  );
-
-  return (
-    <DashboardWrapper>
-      <PageSection aria-labelledby="main-title">
-        <Content>
-          <h1 id="main-title">Main title</h1>
-          <p>
-            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-            of it's relative line height of 1.5.
-          </p>
-        </Content>
-      </PageSection>
-      <Divider component="div" />
-      <PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
-        <Drawer isExpanded={isDrawerExpanded}>
-          <DrawerContent panelContent={panelContent}>
-            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
-          </DrawerContent>
-        </Drawer>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};

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

@@ -1,205 +0,0 @@
-import { Fragment, useState } from 'react';
-import {
-  Card,
-  Content,
-  DataList,
-  DataListCell,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  Divider,
-  Drawer,
-  DrawerActions,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerHead,
-  DrawerPanelBody,
-  DrawerPanelContent,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  Flex,
-  FlexItem,
-  MenuToggle,
-  PageSection,
-  Progress,
-  Title
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1');
-  const [isExpanded, setIsExpanded] = 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 = (
-    <Fragment>
-      <Toolbar id="data-list-data-toolbar">
-        <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>
-    </Fragment>
-  );
-
-  return (
-    <DashboardWrapper>
-      <PageSection aria-labelledby="main-title">
-        <Content>
-          <h1 id="main-title">Main title</h1>
-          <p>
-            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-            of it’s relative line height of 1.5.
-          </p>
-        </Content>
-      </PageSection>
-      <Divider component="div" />
-      <PageSection aria-label="Card with drawer content">
-        <Card>
-          <Drawer isStatic isExpanded={isExpanded}>
-            <DrawerContent panelContent={panelContent}>
-              <DrawerContentBody>{drawerContent}</DrawerContentBody>
-            </DrawerContent>
-          </Drawer>
-        </Card>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};