@automattic/jetpack-components 0.39.0

package/components/theme-provider/index.tsx

@@ -0,0 +1,151 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import styles from './globals.module.scss';
+import { ThemeInstance, ThemeProviderProps } from './types';
+
+export const typography = {
+	// Headline
+	'--font-headline-medium': '48px',
+	'--font-headline-small': '36px',
+	'--font-title-medium': '24px',
+	'--font-title-small': '20px',
+	'--font-body': '16px',
+	'--font-body-small': '14px',
+	'--font-body-extra-small': '12px',
+	// Deprecated
+	'--font-title-large': 'var(--font-headline-small)',
+	'--font-label': 'var(--font-body-extra-small)',
+};
+
+export const colors = {
+	'--jp-black': '#000000',
+	'--jp-black-80': '#2c3338',
+	// White
+	'--jp-white': '#ffffff',
+	'--jp-white-off': '#f9f9f6',
+	// Gray
+	'--jp-gray': '#dcdcde',
+	'--jp-gray-0': '#F6F7F7',
+	'--jp-gray-10': '#C3C4C7',
+	'--jp-gray-20': '#A7AAAD',
+	'--jp-gray-40': '#787C82',
+	'--jp-gray-50': '#646970',
+	'--jp-gray-60': '#50575E',
+	'--jp-gray-70': '#3C434A',
+	'--jp-gray-80': '#2C3338',
+	'--jp-gray-90': '#1d2327',
+	'--jp-gray-off': '#e2e2df',
+	// Red
+	'--jp-red-0': '#F7EBEC',
+	'--jp-red-5': '#FACFD2',
+	'--jp-red-40': '#E65054',
+	'--jp-red-50': '#D63638',
+	'--jp-red-60': '#B32D2E',
+	'--jp-red-70': '#8A2424',
+	'--jp-red-80': '#691C1C',
+	'--jp-red': '#d63639',
+	// Yellow
+	'--jp-yellow-5': '#F5E6B3',
+	'--jp-yellow-10': '#F2CF75',
+	'--jp-yellow-20': '#F0C930',
+	'--jp-yellow-30': '#DEB100',
+	'--jp-yellow-40': '#C08C00',
+	'--jp-yellow-50': '#9D6E00',
+	'--jp-yellow-60': '#7D5600',
+	// Blue
+	'--jp-blue-20': '#68B3E8',
+	'--jp-blue-40': '#1689DB',
+	// Pink
+	'--jp-pink': '#C9356E',
+	// Green
+	'--jp-green-0': '#f0f2eb',
+	'--jp-green-5': '#d0e6b8',
+	'--jp-green-10': '#9dd977',
+	'--jp-green-20': '#64ca43',
+	'--jp-green-30': '#2fb41f',
+	'--jp-green-40': '#069e08',
+	'--jp-green-50': '#008710',
+	'--jp-green-60': '#007117',
+	'--jp-green-70': '#005b18',
+	'--jp-green-80': '#004515',
+	'--jp-green-90': '#003010',
+	'--jp-green-100': '#001c09',
+	'--jp-green': '#069e08',
+	'--jp-green-primary': 'var( --jp-green-40 )',
+	'--jp-green-secondary': 'var( --jp-green-30 )',
+};
+
+export const borders = {
+	'--jp-border-radius': '4px',
+	'--jp-menu-border-height': '1px',
+	'--jp-underline-thickness': '2px',
+};
+
+export const spacing = {
+	'--spacing-base': '8px',
+};
+
+const globalThemeInstances: Record< string, ThemeInstance > = {};
+
+const setup = ( root: HTMLElement, id: string, withGlobalStyles?: boolean ) => {
+	const tokens = { ...typography, ...colors, ...borders, ...spacing };
+	for ( const key in tokens ) {
+		root.style.setProperty( key, tokens[ key ] );
+	}
+
+	if ( withGlobalStyles ) {
+		root.classList.add( styles.global );
+	}
+
+	if ( ! id ) {
+		return;
+	}
+
+	// Register theme provider instance.
+	globalThemeInstances[ id ] = {
+		provided: true,
+		root,
+	};
+};
+
+/**
+ * ThemeProvider React component.
+ *
+ * @param {ThemeProviderProps} props           - Component properties.
+ * @returns {React.ReactNode}        ThemeProvider component.
+ */
+const ThemeProvider: React.FC< ThemeProviderProps > = ( {
+	children = null,
+	targetDom,
+	id,
+	withGlobalStyles = true,
+} ) => {
+	const themeWrapperRef = useRef< HTMLDivElement >();
+
+	// Check whether the theme provider instance is already registered.
+	const isAlreadyProvided = globalThemeInstances?.[ id ]?.provided;
+
+	useLayoutEffect( () => {
+		if ( isAlreadyProvided ) {
+			return;
+		}
+
+		if ( targetDom ) {
+			return setup( targetDom, id, withGlobalStyles );
+		}
+
+		if ( ! themeWrapperRef?.current ) {
+			return;
+		}
+
+		setup( themeWrapperRef.current, id, withGlobalStyles );
+	}, [ targetDom, themeWrapperRef, isAlreadyProvided, id, withGlobalStyles ] );
+
+	// Do not wrap when the DOM element target is defined.
+	if ( targetDom ) {
+		return children;
+	}
+
+	return <div ref={ themeWrapperRef }>{ children }</div>;
+};
+
+export default ThemeProvider;

