@automattic/jetpack-components 0.39.0

package/components/contextual-upgrade-trigger/README.md

@@ -0,0 +1,81 @@
+# Contextual Upgrade Trigger
+
+The CUT component is designed to push users to upgrade from a Free plan to a Paid one, or from lower tier paid plans to higher ones.
+
+**Design Specs for Contextual Upgrade Trigger:** PbJqbW-5k-p2
+
+[ Storybook Reference ](https://automattic.github.io/jetpack-storybook/?path=/story/js-packages-components-contextual-upgrade-trigger--default)
+
+## Usage
+
+```jsx
+import { ContextualUpgradeTrigger } from '@automattic/jetpack-components';
+
+<ContextualUpgradeTrigger
+	description="Current status of the product"
+	cta="Text action line, recommending the next tier"
+	onClick={ () => ... }
+/>
+```
+
+To use as a link:
+
+```jsx
+import { ContextualUpgradeTrigger } from '@automattic/jetpack-components';
+
+<ContextualUpgradeTrigger
+	description="Current status of the product"
+	cta="Text action line, recommending the next tier"
+	href="https://jetpack.com"
+/>
+```
+
+## Props
+
+### className
+
+A custom class to append with the default ones.
+
+- Type: `String`
+- Default: `undefined`
+- Required: `false`
+
+### description
+
+A text giving context for a user about the current status of the product (i.e., how many updates per day).
+
+- Type: `String`
+- Default: `""`
+- Required: `true`
+
+### cta
+
+Text action line, recommending the next tier
+
+- Type: `String`
+- Default: `""`
+- Required: `true`
+
+### onClick
+
+Callback that will be called when the user click/tap into the CUT
+
+- Type: `Function`
+- Default: `undefined`
+- Required: `false`
+
+### href
+
+URL to link to
+
+- Type: `String`
+- Default: `undefined`
+- Required: `false`
+
+### openInNewTab
+
+Indicate if the link should open in a new tab
+
+- Type: `Boolean`
+- Default: `false`
+- Required: `false`

package/components/contextual-upgrade-trigger/index.tsx

@@ -0,0 +1,44 @@
+import { Icon, arrowRight } from '@wordpress/icons';
+import classnames from 'classnames';
+import IconTooltip from '../icon-tooltip';
+import Text from '../text';
+import styles from './style.module.scss';
+import { CutBaseProps } from './types';
+import type React from 'react';
+
+const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {
+	description,
+	cta,
+	onClick,
+	href,
+	openInNewTab = false,
+	className,
+	tooltipText = '',
+} ) => {
+	const Tag = href !== undefined ? 'a' : 'button';
+	const tagProps =
+		Tag === 'a' ? { href, ...( openInNewTab && { target: '_blank' } ) } : { onClick };
+
+	return (
+		<div className={ classnames( styles.cut, className ) }>
+			<div>
+				<div>
+					<Text className={ styles.description }>{ description }</Text>
+					{ tooltipText && (
+						<IconTooltip className={ styles.iconContainer } iconSize={ 16 } offset={ 4 }>
+							<Text variant="body-small">{ tooltipText }</Text>
+						</IconTooltip>
+					) }
+				</div>
+				<div>
+					<Tag { ...tagProps }>
+						<Text className={ styles.cta }>{ cta }</Text>
+					</Tag>
+				</div>
+			</div>
+			<Icon icon={ arrowRight } className={ styles.icon } size={ 30 } />
+		</div>
+	);
+};
+
+export default ContextualUpgradeTrigger;

package/components/contextual-upgrade-trigger/stories/index.stories.tsx

@@ -0,0 +1,25 @@
+import { action } from '@storybook/addon-actions';
+import ContextualUpgradeTrigger from '../index';
+
+export default {
+	title: 'JS Packages/Components/Contextual Upgrade Trigger',
+	component: ContextualUpgradeTrigger,
+};
+
+const Template = args => <ContextualUpgradeTrigger { ...args } />;
+
+const DefaultArgs = {
+	description: 'Current status of the product (i.e. how many updates per day)',
+	cta: 'Text action line, recommending the next tier',
+	onClick: action( 'onClick' ),
+};
+
+export const Default = Template.bind( {} );
+Default.args = DefaultArgs;
+
+export const Link = Template.bind( {} );
+Link.args = {
+	...DefaultArgs,
+	onClick: null,
+	href: 'https://jetpack.com',
+};

