docs: enhance examples by replacing code blocks with the render function

packages/react-docs/config/sidebar-routes.js

@@ -142,7 +142,6 @@ export const routes = [
 
       { title: 'LAYOUT', heading: true },
       { title: 'Box', path: 'components/box' },
-      //{ title: 'ControlBox', path: 'components/control-box' }, // XXX: internal use only
       { title: 'Flex', path: 'components/flex' },
       { title: 'Grid', path: 'components/grid' },
       { title: 'Space', path: 'components/space' },

packages/react-docs/pages/components/alert/alert-actions.js

@@ -0,0 +1,66 @@
+import { Alert, Button, Flex, LinkButton, Stack, Text } from '@tonic-ui/react';
+import React, { forwardRef } from 'react';
+
+const ActionButton = forwardRef((props, ref) => (
+  <Button
+    ref={ref}
+    variant="secondary"
+    borderColor="black:primary"
+    color="black:primary"
+    sx={{
+      ':active': {
+        color: 'black:primary',
+      },
+      ':focus': {
+        color: 'black:primary',
+      },
+      ':hover': {
+        background: 'rgba(0, 0, 0, 0.12)',
+        color: 'black:primary',
+      },
+      ':hover:not(:focus)': {
+        boxShadow: 'none',
+      },
+    }}
+    {...props}
+  />
+));
+ActionButton.displayName = 'ActionButton';
+
+const App = () => (
+  <Stack direction="column" spacing="4x">
+    <Alert variant="solid" severity="warning">
+      <Flex justifyContent="space-between">
+        <Text>This is a warning alert.</Text>
+        <LinkButton>Learn More</LinkButton>
+      </Flex>
+    </Alert>
+    <Alert variant="solid" severity="error">
+      <Flex justifyContent="space-between" mt={-1} mb={-2}>
+        <Text>This is an error alert.</Text>
+        <ActionButton
+          // See above for the ActionButton component
+          size="sm"
+        >
+          Action Button
+        </ActionButton>
+      </Flex>
+    </Alert>
+    <Alert variant="outline" severity="warning">
+      <Flex justifyContent="space-between">
+        <Text>This is a warning alert.</Text>
+        <LinkButton>Learn More</LinkButton>
+      </Flex>
+    </Alert>
+    <Alert variant="outline" severity="error">
+      <Flex justifyContent="space-between" mt={-1} mb={-2}>
+        <Text>This is an error alert.</Text>
+        <Button size="sm" variant="secondary">
+          Action Button
+        </Button>
+      </Flex>
+    </Alert>
+  </Stack>
+);
+
+export default App;

packages/react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js

@@ -0,0 +1,17 @@
+import { Alert, AlertCloseButton, Collapse, Text } from '@tonic-ui/react';
+import { useToggle } from '@tonic-ui/react-hooks';
+import React from 'react';
+
+const App = () => {
+  const [isOpen, onClose] = useToggle(true);
+  return (
+    <Collapse in={isOpen} unmountOnExit>
+      <Alert variant="solid" severity="success" onClose={onClose}>
+        <Text pr="10x">This is a success alert.</Text>
+        <AlertCloseButton top={3} right={7} position="absolute" data-test="alert-close-button" />
+      </Alert>
+    </Collapse>
+  );
+};
+
+export default App;

packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js

@@ -0,0 +1,16 @@
+import { Alert, Collapse, Text } from '@tonic-ui/react';
+import { useToggle } from '@tonic-ui/react-hooks';
+import React from 'react';
+
+const App = () => {
+  const [isOpen, onClose] = useToggle(true);
+  return (
+    <Collapse in={isOpen} unmountOnExit>
+      <Alert variant="solid" severity="success" isClosable onClose={onClose}>
+        <Text>This is a success alert.</Text>
+      </Alert>
+    </Collapse>
+  );
+};
+
+export default App;

packages/react-docs/pages/components/alert/customizing-the-background-color.js

@@ -0,0 +1,25 @@
+import { Alert, Stack, Text } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack direction="column" spacing="4x">
+    <Alert
+      variant="solid"
+      severity="none"
+      background="linear-gradient(90deg, var(--tonic-colors-purple-60) 0%, var(--tonic-colors-blue-50) 100%)"
+      color="white:emphasis"
+    >
+      <Text>This is a promotion message</Text>
+    </Alert>
+    <Alert
+      variant="outline"
+      severity="none"
+      borderImageSource="linear-gradient(90deg, var(--tonic-colors-purple-60) 0%, var(--tonic-colors-blue-50) 100%)"
+      borderImageSlice={1}
+    >
+      <Text>This is a promotion message</Text>
+    </Alert>
+  </Stack>
+);
+
+export default App;

packages/react-docs/pages/components/alert/formatted-text.js

@@ -0,0 +1,41 @@
+import { Alert, Box, Stack, Text } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack direction="column" spacing="4x">
+    <Alert isClosable severity="success">
+      <Box mb="1x">
+        <Text fontWeight="bold">Success</Text>
+      </Box>
+      <Text mr={-36}>
+        This is a success alert.
+      </Text>
+    </Alert>
+    <Alert isClosable severity="info">
+      <Box mb="1x">
+        <Text fontWeight="bold">Info</Text>
+      </Box>
+      <Text mr={-36}>
+        This is an info alert.
+      </Text>
+    </Alert>
+    <Alert isClosable severity="warning">
+      <Box mb="1x">
+        <Text fontWeight="bold">Warning</Text>
+      </Box>
+      <Text mr={-36}>
+        This is a warning alert.
+      </Text>
+    </Alert>
+    <Alert isClosable severity="error">
+      <Box mb="1x">
+        <Text fontWeight="bold">Error</Text>
+      </Box>
+      <Text mr={-36}>
+        This is an error alert.
+      </Text>
+    </Alert>
+  </Stack>
+);
+
+export default App;