packages/components/src/button/docs/example.jsx - trunk - githubmirror/wp-calypso

packages/components/src/button/docs/example.jsx
174 строки4 KB
Lena Morita
A8C Button: Improve Storybook docs (#99737)
14 фев 2025, 20:41
14 фев 2025, 20:4130d0b1a
import { Button } from '..';
import Card from '../../card';
import Gridicon from '../../gridicon';

function ButtonExample( props ) {
	return props.exampleCode;
}

ButtonExample.displayName = 'Button';

ButtonExample.defaultProps = {
	exampleCode: (
		<Card>
			<div className="docs__design-button-row">
				<Button>Button</Button>
				<Button>
					<Gridicon icon="heart" />
					<span>Icon button</span>
				</Button>
				<Button>
					<Gridicon icon="plugins" />
				</Button>
				<Button disabled>Disabled button</Button>
			</div>
			<div className="docs__design-button-row">
				<Button scary>Scary button</Button>
				<Button scary>
					<Gridicon icon="globe" />
					<span>Scary icon button</span>
				</Button>
				<Button scary>
					<Gridicon icon="pencil" />
				</Button>
				<Button scary disabled>
					Scary disabled button
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button primary>Primary button</Button>
				<Button primary>
					<Gridicon icon="camera" />
					<span>Primary icon button</span>
				</Button>
				<Button primary>
					<Gridicon icon="time" />
				</Button>
				<Button primary disabled>
					Primary disabled button
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button primary scary>
					Primary scary button
				</Button>
				<Button primary scary>
					<Gridicon icon="user-circle" />
					<span>Primary scary icon button</span>
				</Button>
				<Button primary scary>
					<Gridicon icon="cart" />
				</Button>
				<Button primary scary disabled>
					Primary scary disabled button
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button borderless>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
				<Button borderless>
					<Gridicon icon="trash" />
					<span>Trash</span>
				</Button>
				<Button borderless>
					<Gridicon icon="link-break" />
					<span>Disconnect</span>
				</Button>
				<Button borderless>
					<Gridicon icon="trash" />
				</Button>
				<Button borderless disabled>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button borderless primary>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
				<Button borderless primary>
					<Gridicon icon="trash" />
					<span>Trash</span>
				</Button>
				<Button borderless primary>
					<Gridicon icon="link-break" />
					<span>Disconnect</span>
				</Button>
				<Button borderless primary>
					<Gridicon icon="trash" />
				</Button>
				<Button borderless primary disabled>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button borderless scary>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
				<Button borderless scary>
					<Gridicon icon="trash" />
					<span>Trash</span>
				</Button>
				<Button borderless scary>
					<Gridicon icon="link-break" />
					<span>Disconnect</span>
				</Button>
				<Button borderless scary>
					<Gridicon icon="trash" />
				</Button>
				<Button borderless scary disabled>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button compact>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
				<Button compact>
					<Gridicon icon="trash" />
					<span>Trash</span>
				</Button>
				<Button compact>
					<Gridicon icon="link-break" />
					<span>Disconnect</span>
				</Button>
				<Button compact>
					<Gridicon icon="trash" />
				</Button>
				<Button compact disabled>
					<Gridicon icon="cross" />
					<span>Remove</span>
				</Button>
			</div>
			<div className="docs__design-button-row">
				<Button busy>Busy button</Button>
				<Button primary busy>
					<Gridicon icon="time" />
				</Button>
				<Button primary busy>
					Primary busy button
				</Button>
				<Button scary busy>
					Scary busy button
				</Button>
				<Button primary scary busy>
					<Gridicon icon="trash" />
					<span>Primary scary busy button</span>
				</Button>
			</div>

			<div className="docs__design-button-row">
				<Button plain>Plain button</Button>
			</div>
		</Card>
	),
};

export default ButtonExample;