@automattic/jetpack-components 0.41.1 → 0.42.0

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

@@ -1,62 +0,0 @@
-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.

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

@@ -1,37 +0,0 @@
-import Dialog from '../index';
-import styles from './style.module.scss';
-
-const Template = ( { isTwoSections } ) => (
-	<Dialog
-		primary={
-			<div className={ styles.section }>
-				<div>Primary</div>
-				<strong>4 | 5 | 7</strong>
-			</div>
-		}
-		secondary={
-			<div className={ styles.section }>
-				<div>Secondary</div>
-				<strong>4 | 3 | 5</strong>
-				<div>
-					isTwoSections: <strong>{ isTwoSections ? 'yes' : 'no' }</strong>
-				</div>
-			</div>
-		}
-		isTwoSections={ isTwoSections }
-	/>
-);
-
-export default {
-	title: 'JS Packages/Components/Dialog',
-	component: Dialog,
-};
-
-export const Readme = {
-	render: Template.bind( {} ),
-	name: 'Readme',
-
-	args: {
-		isTwoSections: true,
-	},
-};

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

@@ -1,21 +0,0 @@
-
-.section {
-	display: flex;
-	padding: calc( var( --spacing-base ) * 6 ) 0;
-	border: 1px dotted var( --jp-green-60 );
-	box-sizing: border-box;
-	align-items: center;
-	color: var( --jp-white );
-	flex-wrap: nowrap;
-    flex-direction: column;
-	justify-content: space-between;
-	height: calc( var( --spacing-base ) * 20 );
-	flex-grow: 2;
-	background: repeating-linear-gradient(
-		-45deg,
-		var( --jp-green-50 ),
-		var( --jp-green-50 ) 20px,
-		var( --jp-green-60 ) 20px,
-		var( --jp-green-60 ) 40px
-	);
-}

package/components/donut-meter/stories/index.stories.tsx

@@ -1,51 +0,0 @@
-import DonutMeter, { DonutMeterProps } from '../index';
-
-export default {
-	title: 'JS Packages/Components/DonutMeter',
-	component: DonutMeter,
-	parameters: {
-		layout: 'centered',
-	},
-};
-
-const Template = args => <DonutMeter { ...args } />;
-
-const DefaultArgs: DonutMeterProps = {
-	segmentCount: 16,
-	totalCount: 100,
-	thickness: '3.5',
-	donutWidth: '64px',
-	title: 'Meter title goes here',
-	description: 'Meter description goes here',
-};
-export const _Default = Template.bind( {} );
-_Default.args = DefaultArgs;
-
-const WarningArgs: DonutMeterProps = {
-	...DefaultArgs,
-	type: 'warning',
-};
-export const Warning = Template.bind( {} );
-Warning.args = WarningArgs;
-
-const DangerArgs: DonutMeterProps = {
-	...DefaultArgs,
-	type: 'danger',
-};
-export const Danger = Template.bind( {} );
-Danger.args = DangerArgs;
-
-export const AdaptiveColors = args => (
-	<div>
-		<div style={ { display: 'flex', flexFlow: 'row' } }>
-			<DonutMeter { ...args } segmentCount={ 0 } useAdaptiveColors />
-			<DonutMeter { ...args } segmentCount={ 20 } useAdaptiveColors />
-			<DonutMeter { ...args } segmentCount={ 40 } useAdaptiveColors />
-			<DonutMeter { ...args } segmentCount={ 60 } useAdaptiveColors />
-			<DonutMeter { ...args } segmentCount={ 80 } useAdaptiveColors />
-			<DonutMeter { ...args } segmentCount={ 100 } useAdaptiveColors />
-		</div>
-		<p>Color changing according to the fullness of the meter.</p>
-	</div>
-);
-AdaptiveColors.args = { ...DefaultArgs };

package/components/donut-meter/test/component.tsx

