Manifest Debugger

import { Avatar } from "@automattic/vip-design-system";

const Default = args => (
    <>
        { COMMON_SIZES.map( size => (
            <Avatar { ...args } size={ size } key={ size } />
        ) ) }
    </>
);

const WithName = () => <Avatar
    name="Kitty"
    size={30}
    sx={{
        backgroundColor: '#D8A45F',
    }} />;

const WithAbbreviation = () => <Avatar
    name="Taylor Swift"
    abbr="TS"
    size={64}
    sx={{
        backgroundColor: '#D8A45F',
    }} />;

import { Badge, Link } from "@automattic/vip-design-system";

const Default = () => <Badge sx={undefined}>Badge</Badge>;

const Variants = () => <>
    <Badge variant="blue" sx={ { m: 2 } }>Blue
                    </Badge>
    <Badge variant="gold" sx={ { m: 2 } }>Gold
                    </Badge>
    <Badge variant="gray" sx={ { m: 2 } }>Gray
                    </Badge>
    <Badge variant="green" sx={ { m: 2 } }>Green
                    </Badge>
    <Badge variant="orange" sx={ { m: 2 } }>Orange
                    </Badge>
    <Badge variant="red" sx={ { m: 2 } }>Red
                    </Badge>
    <Badge variant="salmon" sx={ { m: 2 } }>Salmon
                    </Badge>
    <Badge variant="yellow" sx={ { m: 2 } }>Yellow
                    </Badge>
</>;

const WithLink = () => <Badge>
    <Link href="https://google.com">Google</Link>
</Badge>;

import { Box } from "@automattic/vip-design-system";

const Default = () => <Box sx={undefined}>Hello</Box>;

import { Box, Breadcrumbs } from "@automattic/vip-design-system";

const Primary = () => <Breadcrumbs
    label="Nav Breadcrumbs"
    links={[
        { href: 'https://wordpress.com', label: 'WordPress' },
        { href: 'https://newrelic.com/', label: 'New Relic' },
        { href: 'https://google.com/', label: 'Current Page' },
    ]}
    LinkComponent={ CustomLink } />;

const Default = () => (
    <Breadcrumbs
        LinkComponent={ CustomLink }
        label="Nav Breadcrumbs"
        links={ [
            { href: 'https://wordpress.com', label: 'WordPress' },
            { href: 'https://newrelic.com/', label: 'New Relic' },
            { href: 'https://google.com/', label: 'Not accessible' },
        ] }
    />
);

const Collapsible = () => (
    <Box sx={ { display: 'flex', flexDirection: 'column', gap: 4 } }>
        <p>
            When entering Mobile views, the first and the last link will appear. A button with a … will
            also be visible. Once pressed, the rest of the links become available, and the focus is
            moved to the next link.
        </p>

        <hr sx={ { width: '100%', my: 4 } } />

        <Breadcrumbs
            wrapMode="collapsible"
            LinkComponent={ CustomLinkComponentized }
            label="Nav Breadcrumbs"
            links={ [
                { href: '/', label: 'Home' },
                { href: 'https://datadog.com/', label: 'Data dog' },
                { href: 'https://newrelic.com/', label: 'New Relic' },
                { href: 'https://rollbar.com/', label: 'Rollbar' },
                { href: 'https://areallylong.com/', label: 'A really long name' },
                { href: 'https://google.com/', label: 'I am the last item' },
            ] }
        />
    </Box>
);

import { BiCalendarHeart } from "react-icons/bi";
import { Button, ScreenReaderText, Table, TableCell, TableRow } from "@automattic/vip-design-system";

const Primary = () => <Button variant="primary" disabled={false} full={false} danger={false}>Button</Button>;

const Default = () => <div>
    <h3>Default</h3>
    <Table>
        <TableRow>
            <TableCell head>Variant</TableCell>
            <TableCell head>Primary</TableCell>
            <TableCell head>Secondary</TableCell>
            <TableCell head>Tertiary</TableCell>
            <TableCell head>Ghost</TableCell>
            <TableCell head>Display</TableCell>
            <TableCell head>Icon</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Default</TableCell>
            <TableCell>
                <Button>Primary</Button>
            </TableCell>
            <TableCell>
                <Button variant="secondary">Secondary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="tertiary">Tertiary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="ghost">Ghost
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="display">Display
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="icon" type="button">
                    <BiCalendarHeart size={ 24 } />
                    <ScreenReaderText>domain.com</ScreenReaderText>
                </Button>
            </TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Disabled</TableCell>
            <TableCell>
                <Button variant="primary" disabled>Primary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="secondary" disabled={ true }>Secondary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="tertiary" disabled>Tertiary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="ghost" disabled>Ghost
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="display" disabled>Display
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="icon" type="button" disabled>
                    <BiCalendarHeart size={ 24 } />
                    <ScreenReaderText>domain.com</ScreenReaderText>
                </Button>
            </TableCell>
        </TableRow>
    </Table>
    <div sx={ { mt: 3 } }>
        <Button variant="secondary" href="https://google/com" full>Button with full width
                        </Button>
    </div>
    <div sx={ { mt: 3, display: 'flex' } }>
        <Button variant="secondary" href="https://google/com" grow>Button with grow width
                        </Button>
    </div>
    <h3>Danger</h3>
    <Table>
        <TableRow>
            <TableCell head>Variant</TableCell>
            <TableCell head>Primary</TableCell>
            <TableCell head>Secondary</TableCell>
            <TableCell head>Ghost</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Default</TableCell>
            <TableCell>
                <Button danger>Primary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button danger variant="secondary">Secondary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button danger variant="ghost">Ghost
                                        </Button>
            </TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Disabled</TableCell>
            <TableCell>
                <Button variant="primary" danger disabled>Primary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="secondary" danger disabled>Secondary
                                        </Button>
            </TableCell>
            <TableCell>
                <Button variant="ghost" disabled>Ghost
                                        </Button>
            </TableCell>
        </TableRow>
    </Table>
</div>;

const PreferAriaDisabled = () => <div>
    <Button disabled preferAriaDisabled>Primary
                </Button>
</div>;

import { ButtonSubmit } from "@automattic/vip-design-system";

const Primary = () => <ButtonSubmit label="Submit" loading={false} />;

const PrimaryVariant = () => <ButtonSubmit label="Primary" variant="primary" sx={ { ml: 2 } } />;

const Secondary = () => <ButtonSubmit label="Secondary" variant="secondary" sx={ { ml: 2 } } />;

const Loading = () => (
    <ButtonSubmit label="Loading" loading={ true } variant="primary" sx={ { ml: 2 } } />
);

import { Box, Card } from "@automattic/vip-design-system";

const Default = () => <Card>Hello</Card>;

const WithHeader = () => <Card title="Header">This is a card with a header.</Card>;

const WithCustomHeader = () => <Box sx={ { maxWidth: 500 } }>
    <Card
        title="Screenshot of a website"
        renderHeader={title => (
			<img
				src={ `https://s0.wp.com/mshots/v1/https://google.com/` }
				sx={ { width: '100%' } }
				alt={ title }
			/>
		)}>This is a card with a customized header content.</Card>
