@automattic/jetpack-components 0.41.1 → 0.42.0

package/components/button/stories/index.mdx

@@ -1,90 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
-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>

package/components/button/stories/index.stories.tsx

@@ -1,400 +0,0 @@
-import * as allIcons from '@wordpress/icons';
-import Col from '../../layout/col';
-import Container from '../../layout/container';
-import Text, { H3 } from '../../text';
-import Button from '../index';
-import styles from './style.module.scss';
-
-const { Icon: WPIcon, ...icons } = allIcons;
-const { check, cloud } = icons;
-
-const disableVariant = {
-	variant: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableDisabled = {
-	disabled: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableIsDestructive = {
-	isDestructive: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableIsLoading = {
-	isLoading: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableIcon = {
-	icon: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableClassName = {
-	className: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-const disableFullWidth = {
-	fullWidth: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-export default {
-	title: 'JS Packages/Components/Button',
-	component: Button,
-	argTypes: {
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: [ 'primary', 'secondary', 'link', 'tertiary' ],
-		},
-		size: {
-			control: {
-				type: 'select',
-			},
-			options: [ 'normal', 'small' ],
-		},
-		weight: {
-			control: {
-				type: 'select',
-			},
-			options: [ 'bold', 'regular' ],
-		},
-		icon: {
-			control: {
-				type: 'select',
-			},
-			options: [ 'none', ...Object.keys( icons ) ],
-		},
-	},
-	parameters: {
-		backgrounds: {
-			default: 'Jetpack Dashboard',
-		},
-	},
-};
-
-const DefaultTemplate = args => {
-	const icon = args?.icon && args?.icon !== 'none' ? <WPIcon icon={ icons[ args.icon ] } /> : null;
-	return <Button { ...args } icon={ icon } />;
-};
-
-export const _default = DefaultTemplate.bind( {} );
-_default.args = {
-	variant: 'primary',
-	size: 'normal',
-	weight: 'bold',
-	icon: 'cloud',
-	isExternalLink: false,
-	isLoading: false,
-	disabled: false,
-	isDestructive: false,
-	fullWidth: false,
-	children: 'Once upon a time… a button story',
-};
-
-const Template = args => <Button { ...args } />;
-
-export const ButtonPrimary = Template.bind( {} );
-ButtonPrimary.argTypes = {
-	...disableVariant,
-	...disableDisabled,
-	...disableIcon,
-	...disableIsLoading,
-	...disableIsDestructive,
-	...disableFullWidth,
-};
-ButtonPrimary.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'primary',
-};
-
-export const ButtonSecondary = Template.bind( {} );
-ButtonSecondary.argTypes = {
-	...disableVariant,
-	...disableDisabled,
-	...disableIcon,
-	...disableIsLoading,
-	...disableIsDestructive,
-	...disableClassName,
-	...disableFullWidth,
-};
-ButtonSecondary.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'secondary',
-};
-
-export const ButtonLink = Template.bind( {} );
-ButtonLink.argTypes = {
-	...disableVariant,
-	...disableDisabled,
-	...disableIcon,
-	...disableIsLoading,
-	...disableIsDestructive,
-	...disableClassName,
-	...disableFullWidth,
-};
-ButtonLink.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'link',
-};
-
-export const ButtonExternalLink = Template.bind( {} );
-ButtonExternalLink.argTypes = {
-	...disableVariant,
-	...disableDisabled,
-	...disableIcon,
-	...disableIsLoading,
-	...disableIsDestructive,
-	...disableClassName,
-	...disableFullWidth,
-};
-ButtonExternalLink.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'external-link',
-};
-
-export const Icon = Template.bind( {} );
-Icon.argTypes = {
-	...disableIcon,
-	...disableDisabled,
-	...disableIsLoading,
-	...disableIsDestructive,
-	...disableClassName,
-	...disableFullWidth,
-};
-Icon.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	icon: <WPIcon icon={ check } />,
-	variant: 'primary',
-};
-
-export const Disabled = Template.bind( {} );
-Disabled.argTypes = {
-	...disableDisabled,
-	...disableIsDestructive,
-	...disableIsLoading,
-	...disableClassName,
-	...disableFullWidth,
-	...disableIcon,
-};
-Disabled.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'primary',
-	disabled: true,
-};
-
-export const Destructive = Template.bind( {} );
-Destructive.argTypes = {
-	...disableIsDestructive,
-	...disableIsLoading,
-	...disableDisabled,
-	...disableClassName,
-	...disableFullWidth,
-	...disableIcon,
-};
-Destructive.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'primary',
-	isDestructive: true,
-};
-
-export const Loading = Template.bind( {} );
-Loading.argTypes = {
-	...disableIsDestructive,
-	...disableIsLoading,
-	...disableDisabled,
-	...disableClassName,
-	...disableFullWidth,
-	...disableIcon,
-};
-Loading.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'primary',
-	isLoading: true,
-};
-
-export const FullWidth = Template.bind( {} );
-FullWidth.argTypes = {
-	...disableIsDestructive,
-	...disableIsLoading,
-	...disableDisabled,
-	...disableClassName,
-	...disableIcon,
-};
-FullWidth.args = {
-	size: 'normal',
-	children: 'Jetpack Button',
-	variant: 'primary',
-	fullWidth: true,
-};
-
-export const VariantsAndProps = () => {
-	const variants = [ 'primary', 'secondary', 'link' ];
-	return (
-		<>
-			<Container>
-				<Col>
-					<H3>Variants & Props</H3>
-				</Col>
-				<Col>
-					<Text mb={ 3 }>
-						The following shows how the properties modify the appearance and/or behavior of the
-						button, in the different variants. Keep in mind that you cannot combine the variants but
-						you can combine the props. Use the { '' }
-						<a href="./?path=/story/js-packages-components-button--default">default story</a> to
-						play with the combinations.
-					</Text>
-				</Col>
-			</Container>
-			<Container className={ styles.container } horizontalGap={ 0 }>
-				<Col
-					className={ `${ styles[ 'row-instance' ] } ${ styles.header }` }
-					sm={ 4 }
-					md={ 2 }
-					lg={ 3 }
-				>
-					<Text size="body-extra-small">props / variants</Text>
-				</Col>
-
-				<Col sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small" className={ styles.header }>
-						Primary
-					</Text>
-				</Col>
-
-				<Col sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small" className={ styles.header }>
-						Secondary
-					</Text>
-				</Col>
-
-				<Col sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small" className={ styles.header }>
-						Link
-					</Text>
-				</Col>
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">no props</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">size: small</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } size="small" />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">weight: regular</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } weight="regular" />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">icon (cloud)</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button
-							{ ...ButtonPrimary.args }
-							variant={ variant }
-							icon={ <WPIcon icon={ cloud } /> }
-						/>
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">disabled</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } disabled />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">isDestructive</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } isDestructive />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">isExternalLink</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } isExternalLink />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">isLoading</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } isLoading />
-					</Col>
-				) ) }
-
-				<Col className={ styles[ 'row-instance' ] } sm={ 4 } md={ 2 } lg={ 3 }>
-					<Text size="body-extra-small">fullWidth</Text>
-				</Col>
-				{ variants.map( variant => (
-					<Col sm={ 4 } md={ 2 } lg={ 3 }>
-						<Button { ...ButtonPrimary.args } variant={ variant } fullWidth />
-					</Col>
-				) ) }
-			</Container>
-		</>
-	);
-};
-VariantsAndProps.storyName = 'Variants & Props';

package/components/button/stories/style.module.scss

@@ -1,20 +0,0 @@
-.container {
-	row-gap: 0;
-	column-gap: 0;
-	> div {
-		border-right: 1px dotted var( --jp-gray-10 );
-		border-bottom: 1px dotted var( --jp-gray-10 );
-		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 2 );
-		align-items: center;
-
-		&:nth-child(4n) {
-			border-right: none;
-		}
-	}
-}
-
-
-.header {
-	font-weight: 600;
-	text-align: center;
-}

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

@@ -1,25 +0,0 @@
-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/decorative-card/stories/index.stories.tsx

@@ -1,18 +0,0 @@
-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/dialog/stories/declaration.d.ts

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

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

@@ -1,118 +0,0 @@
-/* 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,
-};