package/components/theme-provider/stories/index.stories.tsx

@@ -0,0 +1,164 @@
+import { Button } from '@wordpress/components';
+import { useCopyToClipboard } from '@wordpress/compose';
+import Col from '../../layout/col';
+import Container from '../../layout/container';
+import ThemeProvider, { typography, colors, borders, spacing } from '../index';
+import styles from './style.module.scss';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Get the contrasting color for any hex color
+ * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/
+ *
+ * @param   {string} hexcolor - hexcolor value
+ * @returns {string}            The contrasting color (black or white)
+ */
+function getContrast( hexcolor ) {
+	// If a leading # is provided, remove it
+	if ( hexcolor.slice( 0, 1 ) === '#' ) {
+		hexcolor = hexcolor.slice( 1 );
+	}
+
+	// If a three-character hexcode, make six-character
+	if ( hexcolor.length === 3 ) {
+		hexcolor = hexcolor
+			.split( '' )
+			.map( function ( hex ) {
+				return hex + hex;
+			} )
+			.join( '' );
+	}
+
+	// Convert to RGB value
+	const r = parseInt( hexcolor.substring( 0, 2 ), 16 );
+	const g = parseInt( hexcolor.substring( 2, 4 ), 16 );
+	const b = parseInt( hexcolor.substring( 4, 6 ), 16 );
+
+	// Get YIQ ratio
+	const yiq = ( r * 299 + g * 587 + b * 114 ) / 1000;
+
+	// Check contrast
+	return yiq >= 128 ? 'black' : 'white';
+}
+export default {
+	title: 'JS Packages/Components/Theme Provider',
+} as ComponentMeta< typeof ThemeProvider >;
+
+const noop = () => {
+	//
+};
+
+const ClipboardButton: React.FC< React.ComponentProps< typeof Button > > = ( {
+	text,
+	...buttonProps
+} ) => {
+	const ref = useCopyToClipboard( text, noop );
+	return <Button { ...buttonProps } ref={ ref } />;
+};
+
+const Section = ( { title, data, children = null } ) => (
+	<div className={ styles.section }>
+		<h1 className={ styles.title }>{ title }</h1>
+		<Container fluid>
+			{ Object.keys( data ).map( key => (
+				<Col lg={ 3 } className={ styles.box }>
+					<Container fluid horizontalGap={ 2 }>
+						<Col className={ styles.key }>{ key }</Col>
+						{ children && <Col className={ styles.example }>{ children( data[ key ] ) }</Col> }
+						<Col>
+							<div className={ styles[ 'value-label' ] }>Value</div>
+							<input
+								type="text"
+								value={ data[ key ] }
+								readOnly={ true }
+								className={ styles.value }
+							/>
+						</Col>
+					</Container>
+				</Col>
+			) ) }
+		</Container>
+	</div>
+);
+
+export const Tokens = () => (
+	<>
+		<Section title="Typography" data={ typography }>
+			{ value => <div style={ { fontSize: value } }>Text</div> }
+		</Section>
+		<Section title="Colors" data={ colors }>
+			{ value => (
+				<div className={ styles[ 'colors-example' ] } style={ { backgroundColor: value } } />
+			) }
+		</Section>
+		<Section title="Borders" data={ borders } />
+		<Section title="Spacing" data={ spacing } />
+	</>
+);
+Tokens.parameters = {
+	docs: { source: { code: null } },
+};
+
+export const Typographies = args => (
+	<div className={ styles[ 'instances-wrapper' ] }>
+		{ Object.keys( typography ).map( key => (
+			<div className={ styles[ 'font-instance' ] } style={ { fontSize: typography[ key ] } }>
+				{ args?.[ 'Text Instance' ] || `${ key } (${ typography[ key ] } )` }
+
+				<ClipboardButton variant="tertiary" text={ key } className={ styles[ 'copy-button' ] }>
+					Copy
+				</ClipboardButton>
+			</div>
+		) ) }
+	</div>
+);
+
+Typographies.args = {
+	[ 'Text Instance' ]: '',
+};
+Typographies.parameters = {
+	docs: { source: { code: null } },
+};
+
+export const Colors = () => (
+	<div className={ styles[ 'instances-wrapper' ] }>
+		{ Object.keys( colors ).map( key => (
+			<div
+				className={ styles[ 'color-instance' ] }
+				style={ { backgroundColor: colors[ key ], color: getContrast( colors[ key ] ) } }
+			>
+				{ `${ key } (${ colors[ key ].toUpperCase() } )` }
+
+				<ClipboardButton
+					variant="tertiary"
+					text={ key }
+					className={ styles[ 'copy-button' ] }
+					style={ { color: getContrast( colors[ key ] ) } }
+				>
+					Copy
+				</ClipboardButton>
+			</div>
+		) ) }
+	</div>
+);
+Colors.parameters = {
+	docs: { source: { code: null } },
+};
+
+const Template: ComponentStory< typeof ThemeProvider > = args => (
+	<ThemeProvider { ...args }>
+		<div
+			style={ {
+				color: 'var( --jp-white )',
+				backgroundColor: 'var( --jp-pink )',
+				fontSize: 'var( --font-title-small )',
+				padding: 'var( --spacing-base ) calc( var( --spacing-base ) * 2 )',
+				borderRadius: 'var( --jp-border-radius )',
+			} }
+		>
+			Pink Jetpack Show
+		</div>
+	</ThemeProvider>
+);
+export const BasicUsage = Template.bind( {} );

