diff --git a/packages/web-components/fast-components-msft/docs/api-report.md b/packages/web-components/fast-components-msft/docs/api-report.md index 8aacd40efb6..8adb330643b 100644 --- a/packages/web-components/fast-components-msft/docs/api-report.md +++ b/packages/web-components/fast-components-msft/docs/api-report.md @@ -4,6 +4,7 @@ ```ts +import { Accordion } from '@microsoft/fast-foundation'; import { Anchor } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; @@ -30,6 +31,10 @@ import { TextField } from '@microsoft/fast-foundation'; // @public (undocumented) export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string; +// @public (undocumented) +export class FASTAccordion extends Accordion { +} + // @public (undocumented) export class FASTAnchor extends Anchor { } diff --git a/packages/web-components/fast-components-msft/src/accordion/README.md b/packages/web-components/fast-components-msft/src/accordion/README.md new file mode 100644 index 00000000000..13f2eff9f8b --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/README.md @@ -0,0 +1,4 @@ +# fast-accordion +`fast-accordion` is a web component implementation of an [Accordion](https://w3c.github.io/aria-practices/#accordion). + +For more information view the [component specification](./accordion.spec.md). \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts new file mode 100644 index 00000000000..4ace01f827f --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts @@ -0,0 +1,137 @@ +import { css } from "@microsoft/fast-element"; +import { + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + neutralDividerRestBehavior, + neutralFocusBehavior, + neutralForegroundActiveBehavior, + neutralForegroundFocusBehavior, + neutralForegroundRestBehavior, +} from "../../styles/"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { heightNumber } from "../../styles/size"; + +export const AccordionItemStyles = css` + ${display("flex")} :host { + box-sizing: border-box; + font-family: var(--body-font); + flex-direction: column; + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-line-height); + border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } + + .region { + display: none; + padding: calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px); + } + + .heading { + display: grid; + position: relative; + grid-template-columns: auto 1fr auto calc(${heightNumber} * 1px); + z-index: 2; + } + + .button { + appearance: none; + border: none; + background: none; + grid-column: 2; + grid-row: 1; + outline: none; + padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px); + text-align: left; + height: calc(${heightNumber} * 1px); + color: var(--neutral-foreground-rest); + cursor: pointer; + } + + .button:hover { + color: var(--neutral-foreground-hover); + } + + .button:active { + color: var(--neutral-foreground-active); + } + + .button::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + cursor: pointer; + } + + .button:${focusVisible}::before { + outline: none; + border: calc(var(--outline-width) * 1px) solid var(--neutral-focus); + box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) + var(--neutral-focus); + } + + :host(.expanded) .region { + display: flex; + } + + .icon { + display: flex; + align-items: center; + justify-content: center; + grid-column: 4; + z-index: 2; + pointer-events: none; + } + + slot[name="collapsed-icon"] { + display: flex; + } + + :host(.expanded) slot[name="collapsed-icon"] { + display: none; + } + + slot[name="expanded-icon"] { + display: none; + } + + :host(.expanded) slot[name="expanded-icon"] { + display: flex; + } + + .start { + display: flex; + align-items: center; + justify-content: center; + grid-column: 1; + z-index: 2; + } + + .end { + display: flex; + align-items: center; + justify-content: center; + grid-column: 3; + z-index: 2; + } +`.withBehaviors( + neutralDividerRestBehavior, + neutralForegroundActiveBehavior, + neutralForegroundFocusBehavior, + neutralForegroundRestBehavior, + neutralFocusBehavior, + forcedColorsStylesheetBehavior( + css` + .button:${focusVisible}::before { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion-item/index.ts b/packages/web-components/fast-components-msft/src/accordion/accordion-item/index.ts new file mode 100644 index 00000000000..050d06f0543 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/accordion-item/index.ts @@ -0,0 +1,13 @@ +import { customElement } from "@microsoft/fast-element"; +import { + AccordionItem, + AccordionItemTemplate as template, +} from "@microsoft/fast-foundation"; +import { AccordionItemStyles as styles } from "./accordion-item.styles"; + +@customElement({ + name: "fast-accordion-item", + template, + styles, +}) +export class FASTAccordionItem extends AccordionItem {} diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion.spec.md b/packages/web-components/fast-components-msft/src/accordion/accordion.spec.md new file mode 100644 index 00000000000..3abdd08a00b --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/accordion.spec.md @@ -0,0 +1,203 @@ +# Accordion + +## Overview + +As defined by the W3C: +> An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. + +### Use Cases + +- Frank finds a spelling error in the FAST-DNA documentation. He submits a pull request (PR) to fix the error and goes to eat lunch while waiting for the maintainers to review his PR. Upon returning from lunch he notices a widget on the screen saying certain status checks failed. He clicks on the headline of the widget and it reveals additional information stating that he needs to run prettier to ensure proper formatting. He clicks the headline again and the additional information collapses. Frank runs prettier and his PR is completed successfully. + +- On April 16th Randy wakes up in a cold sweat because he realized he made a mistake in filing his taxes with the IRS. He opens his laptop and goes to the IRS website and sees a link to "frequently asked questions". Randy sees a list of questions on the page with an arrow next to it indicating that answers are hidden. He sees a question titled, "What should I do if I made a mistake on my federal turn that I've already filed?" Randy clicks the question and sees a section detailing out the exact steps to take. With his anxiety eased, Randy goes back to bed and falls asleep. + +### Features + +1. Optionally allow only a single section to be expanded. This behavior is opt-in and not default behavior. + +2. Support for interactive content within the header, such as a menu button, checkbox, etc. + +3. Optional support for nested accordions. Ideally this behavior will "just work" and no special behaviors will need to be added to enable/support this. The expectation here should be that an accordion takes content and whatever content is inside the accordion panel respects its own interaction model. + +### Prior Art/Examples + +- [Ant Design](https://ant.design/components/collapse/) +- [Carbon Design](https://www.carbondesignsystem.com/components/accordion/usage/) +- [Lightning Design](https://www.lightningdesignsystem.com/components/accordion/) +- [Fluent UI](https://fluentsite.z22.web.core.windows.net/components/accordion/accessibility) +- [Primer](https://primer.style/components/Details) +- [Bootstrap](https://getbootstrap.com/docs/4.3/components/collapse/) + +--- + +### API + +**Accordion** +*Component Name* +- `fast-accordion` + +*Attributes:* +- `expand-mode` - enum + - single + - multi - default + +*Events* +- `change: CustomEvent` + - no custom data + - bubbles + +**Accordion Item** +*Component names:* +- `fast-accordion-item` + +*Attributes:* +- `expanded` - boolean +- `id` - string +- `heading-level` - enum + - 1 + - 2 + - 3 - default + - 4 + - 5 + - 6 + +*Parts:* +- panel +- button + +*Slot Names* +- default +- heading +- collapsed-icon +- expanded-icon +- start +- end + +### Anatomy and Appearance + +```HTML + +
+
+ + + + + + + +
+
+ Panel one content +
+
+ + + + + + + +
+
+ Panel two content +
+
+ + + + + + + +
+
+ Panel three content +
+
+ + +``` + +--- + +## Implementation + +```HTML + + + Panel one + ^ + Panel one content + + + Panel two + ^ + Panel two content + + + Panel three + ^ + Panel three content + + +``` + +### States + +Accordion has 2 modes of expansion let can be set via `expand-mode`. `expand-mode` defaults to `multi`, meaning multiple accordion-items can be expanded at any given time. If `expand-mode` is set to `single` then only one item can be expanded, meaning that when you activate a header all other headers with collapse. + + +### Accessibility + +Keyboard interactions for tabbing and up and down arrow should focus the next or previous header. Space bar should toggle the expansion of the focused header. + +### Globalization + +Component should mirror in RTL presentations. + +### Test Plan + +While testing is still TBD for our web components, we would expect this to align with the testing strategy and not require any additional test support. + +--- diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion.stories.ts b/packages/web-components/fast-components-msft/src/accordion/accordion.stories.ts new file mode 100644 index 00000000000..6b8a69509b1 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/accordion.stories.ts @@ -0,0 +1,15 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/base.html"; +import { FASTAccordionItem } from "./accordion-item"; +import { FASTAccordion } from "."; + +// Prevent tree-shaking +FASTAccordion; +FASTAccordionItem; +FASTDesignSystemProvider; + +export default { + title: "Accordion", +}; + +export const Base = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts b/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts new file mode 100644 index 00000000000..9b4b1748ad5 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/accordion.styles.ts @@ -0,0 +1,23 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; +import { + accentFillRestBehavior, + neutralDividerRestBehavior, + neutralForegroundRestBehavior, +} from "../styles/"; + +export const AccordionStyles = css` + ${display("flex")} :host { + box-sizing: border-box; + flex-direction: column; + font-family: var(--body-font); + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-line-height); + color: var(--neutral-foreground-rest); + border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } +`.withBehaviors( + accentFillRestBehavior, + neutralDividerRestBehavior, + neutralForegroundRestBehavior +); diff --git a/packages/web-components/fast-components-msft/src/accordion/fixtures/base.html b/packages/web-components/fast-components-msft/src/accordion/fixtures/base.html new file mode 100644 index 00000000000..2503e384bbc --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/fixtures/base.html @@ -0,0 +1,104 @@ + + +

Accordion

+

Default

+ + +
+ +
+
+ +
+ Panel one + + + + + + + + + + Panel one content + + + Panel two + + + + + + + + + + Panel two content + + + Panel three + + + + + + + + + + Panel three content + + +

Single expand

+ + +
+ +
+
+ +
+ Panel one + + + + + + + + + + Panel one content + + + Panel two + + + + + + + + + + Panel two content + + + Panel three + + + + + + + + + + Panel three content + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/accordion/index.ts b/packages/web-components/fast-components-msft/src/accordion/index.ts new file mode 100644 index 00000000000..46d4832f179 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/accordion/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Accordion, AccordionTemplate as template } from "@microsoft/fast-foundation"; +import { AccordionStyles as styles } from "./accordion.styles"; + +@customElement({ + name: "fast-accordion", + template, + styles, +}) +export class FASTAccordion extends Accordion {} diff --git a/packages/web-components/fast-components-msft/src/index.ts b/packages/web-components/fast-components-msft/src/index.ts index f72dde059bc..63967623995 100644 --- a/packages/web-components/fast-components-msft/src/index.ts +++ b/packages/web-components/fast-components-msft/src/index.ts @@ -1,3 +1,4 @@ +export * from "./accordion/"; export * from "./anchor/"; export * from "./badge/"; export * from "./button/"; diff --git a/packages/web-components/fast-components-msft/temp/api-report.md b/packages/web-components/fast-components-msft/temp/api-report.md index 8aacd40efb6..8adb330643b 100644 --- a/packages/web-components/fast-components-msft/temp/api-report.md +++ b/packages/web-components/fast-components-msft/temp/api-report.md @@ -4,6 +4,7 @@ ```ts +import { Accordion } from '@microsoft/fast-foundation'; import { Anchor } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; @@ -30,6 +31,10 @@ import { TextField } from '@microsoft/fast-foundation'; // @public (undocumented) export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string; +// @public (undocumented) +export class FASTAccordion extends Accordion { +} + // @public (undocumented) export class FASTAnchor extends Anchor { } diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 26e7d22b33b..9cc4d730a2a 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -4,6 +4,7 @@ ```ts +import { Accordion } from '@microsoft/fast-foundation'; import { Anchor } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; @@ -152,6 +153,10 @@ export const accentForegroundRestBehavior: import("@microsoft/fast-foundation"). // @public (undocumented) export function createColorPalette(baseColor: any): string[]; +// @public (undocumented) +export class FASTAccordion extends Accordion { +} + // @public (undocumented) export class FASTAnchor extends Anchor { } diff --git a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts index 45d89e443f4..371c03ea72b 100644 --- a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts +++ b/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts @@ -1,5 +1,9 @@ import { css } from "@microsoft/fast-element"; -import { display, focusVisible } from "../../styles"; +import { + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { neutralDividerRestBehavior, neutralFocusBehavior, @@ -7,9 +11,8 @@ import { neutralForegroundFocusBehavior, neutralForegroundRestBehavior, } from "../../styles/recipes"; +import { SystemColors } from "@microsoft/fast-web-utilities"; import { heightNumber } from "../../styles/size"; -import { forcedColorsStylesheetBehavior } from "../../styles/match-media-stylesheet-behavior"; -import { SystemColors } from "../../styles/system-colors"; export const AccordionItemStyles = css` ${display("flex")} :host { diff --git a/packages/web-components/fast-components/src/accordion/accordion-item/index.ts b/packages/web-components/fast-components/src/accordion/accordion-item/index.ts index ce83bc1cdc7..050d06f0543 100644 --- a/packages/web-components/fast-components/src/accordion/accordion-item/index.ts +++ b/packages/web-components/fast-components/src/accordion/accordion-item/index.ts @@ -1,6 +1,8 @@ import { customElement } from "@microsoft/fast-element"; -import { AccordionItem } from "./accordion-item"; -import { AccordionItemTemplate as template } from "./accordion-item.template"; +import { + AccordionItem, + AccordionItemTemplate as template, +} from "@microsoft/fast-foundation"; import { AccordionItemStyles as styles } from "./accordion-item.styles"; @customElement({ @@ -9,6 +11,3 @@ import { AccordionItemStyles as styles } from "./accordion-item.styles"; styles, }) export class FASTAccordionItem extends AccordionItem {} -export * from "./accordion-item.template"; -export * from "./accordion-item.styles"; -export * from "./accordion-item"; diff --git a/packages/web-components/fast-components/src/accordion/accordion.styles.ts b/packages/web-components/fast-components/src/accordion/accordion.styles.ts index d0c01b40f16..2b03070c2e1 100644 --- a/packages/web-components/fast-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/fast-components/src/accordion/accordion.styles.ts @@ -1,6 +1,7 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../styles"; +import { display } from "@microsoft/fast-foundation"; import { + accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior, } from "../styles/recipes"; @@ -15,4 +16,8 @@ export const AccordionStyles = css` color: var(--neutral-foreground-rest); border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); } -`.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior); +`.withBehaviors( + accentFillRestBehavior, + neutralDividerRestBehavior, + neutralForegroundRestBehavior +); diff --git a/packages/web-components/fast-components/src/accordion/fixtures/base.html b/packages/web-components/fast-components/src/accordion/fixtures/base.html index 14689a9636c..2503e384bbc 100644 --- a/packages/web-components/fast-components/src/accordion/fixtures/base.html +++ b/packages/web-components/fast-components/src/accordion/fixtures/base.html @@ -1,4 +1,9 @@ +

