Docs: Migrate CheckBox, RadioGroup, ZIndex classes, SegmentedControl …

…examples to Sandpack (#3155)
pinterest · Aug 24, 2023 · be8151c · be8151c
1 parent ff0cb91
commit be8151c
Show file tree

Hide file tree

Showing 44 changed files with 2,313 additions and 1,870 deletions.
diff --git a/docs/examples/checkbox/dontUseForOneSelection.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Fieldset legend="Pick one topic from the list">
+        <Flex direction="column" gap={{ column: 2, row: 0 }}>
+          <Checkbox
+            checked={checked1}
+            id="Fashion2"
+            label="Fashion"
+            onChange={({ checked }) => setChecked1(checked)}
+          />
+          <Checkbox
+            checked={checked2}
+            id="Beauty2"
+            label="Beauty"
+            onChange={({ checked }) => setChecked2(checked)}
+          />
+          <Checkbox
+            checked={checked3}
+            id="Interior_design_3"
+            label="Interior design"
+            onChange={({ checked }) => setChecked3(checked)}
+          />
+          <Checkbox
+            checked={checked4}
+            id="Other4"
+            label="Other"
+            onChange={({ checked }) => setChecked4(checked)}
+          />
+        </Flex>
+      </Fieldset>
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/dontUseNumerousInTableRows.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Table accessibilityLabel="Campaign selection" maxHeight={200}>
+        <Table.Header sticky>
+          <Table.Row>
+            <Table.HeaderCell>&nbsp;</Table.HeaderCell>
+            <Table.HeaderCell>
+              <Text weight="bold">Active</Text>
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              <Text weight="bold">Name</Text>
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>
+              <Box width={20}>
+                <Checkbox
+                  checked={checked1}
+                  id="4"
+                  onChange={({ checked }) => setChecked1(checked)}
+                  size="sm"
+                  label="Select Summertime picnic row"
+                  labelDisplay="hidden"
+                />
+              </Box>
+            </Table.Cell>
+            <Table.Cell>
+              <Checkbox id="5" onChange={() => {}} size="sm" label="off" />
+            </Table.Cell>
+            <Table.Cell>
+              <Text>Summertime picnic</Text>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>
+              <Box width={20}>
+                <Checkbox
+                  checked={checked2}
+                  id="6"
+                  onChange={({ checked }) => setChecked2(checked)}
+                  size="sm"
+                  label="Select Summer 1950 row"
+                  labelDisplay="hidden"
+                />
+              </Box>
+            </Table.Cell>
+            <Table.Cell>
+              <Checkbox checked id="7" onChange={() => {}} size="sm" label="on" />
+            </Table.Cell>
+            <Table.Cell>
+              <Text>Summer 1950</Text>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>
+              <Box width={20}>
+                <Checkbox
+                  checked={checked3}
+                  id="8"
+                  onChange={({ checked }) => setChecked3(checked)}
+                  size="sm"
+                  label="Select Back to school row"
+                  labelDisplay="hidden"
+                />
+              </Box>
+            </Table.Cell>
+            <Table.Cell>
+              <Checkbox id="9" onChange={() => {}} size="sm" label="off" />
+            </Table.Cell>
+            <Table.Cell>
+              <Text>Back to school</Text>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/dontUseToToggleState.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Checkbox
+        checked={checked1}
+        id="location"
+        label="Turn location tracking off"
+        helperText="Change will auto-save"
+        onChange={({ checked }) => setChecked1(checked)}
+      />
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/dontUseTruncatedText.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Flex direction="column" gap={{ column: 4, row: 0 }}>
+        <Text size="400" weight="bold">
+          Which one?
+        </Text>
+        <Fieldset legendDisplay="hidden" legend="Which one?">
+          <Flex direction="column" gap={{ column: 2, row: 0 }}>
+            <Checkbox
+              checked={checked1}
+              id="Overeasy2"
+              label="Overeasy with a touch of salt and maybe a slice of bacon on top that isn't fully cooked and has no pepper."
+              onChange={({ checked }) => setChecked1(checked)}
+            />
+            <Checkbox
+              checked={checked2}
+              id="Sunny2"
+              label="Sunny side up"
+              onChange={({ checked }) => setChecked2(checked)}
+            />
+            <Checkbox
+              checked={checked3}
+              id="Scramboiled3"
+              label="Scramboiled--this is when you boil an egg, then you scrambled it in the pan along with the shells."
+              onChange={({ checked }) => setChecked3(checked)}
+            />
+          </Flex>
+        </Fieldset>
+      </Flex>
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/dontVerticallyCenterInputs.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Fieldset legend="Data personalization">
+        <Flex direction="column" gap={{ column: 2, row: 0 }}>
+          <Flex gap={2} alignItems="center">
+            <Checkbox
+              checked={checked1}
+              id="sites2"
+              onChange={({ checked }) => setChecked1(checked)}
+            />
+            <Text inline>
+              <Label htmlFor="sites2">
+                Use sites you visit to improve which recommendations and ads you see on Pinterest.
+              </Label>
+              <Link href="#" display="inline">
+                Learn more
+              </Link>
+            </Text>
+          </Flex>
+
+          <Flex gap={2} alignItems="center">
+            <Checkbox
+              checked={checked2}
+              id="partner2"
+              onChange={({ checked }) => setChecked2(checked)}
+            />
+            <Text inline>
+              <Label htmlFor="partner2">
+                Use partner info to improve which recommendations and ads you see on Pinterest.
+              </Label>
+              <Link href="#" display="inline">
+                Learn more
+              </Link>
+            </Text>
+          </Flex>
+
+          <Flex gap={2} alignItems="center">
+            <Checkbox
+              checked={checked3}
+              id="activity2"
+              onChange={({ checked }) => setChecked3(checked)}
+            />
+            <Text inline>
+              <Label htmlFor="activity2">
+                Use your activity to improve ads you see about Pinterest on other sites or apps you
+                may visit.
+              </Label>
+              <Link href="#" display="inline">
+                Learn more
+              </Link>
+            </Text>
+          </Flex>
+        </Flex>
+      </Fieldset>
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/errorMessageExample.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Checkbox
+        id="error"
+        errorMessage="You must agree to the Terms and Conditions"
+        label="I agree to the Terms and Conditions"
+        name="error"
+        onChange={() => {}}
+      />
+    </Box>
+  );
+}
diff --git a/docs/examples/checkbox/keepLabelsAndLegendsClear.js 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 (
+    <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
+      <Flex direction="column" gap={{ column: 4, row: 0 }}>
+        <Text size="400" weight="bold">
+          How do you like your eggs?
+        </Text>
+        <Text>Select all the options that apply</Text>
+        <Fieldset
+          legendDisplay="hidden"
+          legend="How do you like your eggs? Select all the options that apply"
+        >
+          <Flex direction="column" gap={{ column: 2, row: 0 }}>
+            <Checkbox
+              checked={checked1}
+              id="Overeasy"
+              label="Overeasy"
+              onChange={({ checked }) => setChecked1(checked)}
+            />
+            <Checkbox
+              checked={checked2}
+              id="Sunny"
+              label="Sunny side up"
+              onChange={({ checked }) => setChecked2(checked)}
+            />
+            <Flex gap={{ row: 2, column: 0 }} alignItems="center">
+              <Checkbox
+                checked={checked3}
+                id="Scramboiled"
+                label="Scramboiled"
+                onChange={({ checked }) => setChecked3(checked)}
+              />
+              <Tooltip text="A hardboiled egg that is then scrambled" idealDirection="up">
+                <Icon icon="info-circle" accessibilityLabel="" size={14} color="default" />
+              </Tooltip>
+            </Flex>
+          </Flex>
+        </Fieldset>
+      </Flex>
+    </Box>
+  );
+}