@automattic/jetpack-components 2.2.0 → 3.0.0

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;
-		}
-	}
-}