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

package/patternfly-docs/generated/components/forms/checkbox/react.js

@@ -1,222 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useEffect, useState } from 'react';
-const pageData = {
-  "id": "Checkbox",
-  "section": "components",
-  "subsection": "forms",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/forms/checkbox/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Checkbox/examples/Checkbox.md",
-  "relPath": "packages/react-core/src/components/Checkbox/examples/Checkbox.md",
-  "propComponents": [
-    {
-      "name": "Checkbox",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-describedby",
-          "type": "string",
-          "description": "Custom aria-describedby value for the checkbox input. If not provided and description is set, a unique ID will be generated automatically."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Aria-label of the checkbox."
-        },
-        {
-          "name": "body",
-          "type": "React.ReactNode",
-          "description": "Body text of the checkbox"
-        },
-        {
-          "name": "checked",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if\nisLabelWrapped is true, or it can be overridden by any element specified in the component prop.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "component",
-          "type": "React.ElementType",
-          "description": "Sets the checkbox wrapper component to render. Defaults to \"div\". If set to \"label\", behaves the same as if isLabelWrapped prop was specified."
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode",
-          "description": "Description text of the checkbox."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Id of the checkbox.",
-          "required": true
-        },
-        {
-          "name": "inputClassName",
-          "type": "string",
-          "description": "Additional classes added to the checkbox input."
-        },
-        {
-          "name": "isChecked",
-          "type": "boolean | null",
-          "description": "Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked).",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag to show if the checkbox is disabled.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isLabelWrapped",
-          "type": "boolean",
-          "description": "Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a \"label\") is specified.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isRequired",
-          "type": "boolean",
-          "description": "Flag to show if the checkbox is required.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isValid",
-          "type": "boolean",
-          "description": "Flag to show if the checkbox selection is valid or invalid.",
-          "defaultValue": "true"
-        },
-        {
-          "name": "label",
-          "type": "React.ReactNode",
-          "description": "Label text of the checkbox."
-        },
-        {
-          "name": "labelPosition",
-          "type": "'start' | 'end'",
-          "description": "Sets the position of the label. Defaults to 'end' (after the checkbox input)."
-        },
-        {
-          "name": "onChange",
-          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
-          "description": "A callback for when the checkbox selection changes.",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
-          "defaultValue": "true"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-check"
-  ],
-  "examples": [
-    "Controlled",
-    "Uncontrolled",
-    "Reversed",
-    "Label wraps",
-    "Disabled",
-    "Checkbox with description",
-    "Checkbox with body",
-    "Checkbox with description and body",
-    "Standalone input",
-    "Required input"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useEffect,
-  useState
-};
-pageData.examples = {
-  'Controlled': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useEffect, useState } from 'react';\nimport { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxControlled: React.FunctionComponent = () => {\n  const [isChecked1, setIsChecked1] = useState<boolean>(false);\n  const [isChecked2, setIsChecked2] = useState<boolean>(false);\n  const [isChecked3, setIsChecked3] = useState<boolean>(false);\n  const [isChecked4, setIsChecked4] = useState<boolean>(false);\n\n  const handleChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    const target = event.currentTarget;\n    const name = target.name;\n\n    switch (name) {\n      case 'check1':\n        setIsChecked1(checked);\n        break;\n      case 'check2':\n        setIsChecked2(checked);\n        break;\n      case 'check3':\n        setIsChecked3(checked);\n        break;\n      case 'check4':\n        setIsChecked4(checked);\n        break;\n      default:\n        // eslint-disable-next-line no-console\n        console.log(name);\n    }\n  };\n\n  useEffect(() => {\n    if (isChecked1 !== null) {\n      setIsChecked2(isChecked1);\n      setIsChecked3(isChecked1);\n    }\n  }, [isChecked1]);\n\n  useEffect(() => {\n    setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));\n  }, [isChecked2, isChecked3]);\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Parent CheckBox\"\n        isChecked={isChecked1}\n        onChange={handleChange}\n        id=\"controlled-check-1\"\n        name=\"check1\"\n        body={\n          <>\n            <Checkbox\n              label=\"Child CheckBox 1\"\n              isChecked={isChecked2}\n              onChange={handleChange}\n              id=\"controlled-check-2\"\n              name=\"check2\"\n            />\n            <Checkbox\n              label=\"Child CheckBox 2\"\n              isChecked={isChecked3}\n              onChange={handleChange}\n              id=\"controlled-check-3\"\n              name=\"check3\"\n            />\n          </>\n        }\n      />\n      <Checkbox\n        label=\"Controlled CheckBox\"\n        isChecked={isChecked4}\n        onChange={handleChange}\n        id=\"controlled-check-4\"\n        name=\"check4\"\n      />\n    </Fragment>\n  );\n};\n","title":"Controlled","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Uncontrolled': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxUncontrolled: React.FunctionComponent = () => (\n  <Fragment>\n    <Checkbox label=\"Uncontrolled CheckBox 1\" id=\"uncontrolled-check-1\" />\n    <Checkbox label=\"Uncontrolled CheckBox 2\" id=\"uncontrolled-check-2\" />\n  </Fragment>\n);\n","title":"Uncontrolled","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Reversed': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxReversed: React.FunctionComponent = () => (\n  <Checkbox labelPosition=\"start\" label=\"Reversed checkbox example\" id=\"checkbox-reversed\" name=\"checkbox-reversed\" />\n);\n","title":"Reversed","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Label wraps': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxLabelWraps: React.FunctionComponent = () => (\n  <Checkbox\n    isLabelWrapped\n    label=\"Label wraps input example\"\n    id=\"checkbox-label-wraps-input\"\n    name=\"checkbox-label-wraps-input\"\n  />\n);\n","title":"Label wraps","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isLabelWrapped`}
-        </code>
-        {` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.`}
-      </p>
-    </Example>,
-  'Disabled': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxDisabled: React.FunctionComponent = () => (\n  <Fragment>\n    <Checkbox id=\"disabled-check-1\" label=\"Disabled CheckBox 1\" defaultChecked isDisabled />\n    <Checkbox id=\"disabled-check-2\" label=\"Disabled CheckBox 2\" isDisabled />\n  </Fragment>\n);\n","title":"Disabled","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Checkbox with description': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxWithDescription: React.FunctionComponent = () => (\n  <Checkbox\n    id=\"description-check-1\"\n    label=\"Checkbox with description\"\n    description=\"Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.\"\n  />\n);\n","title":"Checkbox with description","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Checkbox with body': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxWithBody: React.FunctionComponent = () => (\n  <Checkbox id=\"body-check-1\" label=\"Checkbox with body\" body=\"This is where custom content goes.\" />\n);\n","title":"Checkbox with body","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Checkbox with description and body': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxWithDescriptionBody: React.FunctionComponent = () => (\n  <Checkbox\n    id=\"description-body-check\"\n    label=\"Checkbox with description and body\"\n    description=\"Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.\"\n    body=\"This is where custom content goes.\"\n  />\n);\n","title":"Checkbox with description and body","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Standalone input': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxStandaloneInput: React.FunctionComponent = () => (\n  <Checkbox id=\"standalone-check\" name=\"standalone-check\" aria-label=\"Standalone input\" />\n);\n","title":"Standalone input","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Required input': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Checkbox } from '@patternfly/react-core';\n\nexport const CheckboxRequired: React.FunctionComponent = () => (\n  <Checkbox label=\"Required checkbox\" isRequired id=\"required-check\" name=\"required-check\" />\n);\n","title":"Required input","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Controlled"])}
-    {React.createElement(pageData.examples["Uncontrolled"])}
-    {React.createElement(pageData.examples["Reversed"])}
-    {React.createElement(pageData.examples["Label wraps"])}
-    {React.createElement(pageData.examples["Disabled"])}
-    {React.createElement(pageData.examples["Checkbox with description"])}
-    {React.createElement(pageData.examples["Checkbox with body"])}
-    {React.createElement(pageData.examples["Checkbox with description and body"])}
-    {React.createElement(pageData.examples["Standalone input"])}
-    {React.createElement(pageData.examples["Required input"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsFormsCheckboxReactDocs';
-Component.pageData = pageData;
-
-export default Component;