Merge pull request #3157 from adobe/aramos-adobe/css930-buttongroup-doc-migration

docs(buttongroup): adding vertical horizontal and disabled stories

Author: aramos-adobe

components/buttongroup/metadata/buttongroup.yml

@@ -1,5 +1,5 @@
 name: Button group
-SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
+SpectrumSiteSlug: https://spectrum.adobe.com/page/button-group/
 sections:
   - name: Custom Properties API
     description: |

components/buttongroup/stories/buttongroup.stories.js

@@ -5,7 +5,7 @@ import pkgJson from "../package.json";
 import { ButtonGroup } from "./buttongroup.test.js";
 
 /**
- * A grouping of buttons.
+ * A button group is a grouping of buttons whose actions are related to each other.
  */
 export default {
 	title: "Button group",
@@ -36,34 +36,96 @@ export default {
 		size: "m",
 		iconName: undefined,
 		vertical: false,
+		items: [
+			{
+				variant: "secondary",
+				treatment: "outline",
+				label: "No, thanks",
+
+			},
+			{
+				variant: "secondary",
+				treatment: "outline",
+				label: "Remind me later",
+			},
+			{
+				variant: "primary",
+				treatment: "fill",
+				label: "Rate now",
+			},
+		],
 	},
 	parameters: {
 		packageJson: pkgJson,
 	},
 };
 
 export const Default = ButtonGroup.bind({});
-Default.args = {
+Default.args = {};
+Default.tags = ["!autodocs"];
+
+// ********* DOCS ONLY ********* //
+
+/**
+ * Default spacing for Medium, Large, and Extra Large t-shirt sizes.
+*/
+export const Horizontal = ButtonGroup.bind({});
+Horizontal.tags = ["!dev"];
+Horizontal.args = Default.args;
+
+
+/**
+ * Spacing for the Small t-shirt size.
+*/
+export const HorizontalSmall = ButtonGroup.bind({});
+HorizontalSmall.tags = ["!dev"];
+HorizontalSmall.args = {
+	size: "s"
+};
+
+/**
+ * Default spacing for Medium, Large, and Extra Large t-shirt sizes
+*/
+export const Vertical = ButtonGroup.bind({});
+Vertical.tags = ["!dev"];
+Vertical.args = {
+	vertical: true,
+};
+
+/**
+ * Spacing for the Small t-shirt size.
+*/
+export const VerticalSmall = ButtonGroup.bind({});
+VerticalSmall.tags = ["!dev"];
+VerticalSmall.args = {
+	vertical: true,
+	size: "s"
+};
+
+/**
+ * A button group in a disabled state shows that the buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a button group may become available later.
+*/
+
+export const Disabled = ButtonGroup.bind({});
+Disabled.tags = ["!dev"];
+Disabled.args = {
 	items: [
 		{
 			variant: "secondary",
 			treatment: "outline",
-			label: "No, thanks",
-		},
-		{
-			variant: "secondary",
-			treatment: "outline",
-			label: "Remind me later",
-
+			label: "Cancel",
+			isDisabled: true,
 		},
 		{
 			variant: "primary",
 			treatment: "fill",
-			label: "Rate now",
+			label: "Enable",
+			isDisabled: true,
 		},
-	],
+	]
 };
 
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ButtonGroup.bind({});
 WithForcedColors.args = Default.args;

components/buttongroup/stories/buttongroup.test.js

@@ -11,5 +11,22 @@ export const ButtonGroup = Variants({
 			testHeading: "Vertical",
 			vertical: true,
 		},
+		{
+			testHeading: "Disabled",
+			items: [
+				{
+					variant: "secondary",
+					treatment: "outline",
+					label: "Cancel",
+					isDisabled: true,
+				},
+				{
+					variant: "primary",
+					treatment: "fill",
+					label: "Enable",
+					isDisabled: true,
+				},
+			]
+		}
 	],
 });