[docs][joy] Add typescript demos for Divider

docs/data/joy/components/divider/DividerChildPosition.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
+import Stack from '@mui/joy/Stack';
+import Slider from '@mui/joy/Slider';
+import Sheet from '@mui/joy/Sheet';
+
+export default function DividerChildPosition() {
+  const [position, setPosition] = React.useState<number | Array<number>>(50);
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack spacing={1} sx={{ fontSize: 'sm' }}>
+        <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+        <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
+          Visual indicator
+        </Divider>
+        <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+      </Stack>
+      <Slider
+        value={position}
+        min={0}
+        max={100}
+        step={1}
+        valueLabelDisplay="on"
+        valueLabelFormat={(value) => `${value}%`}
+        onChange={(event, value) => setPosition(value)}
+      />
+    </Box>
+  );
+}

docs/data/joy/components/divider/DividerChildPosition.tsx.preview

@@ -0,0 +1,16 @@
+<Stack spacing={1} sx={{ fontSize: 'sm' }}>
+  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+  <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
+    Visual indicator
+  </Divider>
+  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+</Stack>
+<Slider
+  value={position}
+  min={0}
+  max={100}
+  step={1}
+  valueLabelDisplay="on"
+  valueLabelFormat={(value) => `${value}%`}
+  onChange={(event, value) => setPosition(value)}
+/>

docs/data/joy/components/divider/DividerInCard.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Card, { CardProps } from '@mui/joy/Card';
+import Checkbox from '@mui/joy/Checkbox';
+import Divider from '@mui/joy/Divider';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+
+export default function DividerInCard() {
+  const [orientation, setOrientation] =
+    React.useState<CardProps['orientation']>('vertical');
+  return (
+    <Box>
+      <Checkbox
+        label="horizontal"
+        checked={orientation === 'horizontal'}
+        onChange={(event) =>
+          setOrientation(event.target.checked ? 'horizontal' : 'vertical')
+        }
+        sx={{ mb: 2 }}
+      />
+      <Card
+        orientation={orientation}
+        variant="outlined"
+        sx={{ width: 400, maxWidth: '100%', gap: 1.5 }}
+      >
+        <Typography fontSize="lg" fontWeight="md">
+          Headline
+        </Typography>
+        <Divider />
+        <Box sx={{ display: orientation === 'horizontal' ? 'block' : 'contents' }}>
+          <Typography level="body2">
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry standard dummy text ever
+            since the 1500s
+          </Typography>
+          <Button
+            size="sm"
+            variant="soft"
+            color="neutral"
+            endDecorator={<ArrowForward />}
+            sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }}
+          >
+            See more
+          </Button>
+        </Box>
+      </Card>
+    </Box>
+  );
+}

docs/data/joy/components/divider/DividerInModalDialog.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Divider from '@mui/joy/Divider';
+import Typography from '@mui/joy/Typography';
+
+export default function DividerInModalDialog() {
+  return (
+    <ModalDialog
+      aria-labelledby="divider-modal-title"
+      aria-describedby="divider-modal-desc"
+      sx={{
+        // this custom styles is for demonstration purpose, you might not need them in your app
+        position: 'static',
+        transform: 'none',
+        maxWidth: 300,
+      }}
+    >
+      <Typography fontSize="lg" fontWeight="lg" id="divider-modal-title">
+        Modal Title
+      </Typography>
+      <Divider inset="none" />
+      <Typography level="body2" id="divider-modal-desc" fontSize="sm">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry standard dummy text ever since the 1500s
+      </Typography>
+      <Divider />
+      <Box
+        sx={{
+          bgcolor: 'background.level1',
+          px: 2,
+          py: 1.5,
+          m: 'calc(-1 * var(--ModalDialog-padding))',
+          mt: 0,
+          borderBottomLeftRadius: 'var(--ModalDialog-radius)',
+          borderBottomRightRadius: 'var(--ModalDialog-radius)',
+          textAlign: 'right',
+        }}
+      >
+        <Button size="sm">Got it!</Button>
+      </Box>
+    </ModalDialog>
+  );
+}

