@automattic/jetpack-components 0.41.2 → 0.42.1

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: '#',
-		},
-	],
-};

package/components/jetpack-footer/test/__snapshots__/component.tsx.snap

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JetpackFooter Render the component should match the snapshot: all props 1`] = `
-<div>
-  <footer
-    aria-label="Jetpack"
-    class="jp-dashboard-footer sample-classname"
-  >
-    <ul>
-      <li
-        class="jp-dashboard-footer__jp-item"
-      >
-        <a
-          href="https://jetpack.com/path/to-some-page"
-        >
-          <svg
-            aria-hidden="true"
-            aria-labelledby="jetpack-logo-title"
-            class="jetpack-logo"
-            height="16"
-            viewBox="0 0 32 32"
-            x="0px"
-            xmlns="http://www.w3.org/2000/svg"
-            y="0px"
-          >
-            <desc
-              id="jetpack-logo-title"
-            >
-              Jetpack Logo
-            </desc>
-            <path
-              d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"
-              fill="#000"
-            />
-          </svg>
-          Test module
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item is-external"
-          href="https://jetpack.com/redirect/?source=jetpack-about"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="About Jetpack"
-        >
-          About
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="16"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item is-external"
-          href="https://jetpack.com/redirect/?source=a8c-privacy"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="Automattic's Privacy Policy"
-        >
-          Privacy
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="16"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item is-external"
-          href="https://jetpack.com/redirect/?source=wpcom-tos"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="WordPress.com Terms of Service"
-        >
-          Terms
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="16"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item"
-          href="/"
-        >
-          Link
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item is-external"
-          href="/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          External link
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="16"
-            viewBox="0 0 24 24"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
-            />
-          </svg>
-        </a>
-      </li>
-      <li>
-        <a
-          class="jp-dashboard-footer__menu-item"
-          href="/"
-          role="button"
-          tabindex="0"
-        >
-          Button link
-        </a>
-      </li>
-      <li
-        class="jp-dashboard-footer__a8c-item"
-      >
-        <a
-          aria-label="An Automattic Airline"
-          href="https://jetpack.com/redirect/?source=a8c-about"
-        >
-          <svg
-            aria-hidden="true"
-            aria-labelledby="jp-automattic-byline-logo-title"
-            class="jp-automattic-byline-logo"
-            enable-background="new 0 0 935 38.2"
-            height="7"
-            role="img"
-            viewBox="0 0 935 38.2"
-            x="0"
-            y="0"
-          >
-            <desc
-              id="jp-automattic-byline-logo-title"
-            >
-              An Automattic Airline
-            </desc>
-            <path
-              d="M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z"
-            />
-            <path
-              d="M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z"
-            />
-            <path
-              d="M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z"
-            />
-          </svg>
-        </a>
-      </li>
-    </ul>
-  </footer>
-</div>
-`;

package/components/jetpack-footer/test/component.tsx

@@ -1,159 +0,0 @@
-import { jest } from '@jest/globals';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import JetpackFooter from '../index';
-
-describe( 'JetpackFooter', () => {
-	const className = 'sample-classname';
-	const moduleName = 'Test module';
-	const moduleNameHref = 'https://jetpack.com/path/to-some-page';
-
-	describe( 'Render the component', () => {
-		const menu = [
-			{
-				label: 'Link',
-				href: '/',
-			},
-			{
-				label: 'External link',
-				href: '/',
-				target: '_blank',
-			},
-			{
-				label: 'Button link',
-				href: '/',
-				role: 'button',
-			},
-		];
-
-		it( 'should include a footer tag', () => {
-			render( <JetpackFooter /> );
-
-			const element = screen.getByRole( 'contentinfo', { name: 'Jetpack' } );
-
-			expect( element ).toBeInTheDocument();
-		} );
-
-		it( 'should apply the class name', () => {
-			render( <JetpackFooter className={ className } /> );
-
-			const element = screen.getByRole( 'contentinfo' );
-
-			expect( element ).toHaveClass( className );
-		} );
-
-		it( 'should render the Jetpack logo', () => {
-			render( <JetpackFooter /> );
-
-			const element = screen.getByLabelText( 'Jetpack' );
-
-			expect( element ).toBeInTheDocument();
-		} );
-
-		it( 'should render the module name as a link', () => {
-			render( <JetpackFooter moduleName={ moduleName } moduleNameHref={ moduleNameHref } /> );
-
-			const element = screen.getByText( moduleName );
-
-			expect( element ).toBeInTheDocument();
-			expect( element ).toBeInstanceOf( HTMLAnchorElement );
-			expect( element ).toHaveAttribute( 'href', moduleNameHref );
-		} );
-
-		it( 'should render the module name as regular text', () => {
-			render( <JetpackFooter moduleName={ moduleName } moduleNameHref={ null } /> );
-
-			const element = screen.getByText( moduleName );
-
-			expect( element ).toBeInTheDocument();
-			expect( element ).not.toBeInstanceOf( HTMLAnchorElement );
-		} );
-
-		it( 'should render the Automattic logo', () => {
-			render( <JetpackFooter /> );
-
-			const element = screen.getByLabelText( 'An Automattic Airline', { selector: 'a' } );
-
-			expect( element ).toBeInTheDocument();
-		} );
-
-		it( 'should render a list', () => {
-			render( <JetpackFooter menu={ menu } /> );
-
-			const element = screen.getByRole( 'list' );
-
-			expect( element ).toBeInTheDocument();
-			// eslint-disable-next-line testing-library/no-node-access
-			expect( element.children ).toHaveLength( 2 + 3 + menu.length ); // 2 logos, 3 generic links
-		} );
-
-		it( 'should render the links', () => {
-			render( <JetpackFooter menu={ menu } /> );
-
-			const link = screen.getByRole( 'link', { name: menu[ 0 ].label } );
-			const externalLink = screen.getByRole( 'link', { name: menu[ 1 ].label } );
-			const button = screen.getByRole( 'button', { name: menu[ 2 ].label } );
-
-			expect( link ).toBeInTheDocument();
-
-			expect( externalLink ).toBeInTheDocument();
-			expect( externalLink ).toHaveAttribute( 'target', '_blank' );
-			expect( externalLink ).toHaveAttribute( 'rel', 'noopener noreferrer' );
-			expect( externalLink ).toContainHTML( 'svg' );
-
-			expect( button ).toBeInTheDocument();
-			expect( button ).toHaveAttribute( 'tabindex', '0' );
-		} );
-
-		it( 'should match the snapshot', () => {
-			const { container } = render(
-				<JetpackFooter
-					className={ className }
-					moduleName={ moduleName }
-					moduleNameHref={ moduleNameHref }
-					menu={ menu }
-				/>
-			);
-			expect( container ).toMatchSnapshot( 'all props' );
-		} );
-	} );
-
-	describe( 'Fire events', () => {
-		const onClick = jest.fn();
-		const onKeyDown = jest.fn();
-		const menu = [
-			{
-				label: 'Link',
-				href: '/',
-				onClick,
-				onKeyDown,
-			},
-		];
-
-		it( 'should call the menu item onClick function', async () => {
-			const user = userEvent.setup();
-
-			render( <JetpackFooter menu={ menu } /> );
-
-			const element = screen.getByRole( 'link', { name: menu[ 0 ].label } );
-
-			await user.click( element );
-
-			expect( onClick ).toHaveBeenCalled();
-		} );
-
-		it( 'should call the menu item onKeyDown function', async () => {
-			const user = userEvent.setup();
-
-			render( <JetpackFooter menu={ menu } /> );
-
-			const element = screen.getByRole( 'link', { name: menu[ 0 ].label } );
-
-			// Need to focus on element first
-			await user.click( element );
-			await user.keyboard( '[Enter]' );
-
-			expect( onKeyDown ).toHaveBeenCalled();
-		} );
-	} );
-} );

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

@@ -1,20 +0,0 @@
-import JetpackLogo from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Jetpack Logo',
-	component: JetpackLogo,
-	argTypes: {
-		logoColor: { control: 'color' },
-	},
-} as ComponentMeta< typeof JetpackLogo >;
-
-const Template: ComponentStory< typeof JetpackLogo > = args => <JetpackLogo { ...args } />;
-
-const DefaultArgs = {
-	width: 150,
-	className: 'sample-classname',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;

package/components/jetpack-logo/test/component.tsx

@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import JetpackLogo from '../index';
-
-describe( 'JetpackLogo', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the JetpackLogo component', () => {
-		it( 'validate the class name', () => {
-			render( <JetpackLogo { ...testProps } /> );
-
-			expect( screen.getByLabelText( 'Jetpack Logo' ) ).toHaveClass( testProps.className );
-		} );
-	} );
-} );

package/components/jetpack-search-logo/stories/index.stories.tsx

@@ -1,21 +0,0 @@
-import JetpackSearchLogo from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Jetpack Search Logo',
-	component: JetpackSearchLogo,
-	argTypes: {
-		logoColor: { control: 'color' },
-	},
-} as ComponentMeta< typeof JetpackSearchLogo >;
-
-const Template: ComponentStory< typeof JetpackSearchLogo > = args => (
-	<JetpackSearchLogo { ...args } />
-);
-
-const DefaultArgs = {
-	className: 'sample-classname',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;

package/components/jetpack-search-logo/test/component.tsx

@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import JetpackSearchLogo from '../index';
-
-describe( 'JetpackSearchLogo', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the JetpackSearchLogo component', () => {
-		it( 'validate the class name', () => {
-			render( <JetpackSearchLogo { ...testProps } /> );
-
-			expect( screen.getByLabelText( 'Jetpack Search Logo' ) ).toHaveClass( testProps.className );
-		} );
-	} );
-} );

package/components/jetpack-vaultpress-backup-logo/stories/index.stories.tsx

@@ -1,20 +0,0 @@
-import JetpackVaultPressBackupLogo from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Jetpack VaultPress Backup Logo',
-	component: JetpackVaultPressBackupLogo,
-	argTypes: {},
-} as ComponentMeta< typeof JetpackVaultPressBackupLogo >;
-
-const Template: ComponentStory< typeof JetpackVaultPressBackupLogo > = args => (
-	<JetpackVaultPressBackupLogo { ...args } />
-);
-
-const DefaultArgs = {
-	width: 150,
-	className: 'sample-classname',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;

package/components/jetpack-vaultpress-backup-logo/test/component.tsx

@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import JetpackVaultPressBackupLogo from '../index';
-
-describe( 'JetpackVaultPressBackupLogo', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the JetpackVaultPressBackupLogo component', () => {
-		it( 'validate the class name', () => {
-			render( <JetpackVaultPressBackupLogo { ...testProps } /> );
-
-			expect( screen.getByLabelText( 'VaultPress Backup Logo' ) ).toHaveClass(
-				testProps.className
-			);
-		} );
-	} );
-} );

package/components/jetpack-videopress-logo/stories/index.stories.tsx

@@ -1,20 +0,0 @@
-import JetpackVideoPressLogo from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Jetpack VideoPress Logo',
-	component: JetpackVideoPressLogo,
-	argTypes: {},
-} as ComponentMeta< typeof JetpackVideoPressLogo >;
-
-const Template: ComponentStory< typeof JetpackVideoPressLogo > = args => (
-	<JetpackVideoPressLogo { ...args } />
-);
-
-const DefaultArgs = {
-	width: 150,
-	className: 'sample-classname',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;

package/components/jetpack-videopress-logo/test/component.tsx

@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import JetpackVideoPressLogo from '../index';
-
-describe( 'JetpackVideoPressLogo', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the JetpackVideoPressLogo component', () => {
-		it( 'validate the class name', () => {
-			render( <JetpackVideoPressLogo { ...testProps } /> );
-
-			expect( screen.getByLabelText( 'VideoPress Logo' ) ).toHaveClass( testProps.className );
-		} );
-	} );
-} );

package/components/layout/stories/index.stories.tsx

@@ -1,145 +0,0 @@
-import Text from '../../text';
-import Col from '../col';
-import Container from '../container';
-import useBreakpointMatch from '../use-breakpoint-match';
-import styles from './styles.module.scss';
-
-const Layout = ( { items, fluid, horizontalGap, horizontalSpacing } ) => {
-	return (
-		<Container
-			className={ styles.container }
-			horizontalSpacing={ horizontalSpacing }
-			fluid={ fluid }
-			horizontalGap={ horizontalGap }
-		>
-			{ items.map( ( { sm, lg, md }, idx ) => {
-				const smText = Number.isInteger( sm?.start ) ? JSON.stringify( sm ) : sm;
-				const mdText = Number.isInteger( md?.start ) ? JSON.stringify( md ) : md;
-				const lgText = Number.isInteger( lg?.start ) ? JSON.stringify( lg ) : lg;
-
-				return (
-					<Col
-						sm={ sm }
-						md={ md }
-						lg={ lg }
-						className={ styles.col }
-						key={ `${ smText }${ mdText }${ lgText }${ idx }` }
-					>
-						{ sm ? `sm=${ smText } ` : '' }
-						{ md ? `md=${ mdText } ` : '' }
-						{ lg ? `lg=${ lgText } ` : '' }
-					</Col>
-				);
-			} ) }
-			<Col>
-				<Container fluid horizontalSpacing={ 0 } horizontalGap={ 1 }>
-					<Col className={ styles.col }>Composition Example</Col>
-					<Col className={ styles.col }>Composition Example</Col>
-				</Container>
-			</Col>
-		</Container>
-	);
-};
-
-export default {
-	title: 'JS Packages/Components/Layout',
-	component: Layout,
-};
-
-const Template = args => <Layout { ...args } />;
-export const Default = Template.bind( {} );
-Default.args = {
-	fluid: false,
-	horizontalSpacing: 10,
-	horizontalGap: 5,
-	items: [
-		{
-			sm: 2,
-			md: 5,
-			lg: 4,
-		},
-		{
-			sm: 2,
-			md: 3,
-			lg: { start: 6, end: 12 },
-		},
-		{
-			sm: 2,
-			md: 3,
-			lg: 6,
-		},
-		{
-			sm: 2,
-			md: 5,
-			lg: { start: 9, end: 12 },
-		},
-		{
-			sm: 2,
-			md: 5,
-			lg: 4,
-		},
-		{
-			sm: 2,
-			md: 3,
-			lg: 8,
-		},
-	],
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const BreakpointMatch = args => {
-	const [ isSm, isGtSm, isMd, isLtOrMd, isLtMd, isGtOrMd, isGtMd, isLessThanLg, isLg ] =
-		useBreakpointMatch(
-			[ 'sm', 'sm', 'md', 'md', 'md', 'md', 'md', 'lg', 'lg' ],
-			[ null, '>', null, '<=', '<', '>=', '>', '<', null ]
-		);
-
-	return (
-		<Container>
-			{ /* SMALL */ }
-			<Text variant="headline-small">Small</Text>
-			<Col>
-				<Text variant="title-small">Is Small</Text>
-				<Text className={ isSm ? styles.yes : styles.no }>{ isSm ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is greater than Small</Text>
-				<Text className={ isGtSm ? styles.yes : styles.no }>{ isGtSm ? 'Yes' : 'False' }</Text>
-			</Col>
-			{ /* MEDIUM */ }
-			<Text variant="headline-small">Medium</Text>
-			<Col>
-				<Text variant="title-small">Is Medium</Text>
-				<Text className={ isMd ? styles.yes : styles.no }>{ isMd ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is less then Medium</Text>
-				<Text className={ isLtMd ? styles.yes : styles.no }>{ isLtMd ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is less then OR Medium</Text>
-				<Text className={ isLtOrMd ? styles.yes : styles.no }>{ isLtOrMd ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is greater then Medium</Text>
-				<Text className={ isGtMd ? styles.yes : styles.no }>{ isGtMd ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is greater then OR Medium</Text>
-				<Text className={ isGtOrMd ? styles.yes : styles.no }>{ isGtOrMd ? 'Yes' : 'False' }</Text>
-			</Col>
-			{ /* LARGE */ }
-			<Text variant="headline-small">Large</Text>
-			<Col>
-				<Text variant="title-small">Is Large</Text>
-				<Text className={ isLg ? styles.yes : styles.no }>{ isLg ? 'Yes' : 'False' }</Text>
-			</Col>
-			<Col>
-				<Text variant="title-small">Is less than Large</Text>
-				<Text className={ isLessThanLg ? styles.yes : styles.no }>
-					{ isLessThanLg ? 'Yes' : 'False' }
-				</Text>
-			</Col>
-		</Container>
-	);
-};