@automattic/jetpack-components 0.39.0

package/components/button/stories/index.stories.tsx

@@ -0,0 +1,400 @@
+import * as allIcons from '@wordpress/icons';
+import Col from '../../layout/col';
+import Container from '../../layout/container';
+import Text, { H3 } from '../../text';
+import Button from '../index';
+import styles from './style.module.scss';
+
+const { Icon: WPIcon, ...icons } = allIcons;
+const { check, cloud } = icons;
+
+const disableVariant = {
+	variant: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableDisabled = {
+	disabled: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableIsDestructive = {
+	isDestructive: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableIsLoading = {
+	isLoading: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableIcon = {
+	icon: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableClassName = {
+	className: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+const disableFullWidth = {
+	fullWidth: {
+		table: {
+			disable: true,
+		},
+	},
+};
+
+export default {
+	title: 'JS Packages/Components/Button',
+	component: Button,
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'primary', 'secondary', 'link', 'tertiary' ],
+		},
+		size: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'normal', 'small' ],
+		},
+		weight: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'bold', 'regular' ],
+		},
+		icon: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'none', ...Object.keys( icons ) ],
+		},
+	},
+	parameters: {
+		backgrounds: {
+			default: 'Jetpack Dashboard',
+		},
+	},
+};
+
+const DefaultTemplate = args => {
+	const icon = args?.icon && args?.icon !== 'none' ? <WPIcon icon={ icons[ args.icon ] } /> : null;
+	return <Button { ...args } icon={ icon } />;
+};
+
+export const _default = DefaultTemplate.bind( {} );
+_default.args = {
+	variant: 'primary',
+	size: 'normal',
+	weight: 'bold',
+	icon: 'cloud',
+	isExternalLink: false,
+	isLoading: false,
+	disabled: false,
+	isDestructive: false,
+	fullWidth: false,
+	children: 'Once upon a time… a button story',
+};
+
+const Template = args => <Button { ...args } />;
+
+export const ButtonPrimary = Template.bind( {} );
+ButtonPrimary.argTypes = {
+	...disableVariant,
+	...disableDisabled,
+	...disableIcon,
+	...disableIsLoading,
+	...disableIsDestructive,
+	...disableFullWidth,
+};
+ButtonPrimary.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'primary',
+};
+
+export const ButtonSecondary = Template.bind( {} );
+ButtonSecondary.argTypes = {
+	...disableVariant,
+	...disableDisabled,
+	...disableIcon,
+	...disableIsLoading,
+	...disableIsDestructive,
+	...disableClassName,
+	...disableFullWidth,
+};
+ButtonSecondary.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'secondary',
+};
+
+export const ButtonLink = Template.bind( {} );
+ButtonLink.argTypes = {
+	...disableVariant,
+	...disableDisabled,
+	...disableIcon,
+	...disableIsLoading,
+	...disableIsDestructive,
+	...disableClassName,
+	...disableFullWidth,
+};
+ButtonLink.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'link',
+};
+
+export const ButtonExternalLink = Template.bind( {} );
+ButtonExternalLink.argTypes = {
+	...disableVariant,
+	...disableDisabled,
+	...disableIcon,
+	...disableIsLoading,
+	...disableIsDestructive,
+	...disableClassName,
+	...disableFullWidth,
+};
+ButtonExternalLink.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'external-link',
+};
+
+export const Icon = Template.bind( {} );
+Icon.argTypes = {
+	...disableIcon,
+	...disableDisabled,
+	...disableIsLoading,
+	...disableIsDestructive,
+	...disableClassName,
+	...disableFullWidth,
+};
+Icon.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	icon: <WPIcon icon={ check } />,
+	variant: 'primary',
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.argTypes = {
+	...disableDisabled,
+	...disableIsDestructive,
+	...disableIsLoading,
+	...disableClassName,
+	...disableFullWidth,
+	...disableIcon,
+};
+Disabled.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'primary',
+	disabled: true,
+};
+
+export const Destructive = Template.bind( {} );
+Destructive.argTypes = {
+	...disableIsDestructive,
+	...disableIsLoading,
+	...disableDisabled,
+	...disableClassName,
+	...disableFullWidth,
+	...disableIcon,
+};
+Destructive.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'primary',
+	isDestructive: true,
+};
+
+export const Loading = Template.bind( {} );
+Loading.argTypes = {
+	...disableIsDestructive,
+	...disableIsLoading,
+	...disableDisabled,
+	...disableClassName,
+	...disableFullWidth,
+	...disableIcon,
+};
+Loading.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'primary',
+	isLoading: true,
+};
+
+export const FullWidth = Template.bind( {} );
+FullWidth.argTypes = {
+	...disableIsDestructive,
+	...disableIsLoading,
+	...disableDisabled,
+	...disableClassName,
+	...disableIcon,
+};
+FullWidth.args = {
+	size: 'normal',
+	children: 'Jetpack Button',
+	variant: 'primary',
+	fullWidth: true,
+};
+
+export const VariantsAndProps = () => {
+	const variants = [ 'primary', 'secondary', 'link' ];
+	return (
+		<>
+			<Container>
+				<Col>
+					<H3>Variants & Props</H3>
+				</Col>
+				<Col>
+					<Text mb={ 3 }>
+						The following shows how the properties modify the appearance and/or behavior of the
+						button, in the different variants. Keep in mind that you cannot combine the variants but
+						you can combine the props. Use the { '' }
+						<a href="./?path=/story/js-packages-components-button--default">default story</a> to
+						play with the combinations.
+					</Text>
+				</Col>
+			</Container>
+			<Container className={ styles.container } horizontalGap={ 0 }>
+				<Col
+					className={ `${ styles[ 'row-instance' ] } ${ styles.header }` }
+					sm={ 4 }
+					md={ 2 }
+					lg={ 3 }
+				>
+					<Text size="body-extra-small">props / variants</Text>
+				</Col>
+
+				<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small" className={ styles.header }>
+						Primary
+					</Text>
+				</Col>
+
+				<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small" className={ styles.header }>
+						Secondary
+					</Text>
+				</Col>
+
+				<Col sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small" className={ styles.header }>
+						Link
+					</Text>
+				</Col>
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">no props</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">size: small</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } size="small" />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">weight: regular</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } weight="regular" />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">icon (cloud)</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button
+							{ ...ButtonPrimary.args }
+							variant={ variant }
+							icon={ <WPIcon icon={ cloud } /> }
+						/>
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">disabled</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } disabled />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">isDestructive</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } isDestructive />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">isExternalLink</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } isExternalLink />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">isLoading</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } isLoading />
+					</Col>
+				) ) }
+
+				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
+					<Text size="body-extra-small">fullWidth</Text>
+				</Col>
+				{ variants.map( variant => (
+					<Col sm={ 4 } md={ 2 } lg={ 3 }>
+						<Button { ...ButtonPrimary.args } variant={ variant } fullWidth />
+					</Col>
+				) ) }
+			</Container>
+		</>
+	);
+};
+VariantsAndProps.storyName = 'Variants & Props';

