Shortcut: Add Storybook stories (#53627)

* * 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 <[email protected]> Cleanup ChangeLog * Update CHANGELOG.md --------- Co-authored-by: Lena Morita <[email protected]>
WordPress · Aug 24, 2023 · 9a2f2cc · 9a2f2cc
1 parent 7282cf6
commit 9a2f2cc
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 15 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,17 +5,16 @@
 ### Enhancements
 
 -   Make the `Popover.Slot` optional and render popovers at the bottom of the document's body by default. ([#53889](https://github.com/WordPress/gutenberg/pull/53889)).
+-   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
 
 ### Bug Fix
 
 -   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).
 
 ### Internal
--   `SlotFill`: Do not render children when using `<Slot bubblesVirtually />`. ([#53272](https://github.com/WordPress/gutenberg/pull/53272))
-
-### Enhancements
 
--   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+-   `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)).
+-   `SlotFill`: Do not render children when using `<Slot bubblesVirtually />`. ([#53272](https://github.com/WordPress/gutenberg/pull/53272))
 
 ## 25.6.0 (2023-08-16)
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
+ * 		<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
+ * 	);
+ * };
+ * ```
+ */
 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
@@ -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 <Shortcut shortcut="Ctrl + S" { ...props } />;
+};
+
+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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();

diff --git 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`;
  *