@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/tabs/types.ts

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+export type TabsContextProps =
+	| {
+			/**
+			 * The tabStore object returned by Ariakit's `useTabStore` hook.
+			 */
+			store: Ariakit.TabStore;
+			/**
+			 * The unique id string for this instance of the Tabs component.
+			 */
+			instanceId: string;
+	  }
+	| undefined;
+
+export type TabsProps = {
+	/**
+	 * The children elements, which should be at least a
+	 * `Tabs.Tablist` component and a series of `Tabs.TabPanel`
+	 * components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * When `true`, the tab will be selected when receiving focus (automatic tab
+	 * activation). When `false`, the tab will be selected only when clicked
+	 * (manual tab activation). See the official W3C docs for more info.
+	 *
+	 * @default true
+	 *
+	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+	 */
+	selectOnMove?: boolean;
+	/**
+	 * The id of the tab to be selected upon mounting of component.
+	 * If this prop is not set, the first tab will be selected by default.
+	 * The id provided will be internally prefixed with the
+	 * `TabsContextProps.instanceId`.
+	 *
+	 * Note: this prop will be overridden by the `selectedTabId` prop if it is
+	 * provided. (Controlled Mode)
+	 */
+	initialTabId?: string;
+	/**
+	 * The function called when a tab has been selected.
+	 * It is passed the id of the newly selected tab as an argument.
+	 */
+	onSelect?: ( selectedId: string | null | undefined ) => void;
+
+	/**
+	 * The orientation of the tablist.
+	 *
+	 * @default `horizontal`
+	 */
+	orientation?: 'horizontal' | 'vertical';
+	/**
+	 * The Id of the tab to display. This id is prepended with the `Tabs`
+	 * instanceId internally.
+	 *
+	 * If left `undefined`, the component assumes it is being used in
+	 * uncontrolled mode. Consequently, any value different than `undefined`
+	 * will set the component in `controlled` mode.
+	 * When in controlled mode, the `null` value will result in no tab being selected.
+	 */
+	selectedTabId?: string | null;
+};
+
+export type TabListProps = {
+	/**
+	 * The children elements, which should be a series of `Tabs.TabPanel` components.
+	 */
+	children?: React.ReactNode;
+};
+
+export type TabProps = {
+	/**
+	 * The id of the tab, which is prepended with the `Tabs` instanceId.
+	 * The value of this prop should match with the value of the `tabId` prop on
+	 * the corresponding `Tabs.TabPanel` component.
+	 */
+	tabId: string;
+	/**
+	 * The children elements, generally the text to display on the tab.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * Determines if the tab button should be disabled.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * The type of component to render the tab button as. If this prop is not
+	 * provided, the tab button will be rendered as a `button` element.
+	 */
+	render?: React.ReactElement;
+};
+
+export type TabPanelProps = {
+	/**
+	 * The children elements, generally the content to display on the tabpanel.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * A unique identifier for the tabpanel, which is used to generate an
+	 * instanced id for the underlying element.
+	 * The value of this prop should match with the value of the `tabId` prop on
+	 * the corresponding `Tabs.Tab` component.
+	 */
+	tabId: string;
+	/**
+	 * Determines whether or not the tabpanel element should be focusable.
+	 * If `false`, pressing the tab key will skip over the tabpanel, and instead
+	 * focus on the first focusable element in the panel (if there is one).
+	 *
+	 * @default true
+	 */
+	focusable?: boolean;
+};

package/src/text/README.md

