@automattic/jetpack-components 2.2.0 → 3.0.0

package/build/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/build/components/product-offer/types.d.ts

@@ -1,102 +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/build/components/product-offer/types.js

@@ -1 +0,0 @@
-export {};

package/build/components/radio-control/index.d.ts

@@ -1,24 +0,0 @@
-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;
-}
-declare const RadioControl: FC<RadioControlProps>;
-export default RadioControl;

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RadioControl as WPRadioControl } from '@wordpress/components';
-import clsx from 'clsx';
-const RadioControl = ({ selected, className, disabled, help, label, hideLabelFromVision, options, onChange, }) => {
-    return (_jsx(WPRadioControl, { selected: selected, className: clsx('radio', className), disabled: disabled, help: help, label: label, hideLabelFromVision: hideLabelFromVision, options: options, onChange: onChange }));
-};
-export default RadioControl;

package/build/components/split-button/index.d.ts

@@ -1,4 +0,0 @@
-import { SplitButtonProps } from './types.ts';
-import type { FC } from 'react';
-declare const SplitButton: FC<SplitButtonProps>;
-export default SplitButton;

package/build/components/split-button/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, DropdownMenu } from '@wordpress/components';
-import styles from './style.module.scss';
-const DownIcon = () => (_jsx("svg", { width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "10 9 4 7", children: _jsx("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" }) }));
-const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...buttonProps }) => {
-    // Cast to work around WPButton's strict union type
-    const wpButtonProps = {
-        variant,
-        className: styles.button,
-        ...buttonProps,
-    };
-    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { ...wpButtonProps }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
-};
-export default SplitButton;

package/build/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/build/components/split-button/types.d.ts

@@ -1,5 +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 & Required<Pick<AllowedDropdownMenuProps, 'controls'>>;
-export {};

package/build/components/split-button/types.js

@@ -1 +0,0 @@
-export {};

package/build/components/status/index.d.ts

@@ -1,19 +0,0 @@
-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.
- */
-declare const Status: ({ className, label, status }: StatusProps) => JSX.Element;
-export default Status;

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