From be8151cf0d0a65634bf88cee7e7cbf1718f5bca3 Mon Sep 17 00:00:00 2001 From: Diyorbek Sadullaev Date: Thu, 24 Aug 2023 11:09:47 +0200 Subject: [PATCH] Docs: Migrate CheckBox, RadioGroup, ZIndex classes, SegmentedControl examples to Sandpack (#3155) --- .../checkbox/dontUseForOneSelection.js | 43 + .../checkbox/dontUseNumerousInTableRows.js | 89 ++ .../examples/checkbox/dontUseToToggleState.js | 19 + .../examples/checkbox/dontUseTruncatedText.js | 41 + .../checkbox/dontVerticallyCenterInputs.js | 66 ++ docs/examples/checkbox/errorMessageExample.js | 17 + .../checkbox/keepLabelsAndLegendsClear.js | 50 + .../checkbox/labelVisibilityExample.js | 77 ++ docs/examples/checkbox/legendsExample.js | 39 + docs/examples/checkbox/sizeExample.js | 28 + docs/examples/checkbox/stateExample.js | 25 + .../examples/checkbox/useAtStartOfTableRow.js | 77 ++ .../examples/checkbox/useForMultiSelection.js | 43 + docs/examples/checkbox/useSingleInForms.js | 23 + .../examples/checkbox/useVerticalAlignment.js | 36 + .../checkbox/withHelperTextExample.js | 48 + docs/examples/checkbox/withImageExample.js | 59 ++ .../radiogroup/addingAPopoverExample.js | 71 ++ docs/examples/radiogroup/directionExample.js | 73 ++ .../dontUseToSelectMultipleItems.js | 38 + .../dontUseToToggleStateOnMobile.js | 43 + .../radiogroup/dontUseTruncatedText.js | 30 + .../radiogroup/keepLabelsAndLegendsClear.js | 58 ++ .../radiogroup/legendVisibilityExample.js | 51 ++ docs/examples/radiogroup/main.js | 9 +- docs/examples/radiogroup/sizeExample.js | 79 ++ docs/examples/radiogroup/statesExample.js | 48 + .../radiogroup/useToSelectOnlyOneOption.js | 38 + .../radiogroup/useWhenNeedClearAnswer.js | 33 + .../examples/radiogroup/withAnErrorExample.js | 45 + .../radiogroup/withCustomLabelsExample.js | 58 ++ .../radiogroup/withHelperTextExample.js | 41 + docs/examples/radiogroup/withImageExample.js | 74 ++ .../segmentedcontrol/defaultExample.js | 29 +- docs/examples/segmentedcontrol/mainExample.js | 27 + .../segmentedcontrol/responsiveExample.js | 38 + docs/examples/sidenavigation/footerVariant.js | 64 ++ .../foundationalComponentsExample.js | 226 +++++ docs/examples/zindex_classes/layerExample.js | 137 +++ docs/pages/web/checkbox.js | 856 +++--------------- docs/pages/web/radiogroup.js | 736 ++------------- docs/pages/web/segmentedcontrol.js | 84 +- docs/pages/web/sidenavigation.js | 59 +- docs/pages/web/zindex_classes.js | 358 +------- 44 files changed, 2313 insertions(+), 1870 deletions(-) create mode 100644 docs/examples/checkbox/dontUseForOneSelection.js create mode 100644 docs/examples/checkbox/dontUseNumerousInTableRows.js create mode 100644 docs/examples/checkbox/dontUseToToggleState.js create mode 100644 docs/examples/checkbox/dontUseTruncatedText.js create mode 100644 docs/examples/checkbox/dontVerticallyCenterInputs.js create mode 100644 docs/examples/checkbox/errorMessageExample.js create mode 100644 docs/examples/checkbox/keepLabelsAndLegendsClear.js create mode 100644 docs/examples/checkbox/labelVisibilityExample.js create mode 100644 docs/examples/checkbox/legendsExample.js create mode 100644 docs/examples/checkbox/sizeExample.js create mode 100644 docs/examples/checkbox/stateExample.js create mode 100644 docs/examples/checkbox/useAtStartOfTableRow.js create mode 100644 docs/examples/checkbox/useForMultiSelection.js create mode 100644 docs/examples/checkbox/useSingleInForms.js create mode 100644 docs/examples/checkbox/useVerticalAlignment.js create mode 100644 docs/examples/checkbox/withHelperTextExample.js create mode 100644 docs/examples/checkbox/withImageExample.js create mode 100644 docs/examples/radiogroup/addingAPopoverExample.js create mode 100644 docs/examples/radiogroup/directionExample.js create mode 100644 docs/examples/radiogroup/dontUseToSelectMultipleItems.js create mode 100644 docs/examples/radiogroup/dontUseToToggleStateOnMobile.js create mode 100644 docs/examples/radiogroup/dontUseTruncatedText.js create mode 100644 docs/examples/radiogroup/keepLabelsAndLegendsClear.js create mode 100644 docs/examples/radiogroup/legendVisibilityExample.js create mode 100644 docs/examples/radiogroup/sizeExample.js create mode 100644 docs/examples/radiogroup/statesExample.js create mode 100644 docs/examples/radiogroup/useToSelectOnlyOneOption.js create mode 100644 docs/examples/radiogroup/useWhenNeedClearAnswer.js create mode 100644 docs/examples/radiogroup/withAnErrorExample.js create mode 100644 docs/examples/radiogroup/withCustomLabelsExample.js create mode 100644 docs/examples/radiogroup/withHelperTextExample.js create mode 100644 docs/examples/radiogroup/withImageExample.js create mode 100644 docs/examples/segmentedcontrol/mainExample.js create mode 100644 docs/examples/segmentedcontrol/responsiveExample.js create mode 100644 docs/examples/sidenavigation/footerVariant.js create mode 100644 docs/examples/zindex_classes/foundationalComponentsExample.js create mode 100644 docs/examples/zindex_classes/layerExample.js diff --git a/docs/examples/checkbox/dontUseForOneSelection.js b/docs/examples/checkbox/dontUseForOneSelection.js new file mode 100644 index 0000000000..8bfec78add --- /dev/null +++ b/docs/examples/checkbox/dontUseForOneSelection.js @@ -0,0 +1,43 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + const [checked4, setChecked4] = useState(false); + + return ( + +
+ + setChecked1(checked)} + /> + setChecked2(checked)} + /> + setChecked3(checked)} + /> + setChecked4(checked)} + /> + +
+ + ); +} diff --git a/docs/examples/checkbox/dontUseNumerousInTableRows.js b/docs/examples/checkbox/dontUseNumerousInTableRows.js new file mode 100644 index 0000000000..401868aeab --- /dev/null +++ b/docs/examples/checkbox/dontUseNumerousInTableRows.js @@ -0,0 +1,89 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Table, Text } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + + return ( + + + + +   + + Active + + + Name + + + + + + + + setChecked1(checked)} + size="sm" + label="Select Summertime picnic row" + labelDisplay="hidden" + /> + + + + {}} size="sm" label="off" /> + + + Summertime picnic + + + + + + setChecked2(checked)} + size="sm" + label="Select Summer 1950 row" + labelDisplay="hidden" + /> + + + + {}} size="sm" label="on" /> + + + Summer 1950 + + + + + + setChecked3(checked)} + size="sm" + label="Select Back to school row" + labelDisplay="hidden" + /> + + + + {}} size="sm" label="off" /> + + + Back to school + + + +
+ + ); +} diff --git a/docs/examples/checkbox/dontUseToToggleState.js b/docs/examples/checkbox/dontUseToToggleState.js new file mode 100644 index 0000000000..cd6144285f --- /dev/null +++ b/docs/examples/checkbox/dontUseToToggleState.js @@ -0,0 +1,19 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + + return ( + + setChecked1(checked)} + /> + + ); +} diff --git a/docs/examples/checkbox/dontUseTruncatedText.js b/docs/examples/checkbox/dontUseTruncatedText.js new file mode 100644 index 0000000000..c73b5db8a5 --- /dev/null +++ b/docs/examples/checkbox/dontUseTruncatedText.js @@ -0,0 +1,41 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex, Text } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + + return ( + + + + Which one? + +
+ + setChecked1(checked)} + /> + setChecked2(checked)} + /> + setChecked3(checked)} + /> + +
+ + + ); +} diff --git a/docs/examples/checkbox/dontVerticallyCenterInputs.js b/docs/examples/checkbox/dontVerticallyCenterInputs.js new file mode 100644 index 0000000000..be76e7230a --- /dev/null +++ b/docs/examples/checkbox/dontVerticallyCenterInputs.js @@ -0,0 +1,66 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex, Label, Link, Text } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + + return ( + +
+ + + setChecked1(checked)} + /> + + + + Learn more + + + + + + setChecked2(checked)} + /> + + + + Learn more + + + + + + setChecked3(checked)} + /> + + + + Learn more + + + + +
+ + ); +} diff --git a/docs/examples/checkbox/errorMessageExample.js b/docs/examples/checkbox/errorMessageExample.js new file mode 100644 index 0000000000..c0794e0d67 --- /dev/null +++ b/docs/examples/checkbox/errorMessageExample.js @@ -0,0 +1,17 @@ +// @flow strict +import { type Node } from 'react'; +import { Box, Checkbox } from 'gestalt'; + +export default function CheckboxExample(): Node { + return ( + + {}} + /> + + ); +} diff --git a/docs/examples/checkbox/keepLabelsAndLegendsClear.js b/docs/examples/checkbox/keepLabelsAndLegendsClear.js new file mode 100644 index 0000000000..cafd4ad473 --- /dev/null +++ b/docs/examples/checkbox/keepLabelsAndLegendsClear.js @@ -0,0 +1,50 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex, Icon, Text, Tooltip } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + + return ( + + + + How do you like your eggs? + + Select all the options that apply +
+ + setChecked1(checked)} + /> + setChecked2(checked)} + /> + + setChecked3(checked)} + /> + + + + + +
+ + + ); +} diff --git a/docs/examples/checkbox/labelVisibilityExample.js b/docs/examples/checkbox/labelVisibilityExample.js new file mode 100644 index 0000000000..e33e187971 --- /dev/null +++ b/docs/examples/checkbox/labelVisibilityExample.js @@ -0,0 +1,77 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Table, Text } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(true); + const [checked3, setChecked3] = useState(true); + + return ( + + + + +   + + Name + + + + + + + + setChecked1(checked)} + label="Select Summertime picnic row" + labelDisplay="hidden" + size="sm" + /> + + + + Summertime picnic + + + + + + setChecked2(checked)} + label="Select Summer 1950 row" + labelDisplay="hidden" + size="sm" + /> + + + + Summer 1950 + + + + + + setChecked3(checked)} + label="Select Back to school row" + labelDisplay="hidden" + size="sm" + /> + + + + Back to school + + + +
+ + ); +} diff --git a/docs/examples/checkbox/legendsExample.js b/docs/examples/checkbox/legendsExample.js new file mode 100644 index 0000000000..ce169eba2e --- /dev/null +++ b/docs/examples/checkbox/legendsExample.js @@ -0,0 +1,39 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex } from 'gestalt'; + +export default function Example(): Node { + const [checkedEn, setCheckedEn] = useState(false); + const [checkedSp, setCheckedSp] = useState(false); + const [checkedCh, setCheckedCh] = useState(false); + + return ( + +
+ + setCheckedEn(checked)} + /> + setCheckedSp(checked)} + /> + setCheckedCh(checked)} + /> + +
+ + ); +} diff --git a/docs/examples/checkbox/sizeExample.js b/docs/examples/checkbox/sizeExample.js new file mode 100644 index 0000000000..67fcb0eef2 --- /dev/null +++ b/docs/examples/checkbox/sizeExample.js @@ -0,0 +1,28 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Flex } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + + return ( + + + setChecked1(checked)} + size="sm" + /> + setChecked2(checked)} + /> + + + ); +} diff --git a/docs/examples/checkbox/stateExample.js b/docs/examples/checkbox/stateExample.js new file mode 100644 index 0000000000..1f62a14be3 --- /dev/null +++ b/docs/examples/checkbox/stateExample.js @@ -0,0 +1,25 @@ +// @flow strict +import { type Node } from 'react'; +import { Box, Checkbox, Flex } from 'gestalt'; + +const noop = () => {}; + +export default function Example(): Node { + return ( + + + + + + + + + + ); +} diff --git a/docs/examples/checkbox/useAtStartOfTableRow.js b/docs/examples/checkbox/useAtStartOfTableRow.js new file mode 100644 index 0000000000..6366f9ad49 --- /dev/null +++ b/docs/examples/checkbox/useAtStartOfTableRow.js @@ -0,0 +1,77 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Table, Text } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + + return ( + + + + +   + + Name + + + + + + + + setChecked1(checked)} + size="sm" + label="Select Summertime picnic row" + labelDisplay="hidden" + /> + + + + Summertime picnic + + + + + + setChecked2(checked)} + size="sm" + label="Select Summer 1950 row" + labelDisplay="hidden" + /> + + + + Summer 1950 + + + + + + setChecked3(checked)} + size="sm" + label="Select Back to school row" + labelDisplay="hidden" + /> + + + + Back to school + + + +
+ + ); +} diff --git a/docs/examples/checkbox/useForMultiSelection.js b/docs/examples/checkbox/useForMultiSelection.js new file mode 100644 index 0000000000..f1d4507acc --- /dev/null +++ b/docs/examples/checkbox/useForMultiSelection.js @@ -0,0 +1,43 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Checkbox, Fieldset, Flex } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const [checked3, setChecked3] = useState(false); + const [checked4, setChecked4] = useState(false); + + return ( + +
+ + setChecked1(checked)} + /> + setChecked2(checked)} + /> + setChecked3(checked)} + /> + setChecked4(checked)} + /> + +
+ + ); +} diff --git a/docs/examples/checkbox/useSingleInForms.js b/docs/examples/checkbox/useSingleInForms.js new file mode 100644 index 0000000000..3963f61440 --- /dev/null +++ b/docs/examples/checkbox/useSingleInForms.js @@ -0,0 +1,23 @@ +// @flow strict +import { type Node, useState } from 'react'; +import { Box, Button, Checkbox, Flex, TextField } from 'gestalt'; + +export default function Example(): Node { + const [checked1, setChecked1] = useState(false); + + return ( + + + {}} value="" /> + {}} value="" /> + setChecked1(checked)} + /> +