@automattic/jetpack-components 0.39.0

package/components/automattic-byline-logo/test/component.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import AutomatticBylineLogo from '../index';
+
+describe( 'AutomatticBylineLogo', () => {
+	const testProps = {
+		className: 'sample-classname',
+	};
+
+	describe( 'Render the AutomatticBylineLogo component', () => {
+		it( 'validate the class name', () => {
+			const { container } = render( <AutomatticBylineLogo { ...testProps } /> );
+			// eslint-disable-next-line testing-library/no-node-access
+			expect( container.firstChild ).toHaveClass( 'sample-classname' );
+		} );
+
+		it( 'renders the default title', () => {
+			render( <AutomatticBylineLogo /> );
+
+			expect( screen.getByText( 'An Automattic Airline' ) ).toBeInTheDocument();
+		} );
+
+		it( 'renders the given title', () => {
+			render( <AutomatticBylineLogo title="An A8C Airline" /> );
+
+			expect( screen.getByText( 'An A8C Airline' ) ).toBeInTheDocument();
+		} );
+	} );
+} );

package/components/automattic-byline-logo/types.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+
+export interface AutomatticBylineLogoProps extends React.SVGProps< SVGSVGElement > {
+	/**
+	 * Title for SVG.
+	 */
+	title?: string;
+
+	/**
+	 * Height for SVG.
+	 */
+	height?: number;
+
+	/**
+	 * Additional className for the a wrapper. `jp-automattic-byline-logo` always included
+	 */
+	className?: string;
+}

package/components/boost-score-bar/index.tsx

