1import { useState } from 'react';
2
3import type { LogoProps } from '@proton/components';
4import {
5    CalendarLogo,
6    DriveLogo,
7    Logo,
8    MailLogo,
9    PassLogo,
10    ProtonLogo,
11    RadioGroup,
12    VpnLogo,
13    WalletLogo,
14} from '@proton/components';
15import { APPS } from '@proton/shared/lib/constants';
16
17import { getTitle } from '../../helpers/title';
18import mdx from './Logo.mdx';
19
20export default {
21    component: Logo,
22    title: getTitle(__filename, false),
23    parameters: {
24        docs: {
25            page: mdx,
26        },
27    },
28};
29
30export const Basic = ({ ...args }: LogoProps) => <Logo {...args} />;
31
32Basic.args = {
33    appName: APPS.PROTONMAIL,
34    variant: 'with-wordmark',
35} as LogoProps;
36
37const appNames: Required<LogoProps>['appName'][] = [
38    APPS.PROTONMAIL,
39    APPS.PROTONCALENDAR,
40    APPS.PROTONDRIVE,
41    APPS.PROTONVPN_SETTINGS,
42    APPS.PROTONPASS,
43    APPS.PROTONDOCS,
44    APPS.PROTONWALLET,
45];
46
47const variants: Required<LogoProps>['variant'][] = ['with-wordmark', 'glyph-only', 'wordmark-only'];
48
49export const Sandbox = () => {
50    const [selectedAppName, setSelectedAppName] = useState<Required<LogoProps>['appName']>(APPS.PROTONMAIL);
51    const [selectedVariant, setSelectedVariant] = useState<Required<LogoProps>['variant']>('with-wordmark');
52
53    const logo = <Logo appName={selectedAppName} variant={selectedVariant} />;
54
55    return (
56        <div className="my-8">
57            <div className="flex items-stretch">
58                <div className="mr-8">
59                    <strong className="block mb-4">App Name</strong>
60                    <RadioGroup
61                        name="selected-app-name"
62                        onChange={setSelectedAppName}
63                        value={selectedAppName}
64                        options={appNames.map((appName) => ({ value: appName, label: appName }))}
65                    />
66                </div>
67                <div className="mr-8">
68                    <strong className="block mb-4">Variant</strong>
69                    <RadioGroup
70                        name="selected-variant"
71                        onChange={setSelectedVariant}
72                        value={selectedVariant}
73                        options={variants.map((variant) => ({ value: variant, label: variant }))}
74                    />
75                </div>
76                <div className="flex flex-1 items-center justify-center border">{logo}</div>
77            </div>
78        </div>
79    );
80};
81
82export const Individual = () => (
83    <div className="flex flex-column gap-8">
84        <ProtonLogo variant="glyph-only" />
85        <ProtonLogo />
86        <MailLogo />
87        <CalendarLogo />
88        <DriveLogo />
89        <VpnLogo />
90        <PassLogo />
91        <WalletLogo />
92    </div>
93);