Skip to content

Commit

Permalink
refactor(accordion)!: remove minimal and default appearance property …
Browse files Browse the repository at this point in the history 
…values
  • Loading branch information
@benelan
benelan committed Jan 10, 2023
1 parent a97e589 commit 9401dfa
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 306 deletions.
6 changes: 3 additions & 3 deletions src/components/accordion/accordion.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ describe("calcite-accordion", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion appearance="minimal" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
<calcite-accordion appearance="solid" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
${accordionContent}
</calcite-accordion>`);
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");
Expand All @@ -50,7 +50,7 @@ describe("calcite-accordion", () => {
it("renders icon if requested", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion appearance="minimal" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
<calcite-accordion appearance="solid" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
<calcite-accordion-item heading="Accordion Title 1" icon-start="car" id="1">Accordion Item Content
</calcite-accordion-item>
<calcite-accordion-item heading="Accordion Title 1" id="2" expanded>Accordion Item Content
Expand Down
141 changes: 38 additions & 103 deletions src/components/accordion/accordion.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [] }
) => {
Expand All @@ -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;
}
Expand All @@ -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;
};

Expand All @@ -111,20 +93,6 @@ const accordionItemContent = `Custom content here<br/><img src="${placeholderIma
height: 133
})}"><br/>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",
Expand Down Expand Up @@ -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`
<calcite-accordion scale="s">
<calcite-accordion-item scale="m" heading="Accordion Item">
<calcite-accordion-item scale="m" heading="Accordion Item 1">
<calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
>${accordionItemContent}
<calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
<calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
</calcite-accordion-item>
<calcite-accordion-item scale="m" heading="Accordion Item">
<calcite-accordion-item scale="m" heading="Accordion Item 2" expanded>
<calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
>${accordionItemContent}
<calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
<calcite-action scale="s" icon="banana" label="Banana" slot="actions-start"></calcite-action>
<calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
</calcite-accordion-item>
<calcite-accordion-item scale="m" heading="Accordion Item">
<calcite-accordion-item scale="m" heading="Accordion Item 3">
<calcite-action scale="s" icon="brush-tip" label="Paint" slot="actions-start"></calcite-action
>${accordionItemContent}
<calcite-action scale="s" icon="banana" label="Banana" slot="actions-end"></calcite-action>
>${accordionItemContent}
<calcite-action scale="s" icon="sound" label="Volume" slot="actions-end"></calcite-action>
</calcite-accordion-item>
</calcite-accordion>
Expand All @@ -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
}),
Expand Down Expand Up @@ -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(
Expand All @@ -310,16 +246,15 @@ 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(
"calcite-accordion-item",
createAccordionItemAttributes({
group: "accordion-item-4",
iconStart: "biking",
iconEnd: "biking",
icon: true
iconEnd: "biking"
}).concat({
name: "expanded",
value: true
Expand Down
9 changes: 2 additions & 7 deletions src/components/accordion/accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -75,13 +72,11 @@ export class Accordion {

render(): VNode {
const transparent = this.appearance === "transparent";
const minimal = this.appearance === "minimal";
return (
<div
class={{
"accordion--transparent": transparent,
"accordion--minimal": minimal,
accordion: !transparent && !minimal
accordion: !transparent
}}
>
<slot />
Expand Down
Loading

0 comments on commit 9401dfa

Please sign in to comment.