-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(docs): update tabs, tabpanel, and tab docs to match new story str…
…ucture
- Loading branch information
1 parent
adedc51
commit 2ec8744
Showing
7 changed files
with
146 additions
and
157 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
10 changes: 10 additions & 0 deletions
10
libs/core/src/components/sage-tab/stories/sage-tab.stories.js
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,10 @@ | ||
| import { html, render } from 'lit-html'; | ||
|
|
||
| export const BaseTemplate = (args) => html` | ||
| <sage-tabs component-id="tab-example" active-tab="tab-one" tablist-label="Foo"> | ||
| <sage-tab tab="tab-one">Tab</sage-tab> | ||
| <sage-tabpanel tab="tab-one">Tab Panel</sage-tabpanel> | ||
| </sage-tabs> | ||
| `; | ||
|
|
||
| export const Default = BaseTemplate.bind({}); |
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
10 changes: 10 additions & 0 deletions
10
libs/core/src/components/sage-tabpanel/stories/sage-tabpanel.stories.js
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,10 @@ | ||
| import { html, render } from 'lit-html'; | ||
|
|
||
| export const BaseTemplate = (args) => html` | ||
| <sage-tabs component-id="tabpanel-example" active-tab="tab-one" tablist-label="Foo"> | ||
| <sage-tab tab="tab-one">Tab</sage-tab> | ||
| <sage-tabpanel tab="tab-one">Tab Panel</sage-tabpanel> | ||
| </sage-tabs> | ||
| `; | ||
|
|
||
| export const Default = BaseTemplate.bind({}); |
69 changes: 69 additions & 0 deletions
69
libs/core/src/components/sage-tabs/stories/sage-tabs.docs.stories.mdx
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,69 @@ | ||
| import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; | ||
| import { html, render } from 'lit-html'; | ||
|
|
||
| import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil'; | ||
|
|
||
| import * as stories from './sage-tabs.stories.js'; | ||
|
|
||
| <Meta title="components/tabs" component="sage-tabs" argTypes={extractArgTypes('sage-tabs')} /> | ||
|
|
||
| # Tabs | ||
|
|
||
| A tabs component to generate all versions of `sage-tab` as outlined in [Figma](https://www.figma.com/file/sMbtLUHSt2vfKgKjyQ3052/%F0%9F%A7%A9-Sage-components?node-id=488%3A43471&t=5FtThY98rugq7hGi-1). | ||
|
|
||
| ## Sub Components | ||
|
|
||
| ### [Tab](/docs/components-tabs-tab--default-story) | ||
|
|
||
| Handles tab logic, requires a unique `tab` property to be passed | ||
|
|
||
| ### [Tabpanel](/docs/components-tabs-tabpanel--default-story) | ||
|
|
||
| Handles tabpanel logic, requires a matching `tab` property to be passed | ||
|
|
||
| ## Accessibility | ||
|
|
||
| This component has been built to align with the [W3C Aria best practices for tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). You get all tabbing, keyboard navigation, focus states, and aria information applied automatically. | ||
|
|
||
| In order for all accessibility to properly compile, you must provide a few required properties to the component. | ||
|
|
||
| **1. A well named `tablist-label`:** Provides context to screen readers about what kind of tablist information is being presented | ||
|
|
||
| **2. A unique `component-id`:** Provides a unique `id` to the tabs component, be sure it doesn't match any other `id`'s on the page | ||
|
|
||
| ## Properties | ||
|
|
||
| <ArgsTable of="sage-tabs" /> | ||
|
|
||
| ## Variant | ||
|
|
||
| ### Default (Primary) | ||
|
|
||
| Default tabs styles | ||
|
|
||
| <Canvas> | ||
| <Story story={stories.Primary} /> | ||
| </Canvas> | ||
|
|
||
|
|
||
| ### Availability | ||
|
|
||
| Tabs with a more literal tab feeling, used for things like dates or times | ||
|
|
||
| <Canvas> | ||
| <Story story={stories.Availability} /> | ||
| </Canvas> | ||
|
|
||
| ### Filter | ||
|
|
||
| Pill shaped tabs for filtering data or content | ||
|
|
||
| Note: Tabs are likely not a good component to add filtered data to on tab click as each tab has a unique tabpanel associated with it and all content within that panel will change upon tab click | ||
|
|
||
| <Canvas> | ||
| <Story story={stories.Filter} /> | ||
| </Canvas> | ||
|
|
||
| ## Additional Resources | ||
|
|
||
| [W3C Aria best practices for tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) |
49 changes: 49 additions & 0 deletions
49
libs/core/src/components/sage-tabs/stories/sage-tabs.stories.js
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,49 @@ | ||
| import { html, render } from 'lit-html'; | ||
|
|
||
| const BaseTemplate = (args) => html` | ||
| <sage-tabs active-tab=${args.activeTab} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}> | ||
| <sage-tab tab="one">One</sage-tab> | ||
| <sage-tab tab="two">Two</sage-tab> | ||
| <sage-tab tab="three">Three</sage-tab> | ||
| <sage-tabpanel tab="one">Content 1</sage-tabpanel> | ||
| <sage-tabpanel tab="two">Content 2</sage-tabpanel> | ||
| <sage-tabpanel tab="three">Content 3</sage-tabpanel> | ||
| </sage-tabs> | ||
| `; | ||
|
|
||
| const AvailabilityTemplate = (args) => html` | ||
| <div style="background-color: #ddd; padding: 20px;"> | ||
| <sage-tabs active-tab=${args.activeTab} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}> | ||
| <sage-tab tab="one">One</sage-tab> | ||
| <sage-tab tab="two">Two</sage-tab> | ||
| <sage-tab tab="three">Three</sage-tab> | ||
| <sage-tabpanel tab="one">Content 1</sage-tabpanel> | ||
| <sage-tabpanel tab="two">Content 2</sage-tabpanel> | ||
| <sage-tabpanel tab="three">Content 3</sage-tabpanel> | ||
| </sage-tabs> | ||
| </div> | ||
| `; | ||
|
|
||
| export const Primary = BaseTemplate.bind({}); | ||
| Primary.args = { | ||
| activeTab: "two", | ||
| componentId: "primary", | ||
| variant: "primary", | ||
| tablistLabel: "Foo", | ||
| } | ||
|
|
||
| export const Availability = AvailabilityTemplate.bind({}); | ||
| Availability.args = { | ||
| activeTab: "two", | ||
| componentId: "availability", | ||
| variant: 'availability', | ||
| tablistLabel: "Foo", | ||
| } | ||
|
|
||
| export const Filter = BaseTemplate.bind({}); | ||
| Filter.args = { | ||
| activeTab: "two", | ||
| componentId: "filter", | ||
| variant: 'filter', | ||
| tablistLabel: "Foo", | ||
| } |
133 changes: 0 additions & 133 deletions
133
libs/core/src/components/sage-tabs/stories/sage-tabs.stories.mdx
This file was deleted.
Oops, something went wrong.