</Box>;

const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;

const WithHeaderSecondary = () => <Card title="Header" variant="secondary">This is a card with a header.</Card>;

const DefaultIndent = () => <Card variant="indent">Hello</Card>;

const StyledBody = () => <Card
    variant="indent"
    title="Hello world"
    bodyStyles={{ p: 6, backgroundColor: 'layer.2' }}>Hello styled body.</Card>;

import { Checkbox, Flex, Form, Label, Text } from "@automattic/vip-design-system";

const Primary = () => <Checkbox variant="primary" disabled={false} />;

const Default = () => {
    const [ checked, setChecked ] = useState< CheckedState >( true );
    const [ checked2, setChecked2 ] = useState< CheckedState >( false );

    return (
        <Form.Root>
            { ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
                <Form.Fieldset key={ variant }>
                    <Form.Legend>Tell me your { variant } prefereces</Form.Legend>

                    <Flex sx={ { alignItems: 'center' } }>
                        <Checkbox
                            variant={ variant }
                            id={ `check1-${ variant }` }
                            checked={ checked }
                            aria-labelledby={ `label-check1-${ variant }` }
                            onCheckedChange={ setChecked }
                        />
                        <Label clickable htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
                            This option
                        </Label>
                    </Flex>

                    <Flex sx={ { alignItems: 'center' } }>
                        <Checkbox
                            variant={ variant }
                            id={ `check2-${ variant }` }
                            checked={ checked2 }
                            aria-labelledby={ `label-check2-${ variant }` }
                            onCheckedChange={ setChecked2 }
                        />
                        <Label clickable htmlFor={ `check2-${ variant }` } id={ `label-check2-${ variant }` }>
                            This option too
                        </Label>
                    </Flex>
                </Form.Fieldset>
            ) ) }

            <Form.Fieldset>
                <Form.Legend>Tell me your Disabled prefereces</Form.Legend>

                <Flex sx={ { alignItems: 'center' } }>
                    <Checkbox
                        disabled
                        variant="disabled"
                        id={ `check1-disabled` }
                        checked={ checked }
                        aria-labelledby={ `label-check1-disabled` }
                        onCheckedChange={ setChecked }
                    />
                    <Label clickable htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
                        This option
                    </Label>
                </Flex>

                <Flex sx={ { alignItems: 'center' } }>
                    <Checkbox
                        disabled
                        id={ `check2-disabled` }
                        checked={ checked2 }
                        aria-labelledby={ `label-check2-disabled` }
                        onCheckedChange={ setChecked2 }
                    />
                    <Label clickable htmlFor={ `check2-disabled` } id={ `label-check2-disabled` }>
                        This option too
                    </Label>
                </Flex>
            </Form.Fieldset>
        </Form.Root>
    );
};

const Indeterminate = () => {
    // Creat a ref to the manipula an input
    const checkRef = createRef< HTMLInputElement >();

    useEffect( () => {
        if ( checkRef.current ) {
            checkRef.current.indeterminate = true;
        }
    }, [ checkRef ] );

    return (
        <Form.Root>
            { ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
                <Form.Fieldset key={ variant }>
                    <Form.Legend>Indeterminate state { variant }</Form.Legend>

                    <Flex sx={ { alignItems: 'center' } }>
                        <Checkbox
                            variant={ variant }
                            id={ `check1-${ variant }` }
                            aria-labelledby={ `label-check1-${ variant }` }
                            checked={ 'indeterminate' }
                        />

                        <Label htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
                            This option
                        </Label>
                    </Flex>
                </Form.Fieldset>
            ) ) }

            <Form.Fieldset>
                <Form.Legend>Indeterminate state disabled</Form.Legend>

                <Flex sx={ { alignItems: 'center' } }>
                    <Checkbox
                        variant="disabled"
                        id={ `check1-disabled` }
                        aria-labelledby={ `label-check1-disabled` }
                        checked={ 'indeterminate' }
                    />
                    <Label htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
                        This option
                    </Label>
                </Flex>
            </Form.Fieldset>

            <Text>
                Reference:{ ' ' }
                <a href="https://css-tricks.com/indeterminate-checkboxes/">Indeterminate Checkboxes</a>
            </Text>
        </Form.Root>
    );
};

import { Code } from "@automattic/vip-design-system";

const Primary = () => <Code prompt showCopy>npm install @automattic/vip-design-system</Code>;

const DefaultWithTime = () => (
    <Code>
        <time sx={ { color: 'logs.text.secondary' } } dateTime="2022-01-01 15:15:15">
            15:16
        </time>{ ' ' }
        Code
    </Code>
);

const DefaultWithIcon = () => <Code showCopy={ true }>Code with Icon</Code>;

const DefaultWithConsoleInfo = () => (
    <Code showCopy={ true } onCopy={ () => global.alert( 'Hello world' ) }>
        Code with Icon and Click callback — console.info
    </Code>
);

import { DescriptionList } from "@automattic/vip-design-system";

const Default = () => <DescriptionList
    title="Summary of the list"
    list={[
        {
            label: 'Short Label',
            value:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        },
        {
            label: 'Long label to test label width',
            value: 'Value',
        },
    ]} />;

const WithEmptySummary = () => <DescriptionList title="Summary of the list" list={[]} />;

const Table = () => <DescriptionList
    as="table"
    title="Summary of the list"
    list={[
        {
            label: 'Short Label',
            value: 'Value',
        },
    ]} />;

import { Button, Content, Drawer, Root, Trigger } from "@automattic/vip-design-system";

const Primary = () => <Drawer
    trigger={ <Button>Open Drawer</Button> }
    label="Drawer Dialog"
    variant="left"
    dimensions={{ width: 320 }}>
    <p sx={ { ml: 3 } }>Drawer content goes here.</p>
</Drawer>;

const Default = () => (
    <>
        <Drawer
            label="My XYZ Dialog"
            trigger={ <Button>Open </Button> }
            dimensions={ { width: 320 } }
        >
            <p sx={ { ml: 3 } }>Hello from default</p>
        </Drawer>

        <Drawer trigger={ <Button>Top</Button> } variant="top" label="Dialog Content">
            <p sx={ { ml: 3 } }>Hello from top</p>
        </Drawer>
        <Drawer
            trigger={ <Button>Right</Button> }
            variant="right"
            label="Dialog"
            dimensions={ { width: 500 } }
        >
            <p sx={ { ml: 3 } }>Hello from right width 500px</p>
        </Drawer>
        <Drawer
            trigger={ <Button>Bottom</Button> }
            variant="bottom"
            label="Dialog"
            dimensions={ { height: 200 } }
        >
            <p sx={ { ml: 3 } }>Hello from bottom with 200px</p>
        </Drawer>
        <Drawer
            trigger={ <Button>Left</Button> }
            variant="left"
            label="Dialog"
            dimensions={ { width: 600 } }
        >
            <p sx={ { ml: 3 } }>Hello from left width 600px</p>
        </Drawer>
        <Drawer trigger={ <Button>Left Header</Button> } variant="left-header" label="Dialog">
            <p sx={ { ml: 3 } }>Hello from left header (VIP Dashboard needs)</p>
        </Drawer>
        <Drawer trigger={ <Button>Right Header</Button> } variant="left-header" label="Dialog">
            <p sx={ { ml: 3 } }>Hello from right header (VIP Dashboard needs)</p>
        </Drawer>
    </>
);