docs/data/joy/components/divider/DividerText.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Stack from '@mui/joy/Stack';
+import Divider from '@mui/joy/Divider';
+import Chip from '@mui/joy/Chip';
+
+export default function DividerText() {
+  const content = (
+    <Box sx={{ fontSize: 'sm', color: 'text.tertiary' }}>
+      {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
+   Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+   Sed malesuada lobortis pretium.`}
+    </Box>
+  );
+
+  return (
+    <Stack spacing={1}>
+      {content}
+      <Divider>Visual indicator</Divider>
+      {content}
+      <Divider>
+        <Chip variant="soft" color="neutral" size="sm">
+          Visual indicator
+        </Chip>
+      </Divider>
+      {content}
+    </Stack>
+  );
+}

docs/data/joy/components/divider/DividerText.tsx.preview

@@ -0,0 +1,9 @@
+{content}
+<Divider>Visual indicator</Divider>
+{content}
+<Divider>
+  <Chip variant="soft" color="neutral" size="sm">
+    Visual indicator
+  </Chip>
+</Divider>
+{content}

docs/data/joy/components/divider/DividerUsage.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import Stack from '@mui/joy/Stack';
+import Sheet from '@mui/joy/Sheet';
+import Divider from '@mui/joy/Divider';
+
+export default function DividerUsages() {
+  return (
+    <JoyUsageDemo
+      componentName="Divider"
+      data={[
+        {
+          propName: 'orientation',
+          knob: 'radio',
+          defaultValue: 'horizontal',
+          options: ['horizontal', 'vertical'],
+        },
+        {
+          propName: 'children',
+          knob: 'input',
+          defaultValue: '',
+        },
+      ]}
+      renderDemo={(props) => (
+        <Sheet sx={{ my: 2, bgcolor: 'transparent' }}>
+          <Sheet
+            sx={{
+              height: 12,
+              width: 80,
+              borderRadius: 'lg',
+              mb: 1,
+              bgcolor: 'background.level3',
+            }}
+          />
+          <Stack
+            direction={props.orientation === 'vertical' ? 'row' : 'column'}
+            spacing={2}
+            sx={{ width: 300, pb: 3 }}
+          >
+            <Sheet
+              sx={{
+                height: props.orientation === 'vertical' ? 120 : 40,
+                flexGrow: 1,
+                borderRadius: 'xs',
+                bgcolor: 'background.level3',
+              }}
+            />
+            <Divider {...props} />
+            <Sheet
+              sx={{
+                height: props.orientation === 'vertical' ? 120 : 40,
+                flexGrow: 1,
+                borderRadius: 'xs',
+                bgcolor: 'background.level3',
+              }}
+            />
+          </Stack>
+        </Sheet>
+      )}
+    />
+  );
+}

docs/data/joy/components/divider/FullscreenOverflowDivider.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
+import Checkbox from '@mui/joy/Checkbox';
+
+export default function FullscreenOverflowDivider() {
+  const [shadow, setShadow] = React.useState(false);
+  const [clip, setClip] = React.useState(false);
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ width: '100%', overflow: 'hidden' }}>
+        <Box
+          sx={{
+            width: 200,
+            py: 5,
+            mx: 'auto',
+            border: '1px solid',
+            borderColor: 'success.300',
+            bgcolor: (theme) =>
+              `rgba(${theme.vars.palette.success.lightChannel} / 0.5)`,
+          }}
+        >
+          <Divider
+            sx={{
+              boxShadow: shadow
+                ? '0 0 0 100vmax var(--Divider-lineColor)'
+                : 'initial',
+              clipPath: clip ? 'inset(0px -100vmax)' : 'initial',
+            }}
+          />
+        </Box>
+      </Box>
+      <Box sx={{ display: 'flex', gap: 3, justifyContent: 'center', mt: 2 }}>
+        <Checkbox
+          label="box-shadow"
+          checked={shadow}
+          onChange={(event) => setShadow(event.target.checked)}
+        />
+        <Checkbox
+          label="clip-path"
+          checked={clip}
+          onChange={(event) => setClip(event.target.checked)}
+        />
+      </Box>
+    </Box>
+  );
+}

docs/data/joy/components/divider/VerticalDividerText.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Stack from '@mui/joy/Stack';
+import Divider from '@mui/joy/Divider';
+
+export default function VerticalDividerText() {
+  const content = (
+    <Box sx={{ fontSize: 'sm', color: 'text.tertiary' }}>
+      {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
+   Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+   Sed malesuada lobortis pretium.`}
+    </Box>
+  );
+
+  return (
+    <Stack spacing={2} direction="row">
+      {content}
+      <Divider orientation="vertical">Visual indicator</Divider>
+      {content}
+    </Stack>
+  );
+}

docs/data/joy/components/divider/VerticalDividerText.tsx.preview

@@ -0,0 +1,3 @@
+{content}
+<Divider orientation="vertical">Visual indicator</Divider>
+{content}

docs/data/joy/components/divider/VerticalDividers.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
+
+export default function VerticalDividers() {
+  return (
+    <div>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          width: 'fit-content',
+          border: '1px solid',
+          borderColor: 'divider',
+          borderRadius: 'sm',
+          bgcolor: 'background.surface',
+          color: 'text.secondary',
+          '& svg': {
+            m: 1.5,
+          },
+          '& hr': {
+            mx: 0.5,
+          },
+        }}
+      >
+        <FormatAlignLeftIcon />
+        <FormatAlignCenterIcon />
+        <FormatAlignRightIcon />
+        <Divider orientation="vertical" />
+        <FormatBoldIcon />
+        <FormatItalicIcon />
+      </Box>
+    </div>
+  );
+}