package/components/theme-provider/stories/style.module.scss

@@ -0,0 +1,79 @@
+.section {
+	width: 100%;
+	margin: auto;
+	padding: 8px 32px;
+}
+
+.key {
+	background-color: var(--jp-green-80);
+	border-radius: var(--jp-border-radius);
+	padding: 8px;
+	color: var(--jp-white);
+	font-weight: 600;
+}
+
+.box {
+	border: 1px solid var(--jp-gray);
+	border-radius: var(--jp-border-radius);
+	padding: 16px;
+}
+
+.example {
+	height: 40px;
+	display: flex;
+	align-items: center;
+	border: 1px solid var(--jp-gray);
+	border-radius: var(--jp-border-radius);
+	padding: 8px;
+}
+
+.value-label {
+	font-weight: 600;
+	font-size: var(--font-label);
+	margin: 8px 0;
+}
+
+.value {
+	width: 100%;
+}
+
+.colors-example {
+	width: 100%;
+	height: 100%;
+}
+
+.instances-wrapper {
+	display: flex;
+	flex-direction: column;
+}
+
+.font-instance {
+	margin: 10px 0;
+	padding: 20px 30px;
+	background-color: var( --jp-white );
+	border: 1px dotted var( --jp-gray-10 );
+	position: relative;
+	&:hover .copy-button {
+		opacity: 1;
+	}
+}
+
+.color-instance {
+	font-size: var( --font-title-small );
+	border: 1px dotted var( --jp-gray-10 );
+	min-height: 60px;
+	line-height: 60px;
+	padding: 10px;
+	margin: 10px 0;
+	position: relative;
+	&:hover .copy-button {
+		opacity: 1;
+	}
+}
+
+.copy-button {
+	opacity: 0.3;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}