const ByParts = () => (
    <>
        <Root>
            <Trigger>
                <Button>Open </Button>
            </Trigger>
            <Content dimensions={ { width: 320 } } label="My XYZ Dialog">
                <p sx={ { ml: 3 } }>Hello from default</p>
            </Content>
        </Root>
    </>
);

import { FilterDropdown } from "@automattic/vip-design-system";

const Primary = () => <FilterDropdown
    label="Filter:"
    filters={{
        all: { value: 'all', label: 'All' },
        active: { value: 'active', label: 'Active' },
        inactive: { value: 'inactive', label: 'Inactive' },
    }}
    defaultValue="all" />;

const Default = () => (
    <>
        <FilterDropdown
            className="vip-plugins-filter-dropdown"
            label="Filter:"
            filters={ FILTER_OPTIONS }
            onSelect={ () => {} }
            defaultValue={ FILTER_OPTIONS.all.value }
        />
    </>
);

import { Flex } from "@automattic/vip-design-system";

const Default = () => <Flex>Hello</Flex>;

import { Grid } from "@automattic/vip-design-system";

const Default = () => <Grid>Hello</Grid>;

import { Box, Heading } from "@automattic/vip-design-system";

const Primary = () => <Heading variant="h1">Your Applications</Heading>;

const Default = () => (
    <Box>
        <Heading variant="h1">Your Applications</Heading>
        <Heading variant="h2">Heading Two</Heading>
        <Heading variant="h3">Heading Three</Heading>
        <Heading variant="h4">Heading Four</Heading>
        <Heading variant="h5">Heading Five</Heading>

        <Heading variant="h3" as="h1">
            Heading One with Heading Three Styles
        </Heading>
        <Heading as="p" sx={ { variant: 'text.caps' } }>
            Paragraph with Caps Styles
        </Heading>
        <Heading as="h3" sx={ { variant: 'text.caps' } }>
            Heading Three with Caps Styles
        </Heading>
    </Box>
);

import { Hr } from "@automattic/vip-design-system";

const Primary = () => <Hr />;

const Default = () => (
    <>
        Horizontal Line:
        <Hr />
    </>
);

import { Label } from "@automattic/vip-design-system";

const Default = () => <Label>Label text</Label>;

const Required = () => <Label required>Label text</Label>;

import { Flex, Link } from "@automattic/vip-design-system";

const Default = () => <Link href="#!">Hello</Link>;

const ButtonVariants = () => (
    <Flex sx={ { gap: 2 } }>
        { buttonTypes.map( ( variant, index ) => (
            <Link key={ index } href="#!" variant={ variant }>
                Hello
            </Link>
        ) ) }
    </Flex>
);

import { AiOutlineLock } from "react-icons/ai";
import {
    BiBell,
    BiBulb,
    BiCodeAlt,
    BiData,
    BiGridAlt,
    BiHistory,
    BiTachometer,
    BiWindows,
} from "react-icons/bi";
import { Flex, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, Nav, NavItem } from "@automattic/vip-design-system";
import { MdOutlinePhotoLibrary } from "react-icons/md";

const Primary = () => (
    <MobileMenuWrapper>
        <MobileMenuTrigger label="Menu" variant="primary" display={ [ 'flex', 'flex', 'flex' ] } />
        <MobileMenu>
            <Flex sx={ { gap: 3, px: 5, py: 3, flexDirection: 'column' } }>
                <Nav.Menu label="Nav Menu">
                    <NavItem.Menu href="https://wordpress.com" as={ CustomLink }>
                        Overview
                    </NavItem.Menu>
                    <NavItem.Menu href="https://newrelic.com/" as={ CustomLink }>
                        New Relic
                    </NavItem.Menu>
                </Nav.Menu>
            </Flex>
        </MobileMenu>
    </MobileMenuWrapper>
);

const MobileMenuContent = () => (
	<MobileMenuWrapper>
		<MobileMenuTrigger label="Menu" variant="primary" display={ [ 'flex', 'flex', 'flex' ] } />
		<MobileMenu
			toolbarItems={
				<>
					<NavItem.MenuInverse href="/apps" active as={ CustomLink }>
						My Applications
					</NavItem.MenuInverse>

					<NavItem.MenuInverse href="/orgs" as={ CustomLink }>
						My Organizations
					</NavItem.MenuInverse>
				</>
			}
		>
			<Flex
				sx={ {
					gap: 3,
					px: 5,
					py: 0,
					flexDirection: 'column',
				} }
			>
				<Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
					<NavItem.Menu
						href="https://wordpress.com"
						renderIcon={ size => <BiGridAlt size={ size } /> }
						as={ CustomLink }
					>
						Overview
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <BiWindows size={ size } /> }
					>
						Network Sites
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <AiOutlineLock size={ size } /> }
					>
						Domains & TLS
					</NavItem.Menu>

					<NavItem.MenuGroup active label="Logs" renderIcon={ size => <BiHistory size={ size } /> }>
						<NavItem.Menu as={ CustomLink } href="https://google.com/">
							Audit
						</NavItem.Menu>
						<NavItem.Menu active as={ CustomLink } href="https://wpvip.com/">
							Runtime
						</NavItem.Menu>
						<NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
							Slow Query
						</NavItem.Menu>
					</NavItem.MenuGroup>

					<NavItem.MenuGroup
						label="Performance"
						renderIcon={ size => <BiTachometer size={ size } /> }
					>
						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
							Metrics
						</NavItem.Menu>
						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
							Monitor
						</NavItem.Menu>
						<NavItem.Menu as={ CustomLink } href="https://random-website.com/">
							Cache
						</NavItem.Menu>
					</NavItem.MenuGroup>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <BiCodeAlt size={ size } /> }
					>
						Code [v]
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <BiData size={ size } /> }
					>
						Database [v]
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
					>
						Media [v]
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <BiBell size={ size } /> }
					>
						Notifications
					</NavItem.Menu>
					<NavItem.Menu
						as={ CustomLink }
						href="https://random-website.com/"
						renderIcon={ size => <BiBulb size={ size } /> }
					>
						Features
					</NavItem.Menu>
				</Nav.Menu>
			</Flex>
		</MobileMenu>
	</MobileMenuWrapper>
);

const MobileMenuExample = () => <MobileMenuContent />;

const Default = () => <MobileMenuContent />;

import { AiOutlineLock } from "react-icons/ai";
import {
    BiBell,
    BiBulb,
    BiCodeAlt,
    BiData,
    BiGridAlt,
    BiHistory,
    BiTachometer,
    BiWindows,
} from "react-icons/bi";
import { MdOutlinePhotoLibrary } from "react-icons/md";
import { Nav, NavItem } from "@automattic/vip-design-system";

