Category: Feedback

import { Notice } from '@wordpress/components';

const Default = ( props ) => {
	return <Notice { ...props } />;
};

const WithCustomSpokenMessage = ( props ) => {
	return <Notice { ...props } />;
};

const WithJSXChildren = ( props ) => {
	return <Notice { ...props } />;
};

const WithActions = ( props ) => {
	return <Notice { ...props } />;
};

const NoticeListSubcomponent = () => {
	const exampleNotices: NoticeListProps[ 'notices' ] = [
		{
			id: 'second-notice',
			content: 'second notice content',
		},
		{
			id: 'first-notice',
			content: 'first notice content',
			actions: [
				{
					label: 'Click me!',
					onClick: () => {},
					variant: 'primary',
				},
				{
					label: 'Or click me instead!',
					onClick: () => {},
				},
				{
					label: 'Or visit a link for more info',
					url: 'https://wordpress.org',
					variant: 'link',
				},
			],
		},
	];
	const [ notices, setNotices ] = useState( exampleNotices );

	const removeNotice = (
		id: NoticeListProps[ 'notices' ][ number ][ 'id' ]
	) => {
		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
	};

	const resetNotices = () => {
		setNotices( exampleNotices );
	};

	return (
		<>
			<NoticeList notices={ notices } onRemove={ removeNotice } />
			<Button
				__next40pxDefaultSize
				variant="primary"
				onClick={ resetNotices }
			>
				Reset Notices
			</Button>
		</>
	);
};

const WithDisabledAction = ( props ) => {
	return <Notice { ...props } />;
};

import { ProgressBar } from '@wordpress/components';

const Default = () => {
    return <ProgressBar />;
};

const WithCustomWidth = () => {
    return <ProgressBar className="custom-progress-bar" />;
};

import { Snackbar } from '@wordpress/components';

const Default = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithActions = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithIcon = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

const WithActionAndExplicitDismiss = ( {
	children,
	...props
} ) => {
	return <Snackbar { ...props }>{ children }</Snackbar>;
};

import { Spinner } from '@wordpress/components';

const Default = () => {
    return <Spinner />;
};

const CustomSize = () => {
    return <Spinner style={{ width: space( 20 ), height: space( 20 ) }} />;
};

import { Badge } from '@wordpress/ui';

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

const High = () => <Badge intent="high" />;

const Medium = () => <Badge intent="medium" />;

const Low = () => <Badge intent="low" />;

const Stable = () => <Badge intent="stable" />;

const Informational = () => <Badge intent="informational" />;

const Draft = () => <Badge intent="draft" />;

const None = () => <Badge intent="none" />;

const AllIntents = ( args ) => (
    <div
        style={ {
            display: 'grid',
            gridTemplateColumns: 'max-content min-content',
            gap: '1rem',
            color: 'var(--wpds-color-fg-content-neutral)',
        } }
    >
        { (
            [
                'high',
                'medium',
                'low',
                'stable',
                'informational',
                'draft',
                'none',
            ] as const
         ).map( ( intent ) => (
            <Fragment key={ intent }>
                <div
                    style={ {
                        paddingInlineEnd: '1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    { intent }
                </div>
                <div
                    style={ {
                        padding: '0.5rem 1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    <Badge { ...args } intent={ intent } />
                </div>
            </Fragment>
        ) ) }
    </div>
);

import { EmptyState } from '@wordpress/ui';

const Default = () => <EmptyState.Root>(<>
        <EmptyState.Icon icon={ search } />
        <EmptyState.Title>No results found</EmptyState.Title>
        <EmptyState.Description>
            Try adjusting your search or filter to find what you&apos;re
            looking for.
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button variant="outline">Clear filters</Button>
            <Button>Add item</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;

const WithCustomVisual = () => <EmptyState.Root>(<>
        <EmptyState.Visual>
            <svg
                width="50"
                height="50"
                viewBox="0 0 50 50"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle cx="25" cy="25" r="25" fill="currentColor" />
            </svg>
        </EmptyState.Visual>
        <EmptyState.Title>All caught up!</EmptyState.Title>
        <EmptyState.Description>
            You&apos;ve completed all your tasks. Great work!
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button>Create new task</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;