1import { Button } from '@proton/atoms';
2import { Icon } from '@proton/components';
3
4import { getTitle } from '../../helpers/title';
5import mdx from './HidingDisablingContent.mdx';
6
7export default {
8    title: getTitle(__filename, false),
9    parameters: {
10        docs: {
11            page: mdx,
12        },
13    },
14};
15
16export const Hidden = () => (
17    <div className="p-7 bg-weak">
18        Here are two hidden elements:
19        <p hidden>I'm hidden</p>
20        <p className="hidden">I'm also hidden</p>
21    </div>
22);
23
24export const HiddenEmpty = () => (
25    <div className="p-7 bg-weak">
26        Here are two elements, one empty, one not empty:
27        <p className="empty:hidden m-0">I'm not empty</p>
28        <p className="empty:hidden m-0">{/* I'm empty */}</p>
29    </div>
30);
31
32export const VisibilityHidden = () => (
33    <div className="p-7 bg-weak">
34        Here is one hidden element
35        <span className="visibility-hidden">I'm hidden but still need my space</span>
36        which still keeps its space
37    </div>
38);
39
40export const Screenreaders = () => (
41    <div className="p-7 bg-weak">
42        <Button>
43            <Icon name="emoji" />
44            <span className="sr-only">I'm hidden but will can vocalized when using a screen reader</span>
45        </Button>
46    </div>
47);
48
49export const PointerEventsNone = () => (
50    <div className="p-7 bg-weak">
51        <Button className="pointer-events-none mr-8">Hover me (pointer-events-none)</Button>
52        <Button>Hover me (default)</Button>
53    </div>
54);
55{
56    /*
57
58<div class="flex justify-space-between mb-8 flex-column md:flex-row">
59    <div class="w-1/2 self-center">
60        Applies <code>pointer-events: none</code> to element.
61        <br />
62        If you need to remove pointer events on all children of an element, you may use{' '}
63        <code>*:pointer-events-none</code> class.
64    </div>
65    <div class="w-1/2">
66        <Source
67            language="html"
68            light
69            format
70            code={`
71<a className="pointer-events-none">Lorem ipsum dolor</a>
72`}
73        />
74    </div>
75</div> */
76}