@spectrum-css/accordion - npm Package Compare versions

Comparing version 8.0.0-next.1 to 8.0.0-next.2

CHANGELOG.md

 # Change log
 
+## 8.0.0-next.2
+
+### Major Changes
+
+📝 [#3684](https://github.com/adobe/spectrum-css/pull/3684) [`f0c6273`](https://github.com/adobe/spectrum-css/commit/f0c6273310a8a7d8f392d6113919a3982ab07b2e) Thanks [@jawinn](https://github.com/jawinn)!
+
+#### Spectrum 2 migration
+
+Accordion now uses Spectrum 2 tokens and specifications.
+
+New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
+the spacing around the content area.
+
+##### New features
+
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
+- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
+  collapsing the accordion item.
+- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item
+  header does not have padding.
+- Per design spec, accordion items have a min-width and default width. Default width can be
+  overridden with `--mod-accordion-item-width` but should not be smaller than
+  `--spectrum-accordion-item-minimum-width`.
+
+##### Markup changes
+
+The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
+from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra
+element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has
+been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading
+text.
+
+##### Modifier changes
+
+The following `--mod` custom properties have been renamed to better reflect how they are used:
+
+- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height`
+- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size`
+- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline`
+
+New modifiers:
+
+- `--mod-accordion-animation-duration`
+- `--mod-accordion-edge-to-content-area`
+- `--mod-accordion-item-minimum-width`
+- `--mod-accordion-top-to-disclosure-indicator`
+
 ## 8.0.0-next.1
@@ -4,0 +51,0 @@

dist/metadata.json

@@ -9,2 +9,5 @@ {
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion--quiet",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover",
     ".spectrum-Accordion--sizeL",
@@ -18,24 +21,15 @@ ".spectrum-Accordion--sizeS",
     ".spectrum-Accordion-item",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover",
+    ".spectrum-Accordion-item.is-disabled",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-itemHeader:active",
-    ".spectrum-Accordion-itemHeader:after",
-    ".spectrum-Accordion-itemHeader:focus",
+    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-itemHeader:focus:after",
     ".spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer",
     ".spectrum-Accordion-itemHeading",
-    ".spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-itemIconContainer:dir(rtl)",
+    ".spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-itemTitle",
+    ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
     ".spectrum-Accordion:dir(rtl)",
@@ -45,6 +39,6 @@ ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Accordion",
-    "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer"
+    "[dir=\"rtl\"] .spectrum-Accordion"
   ],
   "modifiers": [
+    "--mod-accordion-animation-duration",
     "--mod-accordion-background-color-default",
@@ -54,3 +48,3 @@ "--mod-accordion-background-color-down",
     "--mod-accordion-background-color-key-focus",
-    "--mod-accordion-component-edge-to-text",
+    "--mod-accordion-content-padding-inline",
     "--mod-accordion-corner-radius",
@@ -61,7 +55,5 @@ "--mod-accordion-disclosure-indicator-height",
     "--mod-accordion-divider-thickness",
+    "--mod-accordion-edge-to-content-area",
     "--mod-accordion-edge-to-disclosure-indicator-space",
     "--mod-accordion-edge-to-text-space",
-    "--mod-accordion-focus-indicator-color",
-    "--mod-accordion-focus-indicator-gap",
-    "--mod-accordion-focus-indicator-thickness",
     "--mod-accordion-item-content-area-bottom-to-content",
@@ -76,2 +68,5 @@ "--mod-accordion-item-content-area-top-to-content",
     "--mod-accordion-item-content-line-height",
+    "--mod-accordion-item-focus-indicator-color",
+    "--mod-accordion-item-focus-indicator-gap",
+    "--mod-accordion-item-focus-indicator-thickness",
     "--mod-accordion-item-header-bottom-to-text-space",
@@ -89,7 +84,10 @@ "--mod-accordion-item-header-color-default",
     "--mod-accordion-item-header-top-to-text-space",
-    "--mod-accordion-item-height",
+    "--mod-accordion-item-min-block-size",
+    "--mod-accordion-item-minimum-height",
+    "--mod-accordion-item-minimum-width",
     "--mod-accordion-item-width",
-    "--mod-accordion-min-block-size"
+    "--mod-accordion-top-to-disclosure-indicator"
   ],
   "component": [
+    "--spectrum-accordion-animation-duration",
     "--spectrum-accordion-background-color-default",
@@ -103,6 +101,6 @@ "--spectrum-accordion-background-color-down",
     "--spectrum-accordion-bottom-to-text-compact-small",
-    "--spectrum-accordion-bottom-to-text-regular-extra-large",
-    "--spectrum-accordion-bottom-to-text-regular-large",
-    "--spectrum-accordion-bottom-to-text-regular-medium",
-    "--spectrum-accordion-bottom-to-text-regular-small",
+    "--spectrum-accordion-bottom-to-text-extra-large",
+    "--spectrum-accordion-bottom-to-text-large",
+    "--spectrum-accordion-bottom-to-text-medium",
+    "--spectrum-accordion-bottom-to-text-small",
     "--spectrum-accordion-bottom-to-text-spacious-extra-large",
@@ -112,21 +110,29 @@ "--spectrum-accordion-bottom-to-text-spacious-large",
     "--spectrum-accordion-bottom-to-text-spacious-small",
-    "--spectrum-accordion-component-edge-to-text",
     "--spectrum-accordion-content-area-bottom-to-content",
+    "--spectrum-accordion-content-area-edge-to-content-extra-large",
+    "--spectrum-accordion-content-area-edge-to-content-large",
+    "--spectrum-accordion-content-area-edge-to-content-medium",
+    "--spectrum-accordion-content-area-edge-to-content-small",
     "--spectrum-accordion-content-area-top-to-content",
+    "--spectrum-accordion-content-padding-inline",
     "--spectrum-accordion-corner-radius",
     "--spectrum-accordion-disclosure-indicator-height",
-    "--spectrum-accordion-disclosure-indicator-to-text",
+    "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-medium",
+    "--spectrum-accordion-disclosure-indicator-to-text-small",
     "--spectrum-accordion-disclosure-indicator-to-text-space",
     "--spectrum-accordion-divider-color",
-    "--spectrum-accordion-edge-to-disclosure-indicator",
+    "--spectrum-accordion-divider-thickness",
+    "--spectrum-accordion-edge-to-content-area",
+    "--spectrum-accordion-edge-to-content-area-extra-large",
+    "--spectrum-accordion-edge-to-content-area-large",
+    "--spectrum-accordion-edge-to-content-area-medium",
+    "--spectrum-accordion-edge-to-content-area-small",
     "--spectrum-accordion-edge-to-disclosure-indicator-space",
     "--spectrum-accordion-edge-to-text",
     "--spectrum-accordion-edge-to-text-space",
-    "--spectrum-accordion-focus-indicator-color",
-    "--spectrum-accordion-focus-indicator-gap",
-    "--spectrum-accordion-focus-indicator-thickness",
     "--spectrum-accordion-item-content-area-bottom-to-content",
     "--spectrum-accordion-item-content-area-top-to-content",
     "--spectrum-accordion-item-content-color",
-    "--spectrum-accordion-item-content-disabled-color",
     "--spectrum-accordion-item-content-font",
@@ -137,2 +143,5 @@ "--spectrum-accordion-item-content-font-size",
     "--spectrum-accordion-item-content-line-height",
+    "--spectrum-accordion-item-focus-indicator-color",
+    "--spectrum-accordion-item-focus-indicator-gap",
+    "--spectrum-accordion-item-focus-indicator-thickness",
     "--spectrum-accordion-item-header-bottom-to-text-space",
@@ -143,3 +152,3 @@ "--spectrum-accordion-item-header-color-default",
     "--spectrum-accordion-item-header-color-key-focus",
-    "--spectrum-accordion-item-header-disabled-color",
+    "--spectrum-accordion-item-header-cursor",
     "--spectrum-accordion-item-header-font",
@@ -151,7 +160,8 @@ "--spectrum-accordion-item-header-font-size",
     "--spectrum-accordion-item-header-top-to-text-space",
-    "--spectrum-accordion-item-height",
+    "--spectrum-accordion-item-min-block-size",
+    "--spectrum-accordion-item-minimum-height",
+    "--spectrum-accordion-item-minimum-width",
     "--spectrum-accordion-item-width",
-    "--spectrum-accordion-min-block-size",
     "--spectrum-accordion-minimum-width",
-    "--spectrum-accordion-small-top-to-text-spacious",
+    "--spectrum-accordion-top-to-disclosure-indicator",
     "--spectrum-accordion-top-to-text-compact-extra-large",
@@ -161,15 +171,13 @@ "--spectrum-accordion-top-to-text-compact-large",
     "--spectrum-accordion-top-to-text-compact-small",
-    "--spectrum-accordion-top-to-text-regular-extra-large",
-    "--spectrum-accordion-top-to-text-regular-large",
-    "--spectrum-accordion-top-to-text-regular-medium",
-    "--spectrum-accordion-top-to-text-regular-small",
+    "--spectrum-accordion-top-to-text-extra-large",
+    "--spectrum-accordion-top-to-text-large",
+    "--spectrum-accordion-top-to-text-medium",
+    "--spectrum-accordion-top-to-text-small",
     "--spectrum-accordion-top-to-text-spacious-extra-large",
     "--spectrum-accordion-top-to-text-spacious-large",
-    "--spectrum-accordion-top-to-text-spacious-medium"
+    "--spectrum-accordion-top-to-text-spacious-medium",
+    "--spectrum-accordion-top-to-text-spacious-small"
   ],
   "global": [
-    "--spectrum-background-opacity-default",
-    "--spectrum-background-opacity-down",
-    "--spectrum-background-opacity-hover",
-    "--spectrum-background-opacity-key-focus",
+    "--spectrum-animation-duration-100",
     "--spectrum-body-color",
@@ -183,7 +191,7 @@ "--spectrum-body-sans-serif-font-style",
     "--spectrum-bold-font-weight",
+    "--spectrum-chevron-icon-size-100",
+    "--spectrum-chevron-icon-size-200",
+    "--spectrum-chevron-icon-size-300",
+    "--spectrum-chevron-icon-size-75",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-50",
-    "--spectrum-component-edge-to-text-75",
     "--spectrum-component-height-100",
@@ -193,16 +201,38 @@ "--spectrum-component-height-200",
     "--spectrum-component-height-400",
+    "--spectrum-component-height-50",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
     "--spectrum-default-font-style",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-small",
+    "--spectrum-field-default-width-extra-large",
+    "--spectrum-field-default-width-large",
+    "--spectrum-field-default-width-medium",
+    "--spectrum-field-edge-to-disclosure-icon-100",
+    "--spectrum-field-edge-to-disclosure-icon-200",
+    "--spectrum-field-edge-to-disclosure-icon-300",
+    "--spectrum-field-edge-to-disclosure-icon-75",
+    "--spectrum-field-top-to-disclosure-icon-compact-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-compact-large",
+    "--spectrum-field-top-to-disclosure-icon-compact-medium",
+    "--spectrum-field-top-to-disclosure-icon-compact-small",
+    "--spectrum-field-top-to-disclosure-icon-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-large",
+    "--spectrum-field-top-to-disclosure-icon-medium",
+    "--spectrum-field-top-to-disclosure-icon-small",
+    "--spectrum-field-top-to-disclosure-icon-spacious-extra-large",
+    "--spectrum-field-top-to-disclosure-icon-spacious-large",
+    "--spectrum-field-top-to-disclosure-icon-spacious-medium",
+    "--spectrum-field-top-to-disclosure-icon-spacious-small",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
-    "--spectrum-font-size-500",
-    "--spectrum-font-size-700",
+    "--spectrum-font-size-400",
     "--spectrum-gray-200",
-    "--spectrum-gray-900-rgb",
     "--spectrum-line-height-100",
@@ -214,3 +244,6 @@ "--spectrum-logical-rotation",
     "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack"
+    "--spectrum-sans-font-family-stack",
+    "--spectrum-transparent-black-100",
+    "--spectrum-transparent-black-25",
+    "--spectrum-transparent-black-300"
   ],
@@ -217,0 +250,0 @@ "passthroughs": [],

package.json

 {
 	"name": "@spectrum-css/accordion",
-	"version": "8.0.0-next.1",
+	"version": "8.0.0-next.2",
 	"description": "The Spectrum CSS accordion component",
@@ -40,4 +40,4 @@ "license": "Apache-2.0",
 	"devDependencies": {
-		"@spectrum-css/icon": "10.0.0-next.1",
-		"@spectrum-css/tokens": "16.1.0-next.0"
+		"@spectrum-css/icon": "10.0.0-next.2",
+		"@spectrum-css/tokens": "16.1.0-next.4"
 	},
@@ -44,0 +44,0 @@ "keywords": [

stories/accordion.stories.js

@@ -1,17 +0,18 @@
-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 { size } from "@spectrum-css/preview/types";
-import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { isQuiet, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { AccordionGroup } from "./accordion.test.js";
+import { AccordionGroup, testsContent as accordionContent } from "./accordion.test.js";
 import { Template } from "./template.js";
 
 /**
- * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
+ * The accordion element contains a list of items that can be expanded or collapsed to reveal
+ * additional content or information associated with each item. There can be zero expanded items,
+ * exactly one expanded item, or more than one item expanded at a time, depending on the
+ * configuration. This list of items is defined by child accordion item elements.
  *
- * ## Density options
- *
- * Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious.
+ * Accordion has three density options: regular (default), compact, or spacious. While all the
+ * densities maintain the same font size, compact density reduces vertical spacing between rows,
+ * while spacious density increases it.
  */
@@ -52,2 +53,13 @@ export default {
 		},
+		hasNoInlinePadding: {
+			name: "No inline padding styling",
+			description: "Displays accordion item headers without default inline padding.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: { type: "boolean" },
+		},
+		isQuiet
 	},
@@ -60,2 +72,4 @@ args: {
 		disableAll: false,
+		isQuiet: false,
+		hasNoInlinePadding: false,
 	},
@@ -73,97 +87,15 @@ parameters: {
 		metadata,
+		status: {
+			type: "migrated",
+		},
+		tags: ["migrated"],
 	},
 };
 
-/* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
-const content = new Map([
-	[
-		"Are any Adobe products free?",
-		{
-			content:
-				"Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.",
-			isDisabled: true,
-		},
-	],
-	[
-		"Are Adobe products worth it?",
-		{
-			content: Typography({
-				semantics: "body",
-				content: [
-					"Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. Or consider Creative Cloud, with plans starting at just US$9.99/mo. Every Adobe Creative Cloud plan includes perks like free stock images and fonts, collaboration tools, and cloud storage as well as regular feature updates to deliver the latest technology.",
-					Link({
-						url: "https://www.adobe.com/creativecloud/plans.html",
-						text: "Learn more about Adobe Creative Cloud plans and pricing.",
-					}),
-				],
-			}),
-			isOpen: true,
-		},
-	],
-	[
-		"Which Adobe product is best for editing PDFs?",
-		{
-			content: Typography({
-				semantics: "body",
-				content: [
-					"You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.",
-					Link({
-						url: "https://www.adobe.com/acrobat.html",
-						text: "Learn more about Acrobat.",
-					}),
-				],
-			}),
-		},
-	],
-	[
-		"How many products does Adobe have?",
-		{
-			content:
-				"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",
-			isOpen: true,
-		},
-	],
-	[
-		"How much do Adobe products cost?",
-		{
-			content: Typography({
-				semantics: "body",
-				content: [
-					"Creative Cloud plans start at US$9.99/mo. You can subscribe to specific Single App plans or get 20+ creative apps and services in the Creative Cloud All Apps plan.",
-					Link({
-						url: "https://www.adobe.com/creativecloud/plans.html",
-						text: "Explore Creative Cloud plans.",
-					}),
-				],
-			}),
-		},
-	],
-	[
-		"What are the most popular Adobe products?",
-		{
-			content:
-				"Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
-		},
-	],
-	[
-		"How can I get a student discount on Adobe products?",
-		{
-			content: Typography({
-				semantics: "body",
-				content: [
-					`Students who provide a valid school-issued email address at purchase are eligible to save over 60% on Creative Cloud All Apps, which includes 20+ apps such as Photoshop, Illustrator, InDesign, Acrobat Pro, and more. ${Link(
-						{
-							url: "https://www.adobe.com/creativecloud/buy/students.html",
-							text: "Learn more about Creative Cloud for students.",
-						}
-					)}`,
-				],
-			}),
-		},
-	]
-]);
-
+/**
+ * The default accordion displays at medium size with a regular density.
+ */
 export const Default = AccordionGroup.bind({});
 Default.args = {
-	items: content,
+	items: accordionContent,
 };
@@ -186,6 +118,27 @@ Default.parameters = {
 // ********* DOCS ONLY ********* //
+
+/**
+ * Accordion items have a default width for each size, but a custom width can also be set to any
+ * width that meets or exceeds the minimum width.
+ */
+export const CustomWidth = AccordionGroup.bind({});
+CustomWidth.tags = ["!dev"];
+CustomWidth.storyName = "Custom width";
+CustomWidth.args = {
+	items: accordionContent,
+	customStyles: {
+		"--mod-accordion-item-width": "500px",
+	},
+};
+CustomWidth.parameters = {
+	chromatic: { disableSnapshot: false },
+};
+
+/**
+ * The compact density has less vertical spacing between rows.
+ */
 export const Compact = Template.bind({});
 Compact.tags = ["!dev"];
 Compact.args = {
-	items: content,
+	items: accordionContent,
 	density: "compact",
@@ -196,8 +149,11 @@ };
 };
-Compact.storyName = "Density - Compact";
+Compact.storyName = "Density: Compact";
 
+/**
+ * The spacious density has more vertical spacing between rows.
+ */
 export const Spacious = Template.bind({});
 Spacious.tags = ["!dev"];
 Spacious.args = {
-	items: content,
+	items: accordionContent,
 	density: "spacious",
@@ -208,4 +164,56 @@ };
 };
-Spacious.storyName = "Density - Spacious";
+Spacious.storyName = "Density: Spacious";
 
+/**
+ * Individual accordion items can be disabled by applying the `.is-disabled` class to the
+ * `.spectrum-Accordion-item` element. This example also demonstrates the use of the disabled
+ * attribute on the heading button.
+ */
+export const Disabled = Template.bind({});
+Disabled.tags = ["!dev"];
+Disabled.args = {
+	items: accordionContent,
+	disableAll: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The optional quiet style for accordion has no dividers between sections. This style works best
+ * when a clear layout (vertical stack, table, grid) makes it easy to see and understand because
+ * too many quiet components in a small space can be hard to differentiate. This can be applied by
+ * adding the `.spectrum-Accordion--quiet` class alongside the parent `.spectrum-Accordion` class.
+ */
+export const Quiet = Template.bind({});
+Quiet.tags = ["!dev"];
+Quiet.args = {
+	items: accordionContent,
+	isQuiet: true,
+};
+Quiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * Implementations may choose to remove inline padding from the accordion item headers by adding
+ * the `.spectrum-Accordion--noInlinePadding` class alongside the parent `.spectrum-Accordion`
+ * class. Accordion item header padding will be removed, but the body text content will keep its
+ * own padding from the edge.
+ */
+export const NoInlinePadding = Template.bind({});
+NoInlinePadding.storyName = "No inline padding";
+NoInlinePadding.tags = ["!dev"];
+NoInlinePadding.args = {
+	items: accordionContent,
+	hasNoInlinePadding: true,
+};
+NoInlinePadding.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * Each of the different sizes has varying font sizes, and varying vertical spacing between the
+ * rows. Medium is the default size.
+ */
 export const Sizing = (args, context) => Sizes({
@@ -215,3 +223,3 @@ Template,
 	withHeading: false,
-	items: content,
+	items: accordionContent,
 	...args,
@@ -218,0 +226,0 @@ }, context);

stories/accordion.test.js

@@ -1,4 +0,123 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { Template as Link } from "@spectrum-css/link/stories/template.js";
+import { Sizes, Variants } from "@spectrum-css/preview/decorators";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { Template } from "./template.js";
 
+/**
+ * General accordion item content for tests.
+ * Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions.
+ */
+export const testsContent = new Map([
+	[
+		"Are any Adobe products free?",
+		{
+			content: "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.",
+		},
+	],
+	[
+		"Are Adobe products worth it?",
+		{
+			content: Typography({
+				semantics: "body",
+				content: [
+					"This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.",
+					Link({
+						url: "https://www.adobe.com/creativecloud/plans.html",
+						text: "Learn more about Adobe Creative Cloud plans and pricing.",
+					}),
+				],
+			}),
+			isOpen: true,
+		},
+	],
+	[
+		"Which Adobe product is best for editing PDFs?",
+		{
+			content: Typography({
+				semantics: "body",
+				content: [
+					"You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.",
+					Link({
+						url: "https://www.adobe.com/acrobat.html",
+						text: "Learn more about Acrobat.",
+					}),
+				],
+			}),
+		},
+	],
+	[
+		"How many products does Adobe have?",
+		{
+			content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",
+			isOpen: true,
+		},
+	],
+	[
+		"What are the most popular Adobe products?",
+		{
+			content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
+		},
+	],
+]);
+
+const defaultContentText = "This is an example of text content within the content area that is not wrapped by any typography classes or elements.";
+
+/**
+ * Content for testing accordion item states.
+ */
+const statesTestContent = new Map([
+	[
+		"Hovered",
+		{
+			isHovered: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Disabled",
+		{
+			isDisabled: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Hovered + disabled",
+		{
+			isDisabled: true,
+			isHovered: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Focus-visible",
+		{
+			isFocused: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Active/down",
+		{
+			isActive: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Active/down + hovered",
+		{
+			isActive: true,
+			isHovered: true,
+			content: defaultContentText,
+		},
+	],
+	[
+		"Focus-visible + hovered",
+		{
+			isFocused: true,
+			isHovered: true,
+			content: defaultContentText,
+		},
+	],
+]);
+
 export const AccordionGroup = Variants({
@@ -9,2 +128,3 @@ Template,
 			testHeading: "Standard",
+			items: testsContent,
 			customStyles: {
@@ -15,13 +135,52 @@ maxInlineSize: "500px",
 		{
-			testHeading: "Compact",
-			density: "compact",
-			collapseAll: true,
+			testHeading: "Quiet",
+			items: testsContent,
+			isQuiet: true,
 			customStyles: {
 				maxInlineSize: "500px",
 			},
+		},
+		{
+			testHeading: "No Inline Padding",
+			items: testsContent,
+			hasNoInlinePadding: true,
+			customStyles: {
+				maxInlineSize: "500px",
+			},
+		},
+		{
+			testHeading: "Heading text wrapping",
+			items: new Map([
+				[
+					"This example has a heading that wraps to two lines.",
+					{
+						content: defaultContentText,
+						isOpen: false,
+					},
+				],
+				[
+					"This example has a heading that wraps to more than two lines. What are the most popular Adobe products?",
+					{
+						content: defaultContentText,
+						isOpen: false,
+					},
+				],
+				[
+					"This example has a heading that wraps to more than two lines. It also shows the text in its content area.",
+					{
+						content: defaultContentText,
+						isOpen: true,
+					},
+				],
+			]),
+			customStyles: {
+				maxInlineSize: "300px",
+			},
 			withStates: false,
 		},
 		{
-			testHeading: "Spacious",
-			density: "spacious",
+			testHeading: "Compact",
+			items: testsContent,
+			Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
+			density: "compact",
 			collapseAll: true,
@@ -34,6 +193,9 @@ customStyles: {
 		{
-			testHeading: "Text wrapping",
+			testHeading: "Spacious",
+			items: testsContent,
+			Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
+			density: "spacious",
 			collapseAll: true,
 			customStyles: {
-				maxInlineSize: "300px",
+				maxInlineSize: "500px",
 			},
@@ -45,6 +207,6 @@ withStates: false,
 		{
-			testHeading: "Disabled",
-			disableAll: true,
+			testHeading: "Accordion item states",
+			items: statesTestContent,
 		},
 	],
 });

stories/template.js

@@ -19,2 +19,5 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 	isOpen = false,
+	isHovered = false,
+	isActive = false,
+	isFocused = false,
 	iconSize = "m",
@@ -42,3 +45,8 @@ customStyles = {},
 				<button
-					class="${rootClass}Header"
+					class=${classMap({
+						[`${rootClass}Header`]: true,
+						"is-hover": isHovered,
+						"is-active": isActive,
+						"is-focus-visible": isFocused,
+					})}
 					type="button"
@@ -50,7 +58,9 @@ ?disabled=${isDisabled}
 				>
-					${heading}
-				</button>
-				<span class="${rootClass}IconContainer">
 					${Icon({
-						iconName: !isOpen ? "ChevronRight" : "ChevronDown",
+						iconName: (!isOpen ? "ChevronRight" : "ChevronDown") + ({
+							s: "75",
+							m: "100",
+							l: "200",
+							xl: "300",
+						}[iconSize] || "100"),
 						setName: "ui",
@@ -60,5 +70,6 @@ size: iconSize,
 					}, context)}
-				</span>
+					<span class="${rootClass}Title">${heading}</span>
+				</button>
 			</h3>
-			<!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
+			<!-- WAI-ARIA 1.1: Item content uses a role of "region" -->
 			<div
@@ -80,2 +91,4 @@ class="${rootClass}Content"
 	density = "regular",
+	isQuiet = false,
+	hasNoInlinePadding = false,
 	items = [],
@@ -95,5 +108,7 @@ id = getRandomId("accordion"),
 				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
+					typeof size !== "undefined" && size !== "m",
 				[`${rootClass}--${density}`]:
 					typeof density !== "undefined" && density !== "regular",
+				[`${rootClass}--quiet`]: isQuiet,
+				[`${rootClass}--noInlinePadding`]: hasNoInlinePadding,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -100,0 +115,0 @@ })}"

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128567

12.24%

Lines of code

1397

14.41%

Worsened metrics

Number of package files

12

-20%

No dependency changes