From e033465c47d4eec5a49d6903a411007a56047dd2 Mon Sep 17 00:00:00 2001 From: eljefe223 Date: Thu, 28 May 2020 09:26:54 -0700 Subject: [PATCH] cleaned up read mes --- .../src/accordion/README.md | 4 - .../fast-components/src/accordion/README.md | 2 +- .../src/accordion/accordion.spec.md | 203 ------------------ .../fast-foundation/src/accordion/README.md | 24 +++ .../src/accordion/accordion-item/README.md | 24 +++ .../src/accordion/accordion.spec.md | 0 specs/README.md | 2 +- 7 files changed, 50 insertions(+), 209 deletions(-) delete mode 100644 packages/web-components/fast-components-msft/src/accordion/README.md delete mode 100644 packages/web-components/fast-components/src/accordion/accordion.spec.md create mode 100644 packages/web-components/fast-foundation/src/accordion/README.md create mode 100644 packages/web-components/fast-foundation/src/accordion/accordion-item/README.md rename packages/web-components/{fast-components-msft => fast-foundation}/src/accordion/accordion.spec.md (100%) diff --git a/packages/web-components/fast-components-msft/src/accordion/README.md b/packages/web-components/fast-components-msft/src/accordion/README.md deleted file mode 100644 index 13f2eff9f8b..00000000000 --- a/packages/web-components/fast-components-msft/src/accordion/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# 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/src/accordion/README.md b/packages/web-components/fast-components/src/accordion/README.md index 13f2eff9f8b..287588e0d1b 100644 --- a/packages/web-components/fast-components/src/accordion/README.md +++ b/packages/web-components/fast-components/src/accordion/README.md @@ -1,4 +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 +For more information view the [component specification](../../../fast-foundation/src/accordion/accordion.spec.md). \ No newline at end of file diff --git a/packages/web-components/fast-components/src/accordion/accordion.spec.md b/packages/web-components/fast-components/src/accordion/accordion.spec.md deleted file mode 100644 index 3abdd08a00b..00000000000 --- a/packages/web-components/fast-components/src/accordion/accordion.spec.md +++ /dev/null @@ -1,203 +0,0 @@ -# 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-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md new file mode 100644 index 00000000000..1b86cc684c6 --- /dev/null +++ b/packages/web-components/fast-foundation/src/accordion/README.md @@ -0,0 +1,24 @@ +--- +id: fast-accordion +title: fast-accordion +sidebar_label: fast-accordion +custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/accordion/README.md +--- + +## Applying Custom Styles + +```ts +import { customElement } from "@microsoft/fast-element"; +import { Accordion, AccordionTemplate as template } from "@microsoft/fast-foundation"; +import { MyAccordionStyles as styles } from "./accordion.styles"; + +@customElement({ + name: "fast-accordion", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}) +export class FASTAccordion extends Accordion {} +``` \ No newline at end of file diff --git a/packages/web-components/fast-foundation/src/accordion/accordion-item/README.md b/packages/web-components/fast-foundation/src/accordion/accordion-item/README.md new file mode 100644 index 00000000000..e858a9d6071 --- /dev/null +++ b/packages/web-components/fast-foundation/src/accordion/accordion-item/README.md @@ -0,0 +1,24 @@ +--- +id: fast-accordion-item +title: fast-accordion-item +sidebar_label: fast-accordion-item +custom_edit_url: https://github.com/microsoft/fast-dna/edit/master/packages/web-components/fast-foundation/src/accordion/README.md +--- + +## Applying Custom Styles + +```ts +import { customElement } from "@microsoft/fast-element"; +import { AccordionItem, AccordionItemTemplate as template } from "@microsoft/fast-foundation"; +import { MyAccordionItemStyles as styles } from "./accordion-item.styles"; + +@customElement({ + name: "fast-accordion-item", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}) +export class FASTAccordionItem extends AccordionItem {} +``` \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/accordion/accordion.spec.md b/packages/web-components/fast-foundation/src/accordion/accordion.spec.md similarity index 100% rename from packages/web-components/fast-components-msft/src/accordion/accordion.spec.md rename to packages/web-components/fast-foundation/src/accordion/accordion.spec.md diff --git a/specs/README.md b/specs/README.md index 1a0c344f4b7..f20074fa0da 100644 --- a/specs/README.md +++ b/specs/README.md @@ -7,7 +7,7 @@ Here you'll find specifications for custom elements and other library features. ## Web Component Specifications | Name | Spec | Component | | :--------- | :---------: | ---------: | -| [Accordion](../packages/web-components/fast-components/src/accordion/accordion-spec.md) | :white_check_mark: | :white_check_mark: | +| [Accordion](../packages/web-components/fast-foundation/src/accordion/accordion-spec.md) | :white_check_mark: | :white_check_mark: | | Alert | -- | -- | | [Anchored region](../packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.md) | :white_check_mark: | :white_check_mark: | | Avatar | -- | -- |