Move variant descriptions to main docs

WordPress · Dec 9, 2024 · 0850874 · 0850874
1 parent 42d7cb9
commit 0850874
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 37 deletions.
diff --git a/packages/components/src/button/stories/best-practices.mdx b/packages/components/src/button/stories/best-practices.mdx
@@ -1,51 +1,14 @@
 import { Meta } from '@storybook/blocks';
-import FigmaEmbed from '/storybook/components/figma-embed';
 
 <Meta title="Components/Actions/Button/Best Practices" />
 
 # Button
-Buttons allow users to take actions and make selections with a single click or tap.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-280&node-type=frame&t=JLKM1grrtWleRkFR-11" title="Overview of button variants" height="400" />
-
 
 ## Usage
 Buttons indicate available actions and allow user interaction within the interface. As key elements in the WordPress UI, they appear in toolbars, modals, and forms. Default buttons support most actions, while primary buttons emphasize the main action in a view. Secondary buttons pair as secondary actions next to a primary action. 
 
 Each layout contains one prominently placed, high-emphasis button. If you need multiple buttons, use one primary button for the main action, secondary for the rest of the actions and tertiary sparingly when an action needs to not stand out at all.
 
-## Variants
-
-### Primary
-Primary buttons stand out with bold color fills, making them distinct from the background. Since they naturally draw attention, each layout should contain only one primary button to guide users toward the most important action.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-640&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="Primary variant" height="400" />
-
-### Secondary
-Secondary buttons complement primary buttons. Use them for standard actions that may appear alongside a primary action.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-808&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="Secondary variant" height="400" />
-
-### Tertiary
-Tertiary buttons have minimal emphasis. Use them sparingly to subtly highlight an action.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-874&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="Tertiary variant" height="400" />
-
-### Default
-Use default buttons for actions of equal priority.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-940&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="Default variant" height="400" />
-
-### Link
-Link buttons have low emphasis and blend into the page, making them suitable for supplementary actions, especially those involving navigation away from the current view.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-1006&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="Link variant" height="400" />
-
-### Destructive
-Use this variant for irreversible actions. Apply sparingly and only for actions with significant impact.
-
-<FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-1069&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="isDestructive prop enabled" height="400" />
-
 ### Sizes
 
 - `'default'`: For normal text-label buttons, unless it is a toggle button.

diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
@@ -76,24 +76,37 @@ Primary.args = {
 	variant: 'primary',
 };
 
+/**
+ * Secondary buttons complement primary buttons. Use them for standard actions that may appear alongside a primary action.
+ */
 export const Secondary = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
+/**
+ * Tertiary buttons have minimal emphasis. Use them sparingly to subtly highlight an action.
+ */
 export const Tertiary = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
+/**
+ * Link buttons have low emphasis and blend into the page, making them suitable for supplementary actions,
+ * especially those involving navigation away from the current view.
+ */
 export const Link = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
+/**
+ * Use this variant for irreversible actions. Apply sparingly and only for actions with significant impact.
+ */
 export const IsDestructive = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,