@@ -22,7 +22,7 @@ function Example() {
 
 ### adjustLineHeightForInnerControls
 
-**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`
+**Type**: `"large"`,`"medium"`,`"small"`,`"xSmall"`
 
 Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 
@@ -31,7 +31,7 @@ import { __experimentalText as Text, TextInput } from '@wordpress/components';
 
 function Example() {
 	return (
-		<Text adjustLineHeightForInnerControls>
+		<Text adjustLineHeightForInnerControls={"small"}>
 			Lorem ipsum dolor sit amet, consectetur
 			<TextInput value="adipiscing elit..." />
 		</Text>
@@ -132,6 +132,8 @@ function Example() {
 
 Sets `Text` to have `display: block`.
 
+Note: text truncation only works when `isBlock` is `false`.
+
 ### isDestructive
 
 **Type**: `boolean`
@@ -196,7 +198,9 @@ function Example() {
 
 **Type**: `boolean`
 
-Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways.
+
+Note: text truncation won't work if the `isBlock` property is set to `true`
 
 ```jsx
 import { __experimentalText as Text } from '@wordpress/components';

package/src/text/{component.js → component.tsx}

@@ -1,15 +1,20 @@
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import useText from './hook';
+import type { Props } from './types';
 
 /**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').ForwardedRef<any>}                                                forwardedRef
+ * @param props
+ * @param forwardedRef
  */
-function Text( props, forwardedRef ) {
+function UnconnectedText(
+	props: WordPressComponentProps< Props, 'span' >,
+	forwardedRef: React.ForwardedRef< any >
+) {
 	const textProps = useText( props );
 
 	return <View as="span" { ...textProps } ref={ forwardedRef } />;
@@ -31,6 +36,5 @@ function Text( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedText = contextConnect( Text, 'Text' );
-
-export default ConnectedText;
+export const Text = contextConnect( UnconnectedText, 'Text' );
+export default Text;

package/src/text/get-line-height.ts

@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
  * Internal dependencies
  */
 import type { Props } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { CONFIG } from '../utils';
 
 export function getLineHeight(

package/src/text/{hook.js → hook.ts}

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 
 /**
@@ -11,20 +12,25 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { hasConnectNamespace, useContextSystem } from '../context';
 import { useTruncate } from '../truncate';
-import { getOptimalTextShade } from '../ui/utils';
+import { getOptimalTextShade } from '../utils/colors';
 import * as styles from './styles';
 import { createHighlighterText } from './utils';
-import { getFontSize } from '../ui/utils/font-size';
+import { getFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 import { useCx } from '../utils/hooks/use-cx';
+import type { Props } from './types';
+import type React from 'react';
 
 /**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
  */
-export default function useText( props ) {
+export default function useText(
+	props: WordPressComponentProps< Props, 'span' >
+) {
 	const {
 		adjustLineHeightForInnerControls,
 		align,
@@ -50,8 +56,7 @@ export default function useText( props ) {
 		...otherProps
 	} = useContextSystem( props, 'Text' );
 
-	/** @type {import('react').ReactNode} */
-	let content = children;
+	let content: React.ReactNode = children;
 	const isHighlighter = Array.isArray( highlightWords );
 	const isCaption = size === 'caption';
 
@@ -64,9 +69,7 @@ export default function useText( props ) {
 
 		content = createHighlighterText( {
 			autoEscape: highlightEscape,
-			// Disable reason: We need to disable this otherwise it erases the cast
-			// eslint-disable-next-line object-shorthand
-			children: /** @type {string} */ ( children ),
+			children,
 			caseSensitive: highlightCaseSensitive,
 			searchWords: highlightWords,
 			sanitize: highlightSanitize,
@@ -76,7 +79,7 @@ export default function useText( props ) {
 	const cx = useCx();
 
 	const classes = useMemo( () => {
-		const sx = {};
+		const sx: Record< string, SerializedStyles | null > = {};
 
 		const lineHeight = getLineHeight(
 			adjustLineHeightForInnerControls,
@@ -87,12 +90,7 @@ export default function useText( props ) {
 			color,
 			display,
 			fontSize: getFontSize( size ),
-			/* eslint-disable jsdoc/valid-types */
-			fontWeight:
-				/** @type {import('react').CSSProperties['fontWeight']} */ (
-					weight
-				),
-			/* eslint-enable jsdoc/valid-types */
+			fontWeight: weight,
 			lineHeight,
 			letterSpacing,
 			textAlign: align,
@@ -143,8 +141,7 @@ export default function useText( props ) {
 		weight,
 	] );
 
-	/** @type {undefined | 'auto' | 'none'} */
-	let finalEllipsizeMode;
+	let finalEllipsizeMode: undefined | 'auto' | 'none';
 	if ( truncate === true ) {
 		finalEllipsizeMode = 'auto';
 	}

package/src/text/stories/index.story.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../component';
+
+const meta: Meta< typeof Text > = {
+	component: Text,
+	title: 'Components (Experimental)/Text',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		size: { control: { type: 'text' } },
+		variant: {
+			options: [ undefined, 'muted' ],
+			control: { type: 'select' },
+		},
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Text > = ( props ) => {
+	return <Text { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
+};
+
+export const Truncate = Template.bind( {} );
+Truncate.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	numberOfLines: 2,
+	truncate: true,
+};
+
+export const Highlight = Template.bind( {} );
+Highlight.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	highlightWords: [ 'con' ],
+};

package/src/text/{styles.js → styles.ts}

@@ -34,7 +34,8 @@ export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
 		border-radius: 2px;
-		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
+		box-shadow:
+			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 	}
 `;

package/src/text/test/index.tsx

@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { getFontSize } from '../../ui/utils/font-size';
+import { getFontSize } from '../../utils/font-size';
 import { COLORS } from '../../utils';
 import { Text } from '../';
 

package/src/text/types.ts

@@ -7,6 +7,7 @@ import type { TruncateProps } from '../truncate/types';
  * External dependencies
  */
 import type { CSSProperties } from 'react';
+import type { FindAllArgs } from 'highlight-words-core';
 
 export type TextSize =
 	| 'body'
@@ -28,12 +29,7 @@ export interface Props extends TruncateProps {
 	/**
 	 * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 	 */
-	adjustLineHeightForInnerControls?:
-		| boolean
-		| 'large'
-		| 'medium'
-		| 'small'
-		| 'xSmall';
+	adjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall';
 	/**
 	 * Adjusts the text color.
 	 */
@@ -50,18 +46,25 @@ export interface Props extends TruncateProps {
 	isDestructive?: boolean;
 	/**
 	 * Escape characters in `highlightWords` which are meaningful in regular expressions.
+	 *
+	 * @default false
 	 */
 	highlightEscape?: boolean;
 	/**
 	 * Determines if `highlightWords` should be case sensitive.
+	 *
+	 * @default false
 	 */
 	highlightCaseSensitive?: boolean;
 	/**
 	 * Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.
 	 */
-	highlightSanitize?: import('highlight-words-core').FindAllArgs[ 'sanitize' ];
+	highlightSanitize?: FindAllArgs[ 'sanitize' ];
 	/**
-	 * Sets `Text` to have `display: block`.
+	 * Sets `Text` to have `display: block`. Note: text truncation only works
+	 * when `isBlock` is `false`.
+	 *
+	 * @default false
 	 */
 	isBlock?: boolean;
 	/**
@@ -77,11 +80,15 @@ export interface Props extends TruncateProps {
 	 */
 	size?: CSSProperties[ 'fontSize' ] | TextSize;
 	/**
-	 * Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+	 * Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways. Note: text truncation won't work if the `isBlock` property is set to `true`
+	 *
+	 * @default false
 	 */
 	truncate?: boolean;
 	/**
 	 * Uppercases the text content.
+	 *
+	 * @default false
 	 */
 	upperCase?: boolean;
 	/**
@@ -90,6 +97,8 @@ export interface Props extends TruncateProps {
 	variant?: TextVariant;
 	/**
 	 * Adjusts font-weight of the text.
+	 *
+	 * @default 'normal'
 	 */
 	weight?: CSSProperties[ 'fontWeight' ] | TextWeight;
 	/**

package/src/text/{utils.js → utils.ts}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import memoize from 'memize';
+import type { FindAllArgs } from 'highlight-words-core';
 import { findAll } from 'highlight-words-core';
 
 /**
@@ -14,7 +15,6 @@ import { createElement } from '@wordpress/element';
  * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
  */
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * @typedef Options
  * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
@@ -33,28 +33,55 @@ import { createElement } from '@wordpress/element';
  * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
  */
 
+interface Options {
+	activeClassName?: string;
+	activeIndex?: number;
+	activeStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	autoEscape?: boolean;
+	caseSensitive?: boolean;
+	children: string;
+	findChunks?: FindAllArgs[ 'findChunks' ];
+	highlightClassName?: string | Record< string, unknown >;
+	highlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	highlightTag?: keyof JSX.IntrinsicElements;
+	sanitize?: FindAllArgs[ 'sanitize' ];
+	searchWords?: string[];
+	unhighlightClassName?: string;
+	unhighlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+}
+
 /**
  * Maps props to lowercase names.
  *
- * @template {Record<string, unknown>} T
- * @param {T} object Props to map.
- * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.
+ * @param object Props to map.
+ * @return The mapped props.
  */
-/* eslint-enable jsdoc/valid-types */
-const lowercaseProps = ( object ) => {
-	/** @type {any} */
-	const mapped = {};
+const lowercaseProps = < T extends Record< string, unknown > >( object: T ) => {
+	const mapped: Record< string, unknown > = {};
 	for ( const key in object ) {
 		mapped[ key.toLowerCase() ] = object[ key ];
 	}
-	return mapped;
+	return mapped as { [ K in keyof T as Lowercase< string & K > ]: T[ K ] };
 };
 
 const memoizedLowercaseProps = memoize( lowercaseProps );
 
 /**
- *
- * @param {Options} options
+ * @param options
+ * @param options.activeClassName
+ * @param options.activeIndex
+ * @param options.activeStyle
+ * @param options.autoEscape
+ * @param options.caseSensitive
+ * @param options.children
+ * @param options.findChunks
+ * @param options.highlightClassName
+ * @param options.highlightStyle
+ * @param options.highlightTag
+ * @param options.sanitize
+ * @param options.searchWords
+ * @param options.unhighlightClassName
+ * @param options.unhighlightStyle
  */
 export function createHighlighterText( {
 	activeClassName = '',
@@ -71,7 +98,7 @@ export function createHighlighterText( {
 	searchWords = [],
 	unhighlightClassName = '',
 	unhighlightStyle,
-} ) {
+}: Options ) {
 	if ( ! children ) return null;
 	if ( typeof children !== 'string' ) return children;
 
@@ -122,8 +149,7 @@ export function createHighlighterText( {
 					? Object.assign( {}, highlightStyle, activeStyle )
 					: highlightStyle;
 
-			/** @type {Record<string, any>} */
-			const props = {
+			const props: Record< string, unknown > = {
 				children: text,
 				className: highlightClassNames,
 				key: index,

package/src/text-control/README.md

@@ -4,12 +4,6 @@ TextControl components let users enter and edit text.
 
 ![Unfilled and filled TextControl components](https://make.wordpress.org/design/files/2019/03/TextControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -60,8 +54,8 @@ Don’t use unclear visual markers to indicate a text field.
 Render a user interface to input the name of an additional css class.
 
 ```js
+import { useState } from 'react';
 import { TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyTextControl = () => {
 	const [ className, setClassName ] = useState( '' );

package/src/text-control/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
 
 function UnforwardedTextControl(
@@ -22,6 +23,7 @@ function UnforwardedTextControl(
 ) {
 	const {
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		label,
 		hideLabelFromVision,
 		value,
@@ -46,7 +48,9 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className="components-text-control__input"
+				className={ classnames( 'components-text-control__input', {
+					'is-next-40px-default-size': __next40pxDefaultSize,
+				} ) }
 				type={ type }
 				id={ id }
 				value={ value }

package/src/text-control/style.scss

@@ -13,5 +13,10 @@
 .components-text-control__input[type="month"],
 .components-text-control__input[type="number"] {
 	width: 100%;
+	height: $grid-unit-40;
 	@include input-control;
+
+	&.is-next-40px-default-size {
+		height: $grid-unit-50;
+	}
 }

package/src/text-control/types.ts

@@ -25,4 +25,10 @@ export type TextControlProps = Pick<
 	 * @default 'text'
 	 */
 	type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'search' | 'url';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/textarea-control/README.md

@@ -4,12 +4,6 @@ TextareaControls are TextControls that allow for multiple lines of text, and wra
 
 ![An empty TextareaControl, and a focused TextareaControl with some content entered.](https://wordpress.org/gutenberg/files/2019/01/TextareaControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -77,8 +71,8 @@ When text input isn’t accepted, an error message can display instructions on h
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { TextareaControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyTextareaControl = () => {
 	const [ text, setText ] = useState( '' );
@@ -100,7 +94,7 @@ The set of props accepted by the component will be specified below.
 
 Props not included in this set will be applied to the textarea element.
 
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
 
 If this property is added, a help text will be generated using help property as the content.