const Primary = () => (
    <Nav.Primary label="Nav Primary">
        <NavItem.Primary active as={ CustomLink } href="https://random-website.com/">
            PHP
        </NavItem.Primary>
        <NavItem.Primary as={ CustomLink } href="https://wordpress.com">
            WordPress
        </NavItem.Primary>
        <NavItem.Primary as={ CustomLink } href="https://newrelic.com/">
            New Relic
        </NavItem.Primary>
    </Nav.Primary>
);

const Default = () => (
    <>
        <p>
            <strong>Variant: Primary</strong>
        </p>
        <Nav.Primary sx={ { mb: 4 } } label="Nav Primary">
            <NavItem.Primary active as={ CustomLink } href="https://random-website.com/">
                PHP
            </NavItem.Primary>
            <NavItem.Primary as={ CustomLink } href="https://wordpress.com">
                WordPress
            </NavItem.Primary>
            <NavItem.Primary as={ CustomLink } href="https://newrelic.com/">
                New Relic
            </NavItem.Primary>
            <NavItem.Primary disabled as={ CustomLink } href="https://google.com/">
                Not accessible
            </NavItem.Primary>
        </Nav.Primary>
    </>
);

const Tab = () => (
    <>
        <p>
            <strong>Variant: Tab</strong>
        </p>
        <Nav.Tab sx={ { mb: 4 } } label="Nav Tab">
            <NavItem.Tab as={ CustomLink } href="#!">
                PHP
            </NavItem.Tab>
            <NavItem.Tab as={ CustomLink } href="#2!">
                WordPress
            </NavItem.Tab>
            <NavItem.Tab active as={ CustomLink } href="#3!">
                New Relic
            </NavItem.Tab>
            <NavItem.Tab as={ CustomLink } href="#4!">
                Datadog
            </NavItem.Tab>
            <NavItem.Tab as={ CustomLink } href="#4!">
                OnePlus
            </NavItem.Tab>
            <NavItem.Tab as={ CustomLink } href="#5!">
                Rollbar
            </NavItem.Tab>
            <NavItem.Tab disabled as={ CustomLink } href="#6!">
                Not accessible
            </NavItem.Tab>
        </Nav.Tab>
    </>
);

const Menu = () => (
    <>
        <p>
            <strong>Variant: Menu</strong>. This menu takes full width by default. You can put it in a
            container with constrained width..
        </p>

        <Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
            <NavItem.Menu
                href="https://wordpress.com"
                renderIcon={ size => <BiGridAlt size={ size } /> }
                as={ CustomLink }
            >
                Overview
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <BiWindows size={ size } /> }
            >
                Network Sites
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <AiOutlineLock size={ size } /> }
            >
                Domains & TLS
            </NavItem.Menu>

            <NavItem.MenuGroup
                active
                activeChildren
                label="Logs"
                renderIcon={ size => <BiHistory size={ size } /> }
            >
                <NavItem.Menu active as={ CustomLink } href="https://google.com/">
                    Audit
                </NavItem.Menu>
                <NavItem.Menu as={ CustomLink } href="https://wpvip.com/">
                    Runtime
                </NavItem.Menu>
                <NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
                    Slow Query
                </NavItem.Menu>
            </NavItem.MenuGroup>

            <NavItem.MenuGroup
                label="Performance"
                renderIcon={ size => <BiTachometer size={ size } /> }
            >
                <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
                    Metrics
                </NavItem.Menu>
                <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
                    Monitor
                </NavItem.Menu>
                <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
                    Cache
                </NavItem.Menu>
            </NavItem.MenuGroup>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <BiCodeAlt size={ size } /> }
            >
                Code [v]
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <BiData size={ size } /> }
            >
                Database [v]
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
            >
                Media [v]
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <BiBell size={ size } /> }
            >
                Notifications
            </NavItem.Menu>
            <NavItem.Menu
                as={ CustomLink }
                href="https://random-website.com/"
                renderIcon={ size => <BiBulb size={ size } /> }
            >
                Features
            </NavItem.Menu>
        </Nav.Menu>
    </>
);

const MenuInverse = () => (
    <>
        <p>
            <strong>Variant: Menu</strong>. This menu takes full width by default. You can put it in a
            container with constrained width..
        </p>

        <Nav.Toolbar label="Main" orientation="vertical">
            <NavItem.MenuInverse active href="https://googles.com" as={ CustomLink }>
                My Applications
            </NavItem.MenuInverse>
            { /* Example below if you have Next.js <Link /> */ }
            <NavItem.MenuInverse href="https://google.com" as={ CustomLink }>
                Custom Link
            </NavItem.MenuInverse>
        </Nav.Toolbar>
    </>
);

import { Button, Input, Label, Close, Root, Text } from "@automattic/vip-design-system";

const Default = () => <>
    <Text sx={ { fontSize: 3, mb: 3 } }>Regular Dialog where the title and description are built-in and the content is provided by
                        the user.
                    </Text>
    <NewDialog.Root trigger={<Button>Trigger Dialog</Button>} />
</>;

const HiddenHeadings = () => <>
    <Text sx={ { fontSize: 3, mb: 3 } }>Title and description are hidden, but still announced using a screen reader. Activate
                        VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the
                        dialog content.
                    </Text>
    <NewDialog.Root
        trigger={<Button>Trigger Dialog</Button>}
        title="Custom dialog title"
        showHeading={false}
        content={(<div>
            <h3>My Custom Content</h3>
            <form>
                <Label htmlFor="username">User name</Label>
                <Input type="text" name="username" id="username" />
                <Button type="submit">Submit</Button>
            </form>
            <h3>Continue here</h3>
            <p>This is an example.</p>
        </div>)} />
</>;

const CustomStyling = () => <>
    <Text sx={ { fontSize: 3, mb: 3 } }>Custom Styling on Dialog Content</Text>
    <NewDialog.Root
        trigger={<Button>Trigger Dialog</Button>}
        title="Custom dialog title"
        style={{
			background: theme => `${ theme.colors.primary }`,
			padding: 5,
			borderRadius: 20,
			h2: { fontSize: 4, color: theme => `${ theme.colors.text }` },
			h3: { fontSize: 3, color: theme => `${ theme.colors.heading }` },
			p: { color: 'white' },
			'button[type="button"]:focus-visible': { outlineColor: 'white', color: 'white' },
		}}
        content={(<div>
            <h3>This is Read because it is Custom</h3>
            <p>This Dialog is styled using the `sx` property.</p>
        </div>)} />
</>;

const CustomClose = () => <>
    <Text sx={ { fontSize: 3, mb: 3 } }>This example shows how you can create a custom Close trigger to your dialog
                    </Text>
    <NewDialog.Root
        trigger={<Button>Trigger Dialog</Button>}
        content={(<div>
            <NewDialog.Close>
                <Button>Close here instead</Button>
            </NewDialog.Close>
        </div>)} />
</>;