@@ -0,0 +1,103 @@
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import Gridicon from '../gridicon';
+import type { BoostScoreBarProps } from './types';
+import type { FunctionComponent } from 'react';
+
+import './style.scss';
+
+export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
+	score,
+	isLoading,
+	showPrevScores,
+	active,
+	prevScore = 0,
+	scoreBarType,
+	noBoostScoreTooltip,
+} ) => {
+	if ( ! active ) {
+		return null;
+	}
+
+	const prevScoreOffset = ( prevScore / score ) * 100;
+	const desktopIconLabel = __( 'Desktop score', 'jetpack' );
+	const mobileIconLabel = __( 'Mobile score', 'jetpack' );
+
+	const getIcon = () => {
+		if ( scoreBarType === 'desktop' ) {
+			return <Gridicon icon="computer" size={ 24 } />;
+		}
+
+		return <Gridicon icon="phone" size={ 24 } />;
+	};
+
+	const getFillColor = () => {
+		// This shows the loading color unless a score already exists.
+		// In that case, shows the color based on the current score while refreshing.
+		if ( isLoading && ! score ) {
+			return 'fill-loading';
+		}
+
+		if ( score > 70 ) {
+			return 'fill-good';
+		}
+
+		if ( score > 50 ) {
+			return 'fill-mediocre';
+		}
+
+		return 'fill-bad';
+	};
+
+	return (
+		<div className={ classNames( 'jb-score-bar', `jb-score-bar--${ scoreBarType }` ) }>
+			<div className="jb-score-bar__label">
+				{ getIcon() }
+				<div>{ scoreBarType === 'desktop' ? desktopIconLabel : mobileIconLabel }</div>
+			</div>
+
+			<div className="jb-score-bar__bounds">
+				<div
+					className={ classNames( 'jb-score-bar__filler', getFillColor() ) }
+					style={ { width: `${ score }%` } }
+				>
+					{ isLoading ? (
+						<div className="jb-score-bar__loading">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 128 128">
+								<g>
+									<path d="M64 0a7 7 0 11-7 7 7 7 0 017-7zm29.86 12.2a2.8 2.8 0 11-3.83 1.02 2.8 2.8 0 013.83-1.02zm22.16 21.68a3.15 3.15 0 11-4.3-1.15 3.15 3.15 0 014.3 1.15zm.87 60.53a4.2 4.2 0 11-1.57-5.7 4.2 4.2 0 011.54 5.73zm7.8-30.5a3.85 3.85 0 11-3.85-3.85 3.85 3.85 0 013.85 3.84zm-30 53.2a4.55 4.55 0 111.66-6.23 4.55 4.55 0 01-1.67 6.22zM64 125.9a4.9 4.9 0 114.9-4.9 4.9 4.9 0 01-4.9 4.9zm-31.06-8.22a5.25 5.25 0 117.17-1.93 5.25 5.25 0 01-7.14 1.93zM9.9 95.1a5.6 5.6 0 117.65 2.06A5.6 5.6 0 019.9 95.1zM1.18 63.9a5.95 5.95 0 115.95 5.94 5.95 5.95 0 01-5.96-5.94zm8.1-31.6a6.3 6.3 0 112.32 8.6 6.3 6.3 0 01-2.3-8.6zM32.25 8.87a6.65 6.65 0 11-2.44 9.1 6.65 6.65 0 012.46-9.1z" />
+									<animateTransform
+										attributeName="transform"
+										type="rotate"
+										values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
+										calcMode="discrete"
+										dur="1080ms"
+										repeatCount="indefinite"
+									/>
+								</g>
+							</svg>
+						</div>
+					) : (
+						<div className="jb-score-bar__score">{ score }</div>
+					) }
+
+					{ showPrevScores && prevScore && prevScore < score && (
+						<div
+							className="jb-score-bar__no_boost_score"
+							style={ { left: `min(${ prevScoreOffset }%, calc( 100% - var(--clearance-space))` } }
+						>
+							{ prevScore }
+							{ noBoostScoreTooltip && (
+								<div role="tooltip" className="jb-score-bar__no_boost_score_tooltip">
+									{ noBoostScoreTooltip }
+								</div>
+							) }
+						</div>
+					) }
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default BoostScoreBar;

package/components/boost-score-bar/stories/index.stories.tsx

@@ -0,0 +1,39 @@
+import BoostScoreBar from '../index';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof BoostScoreBar > = {
+	title: 'JS Packages/Components/Boost Score Bar',
+	component: BoostScoreBar,
+	argTypes: {
+		score: { control: 'range', min: 0, max: 100, defaultValue: 80 },
+		prevScore: { control: 'range', min: 0, max: 100 },
+		isLoading: { control: 'boolean' },
+		showPrevScores: { control: 'boolean' },
+		active: { control: 'boolean' },
+		scoreBarType: { control: 'radio', options: [ 'desktop', 'mobile' ] },
+		noBoostScoreTooltip: { control: 'text' },
+	},
+	decorators: [
+		Story => (
+			<div style={ { width: '80%', maxWidth: '1320px', margin: '200px auto', fontSize: '16px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const defaultValues = {
+	score: 80,
+	prevScore: 70,
+	isLoading: false,
+	showPrevScores: true,
+	active: true,
+	scoreBarType: 'desktop',
+	noBoostScoreTooltip: 'No boost score',
+};
+
+export default meta;
+
+const Template = args => <BoostScoreBar { ...args } />;
+export const _default = Template.bind( {} );
+_default.args = defaultValues;

package/components/boost-score-bar/style.scss

@@ -0,0 +1,184 @@
+@use "sass:math";
+
+$bar_height: 42px;
+$label_z_index: 50;
+$score_pointer_size: 6px;
+$no_boost_score_size: 28px;
+
+%score-pill {
+	background-color: #fff;
+	border-radius: $bar_height;
+	height: $bar_height;
+	display: flex;
+	align-items: center;
+	border: 2px solid transparent;
+}
+
+.jb-score-bar {
+	width: 100%;
+	display: flex;
+	color: var(--jp-gray-70);
+
+	&--mobile { // .jb-score-bar--mobile
+		margin-bottom: 1.5rem;
+	}
+
+	@media (max-width: 767px) {
+		flex-direction: column;
+		&__label {
+			background-color: transparent;
+		}
+	}
+
+
+	&__loading {
+		@extend %score-pill;
+		width: $bar_height;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__label {
+		@extend %score-pill;
+		display: grid;
+		grid-template-columns: 24px 1fr;
+		grid-column-gap: 10px;
+		justify-content: center;
+		position: relative;
+		font-size: 14px;
+		position: relative;
+
+		@media (min-width: 768px) {
+			padding-left: 15px;
+			padding-right: 15px;
+			width: 200px;
+			z-index: $label_z_index;
+		}
+	}
+
+	&__score {
+		@extend %score-pill;
+		border-radius: 100%;
+		font-weight: 700;
+		width: $bar_height;
+		justify-content: center;
+		position: absolute;
+		right: -1px;
+		height: $bar_height;
+	}
+
+	&__bounds {
+		background-color: #f1f1f1;
+		border-radius: math.div($bar-height, 2);
+		display: flex;
+		height: $bar_height;
+		width: 100%;
+		max-width: 100%;
+		position: relative;
+		z-index: $label_z_index - 10;
+		@media (min-width: 768px) {
+			width: calc(100% + #{math.div($bar-height, 2)});
+			margin-left: math.div(-$bar_height, 2) ;
+		}
+	}
+
+	&__filler {
+		display: flex;
+		min-width: 1px + $bar_height * 2;
+		justify-content: flex-end;
+		border-radius: 0 $bar_height $bar_height 0;
+		transition: width 300ms ease-in-out;
+		will-change: width;
+		width: 0;
+		position: relative;
+		@media (max-width: 767px) {
+			min-width: $bar_height + 1px;
+			border-radius: inherit;
+		}
+	}
+
+	&__no_boost_score {
+
+		--clearance-space: #{$bar_height + $no_boost_score_size + 4px};
+
+		position: absolute;
+		background: #fff;
+		border-radius: 50%;
+		padding: 3px;
+		top: $score_pointer_size;
+		width: $no_boost_score_size;
+		height: $no_boost_score_size;
+		line-height: 1.625;
+		font-size: 0.7em;
+		text-align: center;
+		cursor: pointer;
+		z-index: 2;
+		border: 2px solid transparent;
+		background-clip: padding-box;
+
+		&:hover {
+			border: 2px solid rgba(255, 255, 255, 0.5);
+		}
+
+		&::after {
+			content: " ";
+			width: 0;
+			height: 0;
+			border-left: $score_pointer_size solid transparent;
+			border-right: $score_pointer_size solid transparent;
+			border-bottom: $score_pointer_size solid #fff;
+
+			position: absolute;
+			top: $bar_height - $score_pointer_size * 2 - 2px;
+			left: $score_pointer_size;
+		}
+	}
+
+	&__no_boost_score_tooltip {
+		box-shadow: 0 0 20px 0 rgb(170 170 170 / 28%);
+		position: absolute;
+		top: -62px;
+		left: -10em;
+		width: 20em;
+		background: #FFF;
+		padding: 16px;
+		border-radius: 4px;
+		margin: 0 16px;
+		display: none;
+
+		&::after {
+			content: " ";
+			width: 0;
+			height: 0;
+			border-left: $score_pointer_size solid transparent;
+			border-right: $score_pointer_size solid transparent;
+			border-top: $score_pointer_size solid #fff;
+
+			position: absolute;
+			bottom: -$score_pointer_size;
+			left: 10em;
+			margin: 0 -10px
+		}
+	}
+
+  	&__no_boost_score:hover &__no_boost_score_tooltip {
+		display: block;
+	}
+
+	.fill-loading {
+		background-color: var(--jp-white);
+	}
+
+	.fill-good {
+		background-color: var(--jp-green);
+	}
+
+	.fill-mediocre {
+		background-color: var(--jp-orange-20);
+	}
+
+	.fill-bad {
+		background-color: var(--jp-red-50);
+	}
+}

package/components/boost-score-bar/test/component.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
+import { render, screen } from '@testing-library/react';
+import BoostScoreBar from '..';
+import type { BoostScoreBarProps } from '../types';
+
+describe( 'BoostScrollBar', () => {
+	const defaultProps: BoostScoreBarProps = {
+		score: 80,
+		prevScore: 60,
+		scoreBarType: 'desktop',
+		active: true,
+		showPrevScores: true,
+		isLoading: false,
+		noBoostScoreTooltip: 'Test tooltip text',
+	};
+
+	it( 'renders the boost scroll bar when active is true', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
+
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( container.firstChild ).toHaveAttribute( 'class', 'jb-score-bar jb-score-bar--desktop' );
+	} );
+
+	it( 'does not render the boost scroll bar when active is false', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } active={ false } /> );
+
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'does not render the tooltip when noBoostScoreTooltip is not provided', () => {
+		render( <BoostScoreBar { ...defaultProps } noBoostScoreTooltip={ undefined } /> );
+
+		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders the tooltip with the correct text when noBoostScoreTooltip is provided', () => {
+		render( <BoostScoreBar { ...defaultProps } /> );
+
+		expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Test tooltip text' );
+	} );
+
+	it( 'displays loading spinner when isLoading is true', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } isLoading={ true } /> );
+
+		expect( container.querySelector( '.jb-score-bar__loading' ) ).toBeInTheDocument();
+	} );
+
+	it( 'does not display loading spinner when isLoading is false', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
+
+		expect( container.querySelector( '.jb-score-bar__loading' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders mobile icon and text when scoreBarType is mobile', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } scoreBarType="mobile" /> );
+
+		expect( screen.getByText( 'Mobile score' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.gridicons-phone' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders desktop icon and text when scoreBarType is desktop', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
+
+		expect( screen.getByText( 'Desktop score' ) ).toBeInTheDocument();
+		expect( container.querySelector( '.gridicons-computer' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders previous scores when showPrevScores is true', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
+
+		const previousScoreContainer = container.querySelector( '.jb-score-bar__no_boost_score' );
+
+		expect( previousScoreContainer ).toBeInTheDocument();
+		expect( previousScoreContainer ).toHaveTextContent( '60' );
+	} );
+
+	it( 'does not render previous scores when showPrevScores is false', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } showPrevScores={ false } /> );
+
+		expect( container.querySelector( '.jb-score-bar__no_boost_score' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders the correct score bar class when score is < 50', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } score={ 40 } /> );
+
+		expect( container.querySelector( '.fill-bad' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the correct score bar class when score is >= 50 and < 71', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } score={ 60 } /> );
+
+		expect( container.querySelector( '.fill-mediocre' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the correct score bar class when score is > 70', () => {
+		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
+
+		expect( container.querySelector( '.fill-good' ) ).toBeInTheDocument();
+	} );
+} );

package/components/boost-score-bar/types.ts

@@ -0,0 +1,9 @@
+export interface BoostScoreBarProps {
+	score: number;
+	prevScore: number;
+	isLoading: boolean;
+	showPrevScores: boolean;
+	active: boolean;
+	scoreBarType: 'mobile' | 'desktop';
+	noBoostScoreTooltip: string | null;
+}

package/components/button/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { Button as WPButton, Spinner } from '@wordpress/components';
+import { Icon, external } from '@wordpress/icons';
+import classNames from 'classnames';
+import React, { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.scss';
+import type { ButtonProps } from './types';
+
+/**
+ * Button component
+ *
+ * @param {ButtonProps} props - Component Props
+ * @returns {React.ReactNode} Rendered button
+ */
+const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
+	const {
+		children,
+		variant = 'primary',
+		size = 'normal',
+		weight = 'bold',
+		icon,
+		iconSize,
+		disabled,
+		isDestructive,
+		isLoading,
+		isExternalLink,
+		className: propsClassName,
+		text,
+		fullWidth,
+		...componentProps
+	} = props;
+
+	const className = classNames( styles.button, propsClassName, {
+		[ styles.normal ]: size === 'normal',
+		[ styles.small ]: size === 'small',
+		[ styles.icon ]: Boolean( icon ),
+		[ styles.loading ]: isLoading,
+		[ styles.regular ]: weight === 'regular',
+		[ styles[ 'full-width' ] ]: fullWidth,
+		[ styles[ 'is-icon-button' ] ]: Boolean( icon ) && ! children,
+	} );
+
+	componentProps.ref = ref;
+
+	const externalIconSize = size === 'normal' ? 20 : 16;
+	const externalIcon = isExternalLink && (
+		<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
+	);
+	const externalTarget = isExternalLink ? '_blank' : undefined;
+
+	// ref https://github.com/WordPress/gutenberg/pull/44198
+	const hasChildren =
+		children?.[ 0 ] &&
+		children[ 0 ] !== null &&
+		// Tooltip should not considered as a child
+		children?.[ 0 ]?.props?.className !== 'components-tooltip';
+
+	return (
+		<WPButton
+			target={ externalTarget }
+			variant={ variant }
+			className={ classNames( className, { 'has-text': !! icon && hasChildren } ) }
+			icon={ ! isExternalLink ? icon : undefined }
+			iconSize={ iconSize }
+			disabled={ disabled }
+			aria-disabled={ disabled }
+			isDestructive={ isDestructive }
+			text={ text }
+			{ ...componentProps }
+		>
+			{ isLoading && <Spinner /> }
+			<span>{ children }</span>
+			{ externalIcon }
+		</WPButton>
+	);
+} );
+Button.displayName = 'Button';
+
+export default Button;

package/components/button/stories/index.mdx

@@ -0,0 +1,90 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import Button from '../index';
+import * as ButtonStories from './index.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+This is a component to create buttons and links across Jetpack.
+
+## Props
+
+Below is the current available props for `Button`.
+
+### variant
+
+It accepts 4 variant types: `primary`, `secondary`, `link`, `external-link`.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--button-primary" />
+  <Story id="js-packages-components-button--button-secondary" />
+  <Story id="js-packages-components-button--button-link" />
+  <Story id="js-packages-components-button--button-external-link" />
+</Canvas>
+
+### size
+
+It accepts 2 size types: `normal` and `small`.
+
+<Canvas>
+  <Story id="js-packages-components-button--button-primary" />
+  <Button size="small">Jetpack Button</Button>
+</Canvas>
+
+### weight
+
+It accepts 2 weight types: `bold` and `regular`. `bold` as default.
+
+### icon
+
+It accepts an SVG, Component or string.
+
+You could use the ones from [@wordpress/icons](https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/index.js).
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--icon" />
+</Canvas>
+
+### iconSize
+
+It defines the size of the icon, it needs to be a number.
+
+### disabled
+
+Disables the button removing cursor-pointer effect.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--disabled" />
+</Canvas>
+
+### isDestructive
+
+Set button on destructive state, which changes the color to red.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--destructive" />
+</Canvas>
+
+### isLoading
+
+Set button on loading state, which applies a centered spinner.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--loading" />
+</Canvas>
+
+### text
+
+It applies a text before children, it could be used together or on its own.
+
+<Canvas>
+  <Button text="My Text">My Children</Button>
+</Canvas>
+
+### fullWidth
+
+Stretches the button to take up the full width of the container.
+
+<Canvas withSource="open">
+  <Story id="js-packages-components-button--full-width" />
+</Canvas>