@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/empty-state/react.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+const pageData = {
+  "id": "Empty state",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/empty-state/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/EmptyState/examples/EmptyState.md",
+  "relPath": "packages/react-core/src/components/EmptyState/examples/EmptyState.md",
+  "propComponents": [
+    {
+      "name": "EmptyState",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the empty state"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the empty state"
+        },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "description": "Additional class names to apply to the empty state header"
+        },
+        {
+          "name": "headingLevel",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "The heading level to use, default is h1"
+        },
+        {
+          "name": "icon",
+          "type": "React.ComponentType<any>",
+          "description": "Empty state icon element to be rendered. Can also be a spinner component"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Cause component to consume the available height of its container"
+        },
+        {
+          "name": "status",
+          "type": "'danger' | 'warning' | 'success' | 'info' | 'custom'",
+          "description": "Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop"
+        },
+        {
+          "name": "titleClassName",
+          "type": "string",
+          "description": "Additional classes added to the title inside empty state header"
+        },
+        {
+          "name": "titleText",
+          "type": "React.ReactNode",
+          "description": "Text of the title inside empty state header, will be wrapped in headingLevel"
+        },
+        {
+          "name": "variant",
+          "type": "'xs' | 'sm' | 'lg' | 'xl' | 'full'",
+          "description": "Modifies empty state max-width and sizes of icon, title and body",
+          "defaultValue": "EmptyStateVariant.full"
+        }
+      ]
+    },
+    {
+      "name": "EmptyStateBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the empty state body"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the empty state body"
+        }
+      ]
+    },
+    {
+      "name": "EmptyStateFooter",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the empty state footer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the empty state footer"
+        }
+      ]
+    },
+    {
+      "name": "EmptyStateActions",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the empty state actions"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the empty state actions"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-empty-state"
+  ],
+  "examples": [
+    "Basic",
+    "Extra small",
+    "Small",
+    "Large",
+    "Extra large",
+    "With status",
+    "Spinner",
+    "No match found"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  CubesIcon,
+  SearchIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core';\nimport CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';\n\nexport const EmptyStateBasic: React.FunctionComponent = () => (\n  <EmptyState titleText=\"Empty state\" headingLevel=\"h4\" icon={CubesIcon}>\n    <EmptyStateBody>\n      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to\n      meet a variety of needs.\n    </EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"primary\">Primary action</Button>\n      </EmptyStateActions>\n      <EmptyStateActions>\n        <Button variant=\"link\">Multiple</Button>\n        <Button variant=\"link\">Action Buttons</Button>\n        <Button variant=\"link\">Can</Button>\n        <Button variant=\"link\">Go here</Button>\n        <Button variant=\"link\">In the secondary</Button>\n        <Button variant=\"link\">Action area</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Extra small': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateBody,\n  EmptyStateActions,\n  EmptyStateFooter\n} from '@patternfly/react-core';\nimport CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';\n\nexport const EmptyStateExtraSmall: React.FunctionComponent = () => (\n  <EmptyState variant={EmptyStateVariant.xs} titleText=\"Empty state\" headingLevel=\"h4\" icon={CubesIcon}>\n    <EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"link\">Multiple</Button>\n        <Button variant=\"link\">Action Buttons</Button>\n        <Button variant=\"link\">Can</Button>\n        <Button variant=\"link\">Go here</Button>\n        <Button variant=\"link\">In the secondary</Button>\n        <Button variant=\"link\">Action area</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"Extra small","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Small': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateBody,\n  EmptyStateActions,\n  EmptyStateFooter\n} from '@patternfly/react-core';\nimport CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';\n\nexport const EmptyStateSmall: React.FunctionComponent = () => (\n  <EmptyState variant={EmptyStateVariant.sm} titleText=\"Empty state\" headingLevel=\"h4\" icon={CubesIcon}>\n    <EmptyStateBody>\n      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to\n      meet a variety of needs.\n    </EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"primary\">Primary action</Button>\n      </EmptyStateActions>\n      <EmptyStateActions>\n        <Button variant=\"link\">Multiple</Button>\n        <Button variant=\"link\">Action Buttons</Button>\n        <Button variant=\"link\">Can</Button>\n        <Button variant=\"link\">Go here</Button>\n        <Button variant=\"link\">In the secondary</Button>\n        <Button variant=\"link\">Action area</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"Small","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Large': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateBody,\n  EmptyStateActions,\n  EmptyStateFooter\n} from '@patternfly/react-core';\nimport CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';\n\nexport const EmptyStateLarge: React.FunctionComponent = () => (\n  <EmptyState variant={EmptyStateVariant.lg} titleText=\"Empty state\" headingLevel=\"h4\" icon={CubesIcon}>\n    <EmptyStateBody>\n      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to\n      meet a variety of needs.\n    </EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"primary\">Primary action</Button>\n      </EmptyStateActions>\n      <EmptyStateActions>\n        <Button variant=\"link\">Multiple</Button>\n        <Button variant=\"link\">Action Buttons</Button>\n        <Button variant=\"link\">Can</Button>\n        <Button variant=\"link\">Go here</Button>\n        <Button variant=\"link\">In the secondary</Button>\n        <Button variant=\"link\">Action area</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"Large","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Extra large': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateBody,\n  EmptyStateActions,\n  EmptyStateFooter\n} from '@patternfly/react-core';\nimport CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';\n\nexport const EmptyStateExtraLarge: React.FunctionComponent = () => (\n  <EmptyState variant={EmptyStateVariant.xl} titleText=\"Empty state\" headingLevel=\"h4\" icon={CubesIcon}>\n    <EmptyStateBody>\n      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to\n      meet a variety of needs.\n    </EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"primary\">Primary action</Button>\n      </EmptyStateActions>\n      <EmptyStateActions>\n        <Button variant=\"link\">Multiple</Button>\n        <Button variant=\"link\">Action Buttons</Button>\n        <Button variant=\"link\">Can</Button>\n        <Button variant=\"link\">Go here</Button>\n        <Button variant=\"link\">In the secondary</Button>\n        <Button variant=\"link\">Action area</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"Extra large","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With status': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  EmptyState,\n  EmptyStateBody,\n  EmptyStateFooter,\n  EmptyStateActions,\n  EmptyStateStatus,\n  Button\n} from '@patternfly/react-core';\n\nexport const EmptyStateWithStatus: React.FunctionComponent = () => {\n  const [status, setStatus] = useState<EmptyStateStatus>(EmptyStateStatus.success);\n\n  const toggleStatus = () => {\n    interface StatusToggleMap {\n      [status: string]: EmptyStateStatus;\n    }\n\n    const statusToggleMap: StatusToggleMap = {\n      success: EmptyStateStatus.danger,\n      danger: EmptyStateStatus.warning,\n      warning: EmptyStateStatus.info,\n      info: EmptyStateStatus.custom,\n      custom: EmptyStateStatus.success\n    };\n\n    setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]);\n  };\n\n  const titleMap = {\n    success: \"You're all set\",\n    danger: \"You're not set\",\n    warning: \"You're probably not set\",\n    info: 'You might be set',\n    custom: \"You're custom\"\n  };\n\n  return (\n    <EmptyState status={status} titleText={titleMap[status]} headingLevel=\"h4\">\n      <EmptyStateBody>\n        This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible\n        enough to meet a variety of needs.\n      </EmptyStateBody>\n      <EmptyStateFooter>\n        <EmptyStateActions>\n          <Button variant=\"primary\" onClick={toggleStatus}>\n            Toggle status\n          </Button>\n        </EmptyStateActions>\n        <EmptyStateActions>\n          <Button variant=\"link\">Multiple</Button>\n          <Button variant=\"link\">Action Buttons</Button>\n          <Button variant=\"link\">Can</Button>\n          <Button variant=\"link\">Go here</Button>\n          <Button variant=\"link\">In the secondary</Button>\n          <Button variant=\"link\">Action area</Button>\n        </EmptyStateActions>\n      </EmptyStateFooter>\n    </EmptyState>\n  );\n};\n","title":"With status","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Spinner': props => 
+    <Example {...pageData} {...props} {...{"code":"import { EmptyState, Spinner } from '@patternfly/react-core';\n\nexport const EmptyStateSpinner: React.FunctionComponent = () => (\n  <EmptyState titleText=\"Loading\" headingLevel=\"h4\" icon={Spinner} />\n);\n","title":"Spinner","lang":"ts","className":""}}>
+      
+    </Example>,
+  'No match found': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\nexport const EmptyStateNoMatchFound: React.FunctionComponent = () => (\n  <EmptyState titleText=\"No results found\" headingLevel=\"h4\" icon={SearchIcon}>\n    <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>\n    <EmptyStateFooter>\n      <EmptyStateActions>\n        <Button variant=\"link\">Clear all filters</Button>\n      </EmptyStateActions>\n    </EmptyStateFooter>\n  </EmptyState>\n);\n","title":"No match found","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Extra small"])}
+    {React.createElement(pageData.examples["Small"])}
+    {React.createElement(pageData.examples["Large"])}
+    {React.createElement(pageData.examples["Extra large"])}
+    {React.createElement(pageData.examples["With status"])}
+    {React.createElement(pageData.examples["Spinner"])}
+    {React.createElement(pageData.examples["No match found"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsEmptyStateReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/expandable-section/react-demos.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+const pageData = {
+  "id": "Expandable section",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/expandable-section/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md",
+  "relPath": "packages/react-core/src/demos/ExpandableSection/ExpandableSection.md",
+  "examples": [
+    "Expandable text with character truncation"
+  ]
+};
+pageData.liveContext = {
+  useState
+};
+pageData.examples = {
+  'Expandable text with character truncation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';\n\nexport const ExpandableTextDemo: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus. Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla, eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam, tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus. Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;\n\n  return (\n    <ExpandableSection\n      variant={ExpandableSectionVariant.truncate}\n      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}\n      onToggle={onToggle}\n      isExpanded={isExpanded}\n      truncateMaxLines={-1}\n    >\n      {isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}\n    </ExpandableSection>\n  );\n};\n","title":"Expandable text with character truncation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To specify the number of characters shown prior to truncation, use a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Truncate>`}
+        </code>
+        {` component and pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`maxWidth`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`style`}
+        </code>
+        {` attribute.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Expandable text with character truncation"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsExpandableSectionReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;