package/components/contextual-upgrade-trigger/style.module.scss

@@ -0,0 +1,75 @@
+.cut {
+	border: 2px solid var( --jp-green-40 );
+	border-radius: var( --jp-border-radius );
+	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 );
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: calc( var( --spacing-base ) * 3 );
+	text-align: left;
+	background: none;
+	width: 100%;
+	position: relative;
+	color: var(--jp-gray-80);
+
+	button,
+	a {
+		all: unset;
+		color: var(--jp-gray-80);
+		cursor: pointer;
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&:focus-within {
+		border-color: var( --jp-black );
+	}
+
+	&:focus-within,
+	&:hover {
+		& .icon {
+			transform: translateX( calc( var( --spacing-base ) * 2 ) );
+		}
+
+		& .cta {
+			text-decoration: underline;
+			text-decoration-thickness: 2px;
+		}
+	}
+
+	// Overwrite styles in Text component
+	.cta {
+		font-weight: bold;
+	}
+}
+
+.cta {
+	font-weight: bold;
+}
+
+.icon {
+	fill: var( --jp-green-40 );
+	transition: transform 0.1s ease-out;
+}
+
+.iconContainer {
+	margin: 0 0 0 calc( var( --spacing-base ) / 3);
+	display: inline;
+	vertical-align: middle;
+	
+	svg {
+		z-index: 10;
+		position: relative;
+	}
+}
+
+.description {
+	display: inline;
+}

package/components/contextual-upgrade-trigger/types.ts

@@ -0,0 +1,9 @@
+export type CutBaseProps = {
+	description: string;
+	cta: string;
+	className?: string;
+	href?: string;
+	openInNewTab?: boolean;
+	onClick?: () => void;
+	tooltipText?: string;
+};

package/components/decorative-card/index.tsx

@@ -0,0 +1,44 @@
+import type { DecorativeCardProps } from './types';
+import type React from 'react';
+import './style.scss';
+
+/**
+ * A decorative card used in the disconnection flow.
+ *
+ * @param {DecorativeCardProps} props - The properties.
+ * @returns {React.ReactNode} - The DecorativeCard component.
+ */
+
+const DecorativeCard: React.FC< DecorativeCardProps > = ( {
+	format = 'horizontal',
+	icon,
+	imageUrl,
+} ) => {
+	return (
+		<div
+			className={
+				'jp-components__decorative-card ' +
+				( format ? 'jp-components__decorative-card--' + format : '' )
+			}
+		>
+			<div
+				className="jp-components__decorative-card__image"
+				style={ { backgroundImage: imageUrl ? `url( ${ imageUrl } )` : '' } }
+			></div>
+			<div className="jp-components__decorative-card__content">
+				<div className="jp-components__decorative-card__lines"></div>
+			</div>
+			{ icon ? (
+				<div className="jp-components__decorative-card__icon-container">
+					<span
+						className={
+							'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon
+						}
+					></span>
+				</div>
+			) : null }
+		</div>
+	);
+};
+
+export default DecorativeCard;

package/components/decorative-card/stories/index.stories.tsx

@@ -0,0 +1,18 @@
+import DecorativeCard from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Decorative Card',
+	component: DecorativeCard,
+} as ComponentMeta< typeof DecorativeCard >;
+
+// Export additional stories using pre-defined values
+const Template: ComponentStory< typeof DecorativeCard > = args => <DecorativeCard { ...args } />;
+
+// Export Default story
+export const _default = Template.bind( {} );
+
+export const Unlink = Template.bind( {} );
+Unlink.args = {
+	icon: 'unlink',
+};

package/components/decorative-card/style.scss