package/components/theme-provider/types.ts

@@ -0,0 +1,25 @@
+export type ThemeProviderProps = {
+	/**
+	 * An optional id to register and identify the provider instance.
+	 */
+	id?: string;
+
+	/**
+	 * Target DOM element to store theme styles. Optional.
+	 */
+	targetDom?: HTMLElement;
+
+	/**
+	 * Content
+	 */
+	children?: React.ReactElement;
+	/**
+	 * Inser global/reset styles
+	 */
+	withGlobalStyles?: boolean;
+};
+
+export type ThemeInstance = {
+	provided: boolean;
+	root: HTMLElement;
+};

package/components/toggle-control/README.md

@@ -0,0 +1,5 @@
+# Toggle Control
+
+A wrapper component for applying Jetpack Emerald styles to the [ToggleControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle) component from `@wordpress/components`.
+
+The documentation for the base `ToggleControl` component can be found via the [Gutenberg Handbook](https://developer.wordpress.org/block-editor/components/toggle-control/).

package/components/toggle-control/index.tsx

@@ -0,0 +1,67 @@
+import { ToggleControl as WPToggleControl } from '@wordpress/components';
+import classNames from 'classnames';
+import { useCallback } from 'react';
+import styles from './styles.module.scss';
+
+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?: React.ReactNode;
+
+	/** Whether or not the toggling is currently toggling. */
+	toggling?: boolean;
+
+	/** The label for the toggle. */
+	label?: React.ReactNode;
+
+	/** A callback function invoked when the toggle is clicked. */
+	onChange: ( value: boolean ) => void;
+}
+
+const ToggleControl: React.FC< ToggleControlProps > = ( {
+	checked,
+	className,
+	disabled,
+	help,
+	toggling,
+	label,
+	onChange,
+} ) => {
+	const showChecked =
+		toggling !== undefined ? ( checked && ! toggling ) || ( ! checked && toggling ) : checked;
+
+	const handleOnChange = useCallback(
+		( value: boolean ) => {
+			// Don't toggle if the toggle is already toggling.
+			if ( toggling ) {
+				return;
+			}
+
+			onChange( value );
+		},
+		[ toggling, onChange ]
+	);
+
+	return (
+		<WPToggleControl
+			checked={ showChecked }
+			className={ classNames( styles.toggle, className, {
+				[ styles[ 'is-toggling' ] ]: toggling,
+			} ) }
+			disabled={ disabled }
+			help={ help }
+			label={ label }
+			onChange={ handleOnChange }
+		/>
+	);
+};
+
+export default ToggleControl;

