diff --git a/change/@fluentui-web-components-ee0dceff-c555-429c-b688-92aa40dc7f5e.json b/change/@fluentui-web-components-ee0dceff-c555-429c-b688-92aa40dc7f5e.json new file mode 100644 index 00000000000000..90b77cef0e94f7 --- /dev/null +++ b/change/@fluentui-web-components-ee0dceff-c555-429c-b688-92aa40dc7f5e.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat(accordion): Add accordion web component", + "packageName": "@fluentui/web-components", + "email": "brianbrady@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 65c0e769ff89c1..bca9d2d85006c2 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -24,6 +24,14 @@ "types": "./dist/dts/index.d.ts", "default": "./dist/esm/index.js" }, + "./accordion": { + "types": "./dist/esm/accordion/define.d.ts", + "default": "./dist/esm/accordion/define.js" + }, + "./accordion-item": { + "types": "./dist/esm/accordion-item/define.d.ts", + "default": "./dist/esm/accordion-item/define.js" + }, "./badge": { "types": "./dist/esm/badge/define.d.ts", "default": "./dist/esm/badge/define.js" diff --git a/packages/web-components/src/accordion-item/accordion-item.definition.ts b/packages/web-components/src/accordion-item/accordion-item.definition.ts new file mode 100644 index 00000000000000..a922e4ed8f651a --- /dev/null +++ b/packages/web-components/src/accordion-item/accordion-item.definition.ts @@ -0,0 +1,19 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { AccordionItem } from './accordion-item.js'; +import { styles } from './accordion-item.styles.js'; +import { template } from './accordion-item.template.js'; + +/** + * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem }, + * {@link @microsoft/fast-foundation#accordionItemTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = AccordionItem.compose({ + name: `${FluentDesignSystem.prefix}-accordion-item`, + template, + styles, +}); diff --git a/packages/web-components/src/accordion-item/accordion-item.options.ts b/packages/web-components/src/accordion-item/accordion-item.options.ts new file mode 100644 index 00000000000000..671b2ddbf3e123 --- /dev/null +++ b/packages/web-components/src/accordion-item/accordion-item.options.ts @@ -0,0 +1,31 @@ +import { ValuesOf } from '@microsoft/fast-foundation'; + +/** + * An Accordion Item header font size can be small, medium, large, and extra-large + */ +export const AccordionItemSize = { + small: 'small', + medium: 'medium', + large: 'large', + extraLarge: 'extra-large', +} as const; + +/** + * Applies font size to accordion header + * @public + */ +export type AccordionItemSize = ValuesOf; + +/** + * An Accordion Item expand/collapse icon can appear at the start or end of the accordion + */ +export const AccordionItemExpandIconPosition = { + start: 'start', + end: 'end', +} as const; + +/** + * Applies expand/collapse icon position + * @public + */ +export type AccordionItemExpandIconPosition = ValuesOf; diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts new file mode 100644 index 00000000000000..8ff807e33c3488 --- /dev/null +++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts @@ -0,0 +1,218 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; +import { + borderRadiusMedium, + borderRadiusSmall, + colorNeutralForeground1, + colorNeutralForegroundDisabled, + colorStrokeFocus1, + colorStrokeFocus2, + colorTransparentBackground, + fontFamilyBase, + fontSizeBase200, + fontSizeBase300, + fontSizeBase400, + fontSizeBase500, + fontWeightRegular, + lineHeightBase200, + lineHeightBase300, + lineHeightBase400, + lineHeightBase500, + spacingHorizontalM, + spacingHorizontalMNudge, + spacingHorizontalS, +} from '../theme/design-tokens.js'; + +export const styles = css` + ${display('block')} + + :host { + max-width: fit-content; + } + + .heading { + height: 44px; + display: grid; + position: relative; + vertical-align: middle; + padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge}; + border-radius: ${borderRadiusMedium}; + font-family: ${fontFamilyBase}; + font-size: ${fontSizeBase300}; + font-weight: ${fontWeightRegular}; + line-height: ${lineHeightBase300}; + grid-template-columns: auto auto 1fr auto; + } + + .heading-content { + height: 100%; + display: flex; + align-items: center; + } + + .button { + box-sizing: border-box; + appearance: none; + border: none; + outline: none; + text-align: start; + cursor: pointer; + font-family: inherit; + height: 44px; + color: ${colorNeutralForeground1}; + background: ${colorTransparentBackground}; + line-height: ${lineHeightBase300}; + height: auto; + padding: 0; + font-size: inherit; + grid-column: auto / span 2; + grid-row: 1; + } + + .button::before { + content: ''; + position: absolute; + inset: 0px; + cursor: pointer; + border-radius: ${borderRadiusSmall}; + } + + .icon { + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + position: relative; + height: 100%; + padding-right: ${spacingHorizontalS}; + grid-column: 1 / span 1; + grid-row: 1; + } + + .region { + margin: 0 ${spacingHorizontalM}; + } + + ::slotted([slot='start']), + ::slotted([slot='end']) { + justify-content: center; + align-items: center; + padding-right: ${spacingHorizontalS}; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + } + + button:focus-visible::after { + content: ''; + position: absolute; + inset: 0px; + cursor: pointer; + border-radius: ${borderRadiusSmall}; + outline: none; + border: 2px solid ${colorStrokeFocus1}; + box-shadow: inset 0 0 0 1px ${colorStrokeFocus2}; + } + + /* --- Disabled attr styles --- */ + + :host([disabled]) .button { + color: ${colorNeutralForegroundDisabled}; + } + :host([disabled]) svg { + filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%); + } + + /* --- Expanded attr styles --- */ + + :host([expanded]) .region { + display: block; + } + + :host([expanded]) .default-collapsed-icon, + :host([expanded]) ::slotted([slot='collapsed-icon']), + :host(:not([expanded])) .default-expanded-icon, + :host(:not([expanded])) ::slotted([slot='expanded-icon']), + :host([expanded]) ::slotted([slot='end']), + ::slotted([slot='start']), + .region { + display: none; + } + + :host([expanded]) ::slotted([slot='start']), + :host([expanded]) ::slotted([slot='expanded-icon']), + :host(:not([expanded])) ::slotted([slot='collapsed-icon']), + ::slotted([slot='end']) { + display: flex; + } + + /* --- Appearance attr styles --- */ + + .heading { + font-size: ${fontSizeBase300}; + line-height: ${lineHeightBase300}; + } + + :host([size='small']) .heading { + font-size: ${fontSizeBase200}; + line-height: ${lineHeightBase200}; + } + + :host([size='large']) .heading { + font-size: ${fontSizeBase400}; + line-height: ${lineHeightBase400}; + } + + :host([size='extra-large']) .heading { + font-size: ${fontSizeBase500}; + line-height: ${lineHeightBase500}; + } + + /* --- expand-icon-position attr styles --- */ + + :host([expand-icon-position='end']) :slotted(span[slot='start']), + :host([expand-icon-position='end']) ::slotted(span[slot='end']) { + grid-column: 1 / span 1; + grid-row: 1; + } + + :host([expand-icon-position='end']) ::slotted(span[slot='start']), + :host([expand-icon-position='end']) ::slotted(span[slot='end']) { + grid-column: 1 / span 1; + grid-row: 1; + } + + :host([expand-icon-position='end']) .icon { + grid-column: 4 / span 1; + grid-row: 1; + display: flex; + padding-left: 10px; + padding-right: 0; + } + + :host([expand-icon-position='end']) .button { + grid-column: 2 / span 3; + grid-row: 1; + } + + /* --- Block attr styles --- */ + + :host([block]) { + max-width: 100%; + } + + :host([expand-icon-position='end']) .heading { + grid-template-columns: auto auto 28px; + } + + :host([expand-icon-position='end']) .icon { + grid-column: 5 / span 1; + } + + :host([block][expand-icon-position='end']) .heading { + grid-template-columns: auto 1fr; + } + + :host([block][expand-icon-position='end']) .icon { + grid-column: 5 / span 1; + } +`; diff --git a/packages/web-components/src/accordion-item/accordion-item.template.ts b/packages/web-components/src/accordion-item/accordion-item.template.ts new file mode 100644 index 00000000000000..af59509d7ff2da --- /dev/null +++ b/packages/web-components/src/accordion-item/accordion-item.template.ts @@ -0,0 +1,40 @@ +import { ElementViewTemplate, html } from '@microsoft/fast-element'; +import { accordionItemTemplate } from '@microsoft/fast-foundation'; +import { AccordionItem } from './accordion-item.js'; + +const chevronRight20Filled = html.partial(` + +`); + +const chevronDown20Filled = html.partial(` + +`); + +/** + * The template for the fluent-accordion component. + * @public + */ +export const template: ElementViewTemplate = accordionItemTemplate({ + collapsedIcon: chevronRight20Filled, + expandedIcon: chevronDown20Filled, +}); diff --git a/packages/web-components/src/accordion-item/accordion-item.ts b/packages/web-components/src/accordion-item/accordion-item.ts new file mode 100644 index 00000000000000..0e3411cc40ae99 --- /dev/null +++ b/packages/web-components/src/accordion-item/accordion-item.ts @@ -0,0 +1,40 @@ +import { attr } from '@microsoft/fast-element'; +import { FASTAccordionItem } from '@microsoft/fast-foundation'; +import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js'; + +/** + * @internal + */ +export class AccordionItem extends FASTAccordionItem { + /** + * Defines accordion header font size. + * + * @public + * @default 'medium' + * @remarks + * HTML Attribute: size + */ + @attr + public size: AccordionItemSize; + + /** + * Sets the width of the focus state. + * + * @public + * @remarks + * HTML Attribute: block + */ + @attr({ mode: 'boolean' }) + public block: boolean = false; + + /** + * Sets expand and collapsed icon position. + * + * @public + * @default 'start' + * @remarks + * HTML Attribute: expandIconPosition + */ + @attr({ attribute: 'expand-icon-position' }) + public expandIconPosition: AccordionItemExpandIconPosition; +} diff --git a/packages/web-components/src/accordion-item/define.ts b/packages/web-components/src/accordion-item/define.ts new file mode 100644 index 00000000000000..97948afbe89651 --- /dev/null +++ b/packages/web-components/src/accordion-item/define.ts @@ -0,0 +1,4 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { definition } from './accordion-item.definition.js'; + +definition.define(FluentDesignSystem.registry); diff --git a/packages/web-components/src/accordion-item/index.ts b/packages/web-components/src/accordion-item/index.ts new file mode 100644 index 00000000000000..14613c95835a65 --- /dev/null +++ b/packages/web-components/src/accordion-item/index.ts @@ -0,0 +1,5 @@ +export * from './accordion-item.js'; +export * from './accordion-item.options.js'; +export { styles as accordionItemStyles } from './accordion-item.styles.js'; +export { definition as accordionItemDefinition } from './accordion-item.definition.js'; +export { template as accordionItemTemplate } from './accordion-item.template.js'; diff --git a/packages/web-components/src/accordion/README.md b/packages/web-components/src/accordion/README.md new file mode 100644 index 00000000000000..7756994649bb78 --- /dev/null +++ b/packages/web-components/src/accordion/README.md @@ -0,0 +1,186 @@ +# Accordion + Accordion Item + +As defined by the [W3C](https://w3c.github.io/aria-practices/#accordion): + +> 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. + +
+ +## **Design Spec** + +[Link to Accordion Design Spec in Figma](https://www.figma.com/file/7X3Tgd3fTurii3FACrfhzo/Accordion?node-id=2777%3A42482&t=jHgc4PXRMQH6rPmy-0) + +
+ +## **Engineering Spec** + +Fluent WC3 Accordion extends from the FAST Accordion [FAST Accordion](https://explore.fast.design/components/fast-accordion) and is intended to be as close to the Fluent UI React 9 Menu implementation as possible. However, due to the nature of web components there will not be 100% parity between the two. + +
+ +## Class: `Accordion` + +
+ +### **Variables** + +| Name | Description | Type | +| --------------------- | ------------------------- | -------------------------------------- | +| `AccordionExpandMode` | Expand mode for Accordion | `{ single: "single", multi: "multi" }` | + +
+ +### **Fields** + +| Name | Privacy | Type | Default | Description | +| ---------------- | --------- | --------------------- | ---------- | --------------------------------------------------------------------------------------------- | +| `expandmode` | public | `AccordionExpandMode` | `multiple` | Controls the expand mode of the Accordion, either allowing single or multiple item expansion. | +| `AccordionItems` | protected | `Element[]` | + +
+ +### **Methods** + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------- | ------- | ----------- | ------------------------------------------------------- | ------ | -------------- | +| `expandmodeChanged` | public | | `prev: AccordionExpandMode, next: AccordionExpandMode ` | + +
+ +### **Events** + +| Name | Type | Description | Inherited From | +| -------- | ---- | ---------------------------------------------------------- | -------------- | +| `change` | | Fires a custom 'change' event when the active item changes | + +
+ +### **Attributes** + +| Name | Field | +| ------------- | ---------- | +| `expand-mode` | expandmode | + +
+ +
+ +
+ +## Class: `AccordionItem` + +
+ +### **Variables** + +| Name | Description | Type | +| --------------------------------- | -------------------------- | --------------------------------------------------------------------------------- | +| `AccordionItemSize` | Expand modes for Accordion | `{ small: "small", medium: "medium", large: "large", extraLarge: "extra-large" }` | +| `AccordionItemExpandIconPosition` | Expand icon position | `{ start: "start", end: "end" }` | + +
+ +### **Fields** + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------- | ------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- | +| `headinglevel` | public | `1 or 2 or 3 or 4 or 5 or 6` | `2` | Configures the [level](https://www.w3.org/TR/wai-aria-1.1/#aria-level) of the heading element. | | +| `expanded` | public | `boolean` | `false` | Expands or collapses the item. | | +| `disabled` | public | `boolean` | `false` | Disables an accordion item | | +| `id` | public | `string` | | The item ID | | +| `size` | public | `AccordionItemSize` | `medium` | The font size of the AccordionItem header. | +| `block` | public | `boolean` | `true` | Sets the width of the focus state. | +| `expandIconPosition` | public | `AccordionItemExpandIconPosition` | `start` | Sets the position of the expand icon | + +
+ +### **Events** + +| Name | Type | Description | Inherited From | +| -------- | ---- | -------------------------------------------------------- | -------------- | +| `change` | | Fires a custom 'change' event when the button is invoked | | + +
+ +### **Attributes** + +| Name | Field | +| -------------------- | ------------------ | +| `heading-level` | headinglevel | +| | expanded | +| | disabled | +| | block | +| `id` | id | +| `expandIconPosition` | expandIconPosition | +| `size` | size | + +
+ +### **Slots** + +| Name | Description | +| ---------------- | -------------------------------------------------------------------------------- | +| `start` | The slot used for a presentation icon when expanded | +| `end` | The slot used for a presentation icon when collapsed | +| `heading` | Content which serves as the accordion item heading and text of the expand button | +| | The default slot for accordion item content | +| `expanded-icon` | The slot used for a custom expanded icon | +| `collapsed-icon` | The slot used for a custom collapsed icon | + +
+
+
+ +## **Accessibility** + +[W3 Accordion Spec](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) + +
+ +### **WAI-ARIA Roles, States, and Properties** + +- `role = "button"` + - The title of each accordion header is contained in an element with role button. +- `role = "heading"` + - Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page. +- `aria-expanded` + - If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false. +- `aria-controls` + - The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content. +- `aria-disabled` + - If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true. + +
+
+
+ +## **Preparation** + +
+ +### **Fluent Web Component v3 v.s Fluent React 9** + +
+ +**Component and Slot Mapping** + +| Fluent UI React 9 | Fluent Web Components 3 | +| ------------------- | ------------------------- | +| `` | `` | +| `` | `` | +| `` | `named slot = "heading"` | +| `` | `default slotted content` | + +
+ +**Property Mapping** +| Fluent UI React 9 | Fluent Web Components 3 | Description of difference | +|---------------------------|---------------------------|------------------------------------------------------------------------------------------| +| `defaultOpenItems: number`| `expand: boolean` | _FuiR9_ `defaultOpenItems` is a number property set on the `Accordion` corresponding to the intended `AccordionItem` to be expanded.
`expand` is a boolean property set directly on the `AccordionItem` intended to be expanded. +| `multiple: boolean` | `expandmode: "single"` | `"multiple"`| | +| `size` | `size` | +| `as: 'h1'` | `'h2'` | `'h3'` | `'h4'` | `'h5'` | `'h6'` | `headinglevel: 1` | `2` | `3` | `4` | `5` | `6` | `as` property sets a wrapper around the `AccordionItem` header with the corresponding header tag ( `h1`, `h2`, etc. )
`headinglevel` sets the `aria-level` attribute to the corresponding heading level. +| `disabled` | `disabled` | +| `expandIconPosition` | `expandIconPosition` | +| `expandIcon` | `named slot: collapsed-icon` + `expanded-icon` | `expandIcon` is a prop that is passed a ternary to render the appropriate icon.
`collapsed-icon` and `expanded-icon` are named slots to supply the appropriate icons. +| `icon` | `named slot: start` + `end` | `icon` is a property set on the `AccordionHeader` through which an icon is passed
`start` and `end` are named slots through which to supply a presentation icon. diff --git a/packages/web-components/src/accordion/accordion.definition.ts b/packages/web-components/src/accordion/accordion.definition.ts new file mode 100644 index 00000000000000..aa47c704ae1a87 --- /dev/null +++ b/packages/web-components/src/accordion/accordion.definition.ts @@ -0,0 +1,19 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { Accordion } from './accordion.js'; +import { styles } from './accordion.styles.js'; +import { template } from './accordion.template.js'; + +/** + * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion }, + * {@link @microsoft/fast-foundation#accordionTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const definition = Accordion.compose({ + name: `${FluentDesignSystem.prefix}-accordion`, + template, + styles, +}); diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts new file mode 100644 index 00000000000000..38cdd5ceb2906d --- /dev/null +++ b/packages/web-components/src/accordion/accordion.stories.ts @@ -0,0 +1,208 @@ +import { html } from '@microsoft/fast-element'; +import type { Args, Meta } from '@storybook/html'; +import { renderComponent } from '../helpers.stories.js'; +import { AccordionItemExpandIconPosition, AccordionItemSize } from '../accordion-item/accordion-item.options.js'; +import type { Accordion as FluentAccordion } from './accordion.js'; +import './define'; +import '../accordion-item/define'; + +type AccordionStoryArgs = Args & FluentAccordion; +type AccordionStoryMeta = Meta; + +const add20Filled = html` + +`; +const subtract20Filled = html` + +`; + +const eye20Regular = html` + +`; +const eyeOff20Regular = html` + +`; + +const storyTemplate = html` + x.expandMode}> + x.size} + heading-level=${x => x.headingLevel} + expand-icon-position=${x => x.expandIconPosition} + block=${x => x.block} + ?disabled=${x => x.disabled} + > + Accordion Header 1 + Accordion Panel 1 + + x.size} + heading-level=${x => x.headingLevel} + expand-icon-position=${x => x.expandIconPosition} + block=${x => x.block} + ?disabled=${x => x.disabled} + > + Accordion Header 1 + Accordion Panel 2 + + x.size} + heading-level=${x => x.headingLevel} + expand-icon-position=${x => x.expandIconPosition} + block=${x => x.block} + ?disabled=${x => x.disabled} + > + Accordion Header 1 + Accordion Panel 3 + + +`; + +export default { + title: 'Components/Accordion', + args: { + size: 'medium', + expandIconPosition: 'start', + expandMode: 'multiple', + block: false, + disabled: false, + headingLevel: '2', + }, + argTypes: { + size: { + description: 'Sets the size of the Accordion Item header', + table: { + defaultValue: { summary: 'medium' }, + }, + control: { + type: 'select', + options: Object.values(AccordionItemSize), + }, + defaultValue: 'medium', + }, + expandIconPosition: { + description: 'Sets position of expand and collapse icon', + table: { + defaultValue: { summary: 'start' }, + }, + control: { + type: 'select', + options: Object.values(AccordionItemExpandIconPosition), + }, + defaultValue: 'start', + }, + expandMode: { + description: 'Sets whether multiple or a single accordion item can be expanded at one time', + table: { + defaultValue: { summary: 'multiple' }, + }, + control: { + type: 'select', + options: ['multiple', 'single'], + }, + defaultValue: 'multiple', + }, + block: { + description: 'Sets focus state width', + table: { + defaultValue: { summary: false }, + }, + control: 'boolean', + defaultValue: false, + }, + disabled: { + description: 'Sets disabled state on Accordion Item', + table: { + defaultValue: { summary: false }, + }, + control: 'boolean', + defaultValue: false, + }, + headingLevel: { + description: 'Sets `aria-level` attribute on Accordion Item heading', + table: { + defaultValue: { summary: '2' }, + }, + control: { + type: 'select', + options: ['1', '2', '3', '4', '5', '6'], + }, + defaultValue: '2', + }, + }, +} as AccordionStoryMeta; + +export const Accordion = renderComponent(storyTemplate).bind({}); + +export const AccordionWithCustomIcons = renderComponent(html` + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 1 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 2 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 3 + Accordion Panel 1 + + +`); + +export const AccordionWithPresentationIcons = renderComponent(html` + + + ${eye20Regular} + ${eyeOff20Regular} + Accordion Header 1 + Accordion Panel 1 + + + ${eye20Regular} + ${eyeOff20Regular} + Accordion Header 2 + Accordion Panel 1 + + + ${eye20Regular} + ${eyeOff20Regular} + Accordion Header 3 + Accordion Panel 1 + + +`); diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts new file mode 100644 index 00000000000000..27ef26a8101e83 --- /dev/null +++ b/packages/web-components/src/accordion/accordion.styles.ts @@ -0,0 +1,11 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; + +export const styles = css` + ${display('flex')} + + :host { + flex-direction: column; + width: 100%; + } +`; diff --git a/packages/web-components/src/accordion/accordion.template.ts b/packages/web-components/src/accordion/accordion.template.ts new file mode 100644 index 00000000000000..f1a1d903ecd007 --- /dev/null +++ b/packages/web-components/src/accordion/accordion.template.ts @@ -0,0 +1,5 @@ +import { ElementViewTemplate } from '@microsoft/fast-element'; +import { accordionTemplate } from '@microsoft/fast-foundation'; +import type { Accordion } from './accordion.js'; + +export const template: ElementViewTemplate = accordionTemplate(); diff --git a/packages/web-components/src/accordion/accordion.ts b/packages/web-components/src/accordion/accordion.ts new file mode 100644 index 00000000000000..ba6f6432fbf671 --- /dev/null +++ b/packages/web-components/src/accordion/accordion.ts @@ -0,0 +1,7 @@ +import { FASTAccordion } from '@microsoft/fast-foundation'; + +/** + * The base class used for constructing a fluent-accordion custom element + * @public + */ +export class Accordion extends FASTAccordion {} diff --git a/packages/web-components/src/accordion/define.ts b/packages/web-components/src/accordion/define.ts new file mode 100644 index 00000000000000..b3b6469ee7c250 --- /dev/null +++ b/packages/web-components/src/accordion/define.ts @@ -0,0 +1,4 @@ +import { FluentDesignSystem } from '../fluent-design-system.js'; +import { definition } from './accordion.definition.js'; + +definition.define(FluentDesignSystem.registry); diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts new file mode 100644 index 00000000000000..c6b994bfc7c025 --- /dev/null +++ b/packages/web-components/src/accordion/index.ts @@ -0,0 +1,4 @@ +export * from './accordion.js'; +export { template as accordionTemplate } from './accordion.template.js'; +export { styles as accordionStyles } from './accordion.styles.js'; +export { definition as accordionDefinition } from './accordion.definition.js'; diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 78cf3190790a69..23376a3e515d8a 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -1,3 +1,5 @@ +export * from './accordion/index.js'; +export * from './accordion-item/index.js'; export * from './badge/index.js'; export * from './counter-badge/index.js'; export * from './progress-bar/index.js';