@automattic/jetpack-components 1.12.16 → 2.0.0

package/build/components/number-slider/style.scss

@@ -1,68 +0,0 @@
-@use "@automattic/jetpack-base-styles/style";
-
-$thumb-height: 40px;
-$track-height: 8px;
-
-@mixin adjust-track-rail-styles {
-	height: $track-height;
-	border-radius: 8px;
-}
-
-// On holding thumb styling
-.jp-components-number-slider--is-holding {
-
-	.jp-components-number-slider__thumb {
-		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
-	}
-}
-
-// Base styles
-.jp-components-number-slider__control {
-	width: 100%;
-	height: $thumb-height;
-}
-
-.jp-components-number-slider__track {
-
-	@include adjust-track-rail-styles;
-	top: calc(($thumb-height / 2) - ($track-height / 2));
-	background: var(--jp-gray);
-
-	&.jp-components-number-slider__track-0 {
-		background: var(--jp-green-40);
-	}
-
-	&.jp-components-number-slider__track-1 {
-		background: var(--jp-gray);
-	}
-}
-
-.jp-components-number-slider__thumb {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 16px;
-	height: $thumb-height;
-	background-color: var(--jp-white);
-	border: 1.5px solid var(--jp-green-50);
-	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	border-radius: 4px;
-	color: var(--jp-black);
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-style: normal;
-	font-weight: 600;
-	font-size: var(--font-body);
-	line-height: 24px;
-	letter-spacing: -0.02em;
-	white-space: nowrap;
-	cursor: pointer;
-
-	// On focus thumb styling
-	&.jp-components-number-slider__thumb--is-active {
-		outline: none;
-	}
-
-	&[aria-valuenow="0"] {
-		border-color: var(--jp-gray);
-	}
-}

package/build/components/number-slider/types.d.ts

@@ -1,50 +0,0 @@
-import type { HTMLProps, RefCallback, JSX } from 'react';
-interface HTMLPropsWithRefCallback<T> extends HTMLProps<T> {
-    ref: RefCallback<T>;
-}
-export type NumberSliderProps = {
-    /**
-     * The wrapper class name of this NumberSlider component.
-     */
-    className?: string;
-    /**
-     * The maximum value of the slider.
-     */
-    maxValue?: number;
-    /**
-     * The minimum value of the slider.
-     */
-    minValue?: number;
-    /**
-     * The initial value of the slider.
-     */
-    value?: number;
-    /**
-     * The step value of the slider.
-     */
-    step?: number;
-    /**
-     * Callback called on every value change.
-     * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
-     */
-    onChange?: (value: number) => void;
-    /**
-     * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
-     * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
-     */
-    onBeforeChange?: (value: number) => void;
-    /**
-     * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
-     * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
-     */
-    onAfterChange?: (value: number) => void;
-    /**
-     * Node to render on the slider.
-     */
-    renderThumb?: (props: HTMLPropsWithRefCallback<HTMLDivElement>, state: {
-        index: number;
-        value: number | ReadonlyArray<number>;
-        valueNow: number;
-    }) => JSX.Element | null;
-};
-export {};

package/build/components/number-slider/types.js

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

package/components/number-slider/index.tsx

