feat: add accordion web component (#3067)

* feat: add accordion web component * feat: add accordion web component * removed hactive indicator ref * updated spec roadmap * removed name from span in start/end pattern * addressed most PR comments * more comments addressed * removed converter * added number converter * remove aria expanded from template * addressed PR comments rebasee with new structure * cleaned up read mes * addressed comments * updated examples to show disabled items
microsoft · May 29, 2020 · f551378 · f551378
1 parent ba1461d
commit f551378
Show file tree

Hide file tree

Showing 32 changed files with 1,097 additions and 10 deletions.
diff --git 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/...web-components/fast-components-msft/src/accordion/accordion-item/accordion-item.styles.ts b/...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
@@ -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.stories.ts 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
@@ -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
@@ -0,0 +1,168 @@
+<fast-design-system-provider use-defaults>
+ <style>
+ .icon {
+ stroke: var(--accent-fill-rest);
+ }
+
+ fast-accordion-item.disabled::part(button) {
+ pointer-events: none;
+ }
+ </style>
+ <h1>Accordion</h1>
+ <h4>Default</h4>
+ <fast-accordion>
+ <fast-accordion-item expanded>
+ <div slot="start">
+ <button>1</button>
+ </div>
+ <div slot="end">
+ <button>1</button>
+ </div>
+ <span slot="heading">Panel one</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel one content
+ </fast-accordion-item>
+ <fast-accordion-item>
+ <span slot="heading">Panel two</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel two content
+ </fast-accordion-item>
+ <fast-accordion-item expanded>
+ <span slot="heading">Panel three</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel three content
+ </fast-accordion-item>
+ </fast-accordion>
+ <h4>Single expand</h4>
+ <fast-accordion expand-mode="single">
+ <fast-accordion-item>
+ <div slot="start">
+ <button>1</button>
+ </div>
+ <div slot="end">
+ <button>1</button>
+ </div>
+ <span slot="heading">Panel one</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel one content
+ </fast-accordion-item>
+ <fast-accordion-item class="disabled">
+ <span slot="heading">Panel Two</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel two content
+ </fast-accordion-item>
+ <fast-accordion-item>
+ <span slot="heading">Panel three</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel three content
+ </fast-accordion-item>
+ </fast-accordion>
+ <h4>With disabled item</h4>
+ <fast-accordion>
+ <fast-accordion-item>
+ <div slot="start">
+ <button>1</button>
+ </div>
+ <div slot="end">
+ <button>1</button>
+ </div>
+ <span slot="heading">Panel two</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel one content
+ </fast-accordion-item>
+ <fast-accordion-item class="disabled">
+ <div slot="start">
+ <button>1</button>
+ </div>
+ <div slot="end">
+ <button>1</button>
+ </div>
+ <span slot="heading">Disabled</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Disabled content
+ </fast-accordion-item>
+ <fast-accordion-item expanded>
+ <div slot="start">
+ <button>1</button>
+ </div>
+ <div slot="end">
+ <button>1</button>
+ </div>
+ <span slot="heading">Panel three</span>
+ <svg slot="expanded-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ <svg slot="collapsed-icon" class="icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ Panel three content
+ </fast-accordion-item>
+ </fast-accordion>
+</fast-design-system-provider>
diff --git a/packages/web-components/fast-components-msft/src/accordion/index.ts 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
@@ -1,3 +1,4 @@
+export * from "./accordion/";
 export * from "./anchor/";
 export * from "./badge/";
 export * from "./button/";