const CustomStateManagement = () => {
    const [ open, setOpen ] = useState( false );
    return (
        <>
            <Text sx={ { fontSize: 3, mb: 3 } }>
                This example shows how you can create a custom state management. To achieve accessibility,
                you need to control the <strong>open</strong> state, but also keep consistency using the{ ' ' }
                <strong>onOpenChange</strong> attribute.
            </Text>

            <NewDialog.Root
                { ...defaultProps }
                open={ open }
                onOpenChange={ status => {
                    // eslint-disable-next-line no-console
                    console.log( 'New status changed', status );

                    setOpen( ! open );
                } }
                trigger={ <Button>Trigger Dialog</Button> }
                content={
                    <div sx={ { mt: 2 } }>
                        <NewDialog.Close>
                            <Button>Close here instead</Button>
                        </NewDialog.Close>
                    </div>
                }
            />
        </>
    );
};

const CustomOnClose = () => <>
    <Text sx={ { fontSize: 3, mb: 3 } }>This example shows how you can use the content as a function to use the onClose method (same
                        behavior as the original Dialog component).
                    </Text>
    <NewDialog.Root
        trigger={<Button>Trigger Dialog</Button>}
        content={ ( { onClose } ) => (
            <div sx={ { mt: 2 } }>
                <Button onClick={ onClose }>Close here instead</Button>
            </div>
        ) } />
</>;

import { Button, Grid, Heading, NewTooltip, Text } from "@automattic/vip-design-system";

const Primary = () => <NewTooltip content="Tooltip text" position="top" arrow>
    <Button>Hover me</Button>
</NewTooltip>;

const Basic = () => (
    <>
        <Heading variant="h2">Basic Usage</Heading>
        <Text sx={ { mb: 4 } }>A simple tooltip with plain text content on each position.</Text>
        <Grid
            columns={ [ 'auto auto' ] }
            gap={ '100px 160px' }
            sx={ { justifyContent: 'center', pt: '50px' } }
        >
            <NewTooltip content="At the top" position="top">
                <Button>Top</Button>
            </NewTooltip>

            <NewTooltip content="At the bottom" position="bottom">
                <Button>Bottom</Button>
            </NewTooltip>

            <NewTooltip content="On the left" position="left">
                <Button>Left</Button>
            </NewTooltip>

            <NewTooltip content="On the right" position="right">
                <Button>Right</Button>
            </NewTooltip>
        </Grid>
    </>
);

const WithArrow = () => (
    <>
        <Heading variant="h2">With Arrow</Heading>
        <Text sx={ { mb: 4 } }>Enable the arrow indicator pointing to the trigger element.</Text>
        <Grid
            columns={ [ 'auto auto' ] }
            gap={ '100px 160px' }
            sx={ { justifyContent: 'center', pt: '50px' } }
        >
            <NewTooltip content="At the top with arrow" position="top" arrow>
                <Button>Top</Button>
            </NewTooltip>

            <NewTooltip content="At the bottom with arrow" position="bottom" arrow>
                <Button>Bottom</Button>
            </NewTooltip>

            <NewTooltip content="On the left with arrow" position="left" arrow>
                <Button>Left</Button>
            </NewTooltip>

            <NewTooltip content="On the right with arrow" position="right" arrow>
                <Button>Right</Button>
            </NewTooltip>
        </Grid>
    </>
);

const RichContent = () => (
    <>
        <Heading variant="h2">Rich Content</Heading>
        <Text sx={ { mb: 4 } }>
            NewTooltip supports ReactNode content, including HTML elements like{ ' ' }
            <code>&lt;strong&gt;</code> and <code>&lt;br /&gt;</code>.
        </Text>
        <Grid
            columns={ [ 'auto auto' ] }
            gap={ '100px 160px' }
            sx={ { justifyContent: 'center', pt: '50px' } }
        >
            <NewTooltip
                content={
                    <>
                        Press <strong>Enter</strong>
                        <br />
                        to confirm
                    </>
                }
                arrow
            >
                <Button>With bold and line break</Button>
            </NewTooltip>

            <NewTooltip
                content={
                    <>
                        <strong>Tip:</strong> Use keyboard shortcuts for faster navigation
                    </>
                }
                arrow
            >
                <Button>With bold label</Button>
            </NewTooltip>
        </Grid>
    </>
);

const AllPositions = () => (
    <>
        <Heading variant="h2">All Positions</Heading>
        <Text sx={ { mb: 4 } }>All four positions with and without arrows.</Text>
        <Grid
            columns={ [ 'auto auto' ] }
            gap={ '100px 160px' }
            sx={ { justifyContent: 'center', pt: '50px' } }
        >
            <NewTooltip content="At the top" position="top">
                <Button>Top</Button>
            </NewTooltip>

            <NewTooltip content="At the top with arrow" position="top" arrow>
                <Button>Top with Arrow</Button>
            </NewTooltip>

            <NewTooltip content="At the bottom" position="bottom">
                <Button>Bottom</Button>
            </NewTooltip>

            <NewTooltip content="At the bottom with arrow" position="bottom" arrow>
                <Button>Bottom with Arrow</Button>
            </NewTooltip>

            <NewTooltip content="On the left" position="left">
                <Button>Left</Button>
            </NewTooltip>

            <NewTooltip content="On the left with arrow" position="left" arrow>
                <Button>Left with Arrow</Button>
            </NewTooltip>

            <NewTooltip content="On the right" position="right">
                <Button>Right</Button>
            </NewTooltip>

            <NewTooltip content="On the right with arrow" position="right" arrow>
                <Button>Right with Arrow</Button>
            </NewTooltip>
        </Grid>
    </>
);

import { Heading, Link, Notice } from "@automattic/vip-design-system";
import React from "react";

const Primary = () => <Notice title="Notice title" variant="info" inline={false}>This is an informational notice message.</Notice>;

