feat(www): add mdxts implementation to read documents from clay-core

packages/clay-button/src/Button.tsx

@@ -106,16 +106,16 @@ const ClayButton = React.forwardRef<HTMLButtonElement, IProps>(
 	) => {
 		const childArray = React.Children.toArray(children);
 
-		warning(
-			!(
-				childArray.length === 1 &&
-				// @ts-ignore
-				childArray[0].type?.displayName === 'ClayIcon' &&
-				typeof otherProps['aria-label'] !== 'string' &&
-				typeof otherProps['aria-labelledby'] !== 'string'
-			),
-			'Button Accessibility: Component has only the Icon declared. Define an `aria-label` or `aria-labelledby` attribute that labels the interactive button that screen readers can read. The `title` attribute is optional but consult your design team.'
-		);
+	warning(
+		!(
+			childArray.length === 1 &&
+			// @ts-ignore
+			childArray[0].type?.displayName === 'ClayIcon' &&
+			typeof otherProps['aria-label'] !== 'string' &&
+			typeof otherProps['aria-labelledby'] !== 'string'
+		),
+		'Button Accessibility: Component has only the Icon declared. Define an `aria-label` or `aria-labelledby` attribute that labels the interactive button that screen readers can read. The `title` attribute is optional but consult your design team.'
+	);
 
 		if (displayType === 'beta') {
 			displayType = 'info';
@@ -140,7 +140,6 @@ const ClayButton = React.forwardRef<HTMLButtonElement, IProps>(
 						displayType && !outline && !borderless,
 					[`btn-outline-${displayType}`]:
 						displayType && (outline || borderless),
-					'rounded-pill': rounded,
 					[`btn-${size}`]: size && size !== 'regular',
 				})}
 				ref={ref}
@@ -151,8 +150,35 @@ const ClayButton = React.forwardRef<HTMLButtonElement, IProps>(
 			</button>
 		);
 	}
-);
-
-ClayButton.displayName = 'ClayButton';
 
-export default Object.assign(ClayButton, {Group});
+	return (
+		<button
+			className={classNames(className, 'btn', {
+				'alert-btn': alert,
+				'btn-block': block,
+				'btn-monospaced': monospaced,
+				'btn-outline-borderless': borderless,
+				'btn-sm': small && !size,
+				'btn-translucent': translucent,
+				'clay-dark': dark,
+				[`btn-${displayType}`]:
+					displayType && !outline && !borderless,
+				[`btn-outline-${displayType}`]:
+		</button>
+	);
+};
+
+type ForwardRef = {
+	displayName: string;
+	Group: typeof Group;
+	(props: IProps & {ref?: React.Ref<HTMLButtonElement>}): JSX.Element;
+};
+
+const Button = React.forwardRef(ButtonInner) as unknown as ForwardRef;
+
+Button.Group = Group;
+
+Button.displayName = 'ClayButton';
+
+export {Button};
+export default Button;

packages/clay-core/docs/focus-trap.mdx

@@ -3,31 +3,60 @@ title: 'Focus Trap'
 description: 'Focus Trap keeps the focus within its focusable children elements.'
 packageNpm: '@clayui/core'
 packageStatus: 'Beta'
+packageUse: "import {FocusTrap} from '@clayui/core';"
 storybookPath: 'design-system-components-focus-trap'
 ---
 
-import {FocusTrapExample} from '$packages/clay-core/docs/focus-trap';
-
-<div class="nav-toc-absolute">
-<div class="nav-toc">
-
--   [Introduction](#introduction)
--   [Example](#example)
-
-</div>
-</div>
-
 ## Introduction
 
 Focus Trap is a component that wraps elements in the DOM and prevents focus from escaping from its child components when the user navigates with Tab or Shift + Tab.
 
 It definitely is used when trying to build accessible components, blocking all interactions outside of it while Focus Trap is active.
 
-<div class="clay-site-alert alert alert-warning">
+<div className="clay-site-alert alert alert-warning">
 	It's the responsibility of the user to add an escape method for the focus
 	trap, either with a button or the escape key.
 </div>
 
 ## Example
 
-<FocusTrapExample />
+```jsx preview
+import {Provider, Button, FocusTrap} from '@clayui/core';
+import React, {useEffect, useRef, useState} from 'react';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	const [active, setActive] = useState(false);
+	const activateButtonRef = useRef(null);
+
+	useEffect(() => {
+		if (active) {
+			return () => activateButtonRef.current?.focus();
+		}
+	}, [active]);
+
+	return (
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4">
+				<Button onClick={() => setActive(true)} ref={activateButtonRef}>
+					Activate trap
+				</Button>
+				{active && (
+					<FocusTrap active={active}>
+						<div className="sheet c-mt-2 c-p-4">
+							<Button displayType="link">Button 1</Button>
+							<Button displayType="link">Button 2</Button>
+							<div className="c-mt-4">
+								<Button onClick={() => setActive(false)}>
+									Leave trap
+								</Button>
+							</div>
+						</div>
+					</FocusTrap>
+				)}
+			</div>
+		</Provider>
+	);
+}
+```