Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(button): remove MDX file #3636

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

docs(button): remove MDX file #3636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 0 additions & 119 deletions components/button/stories/button.mdx
View file
Open in desktop

This file was deleted.

25 changes: 22 additions & 3 deletions components/button/stories/button.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, Treatme

/**
* Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
*
* There are four available variants that are used for different levels of emphasis and different
* types of actions. By default, a button uses the fill style with a solid background. The primary
* and secondary variants also have an outline option.
*/
export default {
title: "Button",
Expand Down Expand Up @@ -92,11 +96,11 @@ export default {
packageJson,
metadata,
},
tags: ["!autodocs"],
};

export const Default = ButtonGroups.bind({});
Default.args = {};
Default.tags = ["!autodocs"];

// ********* VRT ONLY ********* //
export const WithForcedColors = ButtonGroups.bind({});
Expand Down Expand Up @@ -144,6 +148,7 @@ Accent.args = {
Accent.parameters = {
chromatic: { disableSnapshot: true },
};
Accent.storyName = "Emphasis - accent";

/**
* The primary button is for medium emphasis. Use it in place of an accent button when the
Expand All @@ -159,6 +164,7 @@ Primary.args = {
Primary.parameters = {
chromatic: { disableSnapshot: true },
};
Primary.storyName = "Emphasis - primary";

/**
* The secondary button is for low emphasis. It’s paired with other button types to surface less
Expand All @@ -174,6 +180,7 @@ Secondary.args = {
Secondary.parameters = {
chromatic: { disableSnapshot: true },
};
Secondary.storyName = "Emphasis - secondary";

/**
* The negative button is for emphasizing actions that can be destructive or have negative
Expand All @@ -187,7 +194,11 @@ Negative.args = {
Negative.parameters = {
chromatic: { disableSnapshot: true },
};
Negative.storyName = "Emphasis - negative";

/**
* When a button needs to be placed on top of a dark color background or a visual, use the static white options. Static color buttons do not change shades or values depending upon the color theme.
*/
export const StaticWhitePrimary = TreatmentTemplate.bind({});
StaticWhitePrimary.tags = ["!dev"];
StaticWhitePrimary.args = {
Expand All @@ -198,6 +209,7 @@ StaticWhitePrimary.args = {
StaticWhitePrimary.parameters = {
chromatic: { disableSnapshot: true },
};
StaticWhitePrimary.storyName = "Static white - primary";

export const StaticWhiteSecondary = TreatmentTemplate.bind({});
StaticWhiteSecondary.tags = ["!dev"];
Expand All @@ -209,7 +221,11 @@ StaticWhiteSecondary.args = {
StaticWhiteSecondary.parameters = {
chromatic: { disableSnapshot: true },
};
StaticWhiteSecondary.storyName = "Static white - secondary";

/**
* When a button needs to be placed on top of a light color background or a visual, use the static black options. Static color buttons do not change shades or values depending upon the color theme.
*/
export const StaticBlackPrimary = TreatmentTemplate.bind({});
StaticBlackPrimary.tags = ["!dev"];
StaticBlackPrimary.args = {
Expand All @@ -220,6 +236,7 @@ StaticBlackPrimary.args = {
StaticBlackPrimary.parameters = {
chromatic: { disableSnapshot: true },
};
StaticBlackPrimary.storyName = "Static black - primary";

export const StaticBlackSecondary = TreatmentTemplate.bind({});
StaticBlackSecondary.tags = ["!dev"];
Expand All @@ -231,6 +248,8 @@ StaticBlackSecondary.args = {
StaticBlackSecondary.parameters = {
chromatic: { disableSnapshot: true },
};
StaticBlackSecondary.storyName = "Static black - secondary";


/**
* The pending button is for indicating that a quick progress action is taking place. In this case, the
Expand Down Expand Up @@ -273,7 +292,7 @@ Disabled.parameters = {
*/
export const WithWrapping = TextOverflowTemplate.bind({});
WithWrapping.tags = ["!dev"];
WithWrapping.storyName = "Text overflow behavior";
WithWrapping.storyName = "Text overflow";
WithWrapping.args = {
variant: "primary",
};
Expand All @@ -289,7 +308,7 @@ WithWrapping.parameters = {

export const DisableWrapping = TextWrapTemplate.bind({});
DisableWrapping.tags = ["!dev"];
DisableWrapping.storyName = "Disable label wrap";
DisableWrapping.storyName = "Text overflow disabled";
DisableWrapping.args = {
variant: "primary",
};
Expand Down
Loading