1import { Button } from '@proton/atoms';
2
3import { getTitle } from '../../helpers/title';
4import mdx from './OpacityOnHover.mdx';
5
6export default {
7    title: getTitle(__filename, false),
8    parameters: {
9        docs: {
10            page: mdx,
11        },
12    },
13};
14
15export const OpacityOnHover = () => (
16    <div className="group-hover-opacity-container">
17        hover or focus me, pikaaaaa…
18        <Button className="ml-4 group-hover:opacity-100">CHU</Button>
19    </div>
20);
21
22export const OpacityOnHoverNoWidth = () => (
23    <div className="group-hover-opacity-container">
24        This is the group container, hover me
25        <Button className="ml-4 group-hover:opacity-100 group-hover:opacity-100-no-width">Hidden Button</Button>
26        <Button type="button" className="ml-4">
27            Button
28        </Button>
29    </div>
30);