Merge pull request #61 from adamviktora/BulkActionExpandableSection

feat: add BulkActionExpandableSection component

packages/module/patternfly-docs/content/examples/BulkActionExpandableSection/BulkActionExpandableSection.md

@@ -0,0 +1,23 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: BulkActionExpandableSection
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['BulkActionExpandableSection']
+---
+
+import { BulkActionExpandableSection } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing BulkActionExpandableSection](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/pages/projects/components/BulkActionExpandableSection.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/pages/projects/components/BulkActionExpandableSection`
+
+### Example
+
+```js file="./BulkActionExpandableSectionBasic.tsx"
+
+```

packages/module/patternfly-docs/content/examples/BulkActionExpandableSection/BulkActionExpandableSectionBasic.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ListItem } from '@patternfly/react-core';
+import { BulkActionExpandableSection } from '@patternfly/ai-infra-ui-components';
+
+export const BulkActionExpandableSectionBasic: React.FunctionComponent = () => {
+  const items = [
+    { id: 1, name: 'Item 1' },
+    { id: 2, name: 'Item 2' },
+    { id: 3, name: 'Item 3' }
+  ];
+
+  return (
+    <>
+      <BulkActionExpandableSection title="Items">
+        {items.map((item) => (
+          <ListItem key={item.id}>{item.name}</ListItem>
+        ))}
+      </BulkActionExpandableSection>
+
+      <BulkActionExpandableSection title="More items" isInitiallyExpanded={false}>
+        {[<ListItem key="item-A">Item A</ListItem>, <ListItem key="item-B">Item B</ListItem>]}
+      </BulkActionExpandableSection>
+    </>
+  );
+};

packages/module/src/BulkActionExpandableSection/BulkActionExpandableSection.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ExpandableSection, Flex, FlexItem, Label, List, ListItemProps } from '@patternfly/react-core';
+
+export type BulkActionExpandableSectionProps = {
+  /** Title text that appears in the toggle. */
+  title: string;
+  /** List of ListItem elements that can be expanded/hidden by the toggle. */
+  children: React.ReactElement<ListItemProps>[];
+  /** Flag indicating if the children list is initially expanded. */
+  isInitiallyExpanded?: boolean;
+};
+
+export const BulkActionExpandableSection: React.FunctionComponent<BulkActionExpandableSectionProps> = ({
+  title,
+  children,
+  isInitiallyExpanded = true
+}: BulkActionExpandableSectionProps) => {
+  const [isExpanded, setIsExpanded] = React.useState(isInitiallyExpanded);
+
+  return (
+    <ExpandableSection
+      isExpanded={isExpanded}
+      onToggle={(_e, expanded) => setIsExpanded(expanded)}
+      toggleContent={
+        <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
+          <FlexItem>{title}</FlexItem>
+
+          <Label color="blue" isCompact>
+            {children.length}
+          </Label>
+        </Flex>
+      }
+      isIndented
+    >
+      <List>{children}</List>
+    </ExpandableSection>
+  );
+};

packages/module/src/BulkActionExpandableSection/index.ts

@@ -0,0 +1 @@
+export * from './BulkActionExpandableSection';

packages/module/src/index.ts

@@ -1,3 +1,4 @@
+export * from './BulkActionExpandableSection';
 export * from './DeleteModal';
 export * from './IndentSection';
 export * from './TruncatedText';