docs: update grid

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

Hide file tree

Showing 14 changed files with 568 additions and 543 deletions.
diff --git a/packages/react-docs/pages/components/grid.page.mdx b/packages/react-docs/pages/components/grid.page.mdx
diff --git a/packages/react-docs/pages/components/grid/grid-area.js b/packages/react-docs/pages/components/grid/grid-area.js
@@ -0,0 +1,37 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('a');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('a')}>a</Button>
+        <Button variant="outline" onClick={() => setValue('b')}>b</Button>
+        <Button variant="outline" onClick={() => setValue('c')}>c</Button>
+        <Button variant="outline" onClick={() => setValue('2 / 1 / 2 / 4')}>2 / 1 / 2 / 4</Button>
+      </Stack>
+      <Grid
+        templateRows="repeat(3,minmax(3rem,auto))"
+        templateColumns="1fr 1fr 1fr"
+        templateAreas={`
+          "a a a"
+          "b c c"
+          "b c c"
+        `}
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem area={value}>Example</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-auto-columns.js b/packages/react-docs/pages/components/grid/grid-auto-columns.js
@@ -0,0 +1,38 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('auto');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('auto')}>auto</Button>
+        <Button variant="outline" onClick={() => setValue('1fr')}>1fr</Button>
+        <Button variant="outline" onClick={() => setValue('min-content')}>min-content</Button>
+        <Button variant="outline" onClick={() => setValue('minmax(3rem, auto)')}>minmax(3rem, auto)</Button>
+      </Stack>
+      <pre>
+        {`<Grid autoColumns="${value}">`}
+      </pre>
+      <Grid
+        autoColumns={value}
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem column="1/3">One</GridItem>
+        <GridItem column="2">Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem>Five</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-auto-flow.js b/packages/react-docs/pages/components/grid/grid-auto-flow.js
@@ -0,0 +1,39 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...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('column')}>column</Button>
+        <Button variant="outline" onClick={() => setValue('row dense')}>row dense</Button>
+      </Stack>
+      <pre>
+        {`<Grid autoFlow="${value}">`}
+      </pre>
+      <Grid
+        autoFlow={value}
+        templateRows="repeat(3,minmax(3rem,auto))"
+        templateColumns="1fr 1fr 1fr"
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem column="auto/span 2">One</GridItem>
+        <GridItem column="auto/span 2">Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem>Five</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-auto-rows.js b/packages/react-docs/pages/components/grid/grid-auto-rows.js
@@ -0,0 +1,39 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('auto');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('auto')}>auto</Button>
+        <Button variant="outline" onClick={() => setValue('3rem')}>3rem</Button>
+        <Button variant="outline" onClick={() => setValue('min-content')}>min-content</Button>
+        <Button variant="outline" onClick={() => setValue('minmax(2rem, auto)')}>minmax(2rem, auto)</Button>
+      </Stack>
+      <pre>
+        {`<Grid autoRows="${value}">`}
+      </pre>
+      <Grid
+        autoRows={value}
+        templateColumns="1fr 1fr"
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem>One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem></GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-column-gap.js b/packages/react-docs/pages/components/grid/grid-column-gap.js
@@ -0,0 +1,39 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('0');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('0')}>0</Button>
+        <Button variant="outline" onClick={() => setValue('10%')}>10%</Button>
+        <Button variant="outline" onClick={() => setValue('1rem')}>1rem</Button>
+        <Button variant="outline" onClick={() => setValue('20px')}>20px</Button>
+      </Stack>
+      <pre>
+        {`<Grid columnGap="${value}">`}
+      </pre>
+      <Grid
+        columnGap={value}
+        templateColumns="1fr 1fr"
+        bg="gray:10"
+        p="4x"
+        transition="all .3s ease-in"
+      >
+        <GridItem>One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem>Five</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-column.js b/packages/react-docs/pages/components/grid/grid-column.js
@@ -0,0 +1,34 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('1');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('1')}>1</Button>
+        <Button variant="outline" onClick={() => setValue('1 / 3')}>1 / 3</Button>
+        <Button variant="outline" onClick={() => setValue('2 / -1')}>2 / -1</Button>
+        <Button variant="outline" onClick={() => setValue('1 / span 2')}>1 / span 2</Button>
+      </Stack>
+      <Grid
+        templateRows="repeat(3,minmax(3rem,auto))"
+        templateColumns="1fr 1.5fr 1fr"
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem column={value} bg="blue:50" borderColor="blue:60">One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-gap.js b/packages/react-docs/pages/components/grid/grid-gap.js
@@ -0,0 +1,40 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('0');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('0')}>0</Button>
+        <Button variant="outline" onClick={() => setValue('10%')}>10%</Button>
+        <Button variant="outline" onClick={() => setValue('1rem')}>1rem</Button>
+        <Button variant="outline" onClick={() => setValue('10px 20px')}>10px 20px</Button>
+        <Button variant="outline" onClick={() => setValue('calc(20px + 10%)')}>calc(20px + 10%)</Button>
+      </Stack>
+      <pre>
+        {`<Grid gap="${value}">`}
+      </pre>
+      <Grid
+        gap={value}
+        templateColumns="1fr 1fr"
+        bg="gray:10"
+        p="4x"
+        transition="all .3s ease-in"
+      >
+        <GridItem>One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem>Five</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-row-gap.js b/packages/react-docs/pages/components/grid/grid-row-gap.js
@@ -0,0 +1,39 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('0');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('0')}>0</Button>
+        <Button variant="outline" onClick={() => setValue('10%')}>10%</Button>
+        <Button variant="outline" onClick={() => setValue('1rem')}>1rem</Button>
+        <Button variant="outline" onClick={() => setValue('20px')}>20px</Button>
+      </Stack>
+      <pre>
+        {`<Grid rowGap="${value}">`}
+      </pre>
+      <Grid
+        rowGap={value}
+        templateColumns="1fr 1fr"
+        bg="gray:10"
+        p="4x"
+        transition="all .3s ease-in"
+      >
+        <GridItem>One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+        <GridItem>Four</GridItem>
+        <GridItem>Five</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/grid/grid-row.js b/packages/react-docs/pages/components/grid/grid-row.js
@@ -0,0 +1,34 @@
+import { Button, Grid, Stack } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const GridItem = (props) => (
+  <Grid bg="teal:50" border={1} borderColor="teal:60" p="3x" {...props} />
+);
+
+const App = () => {
+  const [value, setValue] = useState('1');
+
+  return (
+    <>
+      <Stack direction="row" spacing="2x" mb="4x">
+        <Button variant="outline" onClick={() => setValue('1')}>1</Button>
+        <Button variant="outline" onClick={() => setValue('1 / 3')}>1 / 3</Button>
+        <Button variant="outline" onClick={() => setValue('2 / -1')}>2 / -1</Button>
+        <Button variant="outline" onClick={() => setValue('1 / span 2')}>1 / span 2</Button>
+      </Stack>
+      <Grid
+        templateRows="repeat(3,minmax(3rem,auto))"
+        templateColumns="1fr 1.5fr 1fr"
+        gap="2x"
+        bg="gray:10"
+        p="4x"
+      >
+        <GridItem row={value} bg="blue:50" borderColor="blue:60">One</GridItem>
+        <GridItem>Two</GridItem>
+        <GridItem>Three</GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default App;