-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(description-list, tab): storybook docs
- Loading branch information
Showing
10 changed files
with
168 additions
and
89 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
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
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,27 @@ | ||
| ## Title and subtitle slots | ||
|
|
||
| Title and subtitle are optional items. They provide more context to the subtitle list as a group | ||
|
|
||
| Use `slot=title` and `slot=subtitle` to pass in title and subtitle | ||
|
|
||
| <Canvas of={DescriptionListStories.OptionalTitleDescription}> | ||
| <Story of={DescriptionListStories.OptionalTitleDescription} /> | ||
| </Canvas> | ||
|
|
||
|
|
||
| ## Stacked layout | ||
|
|
||
| By default, the layout of description list is inline. Add boolean `stacked` attribute to `SgdsDescriptionListGroup` for a stacked layout | ||
|
|
||
| <Canvas of={DescriptionListStories.Stacked}> | ||
| <Story of={DescriptionListStories.Stacked} /> | ||
| </Canvas> | ||
|
|
||
|
|
||
| ## Bordered | ||
|
|
||
| By default, there are no borders to the description list. Add `bordered` attribute to `SgdsDescriptionListGroup` for a bordered description list | ||
|
|
||
| <Canvas of={DescriptionListStories.Bordered}> | ||
| <Story of={DescriptionListStories.Bordered} /> | ||
| </Canvas> |
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,21 @@ | ||
| export const OptionalTitleDescription = { | ||
| render: Template.bind({}), | ||
| name: "Optional title and subtitle", | ||
| args: { title: true, subtitle: true }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
| export const Stacked = { | ||
| render: Template.bind({}), | ||
| name: "Stacked layout", | ||
| args: { stacked: true }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
| export const Bordered = { | ||
| render: Template.bind({}), | ||
| name: "Bordered", | ||
| args: { bordered: true }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; |
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 was deleted.
Oops, something went wrong.
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,51 @@ | ||
| ## Variants | ||
|
|
||
| The variants of tab is controlled by `SgdsTabGroup` | ||
| The default tab variant is `underlined`. Modify the `variant` prop to achieve solid tabs | ||
|
|
||
| ### Underlined tabs (default) | ||
|
|
||
| <Canvas of={TabStories.Basic}> | ||
| <Story of={TabStories.Basic} /> | ||
| </Canvas> | ||
|
|
||
| ### Solid tabs | ||
|
|
||
| <Canvas of={TabStories.SolidVariant}> | ||
| <Story of={TabStories.SolidVariant} /> | ||
| </Canvas> | ||
|
|
||
| ## Density | ||
|
|
||
| The density of tabs is controlled by `SgdsTabGroup`. For a more compact tabs, modify `density` prop to `compact` | ||
|
|
||
|
|
||
| ### Compact underlined tabs | ||
|
|
||
| <Canvas of={TabStories.UnderlinedDensityCompact}> | ||
| <Story of={TabStories.UnderlinedDensityCompact} /> | ||
| </Canvas> | ||
|
|
||
| ### Compact solid tabs | ||
|
|
||
| <Canvas of={TabStories.SolidDensityCompact}> | ||
| <Story of={TabStories.SolidDensityCompact} /> | ||
| </Canvas> | ||
|
|
||
| ## Orientation | ||
|
|
||
| Tabs can also be of horizontal or vertical orientation. | ||
| The orientation of tabs is controlled by `SgdsTabGroup`. | ||
| By default, tabs are presented horizontally. Set `orientation` to `vertical` for vertical tabs | ||
|
|
||
| ### Vertical underlined tabs | ||
|
|
||
| <Canvas of={TabStories.OrientationUnderlined}> | ||
| <Story of={TabStories.OrientationUnderlined} /> | ||
| </Canvas> | ||
|
|
||
| ### Vertical solid tabs | ||
|
|
||
| <Canvas of={TabStories.OrientationSolid}> | ||
| <Story of={TabStories.OrientationSolid} /> | ||
| </Canvas> |
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,36 @@ | ||
| export const SolidVariant = { | ||
| render: Template.bind({}), | ||
| name: "Solid variant", | ||
| args: { variant: "solid" }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
| export const UnderlinedDensityCompact = { | ||
| render: Template.bind({}), | ||
| name: "Compact density for underlined tabs", | ||
| args: { density: "compact" }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
| export const SolidDensityCompact = { | ||
| render: Template.bind({}), | ||
| name: "Compact density for solid tabs", | ||
| args: { density: "compact", variant: "solid" }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
|
|
||
| export const OrientationUnderlined = { | ||
| render: Template.bind({}), | ||
| name: "Vertical orientation for underlined tabs", | ||
| args: { orientation: "vertical" }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
| export const OrientationSolid = { | ||
| render: Template.bind({}), | ||
| name: "Vertical orientation for solid tabs", | ||
| args: { orientation: "vertical", variant: "solid" }, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; |
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