diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts index fa653a72533..437df26c63f 100644 --- a/src/components/accordion/accordion.e2e.ts +++ b/src/components/accordion/accordion.e2e.ts @@ -36,11 +36,11 @@ describe("calcite-accordion", () => { it("renders requested props when valid props are provided", async () => { const page = await newE2EPage(); await page.setContent(` - + ${accordionContent} `); const element = await page.find("calcite-accordion"); - expect(element).toEqualAttribute("appearance", "minimal"); + expect(element).toEqualAttribute("appearance", "solid"); expect(element).toEqualAttribute("icon-position", "start"); expect(element).toEqualAttribute("scale", "l"); expect(element).toEqualAttribute("selection-mode", "single-persist"); @@ -50,7 +50,7 @@ describe("calcite-accordion", () => { it("renders icon if requested", async () => { const page = await newE2EPage(); await page.setContent(` - + Accordion Item Content Accordion Item Content diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts index 0374bf32795..a08319fe3cf 100644 --- a/src/components/accordion/accordion.stories.ts +++ b/src/components/accordion/accordion.stories.ts @@ -13,6 +13,20 @@ import accordionReadme from "./readme.md"; import accordionItemReadme from "../accordion-item/readme.md"; import { html } from "../../../support/formatting"; +export default { + title: "Components/Accordion", + parameters: { + notes: { + accordion: accordionReadme, + accordionItem: accordionItemReadme + }, + backgrounds: { + values: [{ name: "transparent", value: "#0000ffff" }] + } + }, + ...storyFilters() +}; + const createAccordionAttributes: (options?: { exceptions: string[] }) => Attributes = ( { exceptions } = { exceptions: [] } ) => { @@ -32,23 +46,7 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu { name: "appearance", commit(): Attribute { - this.value = select("appearance", ["default", "minimal", "transparent"], "default", group); - delete this.build; - return this; - } - }, - { - name: "icon-position", - commit(): Attribute { - this.value = select("icon-position", ["start", "end"], "end", group); - delete this.build; - return this; - } - }, - { - name: "icon-type", - commit(): Attribute { - this.value = select("icon-type", ["chevron", "caret", "plus-minus"], "chevron", group); + this.value = select("appearance", ["solid", "transparent"], "solid", group); delete this.build; return this; } @@ -70,39 +68,23 @@ const createAccordionItemAttributes: (options?: { group?: string; iconEnd?: string; iconStart?: string; -}) => Attributes = ({ group, iconStart, iconEnd }) => { - const groupTitle = group ? group : ""; +}) => Attributes = (props) => { + const group = props?.group || ""; const defaultAttributes = [ - { - name: "heading", - value: text("heading", "Heading", groupTitle) - }, + { name: "heading", value: text("heading", "Heading", group) }, { name: "description", - value: text("description", "Description", groupTitle) - } - ]; - - const iconStartAttribute = [ + value: text("description", "Description for item", group) + }, { name: "icon-start", - value: select("icon-start", iconNames, iconNames[0], groupTitle) - } - ]; - - const iconEndAttribute = [ + value: select("icon-start", ["", ...iconNames], props?.iconStart || "", group) + }, { name: "icon-end", - value: select("icon-end", iconNames, iconNames[0], groupTitle) + value: select("icon-end", ["", ...iconNames], props?.iconEnd || "", group) } ]; - - if (iconEnd && iconStart) { - return iconStartAttribute.concat(defaultAttributes, iconEndAttribute); - } else if (iconStart || iconEnd) { - return iconStart ? iconStartAttribute.concat(defaultAttributes) : iconEndAttribute.concat(defaultAttributes); - } - return defaultAttributes; }; @@ -111,20 +93,6 @@ const accordionItemContent = `Custom content here

More custom content here`; -export default { - title: "Components/Accordion", - parameters: { - notes: { - accordion: accordionReadme, - accordionItem: accordionItemReadme - }, - backgrounds: { - values: [{ name: "transparent", value: "#0000ffff" }] - } - }, - ...storyFilters() -}; - export const simple = (): string => create( "calcite-accordion", @@ -156,59 +124,24 @@ export const simple = (): string => ` ); -export const icon_NoTest = (): string => - create( - "calcite-accordion", - createAccordionAttributes(), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-1" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-2" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-3" }), - accordionItemContent - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-4" }).concat({ - name: "expanded", - value: true - }), - accordionItemContent - )} - ` - ); - -icon_NoTest.parameters = { - chromatic: { disableSnapshot: true } -}; - export const withActions = (): string => html` - + ${accordionItemContent} - + ${accordionItemContent} - + - + ${accordionItemContent} + >${accordionItemContent} @@ -230,22 +163,22 @@ export const darkModeRTL_TestOnly = (): string => html` ${create( "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-1" }), + createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-1" }), accordionItemContent )} ${create( "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-2" }), + createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-2" }), accordionItemContent )} ${create( "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-3" }), + createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-3" }), accordionItemContent )} ${create( "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: true, group: "accordion-item-4" }).concat({ + createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-4" }).concat({ name: "expanded", value: true }), @@ -300,7 +233,10 @@ export const withIconStartAndEnd_TestOnly = (): string => html` ${create( "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-1", iconStart: "banana", icon: true }), + createAccordionItemAttributes({ group: "accordion-item-1", iconStart: "banana" }).concat({ + name: "expanded", + value: true + }), accordionItemContent )} ${create( @@ -310,7 +246,7 @@ export const withIconStartAndEnd_TestOnly = (): string => )} ${create( "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-3", iconEnd: "plane", iconStart: "plane", icon: true }), + createAccordionItemAttributes({ group: "accordion-item-3", iconEnd: "plane", iconStart: "plane" }), accordionItemContent )} ${create( @@ -318,8 +254,7 @@ export const withIconStartAndEnd_TestOnly = (): string => createAccordionItemAttributes({ group: "accordion-item-4", iconStart: "biking", - iconEnd: "biking", - icon: true + iconEnd: "biking" }).concat({ name: "expanded", value: true diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 6e9bb00a59b..48cb8836efc 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -26,10 +26,7 @@ export class Accordion { //-------------------------------------------------------------------------- /** Specifies the appearance of the component. */ - @Prop({ reflect: true }) appearance: Extract< - "default" | "minimal" | "solid" | "transparent", - Appearance - > = "solid"; + @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid"; /** Specifies the placement of the icon in the header. */ @Prop({ reflect: true }) iconPosition: Position = "end"; @@ -75,13 +72,11 @@ export class Accordion { render(): VNode { const transparent = this.appearance === "transparent"; - const minimal = this.appearance === "minimal"; return (
diff --git a/src/demos/accordion.html b/src/demos/accordion.html index 62fe3c4b310..e93bea73511 100644 --- a/src/demos/accordion.html +++ b/src/demos/accordion.html @@ -586,199 +586,6 @@

Accordion

- -
-
minimal
- -
- - - - - - - - - - - - Yes - No - - - -
- -
- - - - - - - - - - - - Yes - No - - - -
- -
- - - - - - - - - - - - Yes - No - - - -
-
- - -
-
minimal icon-position: start
- -
- - - - - - - - - - - - - Child 1 - - - Child 2 - - - Grandchild 1 - - - Grandchild 2 - - Great-Grandchild 1 - Great-Grandchild 2 - - - - - - - -
- -
- - - - - - - - - - - - - Child 1 - - - Child 2 - - - Grandchild 1 - - - Grandchild 2 - - Great-Grandchild 1 - Great-Grandchild 2 - - - - - - - -
- -
- - - - - - - - - - - - - Child 1 - - - Child 2 - - - Grandchild 1 - - - Grandchild 2 - - Great-Grandchild 1 - Great-Grandchild 2 - - - - - - - -
-
-
transparent