[docs][joy] Build TS versions for Link component demos (#36366)

Author: hbjORbj

docs/data/joy/components/link/DecoratorExamples.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { keyframes } from '@mui/system';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+import Chip from '@mui/joy/Chip';
+
+const circulate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export default function DecoratorExamples() {
+  return (
+    <Box
+      sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}
+    >
+      <Link
+        href="#common-examples"
+        disabled
+        startDecorator={
+          <Box
+            sx={{
+              '--loader-thickness': '4px',
+              borderRadius: '50%',
+              border: 'var(--loader-thickness) solid',
+              borderColor: 'primary.softBg',
+              width: 'var(--Icon-fontSize)',
+              height: 'var(--Icon-fontSize)',
+              boxSizing: 'border-box',
+              position: 'relative',
+            }}
+          >
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 'calc(-1 * var(--loader-thickness))',
+                left: 'calc(-1 * var(--loader-thickness))',
+                width: 'inherit',
+                height: 'inherit',
+                borderRadius: 'inherit',
+                border: 'inherit',
+                boxSizing: 'inherit',
+                borderColor: (theme) =>
+                  `${theme.vars.palette.primary.softColor} transparent transparent`,
+                animation: `${circulate} 1s ease infinite`,
+              }}
+            />
+          </Box>
+        }
+      >
+        Processing...
+      </Link>
+
+      <Link
+        href="#common-examples"
+        underline="none"
+        variant="soft"
+        color="success"
+        endDecorator={
+          <Chip color="success" size="sm" sx={{ borderRadius: '3px', mr: '2px' }}>
+            HIRING!
+          </Chip>
+        }
+        sx={{ '--Link-gap': '0.5rem', pr: 0, pl: 1 }}
+      >
+        Careers
+      </Link>
+    </Box>
+  );
+}

docs/data/joy/components/link/LinkAndTypography.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import Launch from '@mui/icons-material/Launch';
+import LinkIcon from '@mui/icons-material/Link';
+
+export default function LinkAndTypography() {
+  return (
+    <Box sx={{ maxWidth: 360 }}>
+      <Typography
+        id="heading-demo"
+        level="h2"
+        fontSize="lg"
+        endDecorator={
+          <Link
+            variant="outlined"
+            aria-labelledby="heading-demo"
+            href="#heading-demo"
+            fontSize="md"
+            borderRadius="sm"
+          >
+            <LinkIcon />
+          </Link>
+        }
+        mb={1}
+        sx={{ scrollMarginTop: 100 }}
+      >
+        Heading
+      </Typography>
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore{' '}
+        <Link href="#heading-demo" endDecorator={<Launch />}>
+          Magna Aliqua
+        </Link>
+        . Maecenas sed enim ut sem viverra aliquet eget.
+      </Typography>
+    </Box>
+  );
+}

docs/data/joy/components/link/LinkCard.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import CenterFocusWeak from '@mui/icons-material/CenterFocusWeak';
+
+export default function Links() {
+  return (
+    <Card
+      sx={{
+        bgcolor: 'background.body',
+        '&:hover, &:focus-within': {
+          bgcolor: 'background.level2',
+        },
+        boxShadow: 'inset 0 1px 0 0 rgb(255 255 255 / 5%)',
+      }}
+    >
+      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+        <Avatar size="lg" src="/static/images/avatar/1.jpg" />
+        <div>
+          {/* This could be a heading (eg. h2) depends on your use case. */}
+          <Typography component="div">
+            <Link
+              overlay
+              href="#with-card"
+              textColor="inherit"
+              underline="none"
+              fontWeight="md"
+            >
+              Joy UI
+            </Link>
+          </Typography>
+          <Typography level="body2">Components that spark joy!</Typography>
+        </div>
+      </Box>
+      <Typography level="body2" display="flex" alignItems="center" gap={0.5}>
+        Click the <CenterFocusWeak /> and <kbd>TAB</kbd> to test the focus
+      </Typography>
+    </Card>
+  );
+}