@@ -0,0 +1,116 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-components__decorative-card {
+	display: flex;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: 0 0 15px var( --jp-gray );
+	position: relative;
+	width: 360px;
+	max-width: 100%;
+	height: 280px;
+	margin: 0 auto;
+	margin-bottom: 3rem;
+
+	&__image,
+	&__content {
+		width: 50%;
+	}
+
+	&__image {
+		background: var( --jp-gray );
+		background-size: cover;
+		position: relative;
+
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 24px;
+			left: 24px;
+			width: 38px;
+			height: 8px;
+			background-image: url('data:image/svg+xml;uf8,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
+		}
+	}
+
+	&__content {
+		background: #FFFFFF;
+		padding: 2rem;
+	}
+
+	&__icon-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80px;
+		height: 80px;
+		background: var(--jp-red);
+		border-radius: 50px;
+	}
+
+	&__icon {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		background-position: center, center;
+		background-repeat: no-repeat;
+
+		&--unlink {
+			background-image: url('data:image/svg+xml;uf8,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
+		}
+	}
+
+	&__lines {
+		display: block;
+		width: 100%;
+		height: 12px;
+		border-radius: 6px;
+		background: #E9EFF5;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 12px;
+			border-radius: 6px;
+			background: #E9EFF5;
+			position: relative;
+			top: calc(100% + 16px);
+		}
+
+		&:after {
+			top: calc(100% + 32px);
+			width: 75%;
+		}
+	}
+
+	// Variants
+	&--vertical {
+		flex-direction: column;
+
+		.jp-components__decorative-card__image,
+		.jp-components__decorative-card__content {
+			width: 100%;
+			height: 50%;
+		}
+
+		.jp-components__decorative-card__lines {
+			max-width: 135px;
+			margin-left: auto;
+			margin-right: auto;
+
+			&::before,
+			&::after {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+}

package/components/decorative-card/types.ts

@@ -0,0 +1,16 @@
+export type DecorativeCardProps = {
+	/**
+	 * The format of the card (horizontal or vertical)
+	 */
+	format?: 'horizontal' | 'vertical';
+
+	/**
+	 * An icon slug that can be used to show an icon (options are limited to what is in the stylesheet)
+	 */
+	icon?: 'unlink';
+
+	/**
+	 * URL for an image to show in the card.
+	 */
+	imageUrl?: string;
+};

package/components/dialog/index.tsx

@@ -0,0 +1,69 @@
+import classnames from 'classnames';
+import React from 'react';
+import Col from '../layout/col';
+import Container from '../layout/container';
+import useBreakpointMatch from '../layout/use-breakpoint-match';
+import styles from './style.module.scss';
+
+type DialogProps = {
+	primary: React.ReactNode;
+	secondary?: React.ReactNode;
+	isTwoSections?: boolean;
+	isCard?: boolean;
+	containerProps: object;
+};
+
+/**
+ * Dialog component.
+ *
+ * @param {object} props                    - React component props.
+ * @param {React.ReactNode} props.primary   - Primary-section content.
+ * @param {React.ReactNode} props.secondary - Secondary-section content.
+ * @param {boolean} props.isTwoSections     - Handle two sections layout when true.
+ * @param {object} props.containerProps     - Props to pass to the container component.
+ * @returns {React.ReactNode}                 Rendered dialog
+ */
+const Dialog: React.FC< DialogProps > = ( {
+	primary,
+	secondary,
+	isTwoSections = false,
+	...containerProps
+} ) => {
+	const [ isSmall, isLowerThanLarge ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+
+	/*
+	 * By convention, secondary section is not shown when:
+	 * - layout is a two-sections setup
+	 * - on mobile breakpoint (sm)
+	 */
+	const hideSecondarySection = ! isTwoSections && isSmall;
+
+	const classNames = classnames( {
+		[ styles[ 'one-section-style' ] ]: ! isTwoSections,
+		[ styles[ 'is-viewport-small' ] ]: isSmall,
+	} );
+
+	return (
+		<Container
+			className={ classNames }
+			horizontalSpacing={ 0 }
+			horizontalGap={ 0 }
+			fluid={ false }
+			{ ...containerProps }
+		>
+			{ ! hideSecondarySection && (
+				<>
+					<Col sm={ 4 } md={ isLowerThanLarge ? 4 : 5 } lg={ 7 } className={ styles.primary }>
+						{ primary }
+					</Col>
+					<Col sm={ 4 } md={ isLowerThanLarge ? 4 : 3 } lg={ 5 } className={ styles.secondary }>
+						{ secondary }
+					</Col>
+				</>
+			) }
+			{ hideSecondarySection && <Col>{ primary }</Col> }
+		</Container>
+	);
+};
+
+export default Dialog;

package/components/dialog/stories/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

package/components/dialog/stories/index.stories.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable react/react-in-jsx-scope */
+import React from 'react';
+import Dialog from '..';
+import ProductOffer from '../../product-offer';
+import BoostImage from './boost.png';
+
+export default {
+	title: 'JS Packages/Components/Dialog',
+	component: Dialog,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		layout: 'centered',
+	},
+	argTypes: {
+		primary: {
+			table: {
+				disable: true,
+			},
+		},
+		secondary: {
+			table: {
+				disable: true,
+			},
+		},
+		isTwoSections: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+};
+
+const Template = args => <Dialog { ...args } />;
+
+export const JetpackBoost = Template.bind( {} );
+JetpackBoost.parameters = {};
+JetpackBoost.args = {
+	primary: (
+		<ProductOffer
+			slug="boost"
+			name="Boost"
+			title="Jepack Boost"
+			description="Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required."
+			features={ [
+				'Check your site performance',
+				'Enable improvements in one click',
+				'Standalone free plugin for those focused on speed',
+			] }
+			pricing={ {
+				isFree: true,
+			} }
+			className={ '' }
+			isCard={ false }
+			supportedProducts={ [] }
+			hasRequiredPlan={ false }
+			addProductUrl={ '' }
+		/>
+	),
+	secondary: <img src={ BoostImage } alt="Boost" />,
+	isTwoSections: false,
+};
+
+export const JetpackBackup = Template.bind( {} );
+JetpackBackup.parameters = {};
+JetpackBackup.args = {
+	primary: (
+		<ProductOffer
+			slug={ 'backup' }
+			name={ 'Backup' }
+			title={ 'Jepack Backup' }
+			description={
+				'Never lose a word, image, page, or time worrying about your site with automated backups & one-click restores.'
+			}
+			features={ [
+				'Real-time cloud backups',
+				'10GB of backup storage',
+				'30-day archive & activity log',
+				'One-click restores',
+			] }
+			pricing={ {
+				currency: 'USD',
+				price: 24.92,
+				offPrice: 12.42,
+			} }
+			isCard={ true }
+			className={ '' }
+			supportedProducts={ [] }
+			hasRequiredPlan={ false }
+			addProductUrl={ '' }
+		/>
+	),
+	secondary: (
+		<ProductOffer
+			name="Security"
+			title="Security"
+			description="Comprehensive site security, including Backup, Scan, and Anti-spam."
+			isBundle={ true }
+			supportedProducts={ [ 'backup', 'scan', 'anti-spam' ] }
+			features={ [
+				'Real time cloud backups with 10GB storage',
+				'Automated real-time malware scan',
+				'One click fixes for most threats',
+				'Comment & form spam protection',
+			] }
+			pricing={ {
+				currency: 'USD',
+				price: 24.92,
+				offPrice: 12.42,
+			} }
+			hasRequiredPlan={ false }
+			isLoading={ false }
+			className={ '' }
+			isCard={ false }
+			addProductUrl={ '' }
+		/>
+	),
+	isTwoSections: true,
+};

package/components/dialog/stories/js-components.components.dialog.mdx

@@ -0,0 +1,62 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+import dedent from 'ts-dedent';
+import * as JsComponentsComponentsDialogStories from './js-components.components.dialog.stories';
+
+<Meta of={JsComponentsComponentsDialogStories} />
+
+# Dialog
+
+Render a two-sections layout simple composition, built based on the primary <a href="?path=/docs/js-packages-components-layout--default">Layout component</a>.
+
+<Source
+  language="jsx"
+  code={dedent`
+  import Dialog from '@automattic/jetpack-components';
+  // ...
+
+  <Dialog
+    primary={ <PrimaryComponent /> }
+    secondary={ <SecondaryComponent /> }
+    isTwoSections={ true }
+  />
+  `}
+/>
+
+<Story of={JsComponentsComponentsDialogStories.Readme} />
+
+The cols number for each section depends on the viewport width. The following table shows how they are defined:
+
+&nbsp; | Small (sm) | Medium (md) | Large (lg)
+------|------|------|-----
+primary | 4 | 5 | 7
+secondary | 4 | 3 | 5
+
+Finally, when the Dialog is defined as not a two-sections layout (<a href="#istwosections">isTwoSections property</a>), the secondary section won't show in Mobile (sm breakpoint).
+
+## API
+
+The components accepts the following properties:
+
+### primary
+
+*   Type: `React.ReactNode`, `string`.
+
+Primary-section content.
+
+### secondary
+
+*   Type: `React.ReactNode`, `string`.
+*   Optional.
+
+Primary-section content.
+
+### isTwoSections
+
+*   Type: `boolean`.
+*   Optional.
+*   Default: `false`
+
+It handles two sections layout:
+
+*   Add card styles to the main wrapper when it is not a two-sections layout.
+*   When it's false, the secondary section won't show in Mobile.