docs: update flex

trendmicro-frontend · Nov 17, 2023 · 404de63 · 404de63
1 parent 69d483c
commit 404de63
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 225 deletions.
diff --git a/packages/react-docs/pages/components/flex.page.mdx b/packages/react-docs/pages/components/flex.page.mdx
diff --git a/packages/react-docs/pages/components/flex/align-items.js b/packages/react-docs/pages/components/flex/align-items.js
@@ -0,0 +1,31 @@
+import { Box, Button, Flex, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const FlexItem = (props) => (
+  <Box bg="teal:50" border={1} borderColor="teal:60" p="3x" mr="4x" mb="4x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('stretch');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('stretch')}>stretch</Button>
+        <Button variant="outline" onClick={() => setValue('flex-start')}>flex-start</Button>
+        <Button variant="outline" onClick={() => setValue('center')}>center</Button>
+        <Button variant="outline" onClick={() => setValue('flex-end')}>flex-end</Button>
+      </Stack>
+      <pre>
+        {`<Flex alignItems="${value}">`}
+      </pre>
+      <Flex alignItems={value} height={240} bg="gray:10" p="4x" pb={0} pr={0}>
+        <FlexItem flex="auto">One</FlexItem>
+        <FlexItem flex="auto">Two</FlexItem>
+        <FlexItem flex="auto">Three</FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/flex/flex-direction.js b/packages/react-docs/pages/components/flex/flex-direction.js
@@ -0,0 +1,31 @@
+import { Box, Button, Flex, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const FlexItem = (props) => (
+  <Box bg="teal:50" border={1} borderColor="teal:60" p="3x" mr="4x" mb="4x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('row');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('row')}>row</Button>
+        <Button variant="outline" onClick={() => setValue('row-reverse')}>row-reverse</Button>
+        <Button variant="outline" onClick={() => setValue('column')}>column</Button>
+        <Button variant="outline" onClick={() => setValue('column-reverse')}>column-reverse</Button>
+      </Stack>
+      <pre>
+        {`<Flex flexDirection="${value}">`}
+      </pre>
+      <Flex flexDirection={value} bg="gray:10" p="4x" pb={0} pr={0}>
+        <FlexItem flex="auto">One</FlexItem>
+        <FlexItem flex="auto">Two</FlexItem>
+        <FlexItem flex="auto">Three</FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/flex/flex-none.js b/packages/react-docs/pages/components/flex/flex-none.js
@@ -0,0 +1,40 @@
+import { Box, Flex } from '@tonic-ui/react';
+import React from 'react';
+
+const FlexItem = (props) => (
+  <Box bg="teal:50" border={1} borderColor="teal:60" p="3x" mr="4x" mb="4x" {...props} />
+);
+
+const App = () => {
+  return (
+    <>
+      <Flex bg="gray:10" p="4x" pb={0} pr={0} mb="4x">
+        <FlexItem flex="auto">auto</FlexItem>
+        <FlexItem flex="auto">auto</FlexItem>
+        <FlexItem flex="auto">auto</FlexItem>
+      </Flex>
+      <Flex bg="gray:10" p="4x" pb={0} pr={0} mb="4x">
+        <FlexItem flex="auto">auto</FlexItem>
+        <FlexItem flex="initial">initial</FlexItem>
+        <FlexItem flex="initial">initial</FlexItem>
+      </Flex>
+      <Flex bg="gray:10" p="4x" pb={0} pr={0} mb="4x">
+        <FlexItem flex="auto">auto</FlexItem>
+        <FlexItem flex="auto">auto</FlexItem>
+        <FlexItem flex="none">none</FlexItem>
+      </Flex>
+      <Flex bg="gray:10" p="4x" pb={0} pr={0} mb="4x">
+        <FlexItem flex="initial">initial</FlexItem>
+        <FlexItem flex="none">none</FlexItem>
+        <FlexItem flex="none">none</FlexItem>
+      </Flex>
+      <Flex bg="gray:10" p="4x" pb={0} pr={0}>
+        <FlexItem flex={4}>4</FlexItem>
+        <FlexItem flex={2}>2</FlexItem>
+        <FlexItem flex={1}>1</FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/flex/flex-wrap.js b/packages/react-docs/pages/components/flex/flex-wrap.js
@@ -0,0 +1,33 @@
+import { Box, Button, Flex, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const FlexItem = (props) => (
+  <Box bg="teal:50" border={1} borderColor="teal:60" p="3x" mr="4x" mb="4x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('nowrap');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('nowrap')}>nowrap</Button>
+        <Button variant="outline" onClick={() => setValue('wrap')}>wrap</Button>
+        <Button variant="outline" onClick={() => setValue('wrap-reverse')}>wrap-reverse</Button>
+      </Stack>
+      <pre>
+        {`<Flex wrap="${value}">`}
+      </pre>
+      <Flex wrap={value} width={480} bg="gray:10" p="4x" pb={0} pr={0}>
+        <FlexItem flex="auto" minWidth={120}>One</FlexItem>
+        <FlexItem flex="auto" minWidth={120}>Two</FlexItem>
+        <FlexItem flex="auto" minWidth={120}>Three</FlexItem>
+        <FlexItem flex="auto" minWidth={120}>Four</FlexItem>
+        <FlexItem flex="auto" minWidth={120}>Five</FlexItem>
+        <FlexItem flex="auto" minWidth={120}>Six</FlexItem>
+      </Flex>
+    </>
+  );
+};
+
+export default App;