feat(accordion): add no inline padding variant

Author: saashapina

.storybook/types/variants.js

@@ -49,6 +49,16 @@ export const isQuiet = {
 	control: { type: "boolean" },
 };
 
+export const hasNoInlinePadding = {
+	name: "No Inline Padding Styling",
+	type: { name: "boolean" },
+	table: {
+		type: { summary: "boolean" },
+		category: "Component",
+	},
+	control: { type: "boolean" },
+};
+
 export const staticColor = {
 	name: "Static color",
 	description:

components/accordion/stories/accordion.stories.js

@@ -1,7 +1,7 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isQuiet, size } from "@spectrum-css/preview/types";
+import { hasNoInlinePadding, isQuiet, size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
@@ -48,6 +48,7 @@ export default {
 			control: "select",
 		},
 		isQuiet,
+		hasNoInlinePadding,
 	},
 	args: {
 		rootClass: "spectrum-Accordion",
@@ -56,6 +57,7 @@ export default {
 		collapseAll: false,
 		disableAll: false,
 		isQuiet: false,
+		hasNoInlinePadding: false,
 	},
 	parameters: {
 		// Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body.
@@ -216,6 +218,21 @@ Quiet.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * The optional no inline padding style for accordion. This sets no overall horizontal padding on either side of the component
+ * (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion----noInlinePadding` class alongside the
+ * parent `spectrum-Accordion` class.
+ */
+export const NoInlinePadding = Template.bind({});
+NoInlinePadding.tags = ["!dev"];
+NoInlinePadding.args = {
+	items: content,
+	hasNoInlinePadding: true,
+};
+NoInlinePadding.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
 /**
  * Each of the different sizes have varying font sizes, and tighter or looser vertical spacing between the rows. Medium is the default size.
  */

components/accordion/stories/accordion.test.js

@@ -139,6 +139,14 @@ export const AccordionGroup = Variants({
 				maxInlineSize: "500px",
 			},
 		},
+		{
+			testHeading: "No Inline Padding",
+			items: testsContent,
+			hasNoInlinePadding: true,
+			customStyles: {
+				maxInlineSize: "500px",
+			},
+		},
 		{
 			testHeading: "Compact",
 			items: testsContent,

components/accordion/stories/template.js

@@ -85,6 +85,7 @@ export const Template = ({
 	size = "m",
 	density = "regular",
 	isQuiet = false,
+	hasNoInlinePadding = false,
 	items = [],
 	id = getRandomId("accordion"),
 	disableAll = false,
@@ -103,6 +104,7 @@ export const Template = ({
 				[`${rootClass}--${density}`]:
 					typeof density !== "undefined" && density !== "regular",
 				[`${rootClass}--quiet`]: isQuiet,
+				[`${rootClass}--noInlinePadding`]: hasNoInlinePadding,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}"
 			id=${ifDefined(id)}