const Default = () => (
    <React.Fragment>
        <Notice
            variant="alert"
            headingVariant="h2"
            sx={ { mb: 4 } }
            title="Your site is ready to launch!"
        >
            It looks like you&lsquo;re ready to share your{ ' ' }
            <Link href="https://google.com/">application with the world.</Link>
        </Notice>

        <Notice variant="success" sx={ { mb: 4 } }>
            It looks like you&lsquo;re ready to share your{ ' ' }
            <Link href="https://google.com/">application with the world.</Link>
        </Notice>

        <Notice sx={ { mb: 4 } } title="This notice has only the title prop passed">
            It looks like you&lsquo;re ready to share your{ ' ' }
            <Link href="https://google.com/">application with the world.</Link>
        </Notice>

        <Notice variant="success" sx={ { mb: 4 } } title="You made it!">
            It looks like you&lsquo;re ready to share your{ ' ' }
            <Link href="https://google.com/">application with the world.</Link>
        </Notice>

        <Notice variant="info" sx={ { mb: 4 } } title="Please read this first">
            This notice has a title and children and{ ' ' }
            <Link href="/?path=/story/avatar--default">A link to Avatar</Link>
        </Notice>

        <Notice variant="alert" sx={ { mb: 4 } } title="Please read this first">
            This notice has a title and children and{ ' ' }
            <Link href="/?path=/story/avatar--default">A link to Avatar</Link>
        </Notice>

        <Notice
            variant="alert"
            sx={ { mb: 2 } }
            title="There are errors in your form"
            headingVariant="h2"
        >
            <ul sx={ { m: 0, pl: 3 } }>
                <li>
                    <Link href="#name">Please enter your name.</Link>
                </li>
                <li>
                    <Link href="#email">Please enter your email address.</Link>
                </li>
                <li>
                    <Link href="#terms">Please agree to the terms.</Link>
                </li>
            </ul>
        </Notice>

        <Notice variant="alert" sx={ { mb: 2 } }>
            <>
                <Heading variant={ 'h4' } sx={ { fontSize: 2 } }>
                    Alternative way of printing errors
                </Heading>

                <ul sx={ { m: 0, pl: 3 } }>
                    <li>
                        <Link href="#name">Please enter your name.</Link>
                    </li>
                    <li>
                        <Link href="#email">Please enter your email address.</Link>
                    </li>
                </ul>
            </>
        </Notice>

        <Notice variant="alert" sx={ { mb: 4 } }>
            Bucket names in Amazon S3 are globally unique, external link ↗. To ensure that shipped data
            is delivered to the correct location, the Bucket Name and Bucket Region entered below must
            match the details used to set up your S3 bucket, external link ↗.
            <Link href="/?path=/story/avatar--default">A link to Avatar</Link>
        </Notice>

        <Notice variant="success" sx={ { mb: 4 } } title="Collapsible Notice" collapsible>
            Bucket names in Amazon S3 are globally unique.{ ' ' }
            <Link href="/?path=/story/avatar--default">A link to Avatar</Link>
        </Notice>

        <Notice
            variant="info"
            sx={ { mb: 4 } }
            title="Collapsible Notice Auto-Expanded"
            collapsible
            defaultOpen
        >
            Bucket names in Amazon S3 are globally unique.
        </Notice>
    </React.Fragment>
);

import { Badge, Flex, Pagination, Text } from "@automattic/vip-design-system";

const Primary = () => <Pagination
    currentPage={1}
    totalItems={200}
    itemsPerPage={20}
    displayItemsPerPageSelector={false} />;

const Default = () => <PaginationWithState />;

const Compact = () => <PaginationWithState compact />;

const FewPages = () => <PaginationWithState totalItems={ 200 } initialItemsPerPage={ 10 } />;

const MiddlePage = () => (
    <PaginationWithState totalItems={ 500 } initialItemsPerPage={ 10 } initialPage={ 25 } />
);

const CustomPageSizes = () => (
    <PaginationWithState
        totalItems={ 1000 }
        initialItemsPerPage={ 25 }
        pageSizeOptions={ [ 25, 50, 100, 250 ] }
    />
);

const WithItemsPerPageSelector = () => (
    <PaginationWithState
        totalItems={ 100 }
        initialItemsPerPage={ 25 }
        displayItemsPerPageSelector={ true }
    />
);

const OpenEndedCursorBased = () => <CursorBasedPaginationWithState />;

const OpenEnded = () => <OpenEndedPaginationWithState />;

const OpenEndedCompact = () => <OpenEndedPaginationWithState compact />;

const OpenEndedLastPage = () => <OpenEndedPaginationWithState hasNextPage={ false } initialPage={ 15 } />;

import { Progress } from "@automattic/vip-design-system";

const Default = () => {
    const [ counter, setCounter ] = React.useState( args.activeStep );
    const steps = args.steps;

    useEffect( () => {
        setTimeout( () => {
            if ( counter < steps.length - 1 ) {
                setCounter( counter + 1 );
            }
        }, 2000 );
    }, [ counter, setCounter ] );

    return (
        <Progress
            forLabel="Update site progress"
            steps={[ 'Downloading Data', 'Importing Data...', 'Finalizing', 'Done' ]}
            activeStep={ counter } />
    );
};

import { Badge, Flex, SimplePagination, Text } from "@automattic/vip-design-system";

const Default = () => <SimplePaginationWithState />;

const FirstPage = () => <SimplePaginationWithState />;

const LastPage = () => <SimplePaginationWithState initialIndex={ pageTokens.length - 1 } />;

const WithPageSize = () => <SimplePaginationWithState displayItemsPerPageSelector />;

import { Skeleton } from "@automattic/vip-design-system";

const Default = () => <Skeleton />;

const Grouped = () => <Skeleton times={3} />;

const Circle = () => <Skeleton variant="circle" width="50px" height="50px" />;

const Text = () => <Skeleton variant="text" />;

import React from "react";
import { Snackbar } from "@automattic/vip-design-system";

const Primary = () => <Snackbar
    title="Snackbar title"
    variant="info"
    loading={false}
    isDismissable={false}
    ctaText="View">This is an informational snackbar message.</Snackbar>;

const Default = () => {
    const [ visible, setVisible ] = useState( true );
    return (
        <React.Fragment>
            { visible && (
                <Snackbar
                    variant="error"
                    sx={ { mb: 4 } }
                    ctaText="Resolve"
                    ctaOnClick={ () => {
                        setVisible( false );
                    } }
                >
                    Error message.
                </Snackbar>
            ) }

            <Snackbar
                variant="warning"
                sx={ { mb: 4 } }
                ctaText="View"
                ctaOnClick={ () => {
                    setVisible( false );
                } }
            >
                Warning message.
            </Snackbar>

            <Snackbar
                variant="info"
                sx={ { mb: 4 } }
                ctaText="View"
                ctaOnClick={ () => {
                    setVisible( false );
                } }
            >
                Tip or information.
            </Snackbar>

            <Snackbar
                variant="success"
                sx={ { mb: 4 } }
                ctaText="Preview"
                ctaOnClick={ () => {
                    setVisible( false );
                } }
            >
                Success message.
            </Snackbar>

            <Snackbar
                variant="success"
                sx={ { mb: 4 } }
                ctaText="Preview"
                ctaOnClick={ () => {
                    setVisible( false );
                } }
            >
                Success message with a long text to test the layout. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </Snackbar>

            <Snackbar
                loading
                variant="warning"
                sx={ { mb: 4 } }
                title="Operation in progress..."
                ctaText="Pause"
                ctaOnClick={ () => {
                    setVisible( false );
                } }
            >
                Check back again in a few seconds.
            </Snackbar>

            <Snackbar variant="system" sx={ { mb: 4 } }>
                System message.
            </Snackbar>
        </React.Fragment>
    );
};

import { Spinner } from "@automattic/vip-design-system";

const Default = () => <Spinner />;

import { Flex, Table, TableCell, TableRow, Text } from "@automattic/vip-design-system";

const Primary = () => <Table caption="Example Table">
    <thead>
        <TableRow head cells={ [ 'Name', 'Value', 'Status' ] } />
    </thead>
    <tbody>
        <TableRow cells={ [ 'Item A', '100', 'Active' ] } />
        <TableRow cells={ [ 'Item B', '200', 'Inactive' ] } />
    </tbody>
</Table>;

const Default = () => <ExampleTable caption="Example Table" />;

const WithHorizontalScroll = () => (
    <div sx={ { maxWidth: '800px' } }>
        <ExampleTable caption="Horizontal Scroll Example" />
    </div>
);

