@automattic/jetpack-components 2.3.0 → 3.0.1

package/build/components/status/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import Text from '../text/index.js';
-import styles from './style.module.scss';
-/**
- * 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' }) => {
-    const defaultLabels = {
-        active: __('Active', 'jetpack-components'),
-        error: __('Error', 'jetpack-components'),
-        action: __('Action needed', 'jetpack-components'),
-        inactive: __('Inactive', 'jetpack-components'),
-        initializing: __('Setting up', 'jetpack-components'),
-    };
-    return (_jsxs(Text, { variant: "body-extra-small", className: clsx(styles.status, {
-            [styles[`is-${status}`]]: status,
-        }, className), children: [_jsx("span", { className: styles.status__indicator }), _jsx("span", { className: styles.status__label, children: label || label === '' ? label : defaultLabels[status] })] }));
-};
-export default Status;

package/build/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/build/components/toggle-control/index.d.ts

@@ -1,23 +0,0 @@
-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;
-}
-declare const ToggleControl: FC<ToggleControlProps>;
-export default ToggleControl;

package/build/components/toggle-control/index.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ToggleControl as WPToggleControl } from '@wordpress/components';
-import clsx from 'clsx';
-import { useCallback } from 'react';
-import styles from './styles.module.scss';
-const ToggleControl = ({ 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) => {
-        // Don't toggle if the toggle is already toggling.
-        if (toggling) {
-            return;
-        }
-        onChange(value);
-    }, [toggling, onChange]);
-    return (_jsx(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/build/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;
-		}
-	}
-}

package/components/alert/index.tsx

@@ -1,60 +0,0 @@
-import { Icon, cautionFilled as warning, info, check } from '@wordpress/icons';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import type { ReactNode, Component, ReactElement, FC } from 'react';
-
-type AlertProps = {
-	/** The severity of the alert. */
-	level: 'error' | 'warning' | 'info' | 'success';
-
-	/** Show/Hide icon */
-	showIcon?: boolean;
-
-	/** Children to be rendered inside the alert. */
-	children: ReactNode;
-
-	/** Wrapper class name */
-	className?: string;
-};
-
-const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
-	switch ( level ) {
-		case 'error':
-			return warning;
-		case 'warning':
-			return warning;
-		case 'info':
-			return info;
-		case 'success':
-			return check;
-		default:
-			return warning;
-	}
-};
-
-/**
- * Alert component
- *
- * @param {object}    props           - The component properties.
- * @param {string}    props.level     - The alert level: error, warning, info, success.
- * @param {boolean}   props.showIcon  - Whether to show the alert icon.
- * @param {string}    props.className - The wrapper class name.
- * @param {Component} props.children  - The alert content.
- * @return {ReactElement}             The `Alert` component.
- */
-const Alert: FC< AlertProps > = ( { level = 'warning', children, showIcon = true, className } ) => {
-	const classes = clsx( styles.container, styles[ `is-${ level }` ], className );
-
-	return (
-		<div className={ classes }>
-			{ showIcon && (
-				<div className={ styles[ 'icon-wrapper' ] }>
-					<Icon icon={ getIconByLevel( level ) } className={ styles.icon } />
-				</div>
-			) }
-			<div>{ children }</div>
-		</div>
-	);
-};
-
-export default Alert;

package/components/alert/style.module.scss

@@ -1,47 +0,0 @@
-.container {
-	display: flex;
-	font-size: var(--font-body);
-	line-height: calc(var(--spacing-base) * 3);
-	min-height: calc(var(--spacing-base) * 3);
-	align-items: center;
-	margin: calc(var(--spacing-base) * 2) 0;
-}
-
-.icon-wrapper {
-	margin-right: calc(var(--spacing-base) / 2);
-	width: calc(var(--spacing-base) * 3);
-	height: calc(var(--spacing-base) * 3);
-	align-self: flex-start;
-}
-
-.is-error {
-	color: var(--jp-red);
-
-	.icon {
-		fill: var(--jp-red);
-	}
-}
-
-.is-warning {
-	color: var(--jp-yellow-40);
-
-	.icon {
-		fill: var(--jp-yellow-40);
-	}
-}
-
-.is-info {
-	color: var(--jp-blue-40);
-
-	.icon {
-		fill: var(--jp-blue-40);
-	}
-}
-
-.is-success {
-	color: var(--jp-green);
-
-	.icon {
-		fill: var(--jp-green);
-	}
-}