Accordion

Default

@@ -10,40 +15,40 @@

Default

Panel one - - - - + + + + - - - + + + Panel one content Panel two - - - - + + + + - - - + + + Panel two content Panel three - - - - + + + + - - - + + + Panel three content @@ -58,40 +63,40 @@

Single expand

Panel one - - - - + + + + - - - + + + Panel one content Panel two - - - - + + + + - - - + + + Panel two content Panel three - - - - + + + + - - - + + + Panel three content diff --git a/packages/web-components/fast-components/src/accordion/index.ts b/packages/web-components/fast-components/src/accordion/index.ts index e31c0950c19..46d4832f179 100644 --- a/packages/web-components/fast-components/src/accordion/index.ts +++ b/packages/web-components/fast-components/src/accordion/index.ts @@ -1,6 +1,5 @@ import { customElement } from "@microsoft/fast-element"; -import { Accordion } from "./accordion"; -import { AccordionTemplate as template } from "./accordion.template"; +import { Accordion, AccordionTemplate as template } from "@microsoft/fast-foundation"; import { AccordionStyles as styles } from "./accordion.styles"; @customElement({ @@ -9,6 +8,3 @@ import { AccordionStyles as styles } from "./accordion.styles"; styles, }) export class FASTAccordion extends Accordion {} -export * from "./accordion.template"; -export * from "./accordion.styles"; -export * from "./accordion"; diff --git a/packages/web-components/fast-components/src/default-palette.ts b/packages/web-components/fast-components/src/default-palette.ts index 49d5c7c265d..42c62848600 100644 --- a/packages/web-components/fast-components/src/default-palette.ts +++ b/packages/web-components/fast-components/src/default-palette.ts @@ -96,7 +96,7 @@ export const neutralPalette: string[] = [ "#151515", "#121212", "#101010", - "#000000", + "#000000" ]; export const accentPalette: string[] = [ "#FFFFFF", @@ -192,5 +192,5 @@ export const accentPalette: string[] = [ "#260511", "#21040E", "#1C030C", - "#000000", + "#000000" ]; diff --git a/packages/web-components/fast-components/src/index.ts b/packages/web-components/fast-components/src/index.ts index fe7b86120e7..71e390d2b9b 100644 --- a/packages/web-components/fast-components/src/index.ts +++ b/packages/web-components/fast-components/src/index.ts @@ -1,3 +1,4 @@ +export * from "./accordion/index"; export * from "./anchor/index"; export * from "./badge/index"; export * from "./button/index"; diff --git a/packages/web-components/fast-components/temp/api-report.md b/packages/web-components/fast-components/temp/api-report.md index 26e7d22b33b..9cc4d730a2a 100644 --- a/packages/web-components/fast-components/temp/api-report.md +++ b/packages/web-components/fast-components/temp/api-report.md @@ -4,6 +4,7 @@ ```ts +import { Accordion } from '@microsoft/fast-foundation'; import { Anchor } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; @@ -152,6 +153,10 @@ export const accentForegroundRestBehavior: import("@microsoft/fast-foundation"). // @public (undocumented) export function createColorPalette(baseColor: any): string[]; +// @public (undocumented) +export class FASTAccordion extends Accordion { +} + // @public (undocumented) export class FASTAnchor extends Anchor { } diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 6c5e41430e1..730d45d76fb 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -12,6 +12,48 @@ import { FASTElement } from '@microsoft/fast-element'; import { Orientation } from '@microsoft/fast-web-utilities'; import { PartialFASTElementDefinition } from '@microsoft/fast-element'; +// @public (undocumented) +export class Accordion extends FASTElement { + // (undocumented) + accordionItems: HTMLElement[]; + // (undocumented) + accordionItemsChanged(oldValue: any, newValue: any): void; + // (undocumented) + expandmode: AccordionExpandMode; + } + +// @public (undocumented) +export enum AccordionExpandMode { + // (undocumented) + multi = "multi", + // (undocumented) + single = "single" +} + +// @public (undocumented) +export class AccordionItem extends FASTElement { + // (undocumented) + clickHandler: (e: MouseEvent) => void; + // (undocumented) + expandbutton: HTMLElement; + // (undocumented) + expanded: boolean; + // (undocumented) + headinglevel: 1 | 2 | 3 | 4 | 5 | 6; + // (undocumented) + id: string; +} + +// @public (undocumented) +export interface AccordionItem extends StartEnd { +} + +// @public (undocumented) +export const AccordionItemTemplate: import("@microsoft/fast-element").ViewTemplate; + +// @public (undocumented) +export const AccordionTemplate: import("@microsoft/fast-element").ViewTemplate; + // @public (undocumented) export class Anchor extends FASTElement { // (undocumented) diff --git a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts similarity index 100% rename from packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.template.ts rename to packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.template.ts diff --git a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts similarity index 76% rename from packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.ts rename to packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts index 3a904fe4779..dcf6c8b9b63 100644 --- a/packages/web-components/fast-components/src/accordion/accordion-item/accordion-item.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/accordion-item.ts @@ -4,6 +4,8 @@ import { nullableNumberConverter, observable, } from "@microsoft/fast-element"; +import { StartEnd } from "../../patterns/start-end"; +import { applyMixins } from "../../utilities/apply-mixins"; export class AccordionItem extends FASTElement { @attr({ @@ -32,3 +34,7 @@ export class AccordionItem extends FASTElement { this.$emit("change"); }; } + +/* eslint-disable-next-line */ +export interface AccordionItem extends StartEnd {} +applyMixins(AccordionItem, StartEnd); diff --git a/packages/web-components/fast-foundation/src/accordion/accordion-item/index.ts b/packages/web-components/fast-foundation/src/accordion/accordion-item/index.ts new file mode 100644 index 00000000000..4ed6a77ca78 --- /dev/null +++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/index.ts @@ -0,0 +1,2 @@ +export * from "./accordion-item.template"; +export * from "./accordion-item"; diff --git a/packages/web-components/fast-components/src/accordion/accordion.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts similarity index 100% rename from packages/web-components/fast-components/src/accordion/accordion.template.ts rename to packages/web-components/fast-foundation/src/accordion/accordion.template.ts diff --git a/packages/web-components/fast-components/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts similarity index 86% rename from packages/web-components/fast-components/src/accordion/accordion.ts rename to packages/web-components/fast-foundation/src/accordion/accordion.ts index b2defbcd6ed..091ce2b6085 100644 --- a/packages/web-components/fast-components/src/accordion/accordion.ts +++ b/packages/web-components/fast-foundation/src/accordion/accordion.ts @@ -1,4 +1,4 @@ -import { attr, booleanConverter, FASTElement, observable } from "@microsoft/fast-element"; +import { attr, FASTElement, observable } from "@microsoft/fast-element"; import { keyCodeArrowDown, keyCodeArrowUp, @@ -6,9 +6,7 @@ import { keyCodeHome, wrapInBounds, } from "@microsoft/fast-web-utilities"; -import { StartEnd } from "../patterns/start-end"; -import { applyMixins } from "../utilities"; -import { FASTAccordionItem } from "./accordion-item"; +import { AccordionItem } from "./accordion-item"; export enum AccordionExpandMode { single = "single", @@ -38,10 +36,9 @@ export class Accordion extends FASTElement { }; private setItems = (): void => { - console.log(this.isSingleExpandMode()); this.accordionIds = this.getItemIds(); this.accordionItems.forEach((item: HTMLElement, index: number) => { - if (item instanceof FASTAccordionItem) { + if (item instanceof AccordionItem) { item.addEventListener("change", this.activeItemChange); if (this.isSingleExpandMode()) { this.activeItemIndex !== index @@ -60,7 +57,7 @@ export class Accordion extends FASTElement { }; private resetItems = (): void => { - this.accordionItems.forEach((item: FASTAccordionItem, index: number) => { + this.accordionItems.forEach((item: AccordionItem, index: number) => { item.expanded = false; }); }; @@ -75,7 +72,6 @@ export class Accordion extends FASTElement { private activeItemChange = (event): void => { const selectedItem = event.target as HTMLElement; if (this.isSingleExpandMode()) { - console.log("Hits"); this.resetItems(); event.target.expanded = true; } @@ -128,12 +124,8 @@ export class Accordion extends FASTElement { private focusItem(): void { const element: HTMLElement = this.accordionItems[this.activeItemIndex]; - if (element instanceof FASTAccordionItem) { + if (element instanceof AccordionItem) { element.expandbutton.focus(); } } } - -/* eslint-disable-next-line */ -export interface Accordion extends StartEnd {} -applyMixins(Accordion, StartEnd); diff --git a/packages/web-components/fast-foundation/src/accordion/index.ts b/packages/web-components/fast-foundation/src/accordion/index.ts new file mode 100644 index 00000000000..806fb840849 --- /dev/null +++ b/packages/web-components/fast-foundation/src/accordion/index.ts @@ -0,0 +1,3 @@ +export * from "./accordion.template"; +export * from "./accordion"; +export * from "./accordion-item"; diff --git a/packages/web-components/fast-foundation/src/index.ts b/packages/web-components/fast-foundation/src/index.ts index bd0a945a07e..1c625d62657 100644 --- a/packages/web-components/fast-foundation/src/index.ts +++ b/packages/web-components/fast-foundation/src/index.ts @@ -1,3 +1,4 @@ +export * from "./accordion/index"; export * from "./anchor/index"; export * from "./badge/index"; export * from "./button/index";