@automattic/jetpack-components 0.41.1 → 0.42.0

package/components/text/stories/index.mdx

@@ -1,195 +0,0 @@
-import { Meta, Source, Story } from '@storybook/blocks';
-import dedent from 'ts-dedent';
-import Text, { BOX_MODEL_VALUES, H2, H3, Title } from '../index';
-import * as Stories from './index.stories';
-
-<Meta of={Stories} />
-
-# Text
-Set of React jetpack-components intended to facilitate when dealing with rendering text content.
-
-## &lt;Text /&gt;
-
-`Text` is the primary component that renders text, supporting the following features:
-
-* **Typography**: provided by the ThemeProvider component.
-* **Spacing**: A simple range of shorthand classes to modify the text element's margin and padding.
-
-### Props
-
-#### variant
-
-**Type**: `headline-medium`, `headline-small`, `headline-small-regular`, `title-medium`,
-`title-medium-semi-bold`, `title-small`, `body`, `body-small`, `body-extra-small`,
-`body-extra-small-bold`, `label`.
-
-Define the text Typography variant among the options offered by the ThemeProvider component.
-
-<Source
-  language='jsx'
-  code={dedent`
-    import Text from '@automattic/jetpack-components';
-    
-    function Hello() {
-      return (
-        <Text variant="headline-medium">
-          Hello, Text component!
-        </Text>
-      );
-    }
-  `}
-/>
-
-#### Spacing properties
-
-**Type**: number, one of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`.
-
-Use the following properties to define margin and padding of the text. The unit is defined by the `--spacing-base` value.
-You can see how it works playing with the [Box Model](./?path=/story/js-packages-components-text--box-model) story.
-
-Prop | Description
----|---
-**m** | margin
-**mt** | margin-top
-**mr** | margin-right
-**mb** | margin-bottom
-**ml** | margin-left
-**mx** | margin left and right
-**my** | margin top and bottom
-**p** | padding
-**pt** | padding-top
-**pr** | padding-right
-**pb** | padding-bottom
-**pl** | padding-left
-**px** | padding left and right
-**py** | padding top and bottom
-
-<Source
-  language='jsx'
-  code={dedent`
-    import Text from '@automattic/jetpack-components';
-    
-    function HelloBoxModel() {
-      return (
-        <Text mt={ 2 } px={ 4 }>
-          Hello, Text component!
-        </Text>
-      );
-    }
-  `}
-/>
-
-#### component
-
-**Type**: `elementType`, `string`.
-
-Force an specific tag (`"span"`, `"div"`) or use a custom component that will receive className and children.
-
-The example below renders the component with a `<span />` element.
-
-<Source
-  language='jsx'
-  code={dedent`
-    import Text from '@automattic/jetpack-components';
-    function SpanTextComponent() {
-      return (
-        <Text component="span" variant="title-medium">
-          Never underestimate the span element
-        </Text>
-      );
-    }
-  `}
-/>
-
-The following example shows how to define the typography and the margin for a Custom component.
-The className is passed down to the custom component, while the properties that belong to the Text component (in this case, `component`, `variant` and `mb`) are not.
-
-<Source
-  language='jsx'
-  code={dedent`
-    import Text from '@automattic/jetpack-components';
-    
-    function CustomComponent( { children, className } ) {
-      // className, provided by Text, is "custom-classname"
-      return (
-        <div className={ className }>{ children }</div>
-      );
-    }
-    
-    // Use a custom component when rendering the <Text />,
-    // it passes down the className property to it.
-    function CustomTextComponent() {
-      return (
-        <Text
-          component={ CustomComponent }
-          className="custom-classname"
-          variant="title-medium"
-          mb={ 3 }
-        >
-          Hello, Custom Text component!
-        </Text>
-      );
-    }
-  `}
-/>
-
-[▶️ Custom Tag story](.?path=/story/js-packages-components-text--custom-tag) and [▶️ Custom Component story](.?path=/story/js-packages-components-text--custom-component)
-
-#### Children
-
-**Type**: `node`.
-
-The text itself that will be rendered.
-
-# Text based components
-
-## &lt;H2 /&gt;
-Text shorthand to render a `heading-medium` text, applying proper spacing.
-
-[▶️ Story](.?path=/story/js-packages-components-text-heading--headline-h-2)
-
-## &lt;H3 /&gt;
-Text shorthand to render a `heading-small` text, applying proper spacing.
-
-[▶️ Story](.?path=/story/js-packages-components-text-heading--headline-h-3)
-
-### Props
-
-#### Weight: `bold` (default) | `regular`
-
-<Source
-  language='jsx'
-  code={dedent`
-    import { H3 } from '@automattic/jetpack-components';
-    
-    function Subtitle() {
-      return (
-        <H3 weight="regular">Let's explaining what H3 is</H3>
-      );
-    }
-  `}
-/>
-
-## &lt;Title /&gt;
-Text shorthand to render a `body` text, applying proper spacing.
-
-### Props
-
-#### Size: `medium` (default) | `small`
-
-<Source
-  language='jsx'
-  code={dedent`
-    import { Title } from '@automattic/jetpack-components';
-    
-    function Subtitle() {
-      return (
-        <Title size="small">
-          To explain what a Title component does, we should before...
-        </Title>
-      );
-    }
-  `}
-/>
-
-[▶️ Story](.?path=/story/js-packages-components-text-title--default)

package/components/text/stories/index.stories.tsx

@@ -1,69 +0,0 @@
-import Text, { BOX_MODEL_VALUES, H2, H3, Title, VARIANTS_MAPPING } from '../index';
-import styles from './style.module.scss';
-import type { SpacingValue } from '../types';
-
-const SPACING_VALUES: Array< SpacingValue > = [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ];
-
-export default {
-	title: 'JS Packages/Components/Text',
-	component: Text,
-	argTypes: {
-		...BOX_MODEL_VALUES.reduce(
-			( obj, cur ) => ( {
-				...obj,
-				[ cur ]: {
-					control: { type: 'select' },
-					options: SPACING_VALUES,
-				},
-			} ),
-			{}
-		),
-		variant: {
-			control: {
-				type: 'select',
-			},
-			options: Object.keys( VARIANTS_MAPPING ),
-		},
-	},
-	subcomponents: { H2, H3, Title },
-};
-
-const Template = args => <Text { ...args }>{ args.variant ?? 'body' }</Text>;
-
-export const Default = Template.bind( {} );
-
-Default.args = {
-	variant: 'headline-medium',
-};
-
-export const CustomTag = Template.bind( {} );
-
-CustomTag.args = {
-	variant: 'title-small',
-	component: 'div',
-};
-
-const Custom = ( { className, children } ) => (
-	<span className={ className }>{ children } Composition</span>
-);
-
-export const CustomComponent = Template.bind( {} );
-
-CustomComponent.args = {
-	variant: 'headline-small',
-	component: Custom,
-};
-
-const BoxModelTemplate = args => (
-	<div className={ styles[ 'box-model-wrapper' ] }>
-		<div className={ styles[ 'box-model-side-left' ] } />
-		<div className={ styles[ 'box-model-side-center' ] }>
-			<Text { ...args }>
-				<div className={ styles[ 'box-model-inner' ] }>Box Model</div>
-			</Text>
-		</div>
-		<div className={ styles[ 'box-model-side-right' ] } />
-	</div>
-);
-
-export const BoxModel = BoxModelTemplate.bind( {} );

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

@@ -1,64 +0,0 @@
-.instance {
-	span {
-		color: var( --jp-gray-40 );
-		display: inline-block;
-		width: 100%;
-		background-color: var( --jp-white-off );
-	}
-}
-
-.box-model-wrapper {
-	height: 100%;
-	display: flex;
-	margin-top: 50px;
-}
-.box-model-side-left,
-.box-model-side-right {
-	flex-grow: 1;
-}
-.box-model-side-center {
-	background-color: #A68169;
-	position: relative;
-	&:after {
-		content:" ";
-		border: 1px dashed rgba( 0, 0, 0, 0.6 );
-		display: block;
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		width: 100%;
-	}
-	> p {
-		background-color: #B9C386;
-		position: relative;
-		&:after {
-			content:" ";
-			border: 1px dashed rgba( 0, 0, 0, 0.6 );
-			display: block;
-			position: absolute;
-			top: 0;
-			left: 0;
-			height: 100%;
-			width: 100%;
-		}
-		.box-model-inner {
-			min-width: 200px;
-			min-height: 50px;
-			line-height: 50px;
-			background-color: #8FAFBA;
-			text-align: center;
-			position: relative;
-			&:after {
-				content: " ";
-				border: 1px dashed rgba( 0, 0, 0, 0.4 );
-				display: block;
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				width: 100%;
-			}
-		}
-	}
-}

package/components/text/stories/title.index.stories.tsx

@@ -1,34 +0,0 @@
-import { Title } from '../index';
-import styles from './style.module.scss';
-import type { TitleProps } from '../types';
-
-const TIPOGRAPHY_SIZES: Array< TitleProps[ 'size' ] > = [ 'medium', 'small' ];
-
-export default {
-	title: 'JS Packages/Components/Text/Title',
-	component: Title,
-	argTypes: {
-		children: {
-			control: { type: 'text' },
-		},
-		size: {
-			control: { type: 'select' },
-			options: TIPOGRAPHY_SIZES,
-		},
-	},
-};
-
-const Template = args => (
-	<div className={ styles.instance }>
-		<span>Text above to the the component...</span>
-		<Title { ...args }>
-			{ args?.children || 'Title Medium - Secure, grow, and increase your site speed' }
-		</Title>
-		<span>Text below to the the component...</span>
-	</div>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	size: 'medium',
-} as TitleProps;

package/components/theme-provider/stories/index.stories.tsx

@@ -1,164 +0,0 @@
-import { Button } from '@wordpress/components';
-import { useCopyToClipboard } from '@wordpress/compose';
-import Col from '../../layout/col';
-import Container from '../../layout/container';
-import ThemeProvider, { typography, colors, borders, spacing } from '../index';
-import styles from './style.module.scss';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-/**
- * Get the contrasting color for any hex color
- * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
- * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/
- *
- * @param   {string} hexcolor - hexcolor value
- * @returns {string}            The contrasting color (black or white)
- */
-function getContrast( hexcolor ) {
-	// If a leading # is provided, remove it
-	if ( hexcolor.slice( 0, 1 ) === '#' ) {
-		hexcolor = hexcolor.slice( 1 );
-	}
-
-	// If a three-character hexcode, make six-character
-	if ( hexcolor.length === 3 ) {
-		hexcolor = hexcolor
-			.split( '' )
-			.map( function ( hex ) {
-				return hex + hex;
-			} )
-			.join( '' );
-	}
-
-	// Convert to RGB value
-	const r = parseInt( hexcolor.substring( 0, 2 ), 16 );
-	const g = parseInt( hexcolor.substring( 2, 4 ), 16 );
-	const b = parseInt( hexcolor.substring( 4, 6 ), 16 );
-
-	// Get YIQ ratio
-	const yiq = ( r * 299 + g * 587 + b * 114 ) / 1000;
-
-	// Check contrast
-	return yiq >= 128 ? 'black' : 'white';
-}
-export default {
-	title: 'JS Packages/Components/Theme Provider',
-} as ComponentMeta< typeof ThemeProvider >;
-
-const noop = () => {
-	//
-};
-
-const ClipboardButton: React.FC< React.ComponentProps< typeof Button > > = ( {
-	text,
-	...buttonProps
-} ) => {
-	const ref = useCopyToClipboard( text, noop );
-	return <Button { ...buttonProps } ref={ ref } />;
-};
-
-const Section = ( { title, data, children = null } ) => (
-	<div className={ styles.section }>
-		<h1 className={ styles.title }>{ title }</h1>
-		<Container fluid>
-			{ Object.keys( data ).map( key => (
-				<Col lg={ 3 } className={ styles.box }>
-					<Container fluid horizontalGap={ 2 }>
-						<Col className={ styles.key }>{ key }</Col>
-						{ children && <Col className={ styles.example }>{ children( data[ key ] ) }</Col> }
-						<Col>
-							<div className={ styles[ 'value-label' ] }>Value</div>
-							<input
-								type="text"
-								value={ data[ key ] }
-								readOnly={ true }
-								className={ styles.value }
-							/>
-						</Col>
-					</Container>
-				</Col>
-			) ) }
-		</Container>
-	</div>
-);
-
-export const Tokens = () => (
-	<>
-		<Section title="Typography" data={ typography }>
-			{ value => <div style={ { fontSize: value } }>Text</div> }
-		</Section>
-		<Section title="Colors" data={ colors }>
-			{ value => (
-				<div className={ styles[ 'colors-example' ] } style={ { backgroundColor: value } } />
-			) }
-		</Section>
-		<Section title="Borders" data={ borders } />
-		<Section title="Spacing" data={ spacing } />
-	</>
-);
-Tokens.parameters = {
-	docs: { source: { code: null } },
-};
-
-export const Typographies = args => (
-	<div className={ styles[ 'instances-wrapper' ] }>
-		{ Object.keys( typography ).map( key => (
-			<div className={ styles[ 'font-instance' ] } style={ { fontSize: typography[ key ] } }>
-				{ args?.[ 'Text Instance' ] || `${ key } (${ typography[ key ] } )` }
-
-				<ClipboardButton variant="tertiary" text={ key } className={ styles[ 'copy-button' ] }>
-					Copy
-				</ClipboardButton>
-			</div>
-		) ) }
-	</div>
-);
-
-Typographies.args = {
-	[ 'Text Instance' ]: '',
-};
-Typographies.parameters = {
-	docs: { source: { code: null } },
-};
-
-export const Colors = () => (
-	<div className={ styles[ 'instances-wrapper' ] }>
-		{ Object.keys( colors ).map( key => (
-			<div
-				className={ styles[ 'color-instance' ] }
-				style={ { backgroundColor: colors[ key ], color: getContrast( colors[ key ] ) } }
-			>
-				{ `${ key } (${ colors[ key ].toUpperCase() } )` }
-
-				<ClipboardButton
-					variant="tertiary"
-					text={ key }
-					className={ styles[ 'copy-button' ] }
-					style={ { color: getContrast( colors[ key ] ) } }
-				>
-					Copy
-				</ClipboardButton>
-			</div>
-		) ) }
-	</div>
-);
-Colors.parameters = {
-	docs: { source: { code: null } },
-};
-
-const Template: ComponentStory< typeof ThemeProvider > = args => (
-	<ThemeProvider { ...args }>
-		<div
-			style={ {
-				color: 'var( --jp-white )',
-				backgroundColor: 'var( --jp-pink )',
-				fontSize: 'var( --font-title-small )',
-				padding: 'var( --spacing-base ) calc( var( --spacing-base ) * 2 )',
-				borderRadius: 'var( --jp-border-radius )',
-			} }
-		>
-			Pink Jetpack Show
-		</div>
-	</ThemeProvider>
-);
-export const BasicUsage = Template.bind( {} );

package/components/theme-provider/stories/style.module.scss

@@ -1,79 +0,0 @@
-.section {
-	width: 100%;
-	margin: auto;
-	padding: 8px 32px;
-}
-
-.key {
-	background-color: var(--jp-green-80);
-	border-radius: var(--jp-border-radius);
-	padding: 8px;
-	color: var(--jp-white);
-	font-weight: 600;
-}
-
-.box {
-	border: 1px solid var(--jp-gray);
-	border-radius: var(--jp-border-radius);
-	padding: 16px;
-}
-
-.example {
-	height: 40px;
-	display: flex;
-	align-items: center;
-	border: 1px solid var(--jp-gray);
-	border-radius: var(--jp-border-radius);
-	padding: 8px;
-}
-
-.value-label {
-	font-weight: 600;
-	font-size: var(--font-label);
-	margin: 8px 0;
-}
-
-.value {
-	width: 100%;
-}
-
-.colors-example {
-	width: 100%;
-	height: 100%;
-}
-
-.instances-wrapper {
-	display: flex;
-	flex-direction: column;
-}
-
-.font-instance {
-	margin: 10px 0;
-	padding: 20px 30px;
-	background-color: var( --jp-white );
-	border: 1px dotted var( --jp-gray-10 );
-	position: relative;
-	&:hover .copy-button {
-		opacity: 1;
-	}
-}
-
-.color-instance {
-	font-size: var( --font-title-small );
-	border: 1px dotted var( --jp-gray-10 );
-	min-height: 60px;
-	line-height: 60px;
-	padding: 10px;
-	margin: 10px 0;
-	position: relative;
-	&:hover .copy-button {
-		opacity: 1;
-	}
-}
-
-.copy-button {
-	opacity: 0.3;
-	position: absolute;
-	top: 5px;
-	right: 5px;
-}

package/components/toggle-control/stories/index.stories.tsx

@@ -1,83 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import ToggleControl from '..';
-
-export default {
-	title: 'JS Packages/Components/Toggle Control',
-	component: ToggleControl,
-	parameters: {
-		layout: 'centered',
-	},
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Default = args => {
-	const [ checked, setChecked ] = useState( false );
-
-	const handleChecked = useCallback( () => {
-		setChecked( ! checked );
-	}, [ checked ] );
-
-	return <ToggleControl checked={ checked } onChange={ handleChecked } label="Code is poetry." />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Slow = args => {
-	const [ loading, setLoading ] = useState( false );
-	const [ checked, setChecked ] = useState( false );
-
-	const handleChecked = useCallback( () => {
-		setLoading( true );
-		setTimeout( () => {
-			setLoading( false );
-			setChecked( ! checked );
-		}, 2000 );
-	}, [ checked ] );
-
-	return (
-		<ToggleControl
-			checked={ checked }
-			toggling={ loading }
-			onChange={ handleChecked }
-			label="Code is poetry."
-		/>
-	);
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Disabled = args => {
-	const [ checked, setChecked ] = useState( false );
-
-	const handleChecked = useCallback( () => {
-		setChecked( ! checked );
-	}, [ checked ] );
-
-	return (
-		<>
-			<ToggleControl checked={ true } disabled label="Code is poetry." onChange={ handleChecked } />
-			<ToggleControl
-				checked={ false }
-				disabled
-				label="Code is poetry."
-				onChange={ handleChecked }
-			/>
-		</>
-	);
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const HelpText = args => {
-	const [ checked, setChecked ] = useState( false );
-
-	const handleChecked = useCallback( () => {
-		setChecked( ! checked );
-	}, [ checked ] );
-
-	return (
-		<ToggleControl
-			checked={ checked }
-			label="Code is poetry."
-			help="Code is poetry. Code is poetry. Code is poetry."
-			onChange={ handleChecked }
-		/>
-	);
-};

package/components/zendesk-chat/stories/index.stories.tsx

@@ -1,15 +0,0 @@
-import ZendeskChat from '../index';
-
-export default {
-	title: 'JS Packages/Components/Zendesk Chat',
-	component: ZendeskChat,
-	parameters: {
-		backgrounds: {
-			default: 'dark',
-		},
-	},
-};
-
-const Template = args => <ZendeskChat { ...args } />;
-
-export const _default = Template.bind( {} );