import { Button, Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from "@automattic/vip-design-system";

const Default = () => <Tabs defaultValue="all">
    <TabsList title="See all the content">
        <TabsTrigger value="all">All (5)</TabsTrigger>
        <TabsTrigger value="live">Live (2)</TabsTrigger>
        <TabsTrigger value="dev">In Development (3)</TabsTrigger>
        <TabsTrigger value="protect" disabled>Not accessible
                            </TabsTrigger>
    </TabsList>
    <TabsContent value="all">
        <Text>All content <Link href="https://google.com">https://google.com</Link>
        </Text>
    </TabsContent>
    <TabsContent value="live">Live content</TabsContent>
    <TabsContent value="dev">
        <Text>In Development content <Button variant="secondary">Hey I am a button</Button>{ ' ' }
        </Text>
    </TabsContent>
</Tabs>;

const SetActiveTab = () => {
    const [ activeTab, setActiveTab ] = React.useState( 'all' );

    return (
        <Tabs value={ activeTab } onValueChange={ val => setActiveTab( val ) }>
            <TabsList title="See all the content">
                <TabsTrigger value="all">All (5)</TabsTrigger>
                <TabsTrigger value="live">Live (2)</TabsTrigger>
                <TabsTrigger value="dev">In Development (3)</TabsTrigger>
                <TabsTrigger value="protect" disabled={ true }>
                    Not accessible
                </TabsTrigger>
            </TabsList>
            <TabsContent value="all">
                <Text>
                    <button type="button" onClick={ () => setActiveTab( 'live' ) }>
                        Switch to live tab
                    </button>
                </Text>
            </TabsContent>
            <TabsContent value="live">Live content</TabsContent>
            <TabsContent value="dev">
                <Text>
                    In Development content <button type="button">Hey I am a button</button>{ ' ' }
                </Text>
            </TabsContent>
        </Tabs>
    );
};

import { Text } from "@automattic/vip-design-system";

const Primary = () => <Text>Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.</Text>;

const Default = () => (
    <>
        <Text>
            Apparently we had reached a great height in the atmosphere, for the sky was a dead black,
            and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea
            to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the
            car seemed to float in the middle of an immense dark sphere, whose upper half was strewn
            with silver.{ ' ' }
        </Text>

        <Text variant="default">Body Default</Text>
        <Text variant="small">Body Small</Text>
        <Text variant="large">Body Large</Text>
        <Text variant="mono">Body Mono</Text>
        <Text variant="mono-bold">Body Mono Bold</Text>

        <Text sx={ { color: 'texts.accent' } }>Text Accent</Text>
        <Text sx={ { color: 'texts.helper' } }>Text Helper</Text>

        <Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
        <Text sx={ { color: 'texts.helper', fontWeight: 'regular' } }>Text Helper</Text>
        <Text sx={ { color: 'texts.helper', fontWeight: 'medium' } }>Text Helper</Text>
        <Text sx={ { color: 'texts.helper', fontWeight: 'bold' } }>Text Helper</Text>

        <Text sx={ { color: 'texts.secondary' } }>Text Secondary</Text>

        <Text sx={ { color: 'texts.primary' } }>Text Primary</Text>

        <Text sx={ { color: 'texts.placeholder' } }>Text placeholder</Text>

        <Text sx={ { color: 'texts.disabled' } }>Text disabled</Text>

        <div sx={ { bg: 'layer.inverse' } }>
            <Text sx={ { color: 'texts.inverse' } }>Text inverse</Text>
        </div>
    </>
);

import { Label, Toggle } from "@automattic/vip-design-system";

const Primary = () => <Toggle
    name="toggle-primary"
    variant="primary"
    disabled={false}
    defaultChecked
    aria-label="Feature flag" />;

const Default = args => (
    <form>
        <Toggle checked={ args.checked } defaultChecked aria-label="Feature flag" />

        <br />
        <br />

        <Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />

        <br />
        <br />

        <Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
    </form>
);

const WithLabel = args => (
    <form>
        <Label htmlFor="custom-label-input">Custom Label here</Label>

        <Toggle
            id="custom-label-input"
            defaultChecked
            checked={ args.checked }
            aria-label="Feature flag"
        />
    </form>
);

const CustomStyling = args => (
    <form>
        <Label htmlFor="custom-label-input">
            Custom Styling.{ ' ' }
            <strong>We currently only recommend using Primary, Disabled, and Success variants.</strong>
        </Label>

        <div>
            <Toggle
                id="custom-label-input"
                defaultChecked
                checked={ args.checked }
                aria-label="Feature flag"
                variant="success"
            />{ ' ' }
            <h2>Not recommended</h2>
            <Toggle
                id="custom-label-input-error"
                defaultChecked
                checked={ args.checked }
                aria-label="Error flag"
                variant="error"
            />{ ' ' }
            <Toggle
                id="custom-label-input-warning"
                defaultChecked
                checked={ args.checked }
                aria-label="Warning flag"
                variant="warning"
            />{ ' ' }
            <Toggle
                id="custom-label-input-info"
                defaultChecked
                checked={ args.checked }
                aria-label="info flag"
                variant="info"
            />
        </div>
    </form>
);

import { Box, Button, Grid, Heading, Link, Text, Tooltip } from "@automattic/vip-design-system";

const Basic = () => (
    <>
        <Heading variant="h2">Basic Usage</Heading>
        <Text>
            Pass a trigger and title, the trigger component will be cloned and injected with a{ ' ' }
            <code>[vip-tooltip]</code> HTML attribute.
        </Text>
        <Grid
            columns={ [ 'auto auto' ] }
            gap={ '100px 160px' }
            sx={ { justifyContent: 'center', pt: '50px' } }
        >
            <Tooltip trigger={ <Button>Top</Button> } title="At the top" position="top" />

            <Tooltip
                trigger={ <Button>Top with Arrow</Button> }
                title="At the top with arrow"
                position="top"
                arrow={ true }
            />

            <Tooltip trigger={ <Button>Bottom</Button> } title="At the Bottom" position="bottom" />

            <Tooltip
                trigger={ <Button>Bottom with Arrow</Button> }
                title="At the Bottom with arrow"
                position="bottom"
                arrow={ true }
            />

            <Tooltip trigger={ <Button>Left</Button> } title="On the Left" position="left" />

            <Tooltip
                trigger={ <Button>Left with Arrow</Button> }
                title="On the Left with arrow"
                position="left"
                arrow={ true }
            />

            <Tooltip trigger={ <Button>Right</Button> } title="On the Right" position="right" />

            <Tooltip
                trigger={ <Button>Right with Arrow</Button> }
                title="On the Right with arrow"
                position="right"
                arrow={ true }
            />

            <Tooltip
                trigger={
                    <Button disabled={ true } preferAriaDisabled={ true }>
                        Disabled (use focus)
                    </Button>
                }
                title="Disabled trigger"
                position="top"
            />

            <Tooltip
                trigger={
                    <Button disabled={ true } preferAriaDisabled={ true }>
                        Disabled with Arrow (use focus)
                    </Button>
                }
                title="Disabled trigger with arrow"
                position="top"
                arrow={ true }
            />
        </Grid>
    </>
);

const Container = () => (
    <div>
        <Heading variant="h2">Container Usage</Heading>

        <Text>
            You can also wrap a component with the <code>Tooltip</code> component. To use tooltips you
            can simply pass <code>data-vip-tooltip</code> as an HTML attribute to your component.
        </Text>

        <Box sx={ { backgroundColor: 'red' } }>
            <Tooltip>
                <br />

                <Button data-vip-tooltip-position="top" data-vip-tooltip="Test test" sx={ { ml: 3 } }>
                    This is another way
                </Button>

                <br />
                <br />
                <br />

                <Link
                    href="http://google.com"
                    data-vip-tooltip-position="right"
                    data-vip-tooltip-arrow="true"
                    data-vip-tooltip="Lorem Ipsum has been the industry's standard dummy text ever since the 1500"
                    sx={ { ml: 3 } }
                >
                    Use with links too
                </Link>
            </Tooltip>
        </Box>
    </div>
);

import { Box, Button, Checkbox, Flex, Input, Label, Text, Wizard } from "@automattic/vip-design-system";
import { BsPencil } from "react-icons/bs";
import React from "react";

const Primary = () => <Wizard
    activeStep={0}
    completed={[]}
    showStepText
    summaryAs="dl"
    steps={[
        {
            title: 'Step One',
            titleVariant: 'h3',
            subTitle: 'First step description.',
            children: 'Step one content',
        },
        {
            title: 'Step Two',
            titleVariant: 'h3',
            subTitle: 'Second step description.',
        },
        {
            title: 'Step Three',
            titleVariant: 'h3',
        },
    ]} />;

const WizardTitleLevels = () => <Wizard
    activeStep={0}
    completed={[]}
    titleVariant="h3"
    titleAs="h2"
    steps={[
        {
            title: 'Step One',
            subTitle: 'Rendered as an h2 element with h3 styling.',
            children: 'Step one content',
        },
        {
            title: 'Step Two',
            subTitle: 'Also an h2 element, inheriting the Wizard-level titleAs.',
        },
        {
            title: 'Step Three (overrides titleAs)',
            titleAs: 'h4',
        },
    ]} />;

const Error = () => {
    const steps: WizardStepProps[] = [
        {
            title: 'Step One',
            titleVariant: 'h3',
            children: (
                <Box>
                    <Text sx={ { display: 'block', mb: 3, color: 'texts.secondary' } }>
                        Something went wrong. Please try again.
                    </Text>
                    <Button>Retry</Button>
                </Box>
            ),
        },
        {
            title: 'Step Two',
            titleVariant: 'h3',
        },
        {
            title: 'Step Three',
            titleVariant: 'h3',
        },
    ];
    return (
        <Box mt={ 4 }>
            <Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } />
        </Box>
    );
};