@@ -1,86 +0,0 @@
-import clsx from 'clsx';
-import { useState } from 'react';
-import ReactSlider, { ReactSliderProps } from 'react-slider';
-import { NumberSliderProps } from './types.ts';
-import type { ComponentType, FC, ReactElement } from 'react';
-import './style.scss';
-
-/**
- * Generate Number Slider
- * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
- *
- * @param {NumberSliderProps} props - Props
- * @return {ReactElement} - JSX element
- */
-const NumberSlider: FC< NumberSliderProps > = ( {
-	className,
-	maxValue = 100,
-	minValue = 0,
-	step = 1,
-	value,
-	onChange,
-	onBeforeChange,
-	onAfterChange,
-	renderThumb,
-} ) => {
-	const [ isThumbHolding, setIsThumbHolding ] = useState( false );
-
-	const componentClassName = clsx( 'jp-components-number-slider', className, {
-		'jp-components-number-slider--is-holding': isThumbHolding,
-	} );
-
-	const onBeforeChangeCallback = beforeValue => {
-		setIsThumbHolding( true );
-
-		if ( typeof onBeforeChange === 'function' ) {
-			onBeforeChange( beforeValue );
-		}
-	};
-
-	const onAfterChangeCallback = afterValue => {
-		setIsThumbHolding( false );
-
-		if ( typeof onAfterChange === 'function' ) {
-			onAfterChange( afterValue );
-		}
-	};
-
-	const renderThumbCallback = renderThumb
-		? renderThumb
-		: ( props, state ) => {
-				const { key, ...otherProps } = props;
-
-				return (
-					<div key={ key } { ...otherProps }>
-						{ state.valueNow }
-					</div>
-				);
-		  };
-
-	/**
-	 * Type casting to prevent TypeScript error:
-	 * TS2604: JSX element type 'ReactSlider' does not have any construct or call signatures.
-	 */
-	const TypedReactSlider = ReactSlider as unknown as ComponentType< ReactSliderProps >;
-
-	return (
-		<div className={ componentClassName } data-testid="number-slider">
-			<TypedReactSlider
-				className="jp-components-number-slider__control"
-				thumbClassName="jp-components-number-slider__thumb"
-				thumbActiveClassName="jp-components-number-slider__thumb--is-active"
-				trackClassName="jp-components-number-slider__track"
-				value={ value }
-				max={ maxValue }
-				min={ minValue }
-				step={ step }
-				renderThumb={ renderThumbCallback } // eslint-disable-line react/jsx-no-bind
-				onChange={ onChange }
-				onBeforeChange={ onBeforeChangeCallback } // eslint-disable-line react/jsx-no-bind
-				onAfterChange={ onAfterChangeCallback } // eslint-disable-line react/jsx-no-bind
-			/>
-		</div>
-	);
-};
-
-export default NumberSlider;

package/components/number-slider/style.scss

@@ -1,68 +0,0 @@
-@use "@automattic/jetpack-base-styles/style";
-
-$thumb-height: 40px;
-$track-height: 8px;
-
-@mixin adjust-track-rail-styles {
-	height: $track-height;
-	border-radius: 8px;
-}
-
-// On holding thumb styling
-.jp-components-number-slider--is-holding {
-
-	.jp-components-number-slider__thumb {
-		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
-	}
-}
-
-// Base styles
-.jp-components-number-slider__control {
-	width: 100%;
-	height: $thumb-height;
-}
-
-.jp-components-number-slider__track {
-
-	@include adjust-track-rail-styles;
-	top: calc(($thumb-height / 2) - ($track-height / 2));
-	background: var(--jp-gray);
-
-	&.jp-components-number-slider__track-0 {
-		background: var(--jp-green-40);
-	}
-
-	&.jp-components-number-slider__track-1 {
-		background: var(--jp-gray);
-	}
-}
-
-.jp-components-number-slider__thumb {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 16px;
-	height: $thumb-height;
-	background-color: var(--jp-white);
-	border: 1.5px solid var(--jp-green-50);
-	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	border-radius: 4px;
-	color: var(--jp-black);
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-style: normal;
-	font-weight: 600;
-	font-size: var(--font-body);
-	line-height: 24px;
-	letter-spacing: -0.02em;
-	white-space: nowrap;
-	cursor: pointer;
-
-	// On focus thumb styling
-	&.jp-components-number-slider__thumb--is-active {
-		outline: none;
-	}
-
-	&[aria-valuenow="0"] {
-		border-color: var(--jp-gray);
-	}
-}

package/components/number-slider/types.ts

@@ -1,58 +0,0 @@
-import type { HTMLProps, RefCallback, JSX } from 'react';
-
-interface HTMLPropsWithRefCallback< T > extends HTMLProps< T > {
-	ref: RefCallback< T >;
-}
-
-export type NumberSliderProps = {
-	/**
-	 * The wrapper class name of this NumberSlider component.
-	 */
-	className?: string;
-
-	/**
-	 * The maximum value of the slider.
-	 */
-	maxValue?: number;
-
-	/**
-	 * The minimum value of the slider.
-	 */
-	minValue?: number;
-
-	/**
-	 * The initial value of the slider.
-	 */
-	value?: number;
-
-	/**
-	 * The step value of the slider.
-	 */
-	step?: number;
-
-	/**
-	 * Callback called on every value change.
-	 * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
-	 */
-	onChange?: ( value: number ) => void;
-
-	/**
-	 * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
-	 * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
-	 */
-	onBeforeChange?: ( value: number ) => void;
-
-	/**
-	 * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
-	 * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
-	 */
-	onAfterChange?: ( value: number ) => void;
-
-	/**
-	 * Node to render on the slider.
-	 */
-	renderThumb?: (
-		props: HTMLPropsWithRefCallback< HTMLDivElement >,
-		state: { index: number; value: number | ReadonlyArray< number >; valueNow: number }
-	) => JSX.Element | null;
-};