@automattic/jetpack-components 2.3.0 → 3.0.1

package/components/product-offer/style.module.scss

@@ -1,93 +0,0 @@
-.wrapper {
-	padding: calc(var(--spacing-base) * 8);
-	position: relative;
-}
-
-.is-card {
-	background-color: var(--jp-white);
-	border: 1px solid var(--jp-gray);
-	border-radius: var(--jp-border-radius);
-	box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);
-
-	.card-header {
-		border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;
-	}
-}
-
-.card-header {
-	display: flex;
-	align-items: center;
-	background: var(--jp-black);
-	color: var(--jp-white);
-	padding: calc(var(--spacing-base) / 2) var(--spacing-base);
-	line-height: calc(var(--spacing-base) * 3);
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	box-sizing: border-box;
-}
-
-.card-container {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.product-bundle-icon {
-	fill: var(--jp-white);
-	margin-right: var(--spacing-base);
-}
-
-.product-bundle-icons,
-.product-icon {
-	display: flex;
-	align-items: center;
-	margin-bottom: calc(var(--spacing-base) * 4);
-}
-
-.plus-icon {
-	fill: rgb(140, 143, 148);
-	height: 24px;
-	line-height: 24px;
-}
-
-.features {
-	margin: 0;
-	padding: 0;
-	flex-grow: 1;
-	margin-bottom: calc(var(--spacing-base) * 2);
-
-	li {
-		list-style: none;
-		display: flex;
-		align-items: flex-start;
-		margin-bottom: var(--spacing-base);
-	}
-
-	.check {
-		fill: var(--jp-green-primary);
-		margin-right: var(--spacing-base);
-		flex-shrink: 0;
-	}
-}
-
-.product-has-required-plan {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	svg {
-		margin-right: var(--spacing-base);
-	}
-}
-
-.add-button {
-	width: 100%;
-	justify-content: center;
-
-	&:global(.is-primary):disabled {
-		opacity: 1;
-		background-color: var(--jp-black);
-	}
-}

package/components/product-offer/types.ts

@@ -1,126 +0,0 @@
-import { ProductPriceProps } from '../product-price/types.ts';
-import type { JetpackIconSlug } from '../icons/index.tsx';
-import type { ReactNode } from 'react';
-
-export type ProductOfferProps = {
-	/**
-	 * Product slug.
-	 */
-	slug?: JetpackIconSlug;
-
-	/**
-	 * Product name.
-	 */
-	name?: string;
-
-	/**
-	 * Custom Icon slug.
-	 */
-	icon?: JetpackIconSlug;
-
-	/**
-	 * Product title.
-	 */
-	title?: string;
-
-	/**
-	 * Product sub-title.
-	 */
-	subTitle?: string;
-
-	/**
-	 * Product description.
-	 */
-	description?: string;
-
-	/**
-	 * Features list of the product.
-	 */
-	features?: Array< string >;
-
-	/**
-	 * Add the styles to look like a card.
-	 */
-	isCard?: boolean;
-
-	/**
-	 * Whether or not the product is a bundle.
-	 */
-	isBundle?: boolean;
-
-	/**
-	 * List of supported products (for bundles).
-	 */
-	supportedProducts?: Array< JetpackIconSlug >;
-
-	/**
-	 * Product Pricing object.
-	 */
-	pricing?: Pricing;
-
-	/**
-	 * Whether or not the product has the required plan.
-	 */
-	hasRequiredPlan?: boolean;
-
-	/**
-	 * Applies the isLoading style to the component.
-	 */
-	isLoading?: boolean;
-
-	/**
-	 * A className to be concat with default ones.
-	 */
-	className?: string;
-
-	/**
-	 * Callback function to be executed on click on Add button.
-	 */
-	onAdd?: VoidFunction;
-
-	/**
-	 * The checkout URL to add/buy the product.
-	 */
-	addProductUrl?: string;
-
-	/**
-	 * The text to be displayed on the Add button.
-	 */
-	buttonText?: string;
-
-	/**
-	 * Content displayed below the Add button.
-	 */
-	buttonDisclaimer?: ReactNode;
-
-	/**
-	 * Error message.
-	 */
-	error?: string;
-};
-
-export type Pricing = Pick< ProductPriceProps, 'currency' | 'offPrice' | 'price' > & {
-	/**
-	 * Whether it is a free product
-	 */
-	isFree?: boolean;
-};
-
-export type IconsCardProps = {
-	/**
-	 * Custom icon slug.
-	 */
-	icon: JetpackIconSlug;
-
-	/**
-	 * List of supported products.
-	 */
-	products: Array< JetpackIconSlug >;
-
-	/**
-	 * Icon size.
-	 */
-	size: number;
-};
-
-export type ProductOfferHeaderProps = Pick< ProductOfferProps, 'title' >;

package/components/radio-control/README.md

@@ -1,5 +0,0 @@
-# RadioControl
-
-A wrapper component for applying Jetpack Emerald styles to the [RadioControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control) component from `@wordpress/components`.
-
-The documentation for the base `RadioControl` component can be found via the [Gutenberg Handbook](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/).

package/components/radio-control/index.tsx

@@ -1,55 +0,0 @@
-import { RadioControl as WPRadioControl } from '@wordpress/components';
-import clsx from 'clsx';
-import type { FC, ReactNode } from 'react';
-
-export interface RadioControlProps {
-	/** The current value. */
-	selected: string;
-
-	/** Custom class name to append to the component. */
-	className?: string;
-
-	/** Whether or not the radio control is currently disabled. */
-	disabled?: boolean;
-
-	/** Additional information to display below the radio control. */
-	help?: ReactNode;
-
-	/** The label for the radio control. */
-	label?: ReactNode;
-
-	/** If true, the label will only be visible to screen readers. */
-	hideLabelFromVision?: boolean;
-
-	/** A list of options to show. */
-	options: { label: string; value: string }[];
-
-	/** A callback function invoked when the value is changed. */
-	onChange: ( value: string ) => void;
-}
-
-const RadioControl: FC< RadioControlProps > = ( {
-	selected,
-	className,
-	disabled,
-	help,
-	label,
-	hideLabelFromVision,
-	options,
-	onChange,
-} ) => {
-	return (
-		<WPRadioControl
-			selected={ selected }
-			className={ clsx( 'radio', className ) }
-			disabled={ disabled }
-			help={ help }
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			options={ options }
-			onChange={ onChange }
-		/>
-	);
-};
-
-export default RadioControl;

package/components/split-button/index.tsx

@@ -1,48 +0,0 @@
-import { Button, Flex, DropdownMenu } from '@wordpress/components';
-import styles from './style.module.scss';
-import { SplitButtonProps } from './types.ts';
-import type { FC } 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: FC< SplitButtonProps > = ( {
-	variant,
-	controls,
-	popoverProps,
-	toggleProps,
-	label,
-	...buttonProps
-} ) => {
-	// Cast to work around WPButton's strict union type
-	const wpButtonProps = {
-		variant,
-		className: styles.button,
-		...buttonProps,
-	} as React.ComponentProps< typeof Button >;
-
-	return (
-		<Flex className={ styles[ 'split-button' ] }>
-			<div role="group" className="components-button-group">
-				<Button { ...wpButtonProps } />
-				<DropdownMenu
-					toggleProps={ { variant, className: styles.button, ...toggleProps } }
-					popoverProps={ { noArrow: false, ...popoverProps } }
-					icon={ <DownIcon /> }
-					disableOpenOnArrowDown={ true }
-					controls={ controls }
-					label={ label }
-				/>
-			</div>
-		</Flex>
-	);
-};
-
-export default SplitButton;

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

@@ -1,26 +0,0 @@
-.split-button {
-	--actions-size: 28px;
-	display: flex;
-	height: var(--actions-size);
-	border-radius: var(--jp-border-radius);
-
-	:global(.components-button-group) {
-		display: flex;
-		height: 100%;
-	}
-
-	> .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

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

package/components/status/README.md

@@ -1,42 +0,0 @@
-= 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

@@ -1,52 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import Text from '../text/index.tsx';
-import styles from './style.module.scss';
-import type { JSX } from 'react';
-
-export interface StatusProps {
-	status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
-	label?: string;
-	className?: string;
-}
-
-/**
- * Status component.
- *
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
- *
- * @param {StatusProps} props           - The component properties.
- * @param {string}      props.className - Optional className forwarded to the outer element.
- * @param {string}      props.label     - Status label. Defaults to a status-derived string.
- * @param {string}      props.status    - Status key: `active | error | inactive | action | initializing`.
- * @return {JSX.Element} The `Status` component.
- */
-const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.Element => {
-	const defaultLabels: Record< string, string > = {
-		active: __( 'Active', 'jetpack-components' ),
-		error: __( 'Error', 'jetpack-components' ),
-		action: __( 'Action needed', 'jetpack-components' ),
-		inactive: __( 'Inactive', 'jetpack-components' ),
-		initializing: __( 'Setting up', 'jetpack-components' ),
-	};
-
-	return (
-		<Text
-			variant="body-extra-small"
-			className={ clsx(
-				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/style.module.scss

@@ -1,82 +0,0 @@
-.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/toggle-control/README.md

@@ -1,5 +0,0 @@
-# Toggle Control
-
-A wrapper component for applying Jetpack Emerald styles to the [ToggleControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle) component from `@wordpress/components`.
-
-The documentation for the base `ToggleControl` component can be found via the [Gutenberg Handbook](https://developer.wordpress.org/block-editor/components/toggle-control/).

package/components/toggle-control/index.tsx

@@ -1,80 +0,0 @@
-import { ToggleControl as WPToggleControl } from '@wordpress/components';
-import clsx from 'clsx';
-import { useCallback } from 'react';
-import styles from './styles.module.scss';
-import type { FC, ReactNode } from 'react';
-
-export interface ToggleControlProps {
-	/** Whether or not the toggle is currently enabled. */
-	checked?: boolean;
-
-	/** Custom class name to append to the component. */
-	className?: string;
-
-	/** Whether or not the toggle is currently disabled. */
-	disabled?: boolean;
-
-	/** Additional information to display below the toggle. */
-	help?: ReactNode;
-
-	/** Whether or not the toggling is currently toggling. */
-	toggling?: boolean;
-
-	/** The label for the toggle. */
-	label?: ReactNode;
-
-	/** Accessible name for the underlying checkbox. Use when no visible `label` is rendered. */
-	'aria-label'?: string;
-
-	/** The size of the toggle. */
-	size?: 'small' | 'normal';
-
-	/** A callback function invoked when the toggle is clicked. */
-	onChange: ( value: boolean ) => void;
-}
-
-const ToggleControl: FC< ToggleControlProps > = ( {
-	checked,
-	className,
-	disabled,
-	help,
-	toggling,
-	label,
-	'aria-label': ariaLabel,
-	size = 'normal',
-	onChange,
-} ) => {
-	const showChecked =
-		toggling !== undefined ? ( checked && ! toggling ) || ( ! checked && toggling ) : checked;
-
-	const handleOnChange = useCallback(
-		( value: boolean ) => {
-			// Don't toggle if the toggle is already toggling.
-			if ( toggling ) {
-				return;
-			}
-
-			onChange( value );
-		},
-		[ toggling, onChange ]
-	);
-
-	return (
-		<WPToggleControl
-			__nextHasNoMarginBottom={ true }
-			checked={ showChecked }
-			className={ clsx( styles.toggle, className, {
-				[ styles[ 'is-toggling' ] ]: toggling,
-				[ styles[ 'is-small' ] ]: size === 'small',
-				[ styles[ 'no-label' ] ]: ! label,
-			} ) }
-			disabled={ disabled }
-			help={ help }
-			label={ label }
-			aria-label={ ariaLabel }
-			onChange={ handleOnChange }
-		/>
-	);
-};
-
-export default ToggleControl;

package/components/toggle-control/styles.module.scss

@@ -1,24 +0,0 @@
-/// Toggle Control
-///
-/// Overrides the @wordpress/components ToggleControl component.
-/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
-.toggle {
-
-	&.is-small {
-		--base-width: 6px;
-	}
-
-	&.no-label :global(.components-toggle-control__label) {
-		display: none;
-	}
-}
-
-.toggle.is-toggling {
-
-	:global {
-
-		.components-form-toggle {
-			opacity: 0.6;
-		}
-	}
-}