const Default = () => {
    const steps: WizardStepProps[] = [
        {
            title: 'Choose Domain',
            titleVariant: 'h3',
            subTitle: 'You can bring a domain name you already own, or buy a new one.',
            children: (
                <Box>
                    <Label>Domain</Label>
                    <Input placeholder="yourdomain.com" />
                    <Button sx={ { mt: 3 } }>Continue</Button>
                </Box>
            ),
        },
        {
            title: 'Configure DNS',
            titleVariant: 'h3',
            summaryTitle: 'Summary of Configure DNS',
        },
        {
            title: 'Configure Certificate',
            titleVariant: 'h3',
        },
        {
            title: 'Verify Domain',
            titleVariant: 'h3',
        },
    ];
    return (
        <React.Fragment>
            <Box mt={ 4 }>
                <Wizard
                    activeStep={ 0 }
                    steps={ steps }
                    completed={ [ 1 ] }
                    summaryAs="dl"
                    className="vip-wizard-xyz"
                />
            </Box>
        </React.Fragment>
    );
};

const WithTitleAutoFocus = () => {
    const [ activeStep, setActiveStep ] = React.useState( 0 );
    const [ autoFocus, setAutoFocus ] = React.useState( true );
    const steps: WizardStepProps[] = [
        {
            title: 'Choose Domain',
            titleVariant: 'h3',
            summary: [
                {
                    label: 'Demo Label',
                    value: 'Demo value',
                },
            ],
            onChange: () => setActiveStep( 0 ),
            children: (
                <Box>
                    <Label>Domain</Label>
                    <Input placeholder="yourdomain.com" />
                    <Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 1 ) }>
                        Continue
                    </Button>
                </Box>
            ),
        },
        {
            title: 'Configure DNS',
            titleVariant: 'h3',
            onChange: () => setActiveStep( 1 ),
            actionLabel: 'Edit',
            actionDisabled: true,
            actionIcon: <BsPencil />,
            children: (
                <Box>
                    <Label>DNS</Label>
                    <Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 0 ) }>
                        back
                    </Button>
                </Box>
            ),
        },

        {
            title: 'Certificate',
            titleVariant: 'h3',
            summary: [
                {
                    label: 'Certificate status',
                    value: 'Not found',
                },
            ],
            onChange: () => setActiveStep( 2 ),
            children: (
                <Box>
                    <Label>Certificate validation</Label>
                    <Button sx={ { mt: 3 } }>Check certificate</Button>
                </Box>
            ),
        },
    ];
    return (
        <React.Fragment>
            <Box mt={ 4 }>
                <Wizard
                    summaryAs="dl"
                    completed={ [ 0, 1 ] }
                    skipped={ [ 2 ] }
                    activeStep={ activeStep }
                    steps={ steps }
                    titleAutofocus={ autoFocus }
                    className="vip-wizard-xyz"
                />
            </Box>
            <Box mt={ 4 }>
                <Flex sx={ { alignItems: 'center' } }>
                    <Checkbox
                        id="wizard-autofocus"
                        checked={ autoFocus }
                        aria-labelledby="label-check1"
                        onCheckedChange={ e => {
                            setAutoFocus( e === true );
                        } }
                    />
                    <Label sx={ { m: 0, ml: 2 } } htmlFor="wizard-autofocus" id="label-check1">
                        Autofocus enabled?
                    </Label>
                </Flex>
            </Box>
        </React.Fragment>
    );
};

const HideStepText = () => {
    const [ activeStep, setActiveStep ] = React.useState< number | undefined >( undefined );

    const steps: WizardStepProps[] = [
        {
            title: 'Included Logs',
            titleVariant: 'h3',
            subTitle: '',
            children: <Text sx={ { mb: 0 } }>Error Logs</Text>,
            onChange: () => {
                setActiveStep( 0 );
            },
            actionLabel: 'Edit',
            actionIcon: <BsPencil />,
        },
    ];

    return (
        <React.Fragment>
            <Box mt={ 4 }>
                <Wizard
                    showStepText={ false }
                    activeStep={ activeStep }
                    steps={ steps }
                    completed={ [ 0 ] }
                    className="vip-wizard-xyz"
                />
            </Box>
        </React.Fragment>
    );
};