@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/demos/Card/examples/CardData.jsx

@@ -0,0 +1,67 @@
+export const data = [
+  {
+    id: 0,
+    name: 'PatternFly',
+    description: 'PatternFly is a community project that promotes design commonality and improves user experience.',
+    icon: 'pfIcon'
+  },
+  {
+    id: 1,
+    name: 'ActiveMQ',
+    description:
+      'The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.',
+    icon: 'activeMQIcon'
+  },
+  {
+    id: 2,
+    name: 'Apache Spark',
+    description: 'This documentation page covers the Apache Spark component for the Apache Camel.',
+    icon: 'sparkIcon'
+  },
+  {
+    id: 3,
+    name: 'Avro',
+    description:
+      'This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.',
+    icon: 'avroIcon'
+  },
+  {
+    id: 4,
+    name: 'Azure Services',
+    description: 'The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.',
+    icon: 'azureIcon'
+  },
+  {
+    id: 5,
+    name: 'Crypto',
+    description:
+      'For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.',
+    icon: 'saxonIcon'
+  },
+  {
+    id: 6,
+    name: 'DropBox',
+    description:
+      'The dropbox component allows you to treat Dropbox remote folders as a producer or consumer of messages.',
+    icon: 'dropBoxIcon'
+  },
+  {
+    id: 7,
+    name: 'JBoss Data Grid',
+    description: 'Read or write to a fully-supported distributed cache and data grid for faster integration services.',
+    icon: 'infinispanIcon'
+  },
+  {
+    id: 8,
+    name: 'REST',
+    description:
+      'The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport. From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.',
+    icon: 'restIcon'
+  },
+  {
+    id: 9,
+    name: 'SWAGGER',
+    description: 'Expose REST services and their APIs using Swagger specification.',
+    icon: 'swaggerIcon'
+  }
+];

package/src/demos/Card/examples/CardView.tsx

