From b4435d23253d3cf5a546ec8f602d58b66fd480fe Mon Sep 17 00:00:00 2001 From: margolisj Date: Thu, 28 Sep 2023 02:37:16 -0400 Subject: [PATCH 01/15] No boolean? --- packages/components/src/text/README.md | 4 ++-- packages/components/src/text/types.ts | 7 +------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 7747ec9cbc7277..6b1fc156158407 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/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 ( - + Lorem ipsum dolor sit amet, consectetur diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts index df60f4ee0e2d7b..e4702c1f3257dd 100644 --- a/packages/components/src/text/types.ts +++ b/packages/components/src/text/types.ts @@ -29,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. */ From 25338546dfc5f1c18783209ebafbfe870a99472d Mon Sep 17 00:00:00 2001 From: margolisj Date: Sat, 30 Sep 2023 17:38:13 -0400 Subject: [PATCH 02/15] Easy type changes and moves styles folder to new location, was clashing in code editor. --- packages/components/src/text/{index.js => index.ts} | 0 .../src/text/{styles => native-styles}/emotion-css.native.js | 0 .../src/text/{styles => native-styles}/font-family.native.js | 0 .../src/text/{styles => native-styles}/text-mixins.native.js | 0 packages/components/src/text/{styles.js => styles.ts} | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/text/{index.js => index.ts} (100%) rename packages/components/src/text/{styles => native-styles}/emotion-css.native.js (100%) rename packages/components/src/text/{styles => native-styles}/font-family.native.js (100%) rename packages/components/src/text/{styles => native-styles}/text-mixins.native.js (100%) rename packages/components/src/text/{styles.js => styles.ts} (100%) diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.ts similarity index 100% rename from packages/components/src/text/index.js rename to packages/components/src/text/index.ts diff --git a/packages/components/src/text/styles/emotion-css.native.js b/packages/components/src/text/native-styles/emotion-css.native.js similarity index 100% rename from packages/components/src/text/styles/emotion-css.native.js rename to packages/components/src/text/native-styles/emotion-css.native.js diff --git a/packages/components/src/text/styles/font-family.native.js b/packages/components/src/text/native-styles/font-family.native.js similarity index 100% rename from packages/components/src/text/styles/font-family.native.js rename to packages/components/src/text/native-styles/font-family.native.js diff --git a/packages/components/src/text/styles/text-mixins.native.js b/packages/components/src/text/native-styles/text-mixins.native.js similarity index 100% rename from packages/components/src/text/styles/text-mixins.native.js rename to packages/components/src/text/native-styles/text-mixins.native.js diff --git a/packages/components/src/text/styles.js b/packages/components/src/text/styles.ts similarity index 100% rename from packages/components/src/text/styles.js rename to packages/components/src/text/styles.ts From a8d83e1a22a52505af379b74f6ebf618faf630e6 Mon Sep 17 00:00:00 2001 From: margolisj Date: Sat, 30 Sep 2023 17:42:59 -0400 Subject: [PATCH 03/15] Types component --- .../components/src/text/{component.js => component.tsx} | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) rename packages/components/src/text/{component.js => component.tsx} (81%) diff --git a/packages/components/src/text/component.js b/packages/components/src/text/component.tsx similarity index 81% rename from packages/components/src/text/component.js rename to packages/components/src/text/component.tsx index f1ce842dae9153..29a3ca9e8f3ef7 100644 --- a/packages/components/src/text/component.js +++ b/packages/components/src/text/component.tsx @@ -1,15 +1,20 @@ /** * Internal dependencies */ +import type { WordPressComponentProps } from '../context'; import { contextConnect } from '../context'; import { View } from '../view'; import useText from './hook'; +import type { Props } from './types'; /** * @param {import('../context').WordPressComponentProps} props * @param {import('react').ForwardedRef} forwardedRef */ -function Text( props, forwardedRef ) { +function Text( + props: WordPressComponentProps< Props, 'span' >, + forwardedRef: React.ForwardedRef< any > +) { const textProps = useText( props ); return ; From 137026766f4e51f6ed7b2366ead17c97f0776d76 Mon Sep 17 00:00:00 2001 From: margolisj Date: Sat, 30 Sep 2023 17:59:16 -0400 Subject: [PATCH 04/15] Quick pass on utils and hook --- .../components/src/text/{hook.js => hook.ts} | 24 +++++++-------- .../src/text/{utils.js => utils.ts} | 30 +++++++++++++++---- 2 files changed, 36 insertions(+), 18 deletions(-) rename packages/components/src/text/{hook.js => hook.ts} (88%) rename packages/components/src/text/{utils.js => utils.ts} (84%) diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.ts similarity index 88% rename from packages/components/src/text/hook.js rename to packages/components/src/text/hook.ts index 5198845c1dae78..5fc41185c8199d 100644 --- a/packages/components/src/text/hook.js +++ b/packages/components/src/text/hook.ts @@ -11,6 +11,7 @@ import { useMemo, Children, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ +import type { WordPressComponentProps } from '../context'; import { hasConnectNamespace, useContextSystem } from '../context'; import { useTruncate } from '../truncate'; import { getOptimalTextShade } from '../utils/colors'; @@ -20,11 +21,15 @@ 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('../context').WordPressComponentProps} props */ -export default function useText( props ) { +export default function useText( + props: WordPressComponentProps< Props, 'span' > +) { const { adjustLineHeightForInnerControls, align, @@ -50,8 +55,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 +68,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: children as string, caseSensitive: highlightCaseSensitive, searchWords: highlightWords, sanitize: highlightSanitize, @@ -76,7 +78,8 @@ export default function useText( props ) { const cx = useCx(); const classes = useMemo( () => { - const sx = {}; + // TODO: Make more specific? + const sx: Record< string, any > = {}; const lineHeight = getLineHeight( adjustLineHeightForInnerControls, @@ -89,9 +92,7 @@ export default function useText( props ) { fontSize: getFontSize( size ), /* eslint-disable jsdoc/valid-types */ fontWeight: - /** @type {import('react').CSSProperties['fontWeight']} */ ( - weight - ), + /** @type {import('react').CSSProperties['fontWeight']} */ weight, /* eslint-enable jsdoc/valid-types */ lineHeight, letterSpacing, @@ -143,8 +144,7 @@ export default function useText( props ) { weight, ] ); - /** @type {undefined | 'auto' | 'none'} */ - let finalEllipsizeMode; + let finalEllipsizeMode: undefined | 'auto' | 'none'; if ( truncate === true ) { finalEllipsizeMode = 'auto'; } diff --git a/packages/components/src/text/utils.js b/packages/components/src/text/utils.ts similarity index 84% rename from packages/components/src/text/utils.js rename to packages/components/src/text/utils.ts index 2496c86cca25ae..af1cd84bdea6c0 100644 --- a/packages/components/src/text/utils.js +++ b/packages/components/src/text/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'; /** @@ -33,6 +34,23 @@ import { createElement } from '@wordpress/element'; * @property {import('react').AllHTMLAttributes['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. * @@ -41,9 +59,10 @@ import { createElement } from '@wordpress/element'; * @return {{[K in keyof T as Lowercase]: T[K]}} The mapped props. */ /* eslint-enable jsdoc/valid-types */ -const lowercaseProps = ( object ) => { - /** @type {any} */ - const mapped = {}; +const lowercaseProps = < T extends Record< string, unknown > >( object: T ) => { + // TODO: Replace with more specific types + // { [ K in keyof T as Lowercase< string & K > ]: T[ K ] } + const mapped: Record< string, unknown > = {}; for ( const key in object ) { mapped[ key.toLowerCase() ] = object[ key ]; } @@ -71,7 +90,7 @@ export function createHighlighterText( { searchWords = [], unhighlightClassName = '', unhighlightStyle, -} ) { +}: Options ) { if ( ! children ) return null; if ( typeof children !== 'string' ) return children; @@ -122,8 +141,7 @@ export function createHighlighterText( { ? Object.assign( {}, highlightStyle, activeStyle ) : highlightStyle; - /** @type {Record} */ - const props = { + const props: Record< string, any > = { children: text, className: highlightClassNames, key: index, From c16a65be953b3b34ded109abb4e5389389cbbf34 Mon Sep 17 00:00:00 2001 From: margolisj Date: Sat, 30 Sep 2023 18:00:05 -0400 Subject: [PATCH 05/15] Story to TSX --- .../src/text/stories/{index.story.js => index.story.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/text/stories/{index.story.js => index.story.tsx} (100%) diff --git a/packages/components/src/text/stories/index.story.js b/packages/components/src/text/stories/index.story.tsx similarity index 100% rename from packages/components/src/text/stories/index.story.js rename to packages/components/src/text/stories/index.story.tsx From 7225c664b4602c658d25c1e160806c1b3f286176 Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 11:27:12 -0400 Subject: [PATCH 06/15] Adds back boolean type and removes unneeded as string. --- packages/components/src/text/hook.ts | 2 +- packages/components/src/text/types.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index 5fc41185c8199d..eb4f2b269bdb74 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -68,7 +68,7 @@ export default function useText( content = createHighlighterText( { autoEscape: highlightEscape, - children: children as string, + children, caseSensitive: highlightCaseSensitive, searchWords: highlightWords, sanitize: highlightSanitize, diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts index e4702c1f3257dd..df60f4ee0e2d7b 100644 --- a/packages/components/src/text/types.ts +++ b/packages/components/src/text/types.ts @@ -29,7 +29,12 @@ export interface Props extends TruncateProps { /** * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`). */ - adjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall'; + adjustLineHeightForInnerControls?: + | boolean + | 'large' + | 'medium' + | 'small' + | 'xSmall'; /** * Adjusts the text color. */ From 7da2b103d31f8c3fbfaf87db31b59cda8e4c379f Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 11:36:48 -0400 Subject: [PATCH 07/15] First pass on PR comments --- packages/components/src/text/hook.ts | 9 +++------ packages/components/src/text/utils.ts | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index eb4f2b269bdb74..a447b2ce5133be 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -1,6 +1,7 @@ /** * External dependencies */ +import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; /** @@ -78,8 +79,7 @@ export default function useText( const cx = useCx(); const classes = useMemo( () => { - // TODO: Make more specific? - const sx: Record< string, any > = {}; + const sx: Record< string, SerializedStyles | null > = {}; const lineHeight = getLineHeight( adjustLineHeightForInnerControls, @@ -90,10 +90,7 @@ export default function useText( 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, diff --git a/packages/components/src/text/utils.ts b/packages/components/src/text/utils.ts index af1cd84bdea6c0..5fe521d8f562f3 100644 --- a/packages/components/src/text/utils.ts +++ b/packages/components/src/text/utils.ts @@ -141,7 +141,7 @@ export function createHighlighterText( { ? Object.assign( {}, highlightStyle, activeStyle ) : highlightStyle; - const props: Record< string, any > = { + const props: Record< string, unknown > = { children: text, className: highlightClassNames, key: index, From 3225331dc7e1e36b38f7422c916cab7292426fe9 Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 11:40:17 -0400 Subject: [PATCH 08/15] Replaces lowercaseProps function with clearer version. --- packages/components/src/text/utils.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/components/src/text/utils.ts b/packages/components/src/text/utils.ts index 5fe521d8f562f3..81f59e2137d238 100644 --- a/packages/components/src/text/utils.ts +++ b/packages/components/src/text/utils.ts @@ -15,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. @@ -54,25 +53,20 @@ interface Options { /** * Maps props to lowercase names. * - * @template {Record} T - * @param {T} object Props to map. - * @return {{[K in keyof T as Lowercase]: T[K]}} The mapped props. + * @param object Props to map. + * @return The mapped props. */ -/* eslint-enable jsdoc/valid-types */ const lowercaseProps = < T extends Record< string, unknown > >( object: T ) => { - // TODO: Replace with more specific types - // { [ K in keyof T as Lowercase< string & K > ]: T[ K ] } 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 */ export function createHighlighterText( { From 035a3bf339541d98273e2e523b20267dd3745bdc Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 11:49:21 -0400 Subject: [PATCH 09/15] Adds changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b29e40ba900d9c..95c023b463b55a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -32,6 +32,7 @@ - `SlotFill`: Migrate to TypeScript and Convert to Functional Component ``. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)). - `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)). - Ensure `@types/` dependencies used by final type files are included in the main dependency field ([#50231](https://github.com/WordPress/gutenberg/pull/50231)). +- `Text`: Migrate to TypeScript. ([#54953](https://github.com/WordPress/gutenberg/pull/54953)). ## 25.8.0 (2023-09-20) From 658e329a438444ed2556471283b0a311f6f7b7f5 Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 23:27:16 -0400 Subject: [PATCH 10/15] options type in utils for createHighlighterText converted out of jsDocs --- packages/components/src/text/utils.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/components/src/text/utils.ts b/packages/components/src/text/utils.ts index 81f59e2137d238..85e41a56c6e349 100644 --- a/packages/components/src/text/utils.ts +++ b/packages/components/src/text/utils.ts @@ -67,7 +67,21 @@ const lowercaseProps = < T extends Record< string, unknown > >( object: T ) => { 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 = '', From 4ab7fc39449ca81a8ace5bd080138170d7420cce Mon Sep 17 00:00:00 2001 From: margolisj Date: Mon, 2 Oct 2023 23:28:35 -0400 Subject: [PATCH 11/15] Move native styles back --- .../src/text/{native-styles => styles}/emotion-css.native.js | 0 .../src/text/{native-styles => styles}/font-family.native.js | 0 .../src/text/{native-styles => styles}/text-mixins.native.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/text/{native-styles => styles}/emotion-css.native.js (100%) rename packages/components/src/text/{native-styles => styles}/font-family.native.js (100%) rename packages/components/src/text/{native-styles => styles}/text-mixins.native.js (100%) diff --git a/packages/components/src/text/native-styles/emotion-css.native.js b/packages/components/src/text/styles/emotion-css.native.js similarity index 100% rename from packages/components/src/text/native-styles/emotion-css.native.js rename to packages/components/src/text/styles/emotion-css.native.js diff --git a/packages/components/src/text/native-styles/font-family.native.js b/packages/components/src/text/styles/font-family.native.js similarity index 100% rename from packages/components/src/text/native-styles/font-family.native.js rename to packages/components/src/text/styles/font-family.native.js diff --git a/packages/components/src/text/native-styles/text-mixins.native.js b/packages/components/src/text/styles/text-mixins.native.js similarity index 100% rename from packages/components/src/text/native-styles/text-mixins.native.js rename to packages/components/src/text/styles/text-mixins.native.js From 83f0b097c96b64b69e857fd89af0a9c6fb52024b Mon Sep 17 00:00:00 2001 From: margolisj Date: Tue, 3 Oct 2023 10:14:21 -0400 Subject: [PATCH 12/15] Removes boolean from adjustLineHeightForInnerControls. --- packages/components/src/text/types.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts index df60f4ee0e2d7b..e4702c1f3257dd 100644 --- a/packages/components/src/text/types.ts +++ b/packages/components/src/text/types.ts @@ -29,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. */ From 5b72c8fb8abbc4be3a7ada0b029a2826ce78ba8a Mon Sep 17 00:00:00 2001 From: margolisj Date: Tue, 3 Oct 2023 10:24:43 -0400 Subject: [PATCH 13/15] First pass on storybook upgrade --- packages/components/src/text/component.tsx | 11 +- .../src/text/stories/index.story.tsx | 107 +++++++++++------- 2 files changed, 72 insertions(+), 46 deletions(-) diff --git a/packages/components/src/text/component.tsx b/packages/components/src/text/component.tsx index 29a3ca9e8f3ef7..dd9146cf92dafd 100644 --- a/packages/components/src/text/component.tsx +++ b/packages/components/src/text/component.tsx @@ -8,10 +8,10 @@ import useText from './hook'; import type { Props } from './types'; /** - * @param {import('../context').WordPressComponentProps} props - * @param {import('react').ForwardedRef} forwardedRef + * @param props + * @param forwardedRef */ -function Text( +function UnconnectedText( props: WordPressComponentProps< Props, 'span' >, forwardedRef: React.ForwardedRef< any > ) { @@ -36,6 +36,5 @@ function Text( * } * ``` */ -const ConnectedText = contextConnect( Text, 'Text' ); - -export default ConnectedText; +const Text = contextConnect( UnconnectedText, 'Text' ); +export default Text; diff --git a/packages/components/src/text/stories/index.story.tsx b/packages/components/src/text/stories/index.story.tsx index b1b4e3f455536b..510cfe288ff21c 100644 --- a/packages/components/src/text/stories/index.story.tsx +++ b/packages/components/src/text/stories/index.story.tsx @@ -1,53 +1,80 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; + /** * Internal dependencies */ -import { Text } from '..'; +import Text from '../component'; -export default { +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 ; }; -export const _default = () => { - return Hello; +export const Default = Template.bind( {} ); +Default.args = { + children: 'Code is poetry', }; -export const Truncate = () => { - return ( - - 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. - - ); +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 = () => { - return ( - - 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. - - ); +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' ], }; From 035c20764c961a806892f5b55c7256d655f2cbb6 Mon Sep 17 00:00:00 2001 From: margolisj Date: Tue, 3 Oct 2023 10:50:00 -0400 Subject: [PATCH 14/15] Pass on headings --- packages/components/src/heading/stories/index.story.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx index e774fd53312732..d82a59f08c825b 100644 --- a/packages/components/src/heading/stories/index.story.tsx +++ b/packages/components/src/heading/stories/index.story.tsx @@ -12,7 +12,6 @@ const meta: Meta< typeof Heading > = { component: Heading, title: 'Components (Experimental)/Heading', argTypes: { - adjustLineHeightForInnerControls: { control: { type: 'text' } }, as: { control: { type: 'text' } }, color: { control: { type: 'color' } }, display: { control: { type: 'text' } }, @@ -20,9 +19,8 @@ const meta: Meta< typeof Heading > = { lineHeight: { control: { type: 'text' } }, optimizeReadabilityFor: { control: { type: 'color' } }, variant: { - control: { type: 'radio' }, - options: [ 'undefined', 'muted' ], - mapping: { undefined, muted: 'muted' }, + control: { type: 'select' }, + options: [ undefined, 'muted' ], }, weight: { control: { type: 'text' } }, }, From cab75a3a1162fe76bbd5ed307cc06e19597dd89d Mon Sep 17 00:00:00 2001 From: margolisj Date: Wed, 4 Oct 2023 20:44:53 -0400 Subject: [PATCH 15/15] Exports and imports the correct one. --- packages/components/src/text/component.tsx | 2 +- packages/components/src/text/stories/index.story.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/text/component.tsx b/packages/components/src/text/component.tsx index dd9146cf92dafd..f3fe69d936584c 100644 --- a/packages/components/src/text/component.tsx +++ b/packages/components/src/text/component.tsx @@ -36,5 +36,5 @@ function UnconnectedText( * } * ``` */ -const Text = contextConnect( UnconnectedText, 'Text' ); +export const Text = contextConnect( UnconnectedText, 'Text' ); export default Text; diff --git a/packages/components/src/text/stories/index.story.tsx b/packages/components/src/text/stories/index.story.tsx index 510cfe288ff21c..f762ca3b4e3ff7 100644 --- a/packages/components/src/text/stories/index.story.tsx +++ b/packages/components/src/text/stories/index.story.tsx @@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react'; /** * Internal dependencies */ -import Text from '../component'; +import { Text } from '../component'; const meta: Meta< typeof Text > = { component: Text,