package/components/button/stories/style.module.scss

@@ -0,0 +1,20 @@
+.container {
+	row-gap: 0;
+	column-gap: 0;
+	> div {
+		border-right: 1px dotted var( --jp-gray-10 );
+		border-bottom: 1px dotted var( --jp-gray-10 );
+		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 2 );
+		align-items: center;
+
+		&:nth-child(4n) {
+			border-right: none;
+		}
+	}
+}
+
+
+.header {
+	font-weight: 600;
+	text-align: center;
+}

package/components/button/style.module.scss

@@ -0,0 +1,212 @@
+.button {
+	--wp-admin-theme-color: var(--jp-black);
+	--wp-admin-theme-color-darker-10: var(--jp-black-80);
+	--wp-admin-theme-color-darker-20: var(--jp-black-80);
+	// 1.51px to avoid subpixel rendering issues on Firefox/Linux
+	--wp-admin-border-width-focus: 1.51px;
+
+	border-radius: var(--jp-border-radius);
+	justify-content: center;
+	font-weight: 600;
+
+	// Icon Button
+	&.is-icon-button {
+		padding: var( --spacing-base );
+		width: calc( var( --spacing-base ) * 5 );
+		height: calc( var( --spacing-base ) * 5 );
+		> svg:first-child {
+			margin: 0;
+			padding: 0;
+		}
+
+		&.small {
+			padding: calc( var( --spacing-base ) / 2 );
+			width: calc( var( --spacing-base ) * 4 );
+			min-width: calc( var( --spacing-base ) * 4 );
+			height: calc( var( --spacing-base ) * 4 );	
+		}
+	}
+
+	// Normal Size & Font
+	&.normal:not(.is-icon-button) {
+		height: auto;
+		font-size: var(--font-body);
+		line-height: 24px;
+		padding: var(--spacing-base) calc( var(--spacing-base) * 3); // 8px - 24px
+
+		// With icon
+		&.icon {
+			padding: var(--spacing-base) calc( var(--spacing-base) * 2); // 8px - 16px
+		}
+	}
+
+	// Small Size & Font
+	&.small:not(.is-icon-button) {
+		height: auto;
+		font-size: var(--font-body-extra-small);
+		line-height: 20px;
+		padding: calc( var(--spacing-base) / 2 ) var(--spacing-base); // 4px - 8px
+
+		&.icon > svg:first-child {
+			margin-right: calc( var(--spacing-base) / 2 ); // 4px
+		}
+
+		// With Spinner
+		& > :global(.components-spinner) {
+			height: 20px;
+		}
+	}
+
+	&.regular {
+		font-weight: 400;
+	}
+
+	// Full Width
+	&.full-width {
+		min-width: 100%;
+	}
+
+	// SPECIFICS
+	// PRIMARY AND SECONDARY
+
+	// Primary & Secondary
+	&:global(.is-primary),
+	&:global(.is-secondary) {
+		// Disabled
+		&:disabled {
+			background: var(--jp-gray);
+			color: var(--jp-gray-20);
+		}
+	}
+
+	// Only Secondary
+	&:global(.is-secondary) {
+		background: var(--jp-white);
+		// 1.51px to avoid subpixel rendering issues on Firefox/Linux
+		box-shadow: inset 0 0 0 1.51px var(--jp-black);
+
+		// Hover & Active
+		&:active:not(:disabled),
+		&:hover:not(:disabled) {
+			background: var(--jp-gray-0);
+		}
+	}
+
+	// SPECIFICS
+	// LINK & EXTERNAL LINK
+
+	&:global(.is-link) {
+		// Normal & Small Spacing
+		&.normal,
+		&.small {
+			padding: 0;
+		}
+
+		// Hover State
+		&:hover:not(:disabled) {
+			text-decoration-thickness: 3px;
+		}
+
+		// Focus State
+		&:focus:not(:disabled) {
+			text-decoration-line: none;
+		}
+	}
+
+	// DESTRUCTIVE
+
+	&:global(.is-destructive) {
+		// Primary
+		&:global(.is-primary) {
+			box-shadow: none;
+
+			&:not(:disabled) {
+				color: var(--jp-white);
+				background: var(--jp-red-50);
+				box-shadow: inset 0 0 0 1px var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				background: var(--jp-red-60);
+				box-shadow: inset 0 0 0 1px var(--jp-red-60);
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+				background: var(--jp-red-70);
+				color: var(--jp-white);
+			}
+
+			&:active:not(:disabled) {
+				background: var(--jp-red-50);
+			}
+		}
+
+		// Secondary
+		&:global(.is-secondary) {
+			box-shadow: none;
+
+			&:not(:disabled) {
+				color: var(--jp-red-50);
+				background: var(--jp-white);
+				box-shadow: inset 0 0 0 1.5px var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				background: var(--jp-red-0);
+				box-shadow: inset 0 0 0 1.5px var(--jp-red-60);
+				color: var(--jp-red-60);
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+				color: var(--jp-red-70);
+			}
+
+			&:active:not(:disabled) {
+				background: var(--jp-gray-0);
+			}
+		}
+
+		// Link
+		&:global(.is-link) {
+			&:not(:disabled) {
+				color: var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				color: var(--jp-red-60);
+				box-shadow: none;
+			}
+
+			&:focus:not(:disabled) {
+				color: var(--jp-red-70);
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+			}
+		}
+	}
+
+	// LOADING
+
+	&.loading {
+		position: relative;
+
+		&:global(.has-icon) {
+			justify-content: center;
+		}
+
+		& > *:not(:global(.components-spinner)) {
+			visibility: hidden;
+		}
+
+		// Spinner
+		& > :global(.components-spinner) {
+			margin: 0;
+			position: absolute;
+		}
+	}
+}
+
+.external-icon {
+	margin-left: calc( var(--spacing-base) / 2 ); // 4px
+}

package/components/button/types.ts

@@ -0,0 +1,21 @@
+import { Button } from '@wordpress/components';
+import type React from 'react';
+
+type JetpackButtonBaseProps = {
+	className?: string;
+	children?: React.ReactNode;
+	disabled?: boolean;
+	isDestructive?: boolean;
+	isLoading?: boolean;
+	isExternalLink?: boolean;
+	size?: 'normal' | 'small';
+	text?: string;
+	variant?: 'primary' | 'secondary' | 'link' | 'tertiary';
+	weight?: 'bold' | 'regular';
+	fullWidth?: boolean;
+	ref: React.ForwardedRef< unknown >;
+};
+
+type WPButtonProps = Omit< React.ComponentProps< typeof Button >, 'size' | 'variant' >;
+
+export type ButtonProps = JetpackButtonBaseProps & WPButtonProps;