-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 🤨 Rationale Addresses #479 ## 👩💻 Implementation - Created `nimble-anchor-tabs` component with implementation starting from the FAST foundation tabs component. - Created `nimble-anchor-tab` component. - Updated and moved existing styling for `nimble-tab` into shared `patterns/tab` location. Shared styling used for `nimble-anchor-tab`, too. - Wrote unit tests for both new components. Because the `nimble-anchor-tabs` component is heavily modified from the original FAST source, I created comprehensive tests of public API and interactions. - Created Storybook stories - Updated README table Angular and Blazor support will be in follow-up PRs ## 🧪 Testing Wrote unit tests and tested in Storybook. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
- Loading branch information
Showing
17 changed files
with
963 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-components-60beeec6-9cec-44db-a7d5-8588b0862986.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Anchor tabs component", | ||
| "packageName": "@ni/nimble-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { attr } from '@microsoft/fast-element'; | ||
| import { | ||
| DesignSystem, | ||
| FoundationElementDefinition, | ||
| StartEndOptions | ||
| } from '@microsoft/fast-foundation'; | ||
| import { AnchorBase } from '../anchor-base'; | ||
| import { styles } from './styles'; | ||
| import { template } from './template'; | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'nimble-anchor-tab': AnchorTab; | ||
| } | ||
| } | ||
|
|
||
| export type TabOptions = FoundationElementDefinition & StartEndOptions; | ||
|
|
||
| /** | ||
| * A nimble-styled link tab | ||
| */ | ||
| export class AnchorTab extends AnchorBase { | ||
| /** | ||
| * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information. | ||
| * @public | ||
| * @remarks | ||
| * HTML Attribute: disabled | ||
| */ | ||
| @attr({ mode: 'boolean' }) | ||
| public disabled = false; | ||
| } | ||
|
|
||
| const nimbleAnchorTab = AnchorTab.compose({ | ||
| baseName: 'anchor-tab', | ||
| template, | ||
| styles | ||
| }); | ||
|
|
||
| DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { css } from '@microsoft/fast-element'; | ||
| import { styles as tabStyles } from '../patterns/tab/styles'; | ||
|
|
||
| export const styles = css` | ||
| ${tabStyles} | ||
| a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| cursor: inherit; | ||
| outline: none; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { html, ViewTemplate } from '@microsoft/fast-element'; | ||
| import type { FoundationElementTemplate } from '@microsoft/fast-foundation'; | ||
| import type { AnchorTab, TabOptions } from '.'; | ||
|
|
||
| export const template: FoundationElementTemplate< | ||
| ViewTemplate<AnchorTab>, | ||
| TabOptions | ||
| > = () => html<AnchorTab>` | ||
| <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}"> | ||
| <a | ||
| download="${x => x.download}" | ||
| href=${x => (x.disabled ? null : x.href)} | ||
| hreflang="${x => x.hreflang}" | ||
| ping="${x => x.ping}" | ||
| referrerpolicy="${x => x.referrerpolicy}" | ||
| rel="${x => x.rel}" | ||
| target="${x => x.target}" | ||
| type="${x => x.type}" | ||
| tabindex="-1" | ||
| > | ||
| <slot></slot> | ||
| </a> | ||
| </template> | ||
| `; |
63 changes: 63 additions & 0 deletions
63
packages/nimble-components/src/anchor-tab/tests/anchor-tab.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { DOM, html } from '@microsoft/fast-element'; | ||
| import { AnchorTab } from '..'; | ||
| import { Fixture, fixture } from '../../utilities/tests/fixture'; | ||
| import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized'; | ||
|
|
||
| async function setup(): Promise<Fixture<AnchorTab>> { | ||
| return fixture<AnchorTab>(html`<nimble-anchor-tab></nimble-anchor-tab>`); | ||
| } | ||
|
|
||
| describe('AnchorTab', () => { | ||
| let element: AnchorTab; | ||
| let connect: () => Promise<void>; | ||
| let disconnect: () => Promise<void>; | ||
|
|
||
| beforeEach(async () => { | ||
| ({ element, connect, disconnect } = await setup()); | ||
| }); | ||
|
|
||
| afterEach(async () => { | ||
| await disconnect(); | ||
| }); | ||
|
|
||
| it('can construct an element instance', () => { | ||
| expect(document.createElement('nimble-anchor-tab')).toBeInstanceOf( | ||
| AnchorTab | ||
| ); | ||
| }); | ||
|
|
||
| const attributeNames: { name: string }[] = [ | ||
| { name: 'download' }, | ||
| { name: 'href' }, | ||
| { name: 'hreflang' }, | ||
| { name: 'ping' }, | ||
| { name: 'referrerpolicy' }, | ||
| { name: 'rel' }, | ||
| { name: 'target' }, | ||
| { name: 'type' } | ||
| ]; | ||
| describe('should reflect value to the internal anchor element', () => { | ||
| const focused: string[] = []; | ||
| const disabled: string[] = []; | ||
| for (const attribute of attributeNames) { | ||
| const specType = getSpecTypeByNamedList( | ||
| attribute, | ||
| focused, | ||
| disabled | ||
| ); | ||
| // eslint-disable-next-line @typescript-eslint/no-loop-func | ||
| specType(`for attribute ${attribute.name}`, async () => { | ||
| await connect(); | ||
|
|
||
| element.setAttribute(attribute.name, 'foo'); | ||
| await DOM.nextUpdate(); | ||
|
|
||
| expect( | ||
| element | ||
| .shadowRoot!.querySelector('a')! | ||
| .getAttribute(attribute.name) | ||
| ).toBe('foo'); | ||
| }); | ||
| } | ||
| }); | ||
| }); |
Oops, something went wrong.