@@ -0,0 +1,575 @@
+import React from 'react';
+import {
+  Badge,
+  Bullseye,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  EmptyStateActions,
+  Gallery,
+  MenuToggle,
+  MenuToggleCheckbox,
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuDropdownItem,
+  OverflowMenuItem,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  TextContent,
+  Text,
+  Toolbar,
+  ToolbarItem,
+  ToolbarFilter,
+  ToolbarContent,
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import pfIcon from './assets/pf-logo-small.svg';
+import activeMQIcon from './assets/activemq-core_200x150.png';
+import avroIcon from './assets/camel-avro_200x150.png';
+import dropBoxIcon from './assets/camel-dropbox_200x150.png';
+import infinispanIcon from './assets/camel-infinispan_200x150.png';
+import saxonIcon from './assets/camel-saxon_200x150.png';
+import sparkIcon from './assets/camel-spark_200x150.png';
+import swaggerIcon from './assets/camel-swagger-java_200x150.png';
+import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from './assets/FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
+
+export const CardViewBasic: React.FunctionComponent = () => {
+  const totalItemCount = 10;
+
+  const [cardData, setCardData] = React.useState(data);
+  const [isChecked, setIsChecked] = React.useState(false);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = React.useState({});
+
+  interface ProductType {
+    id: number;
+    name: string;
+    icon: string;
+    description: string;
+  }
+  const checkAllSelected = (selected: number, total: number) => {
+    if (selected && selected < total) {
+      return null;
+    }
+    return selected === total;
+  };
+
+  const onToolbarDropdownToggle = () => {
+    setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownToggle = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onToolbarKebabDropdownSelect = () => {
+    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);
+  };
+
+  const onCardKebabDropdownToggle = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>,
+    key: string
+  ) => {
+    setState({
+      [key]: !state[key as keyof Object]
+    });
+  };
+
+  const deleteItem = (item: ProductType) => {
+    const filter = (getter) => (val) => getter(val) !== item.id;
+
+    setCardData(cardData.filter(filter(({ id }) => id)));
+
+    setSelectedItems(selectedItems.filter(filter((id) => id)));
+  };
+
+  const onSetPage = (_event: any, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (_event: any, perPage: number) => {
+    setPerPage(perPage);
+    setPage(1);
+  };
+
+  const onSplitButtonToggle = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(false);
+  };
+
+  const onNameSelect = (event: any, selection = '') => {
+    const checked = event.target.checked;
+    const prevSelections = filters.products;
+
+    setFilters({
+      ...filters,
+      products: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
+    });
+  };
+
+  const onDelete = (type = '', _id = '') => {
+    if (type) {
+      setFilters(filters);
+    } else {
+      setFilters({ products: [] });
+    }
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const name = event.currentTarget.name;
+    const productId = Number(name.charAt(name.length - 1));
+
+    if (selectedItems.includes(productId * 1)) {
+      setSelectedItems(selectedItems.filter((id) => productId * 1 !== id));
+
+      const checkAll = checkAllSelected(selectedItems.length - 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    } else {
+      setSelectedItems([...selectedItems, productId * 1]);
+      const checkAll = checkAllSelected(selectedItems.length + 1, totalItemCount);
+      setAreAllSelected(!!checkAll);
+    }
+  };
+
+  const updateSelected = () => {
+    const rows = cardData.map((post) => {
+      post.selected = selectedItems.includes(post.id);
+      return post;
+    });
+
+    setCardData(rows);
+  };
+
+  const getAllItems = () => {
+    const collection: number[] = [];
+    for (const items of cardData) {
+      collection.push(items.id);
+    }
+
+    return collection;
+  };
+
+  const splitCheckboxSelectAll = (e: any) => {
+    let collection: number[] = [];
+
+    if (e.target.checked) {
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(isChecked);
+    setAreAllSelected(e.target.checked);
+
+    updateSelected();
+  };
+
+  const selectPage = (e: { target: { checked: any } }) => {
+    const { checked } = e.target;
+    let collection: number[] = [];
+
+    collection = getAllItems();
+
+    setSelectedItems(collection);
+    setIsChecked(checked);
+    setAreAllSelected(totalItemCount === perPage ? true : false);
+
+    updateSelected();
+  };
+
+  const selectAll = () => {
+    let collection: number[] = [];
+    for (let i = 0; i <= 9; i++) {
+      collection = [...collection, i];
+    }
+
+    setSelectedItems(collection);
+    setIsChecked(true);
+    setAreAllSelected(true);
+
+    updateSelected();
+  };
+
+  const selectNone = () => {
+    setSelectedItems([]);
+    setIsChecked(false);
+    setAreAllSelected(false);
+
+    updateSelected();
+  };
+
+  const renderPagination = () => {
+    const defaultPerPageOptions = [
+      {
+        title: '1',
+        value: 1
+      },
+      {
+        title: '5',
+        value: 5
+      },
+      {
+        title: '10',
+        value: 10
+      }
+    ];
+
+    return (
+      <Pagination
+        itemCount={totalItemCount}
+        page={page}
+        perPage={perPage}
+        perPageOptions={defaultPerPageOptions}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        variant="top"
+        isCompact
+      />
+    );
+  };
+
+  const buildSelectDropdown = () => {
+    const numSelected = selectedItems.length;
+    const anySelected = numSelected > 0;
+    const splitButtonDropdownItems = (
+      <>
+        <DropdownItem key="item-1" onClick={selectNone}>
+          Select none (0 items)
+        </DropdownItem>
+        <DropdownItem key="item-2" onClick={selectPage}>
+          Select page ({perPage} items)
+        </DropdownItem>
+        <DropdownItem key="item-3" onClick={selectAll}>
+          Select all ({totalItemCount} items)
+        </DropdownItem>
+      </>
+    );
+    return (
+      <Dropdown
+        onSelect={onSplitButtonSelect}
+        isOpen={splitButtonDropdownIsOpen}
+        onOpenChange={(isOpen) => setSplitButtonDropdownIsOpen(isOpen)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={splitButtonDropdownIsOpen}
+            onClick={onSplitButtonToggle}
+            aria-label="Select cards"
+            splitButtonOptions={{
+              items: [
+                <MenuToggleCheckbox
+                  id="split-dropdown-checkbox"
+                  key="split-dropdown-checkbox"
+                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                  isChecked={areAllSelected}
+                  onClick={(e) => splitCheckboxSelectAll(e)}
+                >
+                  {numSelected !== 0 && `${numSelected} selected`}
+                </MenuToggleCheckbox>
+              ]
+            }}
+          ></MenuToggle>
+        )}
+      >
+        <DropdownList>{splitButtonDropdownItems}</DropdownList>
+      </Dropdown>
+    );
+  };
+
+  const buildFilterDropdown = () => {
+    const filterDropdownItems = (
+      <SelectList>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
+      </SelectList>
+    );
+
+    return (
+      <ToolbarFilter
+        categoryName="Products"
+        chips={filters.products}
+        deleteChip={(type, id) => onDelete(type as string, id as string)}
+      >
+        <Select
+          aria-label="Products"
+          role="menu"
+          toggle={(toggleRef) => (
+            <MenuToggle ref={toggleRef} onClick={onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
+              Filter by creator name
+              {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
+            </MenuToggle>
+          )}
+          onSelect={(event, selection) => onNameSelect(event, selection.toString())}
+          onOpenChange={(isOpen) => {
+            setIsLowerToolbarDropdownOpen(isOpen);
+          }}
+          selected={filters.products}
+          isOpen={isLowerToolbarDropdownOpen}
+        >
+          {filterDropdownItems}
+        </Select>
+      </ToolbarFilter>
+    );
+  };
+
+  const toolbarKebabDropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="link">
+      Link
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="action" component="button">
+      Action
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="disabled link" isDisabled>
+      Disabled Link
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="disabled action" isDisabled component="button">
+      Disabled Action
+    </OverflowMenuDropdownItem>,
+    <Divider key="separator" />,
+    <OverflowMenuDropdownItem itemId={5} key="separated link">
+      Separated Link
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
+      Separated Action
+    </OverflowMenuDropdownItem>
+  ];
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem variant="bulk-select">{buildSelectDropdown()}</ToolbarItem>
+      <ToolbarItem>{buildFilterDropdown()}</ToolbarItem>
+      <ToolbarItem variant="overflow-menu">
+        <OverflowMenu breakpoint="md">
+          <OverflowMenuItem>
+            <Button variant="primary">Create a project</Button>
+          </OverflowMenuItem>
+          <OverflowMenuControl hasAdditionalOptions>
+            <Dropdown
+              onSelect={onToolbarKebabDropdownSelect}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Toolbar kebab overflow menu"
+                  variant="plain"
+                  onClick={onToolbarKebabDropdownToggle}
+                  isExpanded={isLowerToolbarKebabDropdownOpen}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isLowerToolbarKebabDropdownOpen}
+              onOpenChange={(isOpen) => setIsLowerToolbarDropdownOpen(isOpen)}
+            >
+              <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+            </Dropdown>
+          </OverflowMenuControl>
+        </OverflowMenu>
+      </ToolbarItem>
+      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+        {renderPagination()}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    sparkIcon,
+    avroIcon,
+    azureIcon,
+    saxonIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    restIcon,
+    swaggerIcon
+  };
+
+  const filtered =
+    filters.products.length > 0
+      ? data.filter((card: { name: string }) => filters.products.length === 0 || filters.products.includes(card.name))
+      : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Projects</Text>
+            <Text component="p">This is a demo that showcases PatternFly cards.</Text>
+          </TextContent>
+          <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
+            <ToolbarContent>{toolbarItems}</ToolbarContent>
+          </Toolbar>
+        </PageSection>
+        <PageSection isFilled>
+          <Gallery hasGutter aria-label="Selectable card container">
+            <Card isCompact>
+              <Bullseye>
+                <EmptyState variant={EmptyStateVariant.xs}>
+                  <EmptyStateHeader
+                    headingLevel="h2"
+                    titleText="Add a new card to your page"
+                    icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                  />
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant="link">Add card</Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                </EmptyState>
+              </Bullseye>
+            </Card>
+            {filtered.map((product, key) => (
+              <Card isCompact isClickable isSelectable key={product.name} id={product.name.replace(/ /g, '-')}>
+                <CardHeader
+                  selectableActions={{
+                    isChecked: selectedItems.includes(product.id),
+                    selectableActionId: `selectable-actions-item-${product.id}`,
+                    selectableActionAriaLabelledby: product.name.replace(/ /g, '-'),
+                    name: `check-${product.id}`,
+                    onChange
+                  }}
+                  actions={{
+                    actions: (
+                      <>
+                        <Dropdown
+                          isOpen={!!state[key] ?? false}
+                          onOpenChange={(isOpen) => setState({ [key]: isOpen })}
+                          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                            <MenuToggle
+                              ref={toggleRef}
+                              aria-label={`${product.name} actions`}
+                              variant="plain"
+                              onClick={(e) => {
+                                onCardKebabDropdownToggle(e, key.toString());
+                              }}
+                              isExpanded={!!state[key]}
+                            >
+                              <EllipsisVIcon />
+                            </MenuToggle>
+                          )}
+                          popperProps={{ position: 'right' }}
+                        >
+                          <DropdownList>
+                            <DropdownItem
+                              key="trash"
+                              onClick={() => {
+                                deleteItem(product);
+                              }}
+                            >
+                              <TrashIcon />
+                              Delete
+                            </DropdownItem>
+                          </DropdownList>
+                        </Dropdown>
+                      </>
+                    )
+                  }}
+                >
+                  <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
+                </CardHeader>
+                <CardTitle>{product.name}</CardTitle>
+                <CardBody>{product.description}</CardBody>
+              </Card>
+            ))}
+          </Gallery>
+        </PageSection>
+        <PageSection
+          isFilled={false}
+          stickyOnBreakpoint={{ default: 'bottom' }}
+          padding={{ default: 'noPadding' }}
+          variant="light"
+        >
+          <Pagination
+            itemCount={totalItemCount}
+            page={page}
+            perPage={perPage}
+            onPerPageSelect={onPerPageSelect}
+            onSetPage={onSetPage}
+            variant="bottom"
+          />
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};

package/src/demos/CardDemos.md

@@ -168,7 +168,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all set up cluster steps
                 </Button>
               </Flex>
@@ -196,7 +196,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all guided tours
                 </Button>
               </Flex>
@@ -227,7 +227,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all quick starts
                 </Button>
               </Flex>
@@ -261,7 +261,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all learning resources
                 </Button>
               </Flex>

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -19,7 +19,7 @@ propComponents:
 ---
 
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from './examples/pf-logo-small.svg';
+import pfIcon from '../assets/pf-logo-small.svg';
 
 As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.