@automattic/jetpack-components 0.39.0

package/components/spinner/stories/index.stories.jsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/react-in-jsx-scope */
+import React from 'react';
+import Spinner from '../index.jsx';
+
+export default {
+	title: 'JS Packages/Components/Spinner',
+	component: Spinner,
+	argTypes: {
+		color: { control: 'color' },
+	},
+	parameters: {
+		backgrounds: {
+			default: 'dark',
+		},
+	},
+};
+
+const Template = args => <Spinner { ...args } />;
+
+export const _default = Template.bind( {} );

package/components/spinner/style.scss

@@ -0,0 +1,31 @@
+@keyframes rotate-spinner {
+	100% {
+		transform: rotate( 360deg );
+	}
+}
+
+.jp-components-spinner {
+	display: flex;
+	align-items: center;
+}
+
+.jp-components-spinner__outer, .jp-components-spinner__inner {
+	margin: auto;
+	box-sizing: border-box;
+	border: 0.1em solid transparent;
+	border-radius: 50%;
+	animation: 3s linear infinite;
+	animation-name: rotate-spinner;
+}
+
+.jp-components-spinner__outer {
+	border-top-color: white;
+}
+
+.jp-components-spinner__inner {
+	width: 100%;
+	height: 100%;
+	border-top-color: white;
+	border-right-color: white;
+	opacity: 0.4;
+}

package/components/spinner/test/component.jsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import Spinner from '../index';
+
+describe( 'Spinner', () => {
+	const testProps = {
+		className: 'sample-classname',
+	};
+
+	describe( 'Render the Spinner component', () => {
+		const { container } = render( <Spinner { ...testProps } /> );
+
+		it( 'validate the class name', () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			expect( container.firstChild ).toHaveClass( 'sample-classname' );
+		} );
+	} );
+} );

package/components/split-button/index.tsx

@@ -0,0 +1,39 @@
+import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import styles from './style.module.scss';
+import { SplitButtonProps } from './types';
+import type React from 'react';
+
+const DownIcon = () => (
+	<svg width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="10 9 4 7">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="m18.004 10.555-6.005 5.459-6.004-5.459 1.009-1.11 4.995 4.542 4.996-4.542 1.009 1.11Z"
+		/>
+	</svg>
+);
+
+const SplitButton: React.FC< SplitButtonProps > = ( {
+	variant,
+	controls,
+	popoverProps,
+	toggleProps,
+	label,
+	...buttonProps
+} ) => {
+	return (
+		<ButtonGroup className={ styles[ 'split-button' ] }>
+			<Button variant={ variant } { ...buttonProps } className={ styles.button } />
+			<DropdownMenu
+				toggleProps={ { variant, className: styles.button, ...toggleProps } }
+				popoverProps={ { noArrow: false, ...popoverProps } }
+				icon={ <DownIcon /> }
+				disableOpenOnArrowDown={ true }
+				controls={ controls }
+				label={ label }
+			/>
+		</ButtonGroup>
+	);
+};
+
+export default SplitButton;

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

@@ -0,0 +1,35 @@
+import SplitButton from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Split Button',
+	component: SplitButton,
+	argTypes: {
+		variant: { type: 'select', options: [ undefined, 'secondary', 'primary', 'tertiary', 'link' ] },
+	},
+	args: {
+		controls: [
+			{
+				title: 'Add to cart',
+				icon: null,
+				onClick: () => null,
+			},
+			{
+				title: 'Add to wishlist',
+				icon: null,
+				onClick: () => null,
+			},
+		],
+	},
+	parameters: {
+		backgrounds: {
+			default: 'dark',
+		},
+	},
+} as ComponentMeta< typeof SplitButton >;
+
+const Template: ComponentStory< typeof SplitButton > = args => (
+	<SplitButton { ...args }>Buy now!</SplitButton>
+);
+
+export const _default = Template.bind( {} );

package/components/split-button/style.module.scss

@@ -0,0 +1,21 @@
+.split-button {
+    --actions-size: 28px;
+    display: flex;
+    height: var(--actions-size);
+    border-radius: var(--jp-border-radius);
+
+    & > .button:first-child {
+        border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
+    }
+
+    & > :global(.components-dropdown) > .button {
+        border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
+    }
+}
+
+.button {
+	font-size: var(--font-body-extra-small);
+	border-radius: var(--jp-border-radius);
+	height: var(--actions-size);
+	line-height: var(--actions-size);
+}