package/components/chip/README.md

@@ -1,21 +0,0 @@
-Chip
-=========
-
-> **Deprecated.** Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`. This component is retained as a compatibility shim for downstream consumers and will be removed in the next major version.
-
-This component is useful to indicate something is new.
-
-## General Usage:
-
-```js
-import { Chip } from '@automattic/jetpack-components';
-render() {
-	return (
-		<Chip type="new" text="New" />
-	);
-}
-```
-
-## Props
-
-- `className`: an optional class name.

package/components/chip/index.tsx

@@ -1,25 +0,0 @@
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import type { ReactElement, FC } from 'react';
-
-type ChipProps = {
-	text?: string;
-	type?: 'new' | 'info';
-};
-
-/**
- * Chip component
- *
- * @deprecated Use `Badge` from `@wordpress/ui` instead. Map `type="new"` to `intent="stable"` and `type="info"` to the default `intent`.
- *
- * @param {object} props      - The component properties.
- * @param {string} props.type - The type new or info
- * @param {string} props.text - Chip text
- * @return {ReactElement} The `Chip` component.
- */
-const Chip: FC< ChipProps > = ( { type = 'info', text } ) => {
-	const classes = clsx( styles.chip, styles[ `is-${ type }` ] );
-	return <span className={ classes }>{ text }</span>;
-};
-
-export default Chip;

package/components/chip/style.module.scss

@@ -1,14 +0,0 @@
-.chip {
-	display: inline-block;
-	border-radius: 3px;
-	background-color: var(--jp-gray-5);
-	color: var(--jp-gray-50);
-	padding: 0 6px;
-	margin: 0 8px;
-	text-transform: uppercase;
-	font-size: 10px;
-	font-weight: 700;
-	line-height: 20px;
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-
-}

package/components/contextual-upgrade-trigger/README.md

@@ -1,81 +0,0 @@
-# Contextual Upgrade Trigger
-
-The CUT component is designed to push users to upgrade from a Free plan to a Paid one, or from lower tier paid plans to higher ones.
-
-**Design Specs for Contextual Upgrade Trigger:** PbJqbW-5k-p2
-
-[ Storybook Reference ](https://automattic.github.io/jetpack-storybook/?path=/story/js-packages-components-contextual-upgrade-trigger--default)
-
-## Usage
-
-```jsx
-import { ContextualUpgradeTrigger } from '@automattic/jetpack-components';
-
-<ContextualUpgradeTrigger
-	description="Current status of the product"
-	cta="Text action line, recommending the next tier"
-	onClick={ () => ... }
-/>
-```
-
-To use as a link:
-
-```jsx
-import { ContextualUpgradeTrigger } from '@automattic/jetpack-components';
-
-<ContextualUpgradeTrigger
-	description="Current status of the product"
-	cta="Text action line, recommending the next tier"
-	href="https://jetpack.com"
-/>
-```
-
-## Props
-
-### className
-
-A custom class to append with the default ones.
-
-- Type: `String`
-- Default: `undefined`
-- Required: `false`
-
-### description
-
-A text giving context for a user about the current status of the product (i.e., how many updates per day).
-
-- Type: `String`
-- Default: `""`
-- Required: `true`
-
-### cta
-
-Text action line, recommending the next tier
-
-- Type: `String`
-- Default: `""`
-- Required: `true`
-
-### onClick
-
-Callback that will be called when the user click/tap into the CUT
-
-- Type: `Function`
-- Default: `undefined`
-- Required: `false`
-
-### href
-
-URL to link to
-
-- Type: `String`
-- Default: `undefined`
-- Required: `false`
-
-### openInNewTab
-
-Indicate if the link should open in a new tab
-
-- Type: `Boolean`
-- Default: `false`
-- Required: `false`

package/components/contextual-upgrade-trigger/index.tsx

@@ -1,59 +0,0 @@
-import { Icon, arrowRight } from '@wordpress/icons';
-import clsx from 'clsx';
-import IconTooltip from '../icon-tooltip/index.tsx';
-import Text from '../text/index.tsx';
-import styles from './style.module.scss';
-import { CutBaseProps } from './types.ts';
-import type { FC } from 'react';
-
-/**
- * ContextualUpgradeTrigger component.
- *
- * @deprecated Use `Notice` from `@wordpress/ui` instead. Compose with `Notice.Root` (`intent="info"`), `Notice.Description` for the body, and `Notice.Actions` + `Notice.ActionLink` / `Notice.ActionButton` for the CTA. See https://github.com/Automattic/jetpack/issues/48160 for migration guidance.
- *
- * @param      props              - The component properties.
- * @param      props.description  - The body copy describing the upgrade context.
- * @param      props.cta          - The CTA label.
- * @param      props.onClick      - Click handler when rendered as a button.
- * @param      props.href         - When provided, renders as an anchor instead of a button.
- * @param      props.openInNewTab - Whether to open the link in a new tab.
- * @param      props.className    - Optional class for the root element.
- * @param      props.tooltipText  - Optional tooltip body shown next to the description.
- * @return The rendered upgrade trigger.
- */
-const ContextualUpgradeTrigger: FC< CutBaseProps > = ( {
-	description,
-	cta,
-	onClick,
-	href,
-	openInNewTab = false,
-	className,
-	tooltipText = '',
-} ) => {
-	const Tag = href !== undefined ? 'a' : 'button';
-	const tagProps =
-		Tag === 'a' ? { href, ...( openInNewTab && { target: '_blank' } ) } : { onClick };
-
-	return (
-		<div className={ clsx( styles.cut, className ) }>
-			<div>
-				<div>
-					<Text className={ styles.description }>{ description }</Text>
-					{ tooltipText && (
-						<IconTooltip className={ styles.iconContainer } iconSize={ 16 } offset={ 4 }>
-							<Text variant="body-small">{ tooltipText }</Text>
-						</IconTooltip>
-					) }
-				</div>
-				<div>
-					<Tag { ...tagProps }>
-						<Text className={ styles.cta }>{ cta }</Text>
-					</Tag>
-				</div>
-			</div>
-			<Icon icon={ arrowRight } className={ styles.icon } size={ 30 } />
-		</div>
-	);
-};
-
-export default ContextualUpgradeTrigger;

package/components/contextual-upgrade-trigger/style.module.scss

@@ -1,77 +0,0 @@
-.cut {
-	border: 2px solid var(--jp-green-40);
-	border-radius: var(--jp-border-radius);
-	padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: calc(var(--spacing-base) * 3);
-	text-align: left;
-	background: none;
-	width: 100%;
-	position: relative;
-	color: var(--jp-gray-80);
-
-	button,
-	a {
-		all: unset;
-		color: var(--jp-gray-80);
-		cursor: pointer;
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	&:focus-within {
-		border-color: var(--jp-black);
-	}
-
-	&:focus-within,
-	&:hover {
-
-		.icon {
-			transform: translateX(calc(var(--spacing-base) * 2));
-		}
-
-		.cta {
-			text-decoration: underline;
-			text-decoration-thickness: 2px;
-		}
-	}
-
-	// Overwrite styles in Text component
-	.cta {
-		font-weight: 700;
-	}
-}
-
-.cta {
-	font-weight: 700;
-}
-
-.icon {
-	fill: var(--jp-green-40);
-	transition: transform 0.1s ease-out;
-	pointer-events: none;
-}
-
-.iconContainer {
-	margin: 0 0 0 calc(var(--spacing-base) / 3);
-	display: inline;
-	vertical-align: middle;
-
-	svg {
-		z-index: 10;
-		position: relative;
-	}
-}
-
-.description {
-	display: inline;
-}

package/components/contextual-upgrade-trigger/types.ts

@@ -1,9 +0,0 @@
-export type CutBaseProps = {
-	description: string;
-	cta: string;
-	className?: string;
-	href?: string;
-	openInNewTab?: boolean;
-	onClick?: () => void;
-	tooltipText?: string;
-};

package/components/dialog/index.tsx

@@ -1,70 +0,0 @@
-import { useViewportMatch } from '@wordpress/compose';
-import clsx from 'clsx';
-import Col from '../layout/col/index.tsx';
-import Container from '../layout/container/index.tsx';
-import styles from './style.module.scss';
-import type { ReactNode, FC } from 'react';
-
-type DialogProps = {
-	primary: ReactNode;
-	secondary?: ReactNode;
-	isTwoSections?: boolean;
-	isCard?: boolean;
-	containerProps: object;
-};
-
-/**
- * Dialog component.
- *
- * @param {object}    props                - React component props.
- * @param {ReactNode} props.primary        - Primary-section content.
- * @param {ReactNode} props.secondary      - Secondary-section content.
- * @param {boolean}   props.isTwoSections  - Handle two sections layout when true.
- * @param {object}    props.containerProps - Props to pass to the container component.
- * @return {ReactNode}                 Rendered dialog
- */
-const Dialog: FC< DialogProps > = ( {
-	primary,
-	secondary,
-	isTwoSections = false,
-	...containerProps
-} ) => {
-	const isSmall = useViewportMatch( 'small', '<' );
-	const isLowerThanLarge = useViewportMatch( 'large', '<' );
-
-	/*
-	 * By convention, secondary section is not shown when:
-	 * - layout is a two-sections setup
-	 * - on mobile breakpoint (sm)
-	 */
-	const hideSecondarySection = ! isTwoSections && isSmall;
-
-	const classNames = clsx( {
-		[ styles[ 'one-section-style' ] ]: ! isTwoSections,
-		[ styles[ 'is-viewport-small' ] ]: isSmall,
-	} );
-
-	return (
-		<Container
-			className={ classNames }
-			horizontalSpacing={ 0 }
-			horizontalGap={ 0 }
-			fluid={ false }
-			{ ...containerProps }
-		>
-			{ ! hideSecondarySection && (
-				<>
-					<Col sm={ 4 } md={ isLowerThanLarge ? 4 : 5 } lg={ 7 } className={ styles.primary }>
-						{ primary }
-					</Col>
-					<Col sm={ 4 } md={ isLowerThanLarge ? 4 : 3 } lg={ 5 } className={ styles.secondary }>
-						{ secondary }
-					</Col>
-				</>
-			) }
-			{ hideSecondarySection && <Col>{ primary }</Col> }
-		</Container>
-	);
-};
-
-export default Dialog;

package/components/dialog/style.module.scss

@@ -1,31 +0,0 @@
-.one-section-style {
-	--product-card-shadow: rgb(0 0 0 / 3%);
-	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);
-}
-
-.primary,
-.secondary {
-	display: flex;
-}
-
-// Fit images in secondary section.
-.secondary {
-	align-items: center;
-
-	img {
-		// let's fit images
-		object-fit: cover;
-		width: 100%;
-	}
-}
-
-// Viewport breakpoints.
-.is-viewport-small {
-	// Add spacing between primary and secondary in "sm" viewport size
-	.primary {
-		margin-bottom: calc(var(--spacing-base) * 3);
-	}
-}