-
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.
chore(*): update breadcrumb, modal, icon button to storybook
- Loading branch information
Showing
20 changed files
with
401 additions
and
73 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
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 |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| :host { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .btn.btn-icon { | ||
| display: flex; | ||
| width: var(--sgds-dimension-48, 56px); | ||
|
|
||
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,13 @@ | ||
| ## Pass in anchor tags in default slot of `sgds-breadcrumb-item` | ||
|
|
||
| For better SEO, anchor tags are to be passed by the user in the light dom or the slot of `sgds-breadcrumb-item`. | ||
| Every `sgds-breadcrumb-item` requires an anchor element. | ||
|
|
||
| ## Overflow menu | ||
|
|
||
| Breadcrumb should show up to 4 breadcrumb items. Beyond that, the breadcrumb component will be re-grouped the excess items and render in a overflow dropdown menu automatically, displaying only the first , second last and last links | ||
|
|
||
|
|
||
| <Canvas of={BreadcrumbStories.Overflow}> | ||
| <Story of={BreadcrumbStories.Overflow} /> | ||
| </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,29 @@ | ||
| import { html } from "lit-html"; | ||
|
|
||
| const OverflowTemplate = args => { | ||
| return html` | ||
| <sgds-breadcrumb> | ||
| <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">About</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">Contacts</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">Link-1</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">Link-2</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">Link-3</a></sgds-breadcrumb-item> | ||
| <sgds-breadcrumb-item><a href="#">Link-4</a></sgds-breadcrumb-item> | ||
| </sgds-breadcrumb> | ||
| `; | ||
| }; | ||
|
|
||
| export const Overflow = { | ||
| render: OverflowTemplate.bind({}), | ||
| name: "Overflow", | ||
| args: {}, | ||
| parameters: { | ||
| docs: { | ||
| story: { | ||
| height: "500px" | ||
| } | ||
| } | ||
| }, | ||
| 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 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,41 @@ | ||
| ## Variants | ||
|
|
||
| The default variant is `primary`. Modify the `variant` prop to the intended value. | ||
|
|
||
| - Use `primary` buttons to show the key action on a page or view. Most pages should only have one primary action. | ||
| - Use `outlined` buttons next to primary buttons to indicate alternative or less pronounced actions. | ||
| - Use `ghost` button for supplementary action as they are subtle in their appearance | ||
| - Use `danger` buttons to remove things or for irreversible actions. | ||
|
|
||
| <Canvas of={IconButtonStories.Variants}> | ||
| <Story of={IconButtonStories.Variants} /> | ||
| </Canvas> | ||
|
|
||
| ## Sizes | ||
|
|
||
| The default button size is medium. Add `size="lg"`,` size="sm"` for additional sizes. | ||
|
|
||
| - Large buttons are used sparingly across the UI. They may be used for page components that demand attention, such as on the homepage banner. | ||
| - The medium (default) button is the standard size for buttons everywhere. | ||
| - Small button should be used sparingly and only in places where the UI is very dense. | ||
|
|
||
| <Canvas of={IconButtonStories.Sizes}> | ||
| <Story of={IconButtonStories.Sizes} /> | ||
| </Canvas> | ||
|
|
||
| ## Hover / Active state | ||
|
|
||
| To set a button's active state, set the component's `active` prop. | ||
|
|
||
| <Canvas of={IconButtonStories.Active}> | ||
| <Story of={IconButtonStories.Active} /> | ||
| </Canvas> | ||
|
|
||
| ## Disabled state | ||
|
|
||
| The disabled state indicates that an action can’t be taken until a previous action is completed. | ||
| Add `disabled` prop to the button to apply the disabled state | ||
|
|
||
| <Canvas of={IconButtonStories.Disabled}> | ||
| <Story of={IconButtonStories.Disabled} /> | ||
| </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,62 @@ | ||
| import { html } from "lit-html"; | ||
|
|
||
| const VariantTemplate = args => { | ||
| return html` | ||
| <sgds-icon-button variant="primary" name="plus"></sgds-icon-button> | ||
| <sgds-icon-button variant="outline" name="dash"></sgds-icon-button> | ||
| <sgds-icon-button variant="danger" name="three-dots"></sgds-icon-button> | ||
| <sgds-icon-button variant="ghost" name="star"></sgds-icon-button> | ||
| `; | ||
| }; | ||
|
|
||
| export const Variants = { | ||
| render: VariantTemplate.bind({}), | ||
| name: "Variants", | ||
| args: {}, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
|
|
||
| const SizeTemplate = () => { | ||
| return html`<sgds-icon-button size="sm" name="plus"></sgds-icon-button> | ||
| <sgds-icon-button name="plus"></sgds-icon-button> | ||
| <sgds-icon-button size="lg" name="plus"></sgds-icon-button>`; | ||
| }; | ||
|
|
||
| export const Sizes = { | ||
| render: SizeTemplate.bind({}), | ||
| name: "Sizes", | ||
| args: {}, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
|
|
||
| const ActiveTemplate = () => { | ||
| return html` | ||
| <sgds-icon-button variant="primary" active name="plus"></sgds-icon-button> | ||
| <sgds-icon-button variant="outline" active name="dash"></sgds-icon-button> | ||
| <sgds-icon-button variant="danger" active name="three-dots"></sgds-icon-button> | ||
| <sgds-icon-button variant="ghost" active name="star"></sgds-icon-button> | ||
| `; | ||
| }; | ||
|
|
||
| export const Active = { | ||
| render: ActiveTemplate.bind({}), | ||
| name: "Hover / Active state", | ||
| args: {}, | ||
| parameters: {}, | ||
| tags: ["!dev"] | ||
| }; | ||
|
|
||
| export const Disabled = { | ||
| render: () => html` | ||
| <sgds-icon-button variant="primary" disabled name="plus"></sgds-icon-button> | ||
| <sgds-icon-button variant="outline" disabled name="dash"></sgds-icon-button> | ||
| <sgds-icon-button variant="ghost" disabled name="three-dots"></sgds-icon-button> | ||
| <sgds-icon-button variant="danger" disabled name="star"></sgds-icon-button> | ||
| `, | ||
| name: "Disabled state", | ||
| args: {}, | ||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,13 @@ | ||
| import { html } from "lit-html"; | ||
| import { ifDefined } from "lit/directives/if-defined.js"; | ||
|
|
||
| export const Template = args => html`<sgds-icon-button></sgds-icon-button>`; | ||
| export const Template = args => html` <sgds-icon-button | ||
| name=${ifDefined(args.name)} | ||
| variant=${ifDefined(args.variant)} | ||
| ></sgds-icon-button>`; | ||
|
|
||
| export const args = {}; | ||
| export const args = { | ||
| name: "plus" | ||
| }; | ||
|
|
||
| export const parameters = {}; |
Oops, something went wrong.