docs(button,icon): remove MDX files (#3636)

*docs(button): remove MDX file
- delete mdx file in favor of all docs being in stories file
- update some story names to follow sentence-casing and organize like-
stories together

* docs(icon): remove MDX file
- delete mdx file in favor of all docs being in stories file
- update some story names to follow sentence-casing and organize like-
stories together
- move some markup into template file instead of stories file

* docs(typography): add docs for rtl notes

Author: marissahuysentruyt

components/button/stories/button.mdx

@@ -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",
@@ -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({});
@@ -188,6 +192,9 @@ Negative.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * 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 = {
@@ -198,6 +205,7 @@ StaticWhitePrimary.args = {
 StaticWhitePrimary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticWhitePrimary.storyName = "Static white - primary";
 
 export const StaticWhiteSecondary = TreatmentTemplate.bind({});
 StaticWhiteSecondary.tags = ["!dev"];
@@ -209,7 +217,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 = {
@@ -220,6 +232,7 @@ StaticBlackPrimary.args = {
 StaticBlackPrimary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticBlackPrimary.storyName = "Static black - primary";
 
 export const StaticBlackSecondary = TreatmentTemplate.bind({});
 StaticBlackSecondary.tags = ["!dev"];
@@ -231,6 +244,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
@@ -273,7 +288,7 @@ Disabled.parameters = {
  */
 export const WithWrapping = TextOverflowTemplate.bind({});
 WithWrapping.tags = ["!dev"];
-WithWrapping.storyName = "Text overflow behavior";
+WithWrapping.storyName = "Text overflow";
 WithWrapping.args = {
 	variant: "primary",
 };
@@ -289,7 +304,7 @@ WithWrapping.parameters = {
 
 export const DisableWrapping = TextWrapTemplate.bind({});
 DisableWrapping.tags = ["!dev"];
-DisableWrapping.storyName = "Disable label wrap";
+DisableWrapping.storyName = "Text overflow - disabled text wrap";
 DisableWrapping.args = {
 	variant: "primary",
 };