1import { getTitle } from '../../helpers/title';
2import mdx from './InteractiveFocusHelper.mdx';
3
4export default {
5    title: getTitle(__filename, false),
6    parameters: {
7        docs: {
8            page: mdx,
9        },
10    },
11};
12
13export const Interactive = () => (
14    <a href="#" className="interactive p-2 border rounded">
15        Focus me
16    </a>
17);
18
19export const InteractivePseudo = () => (
20    <a href="#" className="interactive-pseudo relative p-2">
21        Focus me
22    </a>
23);
24
25export const InteractivePseudoInset = () => (
26    <div className="overflow-hidden border border-weak">
27        <a href="#" className="interactive-pseudo-inset block w-full relative p-2">
28            Focus me
29        </a>
30    </div>
31);
32
33export const InteractivePseudoProtrude = () => (
34    <a href="#" className="interactive-pseudo-protrude interactive--no-background bg-primary relative">
35        Focus me
36    </a>
37);
38
39export const InteractiveNoBackground = () => (
40    <a href="#" className="interactive interactive--no-background bg-none p-2 border rounded">
41        Focus me
42    </a>
43);