@automattic/jetpack-components 0.41.2 → 0.42.1

package/components/boost-score-graph/stories/index.stories.tsx

@@ -1,187 +0,0 @@
-import { BoostScoreGraph } from '..';
-import type { Meta } from '@storybook/react';
-
-const exampleRawResponse = {
-	data: {
-		_meta: {
-			start: 1689772803000,
-			end: 1690647000000,
-		},
-		periods: [
-			{
-				timestamp: 1690636803000,
-				dimensions: {
-					desktop_overall_score: 86,
-					mobile_overall_score: 52,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1689772803000,
-				dimensions: {
-					desktop_overall_score: 75,
-					mobile_overall_score: 52,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1689859203000,
-				dimensions: {
-					desktop_overall_score: 72,
-					mobile_overall_score: 49,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1689945603000,
-				dimensions: {
-					desktop_overall_score: 20,
-					mobile_overall_score: 30,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690032003000,
-				dimensions: {
-					desktop_overall_score: 72,
-					mobile_overall_score: 40,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690118403000,
-				dimensions: {
-					desktop_overall_score: 55,
-					mobile_overall_score: 45,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690204803000,
-				dimensions: {
-					desktop_overall_score: 75,
-					mobile_overall_score: 52,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690291203000,
-				dimensions: {
-					desktop_overall_score: 70,
-					mobile_overall_score: 50,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690377603000,
-				dimensions: {
-					desktop_overall_score: 75,
-					mobile_overall_score: 90,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690464003000,
-				dimensions: {
-					desktop_overall_score: 80,
-					mobile_overall_score: 60,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-			{
-				timestamp: 1690550403000,
-				dimensions: {
-					desktop_overall_score: 85,
-					mobile_overall_score: 60,
-					desktop_cls: 0.088,
-					desktop_lcp: 3.2,
-					desktop_tbt: 0,
-					mobile_cls: 0.088,
-					mobile_lcp: 3.2,
-					mobile_tbt: 0,
-				},
-			},
-		],
-	},
-};
-
-const meta: Meta< typeof BoostScoreGraph > = {
-	title: 'JS Packages/Components/Boost Score Graph',
-	component: BoostScoreGraph,
-	argTypes: {
-		startDate: { control: 'date' },
-		endDate: { control: 'date' },
-		title: { control: 'string', defaultValue: 'Title' },
-		isLoading: { control: 'boolean', defaultValue: false },
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: '80%', maxWidth: '1320px', margin: '200px auto', fontSize: '16px' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-const defaultValues = {
-	startDate: exampleRawResponse.data._meta.start,
-	endDate: exampleRawResponse.data._meta.end,
-	periods: exampleRawResponse.data.periods,
-	isLoading: false,
-};
-
-export default meta;
-
-const Template = args => <BoostScoreGraph { ...args } />;
-export const _default = Template.bind( {} );
-_default.args = defaultValues;

package/components/boost-score-graph/stories/tooltip.stories.tsx

@@ -1,41 +0,0 @@
-import { Tooltip } from '../tooltip';
-import type { Meta } from '@storybook/react';
-
-const meta: Meta< typeof Tooltip > = {
-	title: 'JS Packages/Components/Boost Score Tooltip',
-	component: Tooltip,
-	argTypes: {
-		period: {
-			control: 'object',
-		},
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: '300px', margin: '200px auto', fontSize: '16px' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-export default meta;
-
-const Template = args => {
-	return <Tooltip { ...args } />;
-};
-export const _default = Template.bind( {} );
-_default.args = {
-	period: {
-		timestamp: 1689772803000,
-		dimensions: {
-			desktop_overall_score: 75,
-			mobile_overall_score: 52,
-			desktop_cls: 0.088,
-			desktop_lcp: 3.2,
-			desktop_tbt: 0,
-			mobile_cls: 0.088,
-			mobile_lcp: 3.2,
-			mobile_tbt: 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';