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

package/patternfly-docs/generated/developer-guides/open-ui-automation/react.js

@@ -0,0 +1,285 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+const pageData = {
+  "id": "Open UI Automation",
+  "section": "developer-guides",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/developer-guides/open-ui-automation/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/OUIA/OUIA.md",
+  "relPath": "packages/react-core/src/helpers/OUIA/OUIA.md",
+  "examples": [
+    "Example"
+  ]
+};
+pageData.liveContext = {
+  Fragment
+};
+pageData.examples = {
+  'Example': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Button } from '@patternfly/react-core';\n\nexport const OuiaExample: React.FunctionComponent = () => (\n  <Fragment>\n    <Button>Button</Button>\n    <br />\n    <br />\n    <Button ouiaId=\"static_id\">Button with ouiaId</Button>\n  </Fragment>\n);\n","title":"Example","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"about-open-ui-automation","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`About Open UI Automation`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Open UI Automation (OUIA) is a specification of certain key guidelines to follow when creating a new
+web framework or application. The goal is to ease the burden of creating and maintaining automated
+testing environments. OUIA standardizes some HTML attributes and web page
+behavior. It helps to create trivial and unambiguous locators of the elements in the DOM for
+various automated test suites.`}
+    </p>
+    <AutoLinkHeader {...{"id":"why-not-use-id-or-aria","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Why not use `}
+      <code {...{"className":"ws-code "}}>
+        {`id`}
+      </code>
+      {` or `}
+      <code {...{"className":"ws-code "}}>
+        {`ARIA`}
+      </code>
+      {`?`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      <code {...{"className":"ws-code "}}>
+        {`ARIA`}
+      </code>
+      {` is designed as an accessibility specification, and it doesn't account for aspects that are crucial
+for automation such as a component type. The `}
+      <code {...{"className":"ws-code "}}>
+        {`id`}
+      </code>
+      {` attribute might be reserved by some front-end code, and
+there might be restrictions on changing it. Having a separate id attribute makes it application and
+framework independent. Developers and testers have a contract that these attributes are designed for
+UI automation.`}
+    </p>
+    <AutoLinkHeader {...{"id":"specification-parts","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Specification parts`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The following blocks exist in the specification:`}
+    </p>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <code {...{"className":"ws-code "}}>
+          {`OUIA:Component`}
+        </code>
+        {` - components and component frameworks`}
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <code {...{"className":"ws-code "}}>
+          {`OUIA:Page`}
+        </code>
+        {` - page identification`}
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <code {...{"className":"ws-code "}}>
+          {`OUIA:PageSafe`}
+        </code>
+        {` - interaction safety`}
+      </li>
+    </ul>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`You can find the complete description on the `}
+      <PatternflyThemeLink {...{"to":"https://ouia.readthedocs.io","className":""}}>
+        {`OUIA website`}
+      </PatternflyThemeLink>
+      {`.`}
+    </p>
+    <AutoLinkHeader {...{"id":"usage","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Usage`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`PatternFly generates a `}
+      <code {...{"className":"ws-code "}}>
+        {`data-ouia-component-type`}
+      </code>
+      {` attribute for selected components automatically
+based on the name. For example, the `}
+      <code {...{"className":"ws-code "}}>
+        {`data-ouia-component-type`}
+      </code>
+      {` attribute for the
+`}
+      <PatternflyThemeLink {...{"to":"/components/button","className":""}}>
+        {`button component`}
+      </PatternflyThemeLink>
+      {` is `}
+      <code {...{"className":"ws-code "}}>
+        {`PF6/Button`}
+      </code>
+      {`. The id of the `}
+      <code {...{"className":"ws-code "}}>
+        {`data-ouia-component-id`}
+      </code>
+      {`
+attribute is random by default. To specify the concrete id, add an `}
+      <code {...{"className":"ws-code "}}>
+        {`ouiaId`}
+      </code>
+      {` prop to the
+component.`}
+    </p>
+    {React.createElement(pageData.examples["Example"])}
+    <AutoLinkHeader {...{"id":"ouia-compliant-patternfly-5-components","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`OUIA-compliant PatternFly 5 components`}
+    </AutoLinkHeader>
+    <AutoLinkHeader {...{"id":"react-core-package","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`react-core package`}
+    </AutoLinkHeader>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/alert","className":""}}>
+          {`Alert`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/breadcrumb","className":""}}>
+          {`Breadcrumb`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/button","className":""}}>
+          {`Button`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/card","className":""}}>
+          {`Card`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/forms/checkbox","className":""}}>
+          {`Checkbox`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/chip","className":""}}>
+          {`Chip`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/content","className":""}}>
+          {`Content`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/menus/dropdown","className":""}}>
+          {`Dropdown`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/menus/dropdown","className":""}}>
+          {`DropdownItem`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/forms/form-select","className":""}}>
+          {`FormSelect`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/menus/menu","className":""}}>
+          {`Menu`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/modal","className":""}}>
+          {`Modal`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/navigation","className":""}}>
+          {`Navigation`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/navigation","className":""}}>
+          {`NavExpandable`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/navigation","className":""}}>
+          {`NavItem`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/pagination","className":""}}>
+          {`Pagination`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/forms/radio","className":""}}>
+          {`Radio`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/menus/select","className":""}}>
+          {`Select`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/switch","className":""}}>
+          {`Switch`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/tabs","className":""}}>
+          {`TabContent`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/tabs","className":""}}>
+          {`Tabs`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/forms/text-input","className":""}}>
+          {`TextInput`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/title","className":""}}>
+          {`Title`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/toolbar","className":""}}>
+          {`Toolbar`}
+        </PatternflyThemeLink>
+      </li>
+    </ul>
+    <AutoLinkHeader {...{"id":"react-table-package","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`react-table package`}
+    </AutoLinkHeader>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/table","className":""}}>
+          {`Table`}
+        </PatternflyThemeLink>
+      </li>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        <PatternflyThemeLink {...{"to":"/components/table","className":""}}>
+          {`Tr`}
+        </PatternflyThemeLink>
+      </li>
+    </ul>
+  </React.Fragment>
+);
+Component.displayName = 'DeveloperGuidesOpenUiAutomationReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/foundations-and-styles/layouts/bullseye/react.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../../react-core/src/layouts/Bullseye/examples/./bullseye.css';
+const pageData = {
+  "id": "Bullseye",
+  "section": "foundations-and-styles",
+  "subsection": "layouts",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/foundations-and-styles/layouts/bullseye/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/layouts/Bullseye/examples/Bullseye.md",
+  "relPath": "packages/react-core/src/layouts/Bullseye/examples/Bullseye.md",
+  "propComponents": [
+    {
+      "name": "Bullseye",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Bullseye layout",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Bullseye layout",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "JSX.IntrinsicElements",
+          "description": "Sets the base component to render. defaults to div",
+          "defaultValue": "'div'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-l-bullseye"
+  ],
+  "examples": [
+    "Basic"
+  ]
+};
+pageData.relativeImports = "import 'react-core/src/layouts/Bullseye/examples/./bullseye.css';"
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Bullseye } from '@patternfly/react-core';\n\nexport const BullseyeBasic: React.FunctionComponent = () => (\n  <Bullseye>\n    <div>Bullseye ◎ layout</div>\n  </Bullseye>\n);\n","title":"Basic","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.Fragment>
+);
+Component.displayName = 'FoundationsAndStylesLayoutsBullseyeReactDocs';
+Component.pageData = pageData;
+
+export default Component;