@automattic/jetpack-components 0.39.0

package/components/terms-of-service/test/index.test.jsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import TermsOfService from '..';
+
+describe( 'TermsofService', () => {
+	it( "references only 'the buttons above' if multipleButtons is true", () => {
+		render( <TermsOfService multipleButtons /> );
+		expect(
+			screen.getByText(
+				( content, { textContent } ) =>
+					content !== '' && // filter out parent/wrapper elements
+					textContent.startsWith(
+						`By clicking the buttons above, you agree to our Terms of Service`
+					)
+			)
+		).toBeInTheDocument();
+	} );
+
+	it( 'references the label of the agreement button if one is defined', () => {
+		const buttonLabel = 'The best button ever';
+
+		render( <TermsOfService agreeButtonLabel={ buttonLabel } /> );
+		expect(
+			screen.getByText(
+				( content, { textContent } ) =>
+					content !== '' && // filter out parent/wrapper elements
+					textContent.startsWith(
+						`By clicking the ${ buttonLabel } button, you agree to our Terms of Service`
+					)
+			)
+		).toBeInTheDocument();
+	} );
+
+	it( 'links to the Terms of Service document (single button)', () => {
+		render( <TermsOfService agreeButtonLabel={ 'whatever' } /> );
+		expect( screen.getByText( 'Terms of Service', { selector: 'a' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'links to the Terms of Service document (multiple buttons)', () => {
+		render( <TermsOfService multipleButtons /> );
+		expect( screen.getByText( 'Terms of Service', { selector: 'a' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'links to the data sharing document (single button)', () => {
+		render( <TermsOfService agreeButtonLabel={ 'whatever' } /> );
+		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'links to the data sharing document (multiple buttons)', () => {
+		render( <TermsOfService multipleButtons /> );
+		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
+	} );
+} );

package/components/terms-of-service/types.ts

@@ -0,0 +1,30 @@
+type MultipleButtonsProps = {
+	/**
+	 * Indicates whether there are multiple buttons present that would imply agreement if clicked.
+	 */
+	multipleButtons: true;
+
+	/**
+	 * The text label of the button someone would click to agree to the terms.
+	 */
+	agreeButtonLabel?: undefined;
+};
+
+type SingleButtonProps = {
+	/**
+	 * Indicates whether there are multiple buttons present that would imply agreement if clicked.
+	 */
+	multipleButtons?: false;
+
+	/**
+	 * The text label of the button someone would click to agree to the terms.
+	 */
+	agreeButtonLabel: string;
+};
+
+export type TermsOfServiceProps = {
+	/**
+	 * Represents additional CSS classes to be added to the component's root.
+	 */
+	className?: string;
+} & ( MultipleButtonsProps | SingleButtonProps );

package/components/testimonials/index.tsx

@@ -0,0 +1,58 @@
+import { useState, useCallback } from '@wordpress/element';
+import Gridicon from '../gridicon';
+import { Testimonial } from './testimonial';
+import { TestimonialsType } from './types';
+
+const Testimonials: TestimonialsType = ( { testimonials } ) => {
+	const [ currentTestimonialIndex, setcurrentTestimonialIndex ] = useState( 0 );
+
+	const incrementTestimonial = useCallback( () => {
+		const newIndex =
+			currentTestimonialIndex === testimonials.length - 1 ? 0 : currentTestimonialIndex + 1;
+
+		setcurrentTestimonialIndex( newIndex );
+	}, [ currentTestimonialIndex, testimonials ] );
+
+	const decrementTestimonial = useCallback( () => {
+		const newIndex =
+			currentTestimonialIndex === 0 ? testimonials.length - 1 : currentTestimonialIndex - 1;
+
+		setcurrentTestimonialIndex( newIndex );
+	}, [ currentTestimonialIndex, testimonials ] );
+
+	const shouldShowArrows = testimonials.length > 1;
+
+	return (
+		<div className="testimonials">
+			{ shouldShowArrows && (
+				<button
+					data-testid="left-arrow"
+					className="testimonials__left-arrow"
+					onClick={ decrementTestimonial }
+				>
+					<Gridicon icon="chevron-left" size={ 48 } />
+				</button>
+			) }
+
+			{ testimonials.map( ( testimonial, index ) => (
+				<Testimonial
+					key={ index }
+					{ ...testimonial }
+					hidden={ currentTestimonialIndex !== index }
+				/>
+			) ) }
+
+			{ shouldShowArrows && (
+				<button
+					data-testid="right-arrow"
+					className="testimonials__right-arrow"
+					onClick={ incrementTestimonial }
+				>
+					<Gridicon icon="chevron-right" size={ 48 } />
+				</button>
+			) }
+		</div>
+	);
+};
+
+export default Testimonials;

package/components/testimonials/style.scss

@@ -0,0 +1,127 @@
+.testimonials {
+    position: relative;
+
+    margin-top: 1.5rem;
+    padding: calc(var(--spacing-base) * 3);
+    padding-bottom: 0;
+
+    color: var(--jp-black);
+    background-color: var(--jp-white);
+    border-radius: var(--jp-border-radius);
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
+
+    &__left-arrow,
+    &__right-arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+
+        background: none;
+        border: none;
+
+        svg {
+            color: #1e1e1e;
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            svg {
+                color: var(--jp-gray-20);
+            }
+        }
+    }
+
+    &__left-arrow {
+        left: 0;
+    }
+
+    &__right-arrow {
+        right: 0;
+    }
+}
+
+.testimonial {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+
+    &__author-img {
+        min-width: 325px;
+        width: 365px;
+        max-width: 100%;
+        margin-top: 3rem;
+    }
+    
+    &__content {
+        display: flex;
+        gap: 1rem;
+    }
+
+    &__quote-icon {
+        min-width: 32px;
+    }
+
+    &__quote,
+    &__author {
+        font-size: var(--font-title-medium);
+        font-weight: 500;
+        line-height: 1.3;
+    }
+
+    &__quote {
+        margin: 0;
+    }
+
+    &__author {
+        display: block;
+        margin-top: 2rem;
+    }
+
+    &__profession {
+        display: block;
+        margin-top: 0.5rem;
+    }
+
+    @media (min-width: 600px) {
+        padding: calc(var(--spacing-base) * 8);
+        padding-bottom: 0;
+    }
+
+    @media (min-width: 1080px) {
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 3rem;
+
+        padding-top: 0;
+
+        &__content {
+            align-self: center;
+
+            min-width: 350px;
+            max-width: 550px;
+        }
+
+        &__text-block {
+            padding-bottom: calc(var(--spacing-base) * 3);
+        }
+    }
+}
+
+.show {
+    animation: showTestimonial 500ms ease-in-out forwards;
+}
+
+.hidden {
+    display: none;
+}
+
+@keyframes showTestimonial {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/components/testimonials/test/component.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Testimonials from '../index';
+import { Testimonial } from '../testimonial';
+
+const testimonials = [
+	{
+		quote: 'This is a quote',
+		author: 'John Doe',
+		profession: 'CEO',
+		img: 'https://via.placeholder.com/150',
+	},
+	{
+		quote: 'This is another quote',
+		author: 'Jane Doe',
+		profession: 'CTO',
+		img: 'https://via.placeholder.com/149',
+	},
+	{
+		quote: 'This is yet another quote',
+		author: 'Mary Doe',
+		profession: 'CFO',
+		img: 'https://via.placeholder.com/148',
+	},
+];
+
+describe( 'Testimonial', () => {
+	it( 'should render the testimonial', () => {
+		const { quote, author, profession } = testimonials[ 0 ];
+
+		render( <Testimonial { ...testimonials[ 0 ] } hidden={ false } /> );
+
+		expect( screen.getByText( `“${ quote }”` ) ).toBeInTheDocument();
+		expect( screen.getByText( author ) ).toBeInTheDocument();
+		expect( screen.getByText( profession ) ).toBeInTheDocument();
+		expect( screen.getByAltText( author ) ).toBeInTheDocument();
+	} );
+} );
+
+describe( 'Testimonials', () => {
+	it( 'should render the first testimonial on load', () => {
+		const { quote, author, profession } = testimonials[ 0 ];
+		render( <Testimonials testimonials={ testimonials } /> );
+
+		expect( screen.getByText( `“${ quote }”` ) ).toBeInTheDocument();
+		expect( screen.getByText( author ) ).toBeInTheDocument();
+		expect( screen.getByText( profession ) ).toBeInTheDocument();
+		expect( screen.getByAltText( author ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render the next testimonial when the right arrow is clicked', () => {
+		const { author: secondAuthor } = testimonials[ 1 ];
+
+		render( <Testimonials testimonials={ testimonials } /> );
+
+		const rightArrow = screen.getByTestId( 'right-arrow' );
+		userEvent.click( rightArrow );
+
+		expect( screen.getByText( secondAuthor ) ).toBeInTheDocument();
+
+		userEvent.click( rightArrow );
+
+		const { author: thirdAuthor } = testimonials[ 2 ];
+
+		expect( screen.getByText( thirdAuthor ) ).toBeInTheDocument();
+
+		userEvent.click( rightArrow );
+
+		const { author } = testimonials[ 0 ];
+
+		expect( screen.getByText( author ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render the previous testimonial when the left arrow is clicked', () => {
+		const { author: thirdAuthor } = testimonials[ 2 ];
+
+		render( <Testimonials testimonials={ testimonials } /> );
+
+		const leftArrow = screen.getByTestId( 'left-arrow' );
+		userEvent.click( leftArrow );
+
+		expect( screen.getByText( thirdAuthor ) ).toBeInTheDocument();
+
+		userEvent.click( leftArrow );
+
+		const { author: secondAuthor } = testimonials[ 1 ];
+
+		expect( screen.getByText( secondAuthor ) ).toBeInTheDocument();
+
+		userEvent.click( leftArrow );
+
+		const { author } = testimonials[ 0 ];
+
+		expect( screen.getByText( author ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not render the arrows if there is only one testimonial', () => {
+		render( <Testimonials testimonials={ [ testimonials[ 0 ] ] } /> );
+
+		expect( screen.queryByTestId( 'left-arrow' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'right-arrow' ) ).not.toBeInTheDocument();
+	} );
+} );

package/components/testimonials/testimonial.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import type { TestimonialType } from './types';
+
+import './style.scss';
+
+const Testimonial: TestimonialType = ( { quote, author, profession, img, hidden } ) => {
+	return (
+		<div className={ classNames( 'testimonial', hidden ? 'hidden' : 'show' ) } key={ author }>
+			<img className="testimonial__author-img" src={ img } alt={ author } />
+
+			<div className="testimonial__content">
+				<svg
+					width="32"
+					height="32"
+					viewBox="0 0 32 32"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					className="testimonial__quote-icon"
+				>
+					<path d="M14.6667 24L6.66675 24L6.66675 16L14.6667 16L14.6667 24Z" fill="#1E1E1E" />
+					<path d="M26.6667 24L18.6667 24L18.6667 16L26.6667 16L26.6667 24Z" fill="#1E1E1E" />
+					<path
+						d="M6.66675 24.0001C6.66675 19.5573 6.66675 14.9337 6.66675 10.6686C6.66675 6.40254 10.0001 6.67016 12.0001 6.66987"
+						stroke="#1E1E1E"
+						strokeWidth="1.5"
+					/>
+					<path
+						d="M18.6668 24.0001C18.6667 19.5573 18.6667 14.9337 18.6667 10.6686C18.6667 6.40254 22.0001 6.67016 24.0001 6.66987"
+						stroke="#1E1E1E"
+						strokeWidth="1.5"
+					/>
+				</svg>
+
+				<div className="testimonial__text-block">
+					<blockquote className="testimonial__quote">“{ quote }”</blockquote>
+
+					<figcaption>
+						<span className="testimonial__author">{ author }</span>
+						<span className="testimonial__profession">{ profession }</span>
+					</figcaption>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export { Testimonial };

package/components/testimonials/types.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+export interface TestimonialProps {
+	img: string;
+	quote: string;
+	author: string;
+	profession: string | ReactNode;
+	hidden?: boolean;
+}
+
+export type TestimonialType = FC< TestimonialProps >;
+
+export interface TestimonialsProps {
+	testimonials: TestimonialProps[];
+}
+
+export type TestimonialsType = FC< TestimonialsProps >;

package/components/text/constants.ts

@@ -0,0 +1,30 @@
+export const VARIANTS_MAPPING = {
+	'headline-medium': 'h1',
+	'headline-small': 'h2',
+	'headline-small-regular': 'h2',
+	'title-medium': 'h3',
+	'title-medium-semi-bold': 'h3',
+	'title-small': 'h4',
+	body: 'p',
+	'body-small': 'p',
+	'body-extra-small': 'p',
+	'body-extra-small-bold': 'p',
+	label: 'p',
+} as const;
+
+export const BOX_MODEL_VALUES = [
+	'mt',
+	'mr',
+	'mb',
+	'ml',
+	'mx',
+	'my',
+	'm',
+	'pt',
+	'pr',
+	'pb',
+	'pl',
+	'px',
+	'py',
+	'p',
+] as const;

package/components/text/index.tsx

@@ -0,0 +1,91 @@
+import classNames from 'classnames';
+import React, { useMemo, forwardRef } from 'react';
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants';
+import styles from './style.module.scss';
+import type { H3Props, TextProps, TitleProps } from './types';
+
+/**
+ * Text component.
+ *
+ * @param {TextProps} props - Component props.
+ * @returns {React.ReactElement} - JSX.Element
+ */
+const Text = forwardRef< HTMLElement, TextProps >(
+	( { variant = 'body', children, component, className, ...componentProps }, ref ) => {
+		const Component = component || VARIANTS_MAPPING[ variant ] || 'span';
+
+		// Build Styles module CSS classnames.
+		const boxModelClasses = useMemo( () => {
+			return BOX_MODEL_VALUES.reduce( ( acc, value ) => {
+				if ( typeof componentProps[ value ] !== 'undefined' ) {
+					acc += styles[ `${ value }-${ componentProps[ value ] }` ] + ' ';
+					// pick spacing prop. Do not pass down to Component.
+					delete componentProps[ value ];
+				}
+				return acc;
+			}, '' );
+		}, [ componentProps ] );
+
+		componentProps.ref = ref;
+
+		return (
+			<Component
+				className={ classNames( styles.reset, styles[ variant ], className, boxModelClasses ) }
+				{ ...componentProps }
+			>
+				{ children }
+			</Component>
+		);
+	}
+);
+Text.displayName = 'Text';
+
+export default Text;
+
+/**
+ * Heading component - Medium size.
+ *
+ * @param {TextProps} props      - Component props.
+ * @returns {React.ReactElement} - JSX.Element
+ */
+export const H2: React.FC< TextProps > = ( { children, ...componentProps } ) => (
+	<Text variant="headline-medium" mb={ 3 } { ...componentProps }>
+		{ children }
+	</Text>
+);
+
+/**
+ * Heading component - Small size,
+ *
+ * @param {H3Props} props        - Component props.
+ * @returns {React.ReactElement} - JSX.Element
+ */
+export const H3: React.FC< H3Props > = ( { children, weight = 'bold', ...componentProps } ) => {
+	const variant = `headline-small${
+		weight === 'bold' ? '' : `-${ weight }`
+	}` as TextProps[ 'variant' ];
+
+	return (
+		<Text variant={ variant } mb={ 3 } { ...componentProps }>
+			{ children }
+		</Text>
+	);
+};
+
+/**
+ * Title component, based on Text component.
+ *
+ * @param {TitleProps} props     - Component props.
+ * @returns {React.ReactElement} - JSX.Element
+ */
+export const Title: React.FC< TitleProps > = ( {
+	children,
+	size = 'medium',
+	...componentProps
+} ) => (
+	<Text variant={ `title-${ size }` } mb={ 1 } { ...componentProps }>
+		{ children }
+	</Text>
+);
+
+export * from './constants';

package/components/text/stories/headings.index.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { H2, H3 } from '../index';
+import styles from './style.module.scss';
+import type { H3Props } from '../types';
+
+const TIPOGRAPHY_WEIGHTS: Array< H3Props[ 'weight' ] > = [ 'regular', 'bold' ];
+
+export default {
+	title: 'JS Packages/Components/Text/Heading',
+	component: H2,
+	argTypes: {
+		children: {
+			control: { type: 'text' },
+		},
+		weight: {
+			control: { type: 'select' },
+			options: TIPOGRAPHY_WEIGHTS,
+		},
+	},
+};
+
+/**
+ * Helper component to create a the story.
+ *
+ * @param {object} props                   - Component props.
+ * @param {React.Component} props.children - Icon component children.
+ * @returns {React.Component}                Text component instance.
+ */
+function Instance( { children } ) {
+	return (
+		<div className={ styles.instance }>
+			<span>Text above to the the component...</span>
+			{ children }
+			<span>Text below to the the component...</span>
+		</div>
+	);
+}
+
+const TemplateH2 = args => (
+	<Instance>
+		<H2 { ...args }>
+			{ args?.children ||
+				'Headline Medium - Manage your Jetpack plan and products all in one place' }
+		</H2>
+	</Instance>
+);
+
+const TemplateH3 = args => (
+	<Instance>
+		<H3 { ...args }>
+			{ args?.children ||
+				'Headline Small - Manage your Jetpack plan and products all in one place' }
+		</H3>
+	</Instance>
+);
+
+const Template = args => {
+	return (
+		<>
+			<TemplateH2 { ...args } />
+			<TemplateH3 { ...args } />
+		</>
+	);
+};
+
+const DefaultArgs = {};
+export const Default = Template.bind( {} );
+Default.args = DefaultArgs;
+
+export const HeadlineH2 = TemplateH2.bind( {} );
+HeadlineH2.storyName = 'H2';
+HeadlineH2.args = {
+	weight: 'bold',
+} as H3Props;
+
+export const HeadlineH3 = TemplateH3.bind( {} );
+HeadlineH3.storyName = 'H3';
+HeadlineH3.args = {
+	weight: 'bold',
+} as H3Props;