@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import DonutMeter, { DonutMeterProps } from '../index';
-
-describe( 'DonutMeter', () => {
-	const testProps: DonutMeterProps = {
-		segmentCount: 18,
-		totalCount: 100,
-	};
-
-	it( 'renders the donut meter container', () => {
-		render( <DonutMeter { ...testProps } /> );
-		expect( screen.getByTestId( 'donut-meter' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders with the correct type class name', () => {
-		render( <DonutMeter { ...testProps } useAdaptiveColors type="warning" /> );
-		expect( screen.getByTestId( 'donut-meter' ) ).toHaveClass( 'is-warning' );
-	} );
-
-	it( 'overrides adaptive colors when an explicit type is specified', () => {
-		render( <DonutMeter { ...testProps } useAdaptiveColors type="danger" /> );
-		expect( screen.getByTestId( 'donut-meter' ) ).toHaveClass( 'is-danger' );
-	} );
-} );

package/components/gridicon/stories/index.stories.tsx

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

package/components/icon-tooltip/stories/index.stories.tsx

@@ -1,108 +0,0 @@
-import IconTooltip from '../index';
-import './style.scss';
-import type { Placement } from '../types';
-
-const AVAILABLE_PLACEMENTS: Placement[] = [
-	'top',
-	'top-start',
-	'top-end',
-	'bottom',
-	'bottom-start',
-	'bottom-end',
-];
-
-export default {
-	title: 'JS Packages/Components/IconTooltip',
-	component: IconTooltip,
-	argTypes: {
-		className: {
-			control: { type: 'text' },
-		},
-		iconClassName: {
-			control: { type: 'text' },
-		},
-		placement: {
-			control: { type: 'select' },
-			options: AVAILABLE_PLACEMENTS,
-		},
-		animate: {
-			control: { type: 'boolean' },
-		},
-		iconCode: {
-			control: { type: 'text' },
-		},
-		iconSize: {
-			control: { type: 'number' },
-		},
-		offset: {
-			control: { type: 'number' },
-		},
-		title: {
-			control: { type: 'text' },
-		},
-		children: {
-			control: { type: null },
-		},
-		wide: {
-			control: { type: 'boolean' },
-		},
-	},
-};
-
-const Template = args => (
-	<div style={ { position: 'absolute', height: '1000px', left: '300px', top: '200px' } }>
-		<IconTooltip { ...args } />
-	</div>
-);
-
-const WrapperAnchorTemplate = args => (
-	<div style={ { position: 'absolute', height: '1000px', left: '300px', top: '300px' } }>
-		<div className="tooltip-wrapper">
-			<div className="tooltip-wrapper-anchor">
-				<IconTooltip { ...args }>
-					<>
-						<div>Thank you for upgrading! Now your visitors can search up to 500 records.</div>
-						<div className="tooltip-actions">
-							<span>1 of 2</span>
-						</div>
-					</>
-				</IconTooltip>
-			</div>
-		</div>
-	</div>
-);
-
-// Export Default story
-export const _default = Template.bind( {} );
-
-export const HasContent = Template.bind( {} );
-HasContent.args = {
-	title: 'This is title!',
-	children: (
-		<div>
-			This is children block!<br></br>
-			<br></br>Break Line!
-			<br></br>
-			<ul>
-				<li>Item 1</li>
-				<li>Item 2</li>
-			</ul>
-		</div>
-	),
-};
-
-export const WrapperAnchor = WrapperAnchorTemplate.bind( {} );
-WrapperAnchor.args = {
-	popoverAnchorStyle: 'wrapper',
-	title: 'Site records increased',
-	placement: 'top',
-	forceShow: true,
-};
-
-export const Wide = Template.bind( {} );
-Wide.args = {
-	title: 'This is title!',
-	children: <div>This is a wide tooltip!</div>,
-	wide: true,
-	placement: 'bottom-start',
-};

package/components/icon-tooltip/stories/style.scss

@@ -1,36 +0,0 @@
-.tooltip-wrapper-anchor {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 64px;
-	height: 64px;
-
-	.icon-tooltip-wrapper {
-		width: 100%;
-		height: 100%;
-
-		// To overwrite `margin-bottom`
-		.icon-tooltip-title {
-			font-size: var( --font-title-small );
-			font-weight: 500;
-			margin-bottom: 16px;
-		}
-	}
-
-	.icon-tooltip-helper {
-		width: 100%;
-		height: 100%;
-	}
-
-	.icon-tooltip-content {
-		font-size: var( --font-body );
-	}
-
-	.tooltip-actions {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		color: var( --jp-gray-60 );
-		margin-top: 24px;
-	}
-}

package/components/icon-tooltip/test/component.tsx

@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import IconTooltip from '../index';
-import { IconTooltipProps } from '../types';
-
-describe( 'IconTooltip', () => {
-	const testProps: IconTooltipProps = {
-		title: 'Title',
-		children: <div>Content block</div>,
-	};
-
-	it( 'renders the icon tooltip', () => {
-		render( <IconTooltip { ...testProps } /> );
-		expect( screen.getByTestId( 'icon-tooltip_wrapper' ) ).toBeInTheDocument();
-	} );
-} );

package/components/icons/stories/index.stories.tsx

@@ -1,65 +0,0 @@
-import * as allIcons from '../index';
-import styles from './style.module.scss';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Icons',
-	component: allIcons,
-	parameters: {},
-} as ComponentMeta< typeof allIcons >;
-
-const sizes = [
-	{
-		label: 'small',
-		value: '24',
-	},
-	{
-		label: 'medium',
-		value: '48',
-	},
-	{
-		label: 'large',
-		value: '72',
-	},
-];
-
-/**
- * Icons story components.
- *
- * @returns {object} - story component
- */
-function IconsStory() {
-	return (
-		<div>
-			{ sizes.map( size => (
-				<div key={ size.label }>
-					<h3>{ size.label }</h3>
-					<div className={ styles[ 'icons-container' ] }>
-						{ Object.keys( allIcons ).map( key => {
-							const Icon = allIcons[ key ];
-							if ( ! Icon.displayName || 'getIconBySlug' === Icon.displayName ) {
-								return null;
-							}
-
-							return (
-								<div
-									className={ `${ styles[ 'icon-wrapper' ] } ${ styles[ size.label ] }` }
-									key={ key }
-								>
-									<Icon size={ size.value } />
-									<span>{ Icon.displayName.replace( /icon/gi, '' ) }</span>
-								</div>
-							);
-						} ) }
-					</div>
-				</div>
-			) ) }
-		</div>
-	);
-}
-
-const Template: ComponentStory< typeof allIcons > = args => <IconsStory { ...args } />;
-
-const DefaultArgs = {};
-export const Default = Template.bind( {} );
-Default.args = DefaultArgs;

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

@@ -1,33 +0,0 @@
-.icons-container {
-	display: flex;
-	flex-wrap: wrap;
-	margin-bottom: 20px;
-}
-
-.icon-wrapper {
-	padding: 10px;
-	box-shadow: 0 0 1px inset rgba(0, 0, 0 , 0.5 );
-	background-color: white;
-	border-radius: 5px;
-	margin: 2px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-
-	&.small {
-		font-size: 11px;
-	}
-
-	&.medium {
-		font-size: 12px;
-	}
-
-	&.large {
-		font-size: 14px;
-	}
-
-	span {
-		margin-top: 10px;
-		color: #444;
-	}
-}

package/components/indeterminate-progress-bar/stories/index.stories.tsx

@@ -1,14 +0,0 @@
-import IndeterminateProgressBar from '..';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Indeterminate Progress Bar',
-	component: IndeterminateProgressBar,
-} as ComponentMeta< typeof IndeterminateProgressBar >;
-
-const Template: ComponentStory< typeof IndeterminateProgressBar > = args => {
-	return <IndeterminateProgressBar { ...args } />;
-};
-
-export const _default = Template.bind( {} );
-_default.args = {};

package/components/jetpack-footer/stories/index.stories.tsx

@@ -1,39 +0,0 @@
-import JetpackFooter from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Jetpack Footer',
-	component: JetpackFooter,
-} as ComponentMeta< typeof JetpackFooter >;
-
-const Template: ComponentStory< typeof JetpackFooter > = args => <JetpackFooter { ...args } />;
-
-const DefaultArgs = {
-	moduleName: 'Jetpack',
-	className: '',
-	moduleNameHref: 'https://jetpack.com',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;
-
-export const WithMenu = Template.bind( {} );
-WithMenu.args = {
-	...DefaultArgs,
-	menu: [
-		{
-			label: 'Menu Item',
-			href: '#',
-		},
-		{
-			label: 'External Menu Item',
-			href: '#',
-			target: '_blank',
-		},
-		{
-			label: 'Menu Item With Title',
-			title: 'Hello, World!',
-			href: '#',
-		},
-	],
-};