package/components/toggle-control/stories/index.stories.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useState } from 'react';
+import ToggleControl from '..';
+
+export default {
+	title: 'JS Packages/Components/Toggle Control',
+	component: ToggleControl,
+	parameters: {
+		layout: 'centered',
+	},
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Default = args => {
+	const [ checked, setChecked ] = useState( false );
+
+	const handleChecked = useCallback( () => {
+		setChecked( ! checked );
+	}, [ checked ] );
+
+	return <ToggleControl checked={ checked } onChange={ handleChecked } label="Code is poetry." />;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Slow = args => {
+	const [ loading, setLoading ] = useState( false );
+	const [ checked, setChecked ] = useState( false );
+
+	const handleChecked = useCallback( () => {
+		setLoading( true );
+		setTimeout( () => {
+			setLoading( false );
+			setChecked( ! checked );
+		}, 2000 );
+	}, [ checked ] );
+
+	return (
+		<ToggleControl
+			checked={ checked }
+			toggling={ loading }
+			onChange={ handleChecked }
+			label="Code is poetry."
+		/>
+	);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Disabled = args => {
+	const [ checked, setChecked ] = useState( false );
+
+	const handleChecked = useCallback( () => {
+		setChecked( ! checked );
+	}, [ checked ] );
+
+	return (
+		<>
+			<ToggleControl checked={ true } disabled label="Code is poetry." onChange={ handleChecked } />
+			<ToggleControl
+				checked={ false }
+				disabled
+				label="Code is poetry."
+				onChange={ handleChecked }
+			/>
+		</>
+	);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const HelpText = args => {
+	const [ checked, setChecked ] = useState( false );
+
+	const handleChecked = useCallback( () => {
+		setChecked( ! checked );
+	}, [ checked ] );
+
+	return (
+		<ToggleControl
+			checked={ checked }
+			label="Code is poetry."
+			help="Code is poetry. Code is poetry. Code is poetry."
+			onChange={ handleChecked }
+		/>
+	);
+};

package/components/toggle-control/styles.module.scss

@@ -0,0 +1,41 @@
+/// Toggle Control
+///
+/// Overrides the @wordpress/components ToggleControl component.
+/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
+.toggle {
+	:global {
+		.components-form-toggle {
+			--wp-admin-theme-color: var( --jp-green-40 );
+
+			&__input:focus + .components-form-toggle__track {
+				box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
+			}
+
+			.components-form-toggle__track {
+				width: 48px;
+				height: 24px;
+				border-radius: 12px;
+				border-width: 2px;
+			}
+
+			.components-form-toggle__thumb {
+				width: 16px;
+				height: 16px;
+				top: 4px;
+				left: 4px;
+			}
+
+			&.is-checked .components-form-toggle__thumb {
+				transform: translateX( 24px );
+			}
+		}
+	}
+}
+
+.toggle.is-toggling {
+	:global {
+		.components-form-toggle {
+			opacity: .6;
+		}
+	}
+}

package/components/zendesk-chat/README.md

@@ -0,0 +1,26 @@
+# Summary
+
+This component adds a Zendesk chat widget via <script> tag to any page the componet is added to 
+
+WARNING: If you add this to a specific site, it will stay on the page until the browser reloads onto a page that does not load this widget. For example, if a section of the plugin is using `react-router-dom`, and the widget is loaded onto one specific route, it will not go away when a new route is taken since the page is not reloaded
+
+## Usage
+
+```tsx
+import React from 'react';
+import { ZendeskChat } from '@automattic/jetpack-components';
+
+const ExampleComponent = () => (
+	<ZendeskChat />
+);
+```
+
+## Props
+
+None
+
+Because the chat is conditionally rendered based on Date and Time, no props are needed in order to render correctly.
+  
+## Note
+
+There is a wpcom/v2 API endpoint `/presales/chat?group=jp_presales` that returns whether or not chat is available at this time. This should be used when determining whether or not to render this component.

package/components/zendesk-chat/constants.ts

@@ -0,0 +1,2 @@
+// This is not a secret, it can easily be found in the DOM
+export const chatKey = 'd729d42c-b547-4750-a6f6-8b30534a5f12';

package/components/zendesk-chat/index.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { chatKey } from './constants';
+import type { ZendeskChatType } from './types';
+
+export const ZendeskChat: ZendeskChatType = () => {
+	useEffect( () => {
+		const script = document.createElement( 'script' );
+		const container = document.getElementById( 'zendesk-chat-container' );
+
+		script.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + encodeURIComponent( chatKey );
+		script.type = 'text/javascript';
+		script.id = 'ze-snippet';
+
+		if ( container ) {
+			container.appendChild( script );
+		}
+	}, [] );
+
+	return <div data-testid="zendesk-chat-container" id="zendesk-chat-container" />;
+};
+
+export default ZendeskChat;

package/components/zendesk-chat/stories/index.stories.tsx

@@ -0,0 +1,15 @@
+import ZendeskChat from '../index';
+
+export default {
+	title: 'JS Packages/Components/Zendesk Chat',
+	component: ZendeskChat,
+	parameters: {
+		backgrounds: {
+			default: 'dark',
+		},
+	},
+};
+
+const Template = args => <ZendeskChat { ...args } />;
+
+export const _default = Template.bind( {} );