@automattic/jetpack-components 3.2.0 → 4.0.0

package/components/notice/index.tsx

@@ -1,93 +0,0 @@
-import { Icon, cautionFilled as warning, info, check, close } from '@wordpress/icons';
-import clsx from 'clsx';
-import styles from './style.module.scss';
-import type { Component, FC, ReactElement, ReactNode } from 'react';
-
-type NoticeProps = {
-	/** The severity of the alert. */
-	level?: 'error' | 'warning' | 'info' | 'success';
-
-	/** The title of the notice */
-	title?: string;
-
-	/** A list of action elements to show across the bottom */
-	actions?: ReactNode[];
-
-	/** Hide close button */
-	hideCloseButton?: boolean;
-
-	/** Method to call when the close button is clicked */
-	onClose?: () => void;
-
-	/** Children to be rendered inside the alert. */
-	children: ReactNode;
-};
-
-const getIconByLevel = ( level: NoticeProps[ 'level' ] ) => {
-	switch ( level ) {
-		case 'error':
-			return warning;
-		case 'warning':
-			return warning;
-		case 'info':
-			return info;
-		case 'success':
-			return check;
-		default:
-			return warning;
-	}
-};
-
-/**
- * Notice component
- *
- * @param {object}      props                 - The component properties.
- * @param {string}      props.level           - The notice level: error, warning, info, success.
- * @param {boolean}     props.hideCloseButton - Whether to hide the close button.
- * @param {Function}    props.onClose         - The function to call when the close button is clicked.
- * @param {string}      props.title           - The title of the notice.
- * @param {ReactNode[]} props.actions         - Actions to show across the bottom of the bar.
- * @param {Component}   props.children        - The notice content.
- * @return {ReactElement}              The `Notice` component.
- */
-const Notice: FC< NoticeProps > = ( {
-	level = 'info',
-	title,
-	children,
-	actions,
-	hideCloseButton = false,
-	onClose,
-} ) => {
-	const classes = clsx( styles.container, styles[ `is-${ level }` ] );
-
-	return (
-		<div className={ classes }>
-			<div className={ styles[ 'icon-wrapper' ] }>
-				<Icon icon={ getIconByLevel( level ) } className={ styles.icon } />
-			</div>
-
-			<div className={ styles[ 'main-content' ] }>
-				{ title && <div className={ styles.title }>{ title }</div> }
-				{ children }
-
-				{ actions && actions.length > 0 && (
-					<div className={ styles[ 'action-bar' ] }>
-						{ actions.map( ( action, index ) => (
-							<div key={ index } className={ styles.action }>
-								{ action }
-							</div>
-						) ) }
-					</div>
-				) }
-			</div>
-
-			{ ! hideCloseButton && (
-				<button aria-label="close" className={ styles[ 'close-button' ] } onClick={ onClose }>
-					<Icon icon={ close } />
-				</button>
-			) }
-		</div>
-	);
-};
-
-export default Notice;

package/components/notice/style.module.scss

@@ -1,120 +0,0 @@
-.container {
-	display: flex;
-	align-items: flex-start;
-
-	font-size: var(--font-body);
-
-	border: 1px solid var(--jp-black);
-	border-radius: 4px;
-	border-color: var(--jp-gray-5);
-	border-left-width: 6px;
-
-	padding: 24px 31px 27px 18px;
-}
-
-.icon-wrapper {
-	margin-right: 20px;
-	width: calc(var(--spacing-base) * 3);
-	height: calc(var(--spacing-base) * 3);
-}
-
-.close-button {
-	padding: 0;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	outline: none;
-
-	svg {
-		display: block;
-	}
-}
-
-// Mobile layout differences.
-@media screen and ( max-width: 600px ) {
-
-	.container {
-		position: relative;
-		padding-top: 68px;
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
-	}
-
-	.icon-wrapper {
-		position: absolute;
-		top: 24px;
-		left: 24px;
-	}
-
-	.close-button {
-		position: absolute;
-		top: 24px;
-		right: 24px;
-	}
-}
-
-.main-content {
-	flex-grow: 1;
-}
-
-.title {
-	font-weight: 600;
-	margin-bottom: 8px;
-}
-
-.action-bar {
-	display: flex;
-	align-items: center;
-	margin-top: 20px;
-	row-gap: 20px;
-	flex-wrap: wrap;
-
-	@media screen and ( max-width: 600px ) {
-		justify-content: center;
-	}
-
-	a {
-
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			color: var(--jp-black);
-		}
-	}
-
-	> * {
-		margin-right: 24px;
-	}
-}
-
-.is-error {
-	border-left-color: var(--jp-red);
-
-	.icon {
-		color: var(--jp-red);
-	}
-}
-
-.is-warning {
-	border-left-color: var(--jp-yellow-20);
-
-	.icon {
-		color: var(--jp-yellow-20);
-	}
-}
-
-.is-info {
-	border-left-color: var(--black);
-
-	.icon {
-		color: var(--black);
-	}
-}
-
-.is-success {
-	border-left-color: var(--jp-green);
-
-	.icon {
-		color: var(--jp-green);
-	}
-}

package/components/zendesk-chat/README.md

@@ -1,25 +0,0 @@
-# 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`, 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 { 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

@@ -1,2 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import { chatKey } from './constants.ts';
-import type { ZendeskChatType } from './types.ts';
-
-export const ZendeskChat: ZendeskChatType = ( { jwt_token } ) => {
-	const authenticateUser = useCallback( () => {
-		if ( typeof window !== 'undefined' && typeof window.zE === 'function' ) {
-			window.zE( 'messenger', 'loginUser', function ( callback ) {
-				callback( jwt_token );
-			} );
-		}
-	}, [ jwt_token ] );
-
-	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';
-
-		script.onload = () => {
-			authenticateUser();
-		};
-
-		if ( container ) {
-			container.appendChild( script );
-		}
-	}, [ authenticateUser ] );
-
-	return <div data-testid="zendesk-chat-container" id="zendesk-chat-container" />;
-};
-
-export default ZendeskChat;

package/components/zendesk-chat/types.ts

@@ -1,14 +0,0 @@
-import type { FC } from 'react';
-
-declare global {
-	interface Window {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-		zE: Function;
-	}
-}
-
-interface ZendeskChatProps {
-	jwt_token: string;
-}
-
-export type ZendeskChatType = FC< ZendeskChatProps >;