From 22a70c4b30077848df9b80469cf5f0a946236366 Mon Sep 17 00:00:00 2001 From: bangank36 Date: Mon, 14 Aug 2023 16:30:22 +0700 Subject: [PATCH 1/2] * Update JSDoc for Shortcut * Provide stories for the Shortcut component * Remove @example syntax for Storybook to parse JSDoc correctly Update packages/components/src/shortcut/stories/index.story.tsx Expand source tab by default in Storybook V7 Co-authored-by: Lena Morita Cleanup ChangeLog --- packages/components/CHANGELOG.md | 1 + .../src/item-group/item-group/component.tsx | 1 - .../src/item-group/item/component.tsx | 1 - packages/components/src/navigation/index.tsx | 1 - .../navigator-provider/component.tsx | 1 - packages/components/src/shortcut/index.tsx | 13 ++++++++ .../src/shortcut/stories/index.story.tsx | 33 +++++++++++++++++++ packages/components/src/spinner/index.tsx | 1 - packages/components/src/theme/index.tsx | 1 - .../src/tools-panel/tools-panel/component.tsx | 1 - packages/components/src/tree-select/index.tsx | 1 - .../components/src/unit-control/index.tsx | 1 - packages/components/src/utils/hooks/use-cx.ts | 3 +- packages/components/src/view/component.tsx | 1 - 14 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 packages/components/src/shortcut/stories/index.story.tsx diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3b9682c4adf4c6..abfb83a3d04ec5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -30,6 +30,7 @@ - `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)). - `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)). - `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)). +- `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)). - Components: Remove unnecessary utils ([#53679](https://github.com/WordPress/gutenberg/pull/53679)). ## 25.5.0 (2023-08-10) diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx index 127359febd90da..34f73c38e2b57a 100644 --- a/packages/components/src/item-group/item-group/component.tsx +++ b/packages/components/src/item-group/item-group/component.tsx @@ -44,7 +44,6 @@ function UnconnectedItemGroup( /** * `ItemGroup` displays a list of `Item`s grouped and styled together. * - * @example * ```jsx * import { * __experimentalItemGroup as ItemGroup, diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx index ed30c9b56e0f28..9104f5340377bd 100644 --- a/packages/components/src/item-group/item/component.tsx +++ b/packages/components/src/item-group/item/component.tsx @@ -29,7 +29,6 @@ function UnconnectedItem( * `Item` is used in combination with `ItemGroup` to display a list of items * grouped and styled together. * - * @example * ```jsx * import { * __experimentalItemGroup as ItemGroup, diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx index e3d309783e1ee9..dfc1b26cb33ad0 100644 --- a/packages/components/src/navigation/index.tsx +++ b/packages/components/src/navigation/index.tsx @@ -28,7 +28,6 @@ const noop = () => {}; /** * Render a navigation list with optional groupings and hierarchy. * - * @example * ```jsx * import { * __experimentalNavigation as Navigation, diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx index c86067f7f72ce8..2d27605eab15a0 100644 --- a/packages/components/src/navigator/navigator-provider/component.tsx +++ b/packages/components/src/navigator/navigator-provider/component.tsx @@ -268,7 +268,6 @@ function UnconnectedNavigatorProvider( * view (via the `NavigatorButton` and `NavigatorBackButton` components or the * `useNavigator` hook). * - * @example * ```jsx * import { * __experimentalNavigatorProvider as NavigatorProvider, diff --git a/packages/components/src/shortcut/index.tsx b/packages/components/src/shortcut/index.tsx index dbdaa955384f55..5ba7c7efdfff02 100644 --- a/packages/components/src/shortcut/index.tsx +++ b/packages/components/src/shortcut/index.tsx @@ -3,6 +3,19 @@ */ import type { ShortcutProps } from './types'; +/** + * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed. + * + * ```jsx + * import { Shortcut } from '@wordpress/components'; + * + * const MyShortcut = () => { + * return ( + * + * ); + * }; + * ``` + */ function Shortcut( props: ShortcutProps ) { const { shortcut, className } = props; diff --git a/packages/components/src/shortcut/stories/index.story.tsx b/packages/components/src/shortcut/stories/index.story.tsx new file mode 100644 index 00000000000000..27e96e3f6d1984 --- /dev/null +++ b/packages/components/src/shortcut/stories/index.story.tsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; + +/** + * Internal dependencies + */ +import Shortcut from '../'; + +const meta: Meta< typeof Shortcut > = { + component: Shortcut, + title: 'Components/Shortcut', + parameters: { + controls: { + expanded: true, + }, + docs: { canvas: { sourceState: 'shown' } }, + }, +}; +export default meta; + +const Template: StoryFn< typeof Shortcut > = ( props ) => { + return ; +}; + +export const Default: StoryFn< typeof Shortcut > = Template.bind( {} ); + +export const WithAriaLabel = Template.bind( {} ); +WithAriaLabel.args = { + ...Default.args, + shortcut: { display: 'Ctrl + L', ariaLabel: 'Load' }, +}; diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx index 8fa34b9b230d31..9eee9dde18ef23 100644 --- a/packages/components/src/spinner/index.tsx +++ b/packages/components/src/spinner/index.tsx @@ -50,7 +50,6 @@ export function UnforwardedSpinner( /** * `Spinner` is a component used to notify users that their action is being processed. * - * @example * ```js * import { Spinner } from '@wordpress/components'; * diff --git a/packages/components/src/theme/index.tsx b/packages/components/src/theme/index.tsx index 984ec32a07ce3d..ce1e11246e0d3c 100644 --- a/packages/components/src/theme/index.tsx +++ b/packages/components/src/theme/index.tsx @@ -18,7 +18,6 @@ import { useCx } from '../utils'; * Multiple `Theme` components can be nested in order to override specific theme variables. * * - * @example * ```jsx * const Example = () => { * return ( diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx index 223a9f0ba27f83..42028b48f862bf 100644 --- a/packages/components/src/tools-panel/tools-panel/component.tsx +++ b/packages/components/src/tools-panel/tools-panel/component.tsx @@ -48,7 +48,6 @@ const UnconnectedToolsPanel = ( * by a header. The header includes a dropdown menu which is automatically * generated from the panel's inner `ToolsPanelItems`. * - * @example * ```jsx * import { __ } from '@wordpress/i18n'; * import { diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx index 0c247901f432f7..dbb8686df4d29d 100644 --- a/packages/components/src/tree-select/index.tsx +++ b/packages/components/src/tree-select/index.tsx @@ -27,7 +27,6 @@ function getSelectOptions( /** * TreeSelect component is used to generate select input fields. * - * @example * ```jsx * import { TreeSelect } from '@wordpress/components'; * import { useState } from '@wordpress/element'; diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 073801df17c156..cd5bf4e4787682 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -223,7 +223,6 @@ function UnforwardedUnitControl( * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`). * * - * @example * ```jsx * import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; * import { useState } from '@wordpress/element'; diff --git a/packages/components/src/utils/hooks/use-cx.ts b/packages/components/src/utils/hooks/use-cx.ts index f12b2a3a5a6c5d..409352c26a6e1b 100644 --- a/packages/components/src/utils/hooks/use-cx.ts +++ b/packages/components/src/utils/hooks/use-cx.ts @@ -25,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles => * `cx` normally knows how to handle. It also hooks into the Emotion * Cache, allowing `css` calls to work inside iframes. * - * @example + * ```jsx * import { css } from '@emotion/react'; * * const styles = css` @@ -39,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles => * * return ; * } + * ``` */ export const useCx = () => { const cache = useEmotionCache(); diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx index e8b4f440e528b1..da7efc69e38590 100644 --- a/packages/components/src/view/component.tsx +++ b/packages/components/src/view/component.tsx @@ -14,7 +14,6 @@ import type { ViewProps } from './types'; * `View` is a core component that renders everything in the library. * It is the principle component in the entire library. * - * @example * ```jsx * import { View } from `@wordpress/components`; * From a2870518c1d43398c127d53caab5ababe9728d88 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 24 Aug 2023 20:35:28 +0200 Subject: [PATCH 2/2] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index abfb83a3d04ec5..ad56318ae8f843 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)). +### Internal + +- `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)). + ## 25.6.0 (2023-08-16) ### Enhancements @@ -30,7 +34,6 @@ - `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)). - `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)). - `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)). -- `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)). - Components: Remove unnecessary utils ([#53679](https://github.com/WordPress/gutenberg/pull/53679)). ## 25.5.0 (2023-08-10)