docs: update checkbox

trendmicro-frontend · Nov 17, 2023 · bf33704 · bf33704
1 parent 7c81717
commit bf33704
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 126 deletions.
diff --git a/packages/react-docs/pages/components/checkbox/accessibility.js b/packages/react-docs/pages/components/checkbox/accessibility.js
@@ -0,0 +1,13 @@
+import { Checkbox } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+<Checkbox
+  inputProps={{
+    'aria-label': 'Label',
+  }}
+/>
+
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/basic.js b/packages/react-docs/pages/components/checkbox/basic.js
@@ -0,0 +1,10 @@
+import { Checkbox } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Checkbox>
+    Label
+  </Checkbox>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/colors.js b/packages/react-docs/pages/components/checkbox/colors.js
@@ -0,0 +1,15 @@
+import { Checkbox, Flex } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Flex columnGap="6x">
+    <Checkbox variantColor="red" defaultChecked>
+      Label
+    </Checkbox>
+    <Checkbox variantColor="green" defaultChecked>
+      Label
+    </Checkbox>
+  </Flex>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/faq-input-element.js b/packages/react-docs/pages/components/checkbox/faq-input-element.js
@@ -0,0 +1,23 @@
+import { Button, Checkbox, Flex } from '@tonic-ui/react';
+import React, { useRef } from 'react';
+
+const App = () => {
+  const inputRef = useRef();
+  const handleClick = () => {
+    inputRef.current.focus();
+    console.log(inputRef.current.checked); // => true
+  };
+
+  return (
+    <Flex alignItems="center" columnGap="6x">
+      <Checkbox defaultChecked inputRef={inputRef}>
+        Label
+      </Checkbox>
+      <Button onClick={handleClick}>
+        Click Me
+      </Button>
+    </Flex>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/flex-container.js b/packages/react-docs/pages/components/checkbox/flex-container.js
@@ -0,0 +1,23 @@
+import { Box, Checkbox, Flex, Text } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Flex alignItems="flex-start" columnGap="2x">
+    <Box py="1h">
+      <Checkbox id="form-control" />
+    </Box>
+    <Box
+      as="label"
+      htmlFor="form-control"
+      sx={{
+        cursor: 'pointer',
+        userSelect: 'none',
+      }}
+    >
+      <Text>Label</Text>
+      <Text fontSize="xs" lineHeight="xs">Helper text</Text>
+    </Box>
+  </Flex>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/indeterminate.js b/packages/react-docs/pages/components/checkbox/indeterminate.js
@@ -0,0 +1,36 @@
+import { Checkbox, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const App = () => {
+  const [checkedItems, setCheckedItems] = useState([true, false]);
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+
+  return (
+    <>
+      <Checkbox
+        checked={allChecked}
+        indeterminate={isIndeterminate}
+        onChange={e => setCheckedItems([e.target.checked, e.target.checked])}
+      >
+        Parent
+      </Checkbox>
+      <Stack direction="column" pl="6x" mt="1x" spacing="1x" shouldWrapChildren>
+        <Checkbox
+          checked={checkedItems[0]}
+          onChange={e => setCheckedItems([e.target.checked, checkedItems[1]])}
+        >
+          Child 1
+        </Checkbox>
+        <Checkbox
+          checked={checkedItems[1]}
+          onChange={e => setCheckedItems([checkedItems[0], e.target.checked])}
+        >
+          Child 2
+        </Checkbox>
+      </Stack>
+    </>
+  );
+};
+
+export default App;
diff --git a/...t-docs/pages/components/checkbox.page.mdx → .../pages/components/checkbox/index.page.mdx b/...t-docs/pages/components/checkbox.page.mdx → .../pages/components/checkbox/index.page.mdx
@@ -12,130 +12,31 @@ import { Checkbox } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx
-<Checkbox>
-  Label
-</Checkbox>
-```
+{render('./basic')}
 
 You can use a flex container to align a checkbox with other components. This allows you to easily control the positioning and spacing of all elements within the container.
 
-```jsx
-<Flex alignItems="flex-start" columnGap="2x">
-  <Box py="1h">
-    <Checkbox id="form-control" />
-  </Box>
-  <Box
-    as="label"
-    htmlFor="form-control"
-    sx={{
-      cursor: 'pointer',
-      userSelect: 'none',
-    }}
-  >
-    <Text>Label</Text>
-    <Text fontSize="xs" lineHeight="xs">Helper text</Text>
-  </Box>
-</Flex>
-```
+{render('./flex-container')}
 
 ### Colors
 
 Use the `variantColor` prop to change the color scheme of the checkbox. `variantColor` can be any color key with key `50` (hover) or `60` (checked, active) that exist in `theme.colors`.
 
-```jsx
-<Flex columnGap="6x">
-  <Checkbox variantColor="red" defaultChecked>
-    Label
-  </Checkbox>
-  <Checkbox variantColor="green" defaultChecked>
-    Label
-  </Checkbox>
-</Flex>
-```
+{render('./colors')}
 
 ### Sizes
 
 Use the `size` prop to change the size of the checkbox. You can set the value to `sm`, `md`, or `lg`.
 
-```jsx
-<Flex columnGap="6x">
-  <Checkbox size="sm">
-    Label
-  </Checkbox>
-  <Checkbox size="md">
-    Label
-  </Checkbox>
-  <Checkbox size="lg">
-    Label
-  </Checkbox>
-</Flex>
-```
+{render('./sizes')}
 
 ### States
 
-```jsx
-<Stack spacing="6x">
-  <Flex columnGap="6x">
-    <Checkbox>
-      Label
-    </Checkbox>
-    <Checkbox indeterminate>
-      Label
-    </Checkbox>
-    <Checkbox defaultChecked>
-      Label
-    </Checkbox>
-  </Flex>
-  <Flex columnGap="6x">
-    <Checkbox disabled>
-      Label
-    </Checkbox>
-    <Checkbox disabled indeterminate>
-      Label
-    </Checkbox>
-    <Checkbox disabled defaultChecked>
-      Label
-    </Checkbox>
-  </Flex>
-</Stack>
-```
+{render('./states')}
 
 ### Indeterminate
 
-```jsx
-function IndeterminateExample() {
-  const [checkedItems, setCheckedItems] = React.useState([true, false]);
-  const allChecked = checkedItems.every(Boolean);
-  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
-
-  return (
-    <>
-      <Checkbox
-        checked={allChecked}
-        indeterminate={isIndeterminate}
-        onChange={e => setCheckedItems([e.target.checked, e.target.checked])}
-      >
-        Parent
-      </Checkbox>
-      <Stack direction="column" pl="6x" mt="1x" spacing="1x" shouldWrapChildren>
-        <Checkbox
-          checked={checkedItems[0]}
-          onChange={e => setCheckedItems([e.target.checked, checkedItems[1]])}
-        >
-          Child 1
-        </Checkbox>
-        <Checkbox
-          checked={checkedItems[1]}
-          onChange={e => setCheckedItems([checkedItems[0], e.target.checked])}
-        >
-          Child 2
-        </Checkbox>
-      </Stack>
-    </>
-  );
-}
-```
+{render('./indeterminate')}
 
 ## Accessibility
 
@@ -162,27 +63,7 @@ Once you have obtained the reference to the input element, you can access its pr
 
 Here's an example of how you can utilize the `inputRef` prop to access the input element and perform actions:
 
-```jsx
-function Example() {
-  const inputRef = React.useRef();
-
-  const handleClick = () => {
-    inputRef.current.focus();
-    console.log(inputRef.current.checked); // => true
-  };
-
-  return (
-    <Flex alignItems="center" columnGap="6x">
-      <Checkbox defaultChecked inputRef={inputRef}>
-        Label
-      </Checkbox>
-      <Button onClick={handleClick}>
-        Click Me
-      </Button>
-    </Flex>
-  );
-}
-```
+{render('./faq-input-element')}
 
 ## Props
 

diff --git a/packages/react-docs/pages/components/checkbox/sizes.js b/packages/react-docs/pages/components/checkbox/sizes.js
@@ -0,0 +1,18 @@
+import { Checkbox, Flex } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Flex columnGap="6x">
+    <Checkbox size="sm">
+      Label
+    </Checkbox>
+    <Checkbox size="md">
+      Label
+    </Checkbox>
+    <Checkbox size="lg">
+      Label
+    </Checkbox>
+  </Flex>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/checkbox/states.js b/packages/react-docs/pages/components/checkbox/states.js
@@ -0,0 +1,31 @@
+import { Checkbox, Flex, Stack } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack spacing="6x">
+    <Flex columnGap="6x">
+      <Checkbox>
+        Label
+      </Checkbox>
+      <Checkbox indeterminate>
+        Label
+      </Checkbox>
+      <Checkbox defaultChecked>
+        Label
+      </Checkbox>
+    </Flex>
+    <Flex columnGap="6x">
+      <Checkbox disabled>
+        Label
+      </Checkbox>
+      <Checkbox disabled indeterminate>
+        Label
+      </Checkbox>
+      <Checkbox disabled defaultChecked>
+        Label
+      </Checkbox>
+    </Flex>
+  </Stack>
+);
+
+export default App;