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

package/patternfly-docs/generated/components/switch/react.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+const pageData = {
+  "id": "Switch",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/switch/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Switch/examples/Switch.md",
+  "relPath": "packages/react-core/src/components/Switch/examples/Switch.md",
+  "propComponents": [
+    {
+      "name": "Switch",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the switch when the label prop is not passed, and must describe the isChecked=\"true\" state.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Adds an accessible name to the switch via one or more referenced id(s). The computed accessible name must describe the isChecked=\"true\" state.",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the switch"
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean",
+          "description": "Flag to set the default checked value of the switch when it is uncontrolled by React state.\nTo make the switch controlled instead use the isChecked prop, but do not use both."
+        },
+        {
+          "name": "hasCheckIcon",
+          "type": "boolean",
+          "description": "Flag to show if the switch has a check icon."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id for the label."
+        },
+        {
+          "name": "isChecked",
+          "type": "boolean",
+          "description": "Flag to show if the switch is checked when it is controlled by React state.\nTo make the switch uncontrolled instead use the defaultChecked prop, but do not use both.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the switch is disabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isReversed",
+          "type": "boolean",
+          "description": "Flag to reverse the layout of toggle and label (label at start, toggle at end).",
+          "defaultValue": "false"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Text value for the visible label"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
+          "description": "A callback for when the switch selection changes. (event, isChecked) => {}",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "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."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-switch"
+  ],
+  "examples": [
+    "Basic",
+    "Reversed Layout",
+    "Without label",
+    "Checked with label",
+    "Disabled",
+    "Uncontrolled"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchBasic: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(true);\n\n  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  return (\n    <Switch\n      id=\"simple-switch\"\n      label=\"Togglable option for basic example\"\n      isChecked={isChecked}\n      onChange={handleChange}\n      ouiaId=\"BasicSwitch\"\n    />\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Reversed Layout': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchReversed: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(true);\n\n  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  return (\n    <Switch\n      id=\"reversed-switch\"\n      label=\"Togglable option for reversed example\"\n      isChecked={isChecked}\n      onChange={handleChange}\n      isReversed\n    />\n  );\n};\n","title":"Reversed Layout","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Without label': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchWithoutLabel: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(true);\n\n  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  return (\n    <Switch\n      id=\"no-label-switch-on\"\n      aria-label=\"Togglable option for no visible label example\"\n      isChecked={isChecked}\n      onChange={handleChange}\n    />\n  );\n};\n","title":"Without label","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Checked with label': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchCheckedWithLabel: React.FunctionComponent = () => {\n  const [isChecked, setIsChecked] = useState<boolean>(true);\n\n  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    setIsChecked(checked);\n  };\n\n  return (\n    <Switch\n      label=\"Togglable option for check icon example\"\n      id=\"checked-with-label-switch-on\"\n      isChecked={isChecked}\n      hasCheckIcon\n      onChange={handleChange}\n    />\n  );\n};\n","title":"Checked with label","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchDisabled: React.FunctionComponent = () => (\n  <Fragment>\n    <Switch id=\"disabled-switch-on\" label=\"Togglable option for disabled checked example\" isChecked isDisabled />\n    <br />\n    <Switch\n      id=\"disabled-switch-off\"\n      label=\"Togglable option for disabled unchecked example\"\n      isChecked={false}\n      isDisabled\n    />\n    <br />\n    <Switch\n      id=\"disabled-no-label-switch-on\"\n      aria-label=\"Togglable option for checked with no visible label example\"\n      isChecked\n      isDisabled\n    />\n    <br />\n    <Switch\n      id=\"disabled-no-label-switch-off\"\n      aria-label=\"Togglable option for unchecked with no visible label example\"\n      isChecked={false}\n      isDisabled\n    />\n  </Fragment>\n);\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Switch } from '@patternfly/react-core';\n\nexport const SwitchUncontrolled: React.FunctionComponent = () => (\n  <Fragment>\n    <Switch\n      id=\"uncontrolled-switch-no-label\"\n      aria-label=\"Togglable option for uncontrolled and no visible label example\"\n      defaultChecked={false}\n    />\n    <br />\n    <Switch\n      id=\"uncontrolled-switch-with-label\"\n      label=\"Togglable option for uncontrolled example\"\n      defaultChecked={false}\n    />\n  </Fragment>\n);\n","title":"Uncontrolled","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via `}
+      <code {...{"className":"ws-code "}}>
+        {`aria-label`}
+      </code>
+      {`.`}
+    </p>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Reversed Layout"])}
+    {React.createElement(pageData.examples["Without label"])}
+    {React.createElement(pageData.examples["Checked with label"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["Uncontrolled"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSwitchReactDocs';
+Component.pageData = pageData;
+
+export default Component;