package/components/split-button/types.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { Button, DropdownMenu } from '@wordpress/components';
+
+type AllowedDropdownMenuProps = Pick<
+	React.ComponentProps< typeof DropdownMenu >,
+	'controls' | 'popoverProps' | 'toggleProps' | 'label'
+>;
+
+export type SplitButtonProps = Omit< React.ComponentProps< typeof Button >, 'controls' > &
+	AllowedDropdownMenuProps &
+	// make `controls` prop required
+	Required< Pick< AllowedDropdownMenuProps, 'controls' > >;

package/components/stat-card/index.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import numberFormat from '../number-format';
+import Text from '../text';
+import styles from './style.module.scss';
+import { StatCardProps } from './types';
+import type React from 'react';
+
+/**
+ * StatCard component
+ *
+ * @param {StatCardProps} props - Component props.
+ * @returns {React.ReactNode} - StatCard react component.
+ */
+const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => {
+	const formattedValue = numberFormat( value );
+	const compactValue = numberFormat( value, {
+		notation: 'compact',
+		compactDisplay: 'short',
+	} );
+
+	return (
+		<div className={ classnames( className, styles.wrapper, styles[ variant ] ) }>
+			<div className={ classnames( styles.icon ) }>{ icon }</div>
+			<div className={ classnames( styles.info ) }>
+				<Text className={ styles.label }>{ label }</Text>
+				{ variant === 'square' ? (
+					<Tooltip text={ formattedValue } position="top center">
+						<Text variant="headline-small" className={ classnames( styles.value ) }>
+							{ compactValue }
+						</Text>
+					</Tooltip>
+				) : (
+					<Text variant="title-medium-semi-bold" className={ classnames( styles.value ) }>
+						{ formattedValue }
+					</Text>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default StatCard;

package/components/stat-card/stories/index.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import StatCard from '../index';
+import * as StatCardStories from './index.stories';
+
+<Meta of={StatCardStories} />
+
+# StatCard
+
+Component that shows a stat value.
+
+## API
+
+### icon
+
+- type: `JSX.Element`
+
+### label
+
+- type: `string`
+
+### value
+
+- type: `number`
+
+### variant
+
+- type: `string`
+- default: `"square"`
+
+It accepts 2 values: `square` and `horizontal`.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-stat-card--default" />
+  <Story id="js-packages-components-stat-card--horizontal" />
+</Canvas>

package/components/stat-card/stories/index.stories.tsx

@@ -0,0 +1,41 @@
+import { Icon, postList } from '@wordpress/icons';
+import StatCard from '..';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Stat Card',
+	component: StatCard,
+	argTypes: {
+		variant: {
+			control: { type: 'radio' },
+			options: [ 'square', 'horizontal' ],
+		},
+		label: {
+			control: { type: 'text' },
+		},
+		value: {
+			control: { type: 'number' },
+		},
+		icon: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+} as ComponentMeta< typeof StatCard >;
+
+const defaultArgs = {
+	icon: <Icon icon={ postList } color="green" />,
+	label: 'Posted this month',
+	value: 1806,
+};
+
+const Template: ComponentStory< typeof StatCard > = args => {
+	return <StatCard { ...args } />;
+};
+
+export const _default = Template.bind( {} );
+_default.args = defaultArgs;
+
+export const Horizontal = Template.bind( {} );
+Horizontal.args = { ...defaultArgs, variant: 'horizontal' };

package/components/stat-card/style.module.scss

@@ -0,0 +1,49 @@
+.wrapper {
+	background-color: var( --jp-white );
+	box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
+	border-radius: calc( var( --jp-border-radius ) * 2 ); // 8px;
+	display: flex;
+
+	&.horizontal {
+		align-items: center;
+		padding: calc( var( --spacing-base ) * 2 ); // 16px;
+		width: 358px;
+
+		.info {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			overflow: hidden;
+		}
+
+		.label {
+			margin: 0 calc( var( --spacing-base ) * 2	); // 16px;
+			flex-grow: 1;
+		}
+	}
+	
+	&.square {
+		--square-stat-vertical-spacing: calc( var( --spacing-base ) * 2	); // 16px;
+		--square-stat-horizontal-spacing: calc( var( --spacing-base ) * 3	); // 24px;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 168px;
+		width: 168px;
+		padding: var( --square-stat-vertical-spacing ) var( --square-stat-horizontal-spacing );
+
+		.label {
+			margin-bottom: calc( var( --spacing-base ) / 2	); // 4px;
+		}
+	}
+
+	.value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.icon {
+		display: flex;
+		color: var( --jp-green-40 );
+		fill: var( --jp-green-40 );
+	}
+}

package/components/stat-card/test/component.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import StatCard from '../index';
+
+describe( 'StatCard', () => {
+	const testProps = {
+		icon: <div></div>,
+		label: 'Label',
+		value: 1806,
+	};
+
+	describe( 'when using the square variant', () => {
+		it( 'renders the compact value', () => {
+			render( <StatCard { ...testProps } variant="square" /> );
+			expect( screen.getByText( '1.8K' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when using the horizontal variant', () => {
+		it( 'renders the full value', () => {
+			render( <StatCard { ...testProps } variant="horizontal" /> );
+			expect( screen.getByText( '1,806' ) ).toBeInTheDocument();
+		} );
+	} );
+} );

package/components/stat-card/types.ts

@@ -0,0 +1,28 @@
+export type StatCardProps = {
+	/**
+	 * Custom className to be inserted.
+	 */
+	className?: string;
+
+	/**
+	 * The stat card icon.
+	 */
+	icon: JSX.Element;
+
+	/**
+	 * The stat label.
+	 */
+	label: string;
+
+	/**
+	 * The stat value.
+	 */
+	value: number;
+
+	/**
+	 * The component variant.
+	 *
+	 * @default 'square'
+	 */
+	variant?: 'square' | 'horizontal';
+};

package/components/status/README.md

@@ -0,0 +1,42 @@
+= Status
+
+A simple component to display a status indicator.
+
+## Usage
+
+```jsx
+import { Status } from '@automattic/jetpack-components';
+
+function MyComponent() {
+    return (
+        <>
+            { /* Default status is "inactive". */}
+            <Status />
+
+            { /* You can also pass a status prop to display a different status. */}
+            <Status status="active" />
+
+            { /* You can also pass a label prop to display a label beside the status indicator. */}
+            <Status status="error" label="Connection Error" />
+        </>
+    );
+}
+```
+
+## Props
+
+### status
+
+Optional. The status to display. It can be one of the following:
+
+-   `active`
+-   `inactive`
+-   `error`
+
+Defaults to `inactive`.
+
+### label
+
+Optional. The label to display beside the status indicator. 
+
+If none is provided, the name of the status will be used by default (i.e. "Active"). Pass an empty string to hide the label.

package/components/status/index.tsx

@@ -0,0 +1,40 @@
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import Text from '../text';
+import styles from './style.module.scss';
+
+interface StatusProps {
+	status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
+	label?: string;
+	className?: string;
+}
+
+const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.Element => {
+	const defaultLabels: Record< string, string > = {
+		active: __( 'Active', 'jetpack' ),
+		error: __( 'Error', 'jetpack' ),
+		action: __( 'Action needed', 'jetpack' ),
+		inactive: __( 'Inactive', 'jetpack' ),
+		initializing: __( 'Setting up', 'jetpack' ),
+	};
+
+	return (
+		<Text
+			variant="body-extra-small"
+			className={ classNames(
+				styles.status,
+				{
+					[ styles[ `is-${ status }` ] ]: status,
+				},
+				className
+			) }
+		>
+			<span className={ styles.status__indicator } />
+			<span className={ styles.status__label }>
+				{ label || label === '' ? label : defaultLabels[ status ] }
+			</span>
+		</Text>
+	);
+};
+
+export default Status;

package/components/status/stories/index.stories.tsx

@@ -0,0 +1,44 @@
+import Status from '..';
+
+export default {
+	title: 'JS Packages/Components/Status',
+	component: Status,
+	parameters: {
+		layout: 'centered',
+	},
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Active = args => {
+	return <Status status="active" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Error = args => {
+	return <Status status="error" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const ActionNeeded = args => {
+	return <Status status="action" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Initializing = args => {
+	return <Status status="initializing" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Inactive = args => {
+	return <Status status="inactive" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const CustomLabel = args => {
+	return <Status label="Code is poetry" />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const NoLabel = args => {
+	return <Status status="active" label="" />;
+};

package/components/status/style.module.scss

@@ -0,0 +1,72 @@
+.status {
+	--spacing-base: 8px;
+	--wp-admin-border-width-focus: 1.5px;
+
+    align-items: center;
+    display: flex;
+    white-space: nowrap;
+
+    &__indicator {
+        background-color: var( --jp-gray-50 );
+        border-radius: 50%;
+        flex-shrink: 0;
+        height: 0.666em;
+        width: 0.666em;
+    }
+
+    &__label {
+        font-weight: 600;
+        line-height: 1.666;
+        margin-left: calc( var( --spacing-base ) / 2 ); // 4px
+    }
+
+    &.is-active {
+		span, a {
+			color: var(--jp-green-50);
+		}
+
+        .status__indicator {
+            background-color: var( --jp-green-50 );
+        }
+    }
+
+    &.is-inactive {
+		span, a {
+			color: var(--jp-gray-50);
+		}
+
+        .status__indicator {
+            background-color: var( --jp-gray-50 );
+        }
+    }
+
+    &.is-error {
+		span, a {
+			color: var(--jp-red-50);
+		}
+
+        .status__indicator {
+            background-color: var( --jp-red-50 );
+        }
+    }
+
+    &.is-action {
+		span, a {
+			color: var(--jp-yellow-30);
+		}
+
+        .status__indicator {
+            background-color: var( --jp-yellow-30 );
+        }
+    }
+
+    &.is-initializing {
+		span, a {
+			color: var(--jp-blue-40);
+		}
+
+        .status__indicator {
+            background-color: var( --jp-blue-40 );
+        }
+    }
+}

package/components/terms-of-service/index.tsx

@@ -0,0 +1,63 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import classNames from 'classnames';
+import { getRedirectUrl } from '../../../components';
+import Text from '../text';
+import type { TermsOfServiceProps } from './types';
+import './styles.scss';
+
+const TermsOfService: React.FC< TermsOfServiceProps > = ( {
+	className,
+	multipleButtons,
+	agreeButtonLabel,
+} ) => (
+	<Text className={ classNames( className, 'terms-of-service' ) }>
+		{ multipleButtons ? (
+			<MultipleButtonsText />
+		) : (
+			<SingleButtonText agreeButtonLabel={ agreeButtonLabel } />
+		) }
+	</Text>
+);
+
+const MultipleButtonsText = () =>
+	createInterpolateElement(
+		__(
+			'By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+			'jetpack'
+		),
+		{
+			tosLink: <Link slug="wpcom-tos" />,
+			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+		}
+	);
+
+const SingleButtonText = ( { agreeButtonLabel } ) =>
+	createInterpolateElement(
+		sprintf(
+			/* translators: %s is a button label */
+			__(
+				'By clicking the <strong>%s</strong> button, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>share details</shareDetailsLink> with WordPress.com.',
+				'jetpack'
+			),
+			agreeButtonLabel
+		),
+		{
+			strong: <strong />,
+			tosLink: <Link slug="wpcom-tos" />,
+			shareDetailsLink: <Link slug="jetpack-support-what-data-does-jetpack-sync" />,
+		}
+	);
+
+const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
+	<a
+		className="terms-of-service__link"
+		href={ getRedirectUrl( slug ) }
+		rel="noopener noreferrer"
+		target="_blank"
+	>
+		{ children }
+	</a>
+);
+
+export default TermsOfService;

package/components/terms-of-service/styles.scss

@@ -0,0 +1,10 @@
+.terms-of-service {
+	font-size: var(--font-body);
+	color: var(--jp-black);
+
+	.terms-of-service__link {
+		color: var(--jp-green-50);
+		white-space: nowrap;
+		text-decoration: underline;
+	}
+}