docs: enhance examples by replacing code blocks with the render funct…

…ion (#810) * ci: add MDX code block extractor * docs: update badge * docs: update box * docs: update checkbox-group * docs: update checkbox * docs: update code * docs: update divider * docs: remove `ControlBox` from docs * breaking: deprecate ControlBox * docs: update css-baseline * docs: update flex * docs: update grid * docs: update image * docs: update link * docs: update input-base * docs: update input-control * docs: update input-group * docs: update link-button * docs: update input * docs: update input-base * docs: update button-base * docs: update link * docs: update progress * chore: eslint warnings and errors * docs: update search-input * docs: update radio-group * docs: update radio * docs: update checkbox * docs: update switch * docs: update truncate * docs: update select * docs: update skeleton * docs: update space * docs: update spinner * docs: update stack * docs: update svg-icon * docs: update textarea * docs: update text * docs: update text-label * docs: update visually-hidden * docs: update alert * docs: update pagination * docs: update tag * docs: update menu * docs: update theme * docs: update lab * docs: update getting-started and styled-system * docs: update hooks
trendmicro-frontend · Nov 21, 2023 · 4a940ec · 4a940ec
1 parent 133af8f
commit 4a940ec
Show file tree

Hide file tree

Showing 385 changed files with 9,211 additions and 9,447 deletions.
diff --git a/packages/react-docs/config/sidebar-routes.js b/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' },

diff --git a/packages/react-docs/pages/components/alert/alert-actions.js b/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;
diff --git a/.../react-docs/pages/components/alert/close-an-alert-using-the-alertclosebutton-component.js b/.../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;
diff --git a/packages/react-docs/pages/components/alert/close-an-alert-using-the-isclosable-prop.js b/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;
diff --git a/packages/react-docs/pages/components/alert/customizing-the-background-color.js b/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;
diff --git a/packages/react-docs/pages/components/alert/formatted-text.js b/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;