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/";