-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-twig): Add Message and Link for ToastBar #DS-1213
- Loading branch information
Showing
10 changed files
with
79 additions
and
35 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
26 changes: 26 additions & 0 deletions
26
packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
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,26 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
| {%- set _color = props.color | default('inverted') -%} | ||
| {%- set _href = props.href -%} | ||
| {%- set _isDisabled = props.isDisabled | default(false) -%} | ||
| {%- set _isUnderlined = props.isUnderlined | default(true) -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%} | ||
| {%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'link-disabled' : null -%} | ||
| {%- set _rootUnderlinedClassName = _isUnderlined ? _spiritClassPrefix ~ 'link-underlined' : null -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _styleProps = useStyleProps(props) -%} | ||
| {%- set _classNames = [ _colorClassName, _rootDisabledClassName, _rootUnderlinedClassName, _styleProps.className ] -%} | ||
| {%- set _allowedAttributes = [ 'target', 'title' ] -%} | ||
|
|
||
| <a | ||
| {{ mainProps(props, _allowedAttributes) }} | ||
| href="{{ _href }}" | ||
| {{ styleProp(_styleProps) }} | ||
| {{ classProp(_classNames) }} | ||
| > | ||
| {%- block content %}{% endblock %} | ||
| </a> | ||
|
|
14 changes: 14 additions & 0 deletions
14
packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
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,14 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _styleProps = useStyleProps(props) -%} | ||
| {%- set _classNames = [ _styleProps.className ] -%} | ||
|
|
||
| <div | ||
| {{ mainProps(props) }} | ||
| {{ styleProp(_styleProps) }} | ||
| {{ classProp(_classNames) }} | ||
| > | ||
| {% block content %}{% endblock %} | ||
| </div> |
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
20 changes: 10 additions & 10 deletions
20
packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
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,24 +1,24 @@ | ||
| <ToastBar id="my-toast-color-inverted" hasIcon isDismissible> | ||
| Inverted | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Inverted</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar color="informative" id="my-toast-color-informative" hasIcon isDismissible> | ||
| Informative | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage> Informative</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar color="success" id="my-toast-color-success" hasIcon isDismissible> | ||
| Success | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Success</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar color="warning" id="my-toast-color-warning" hasIcon isDismissible> | ||
| Warning | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Warning</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar color="danger" id="my-toast-color-danger" hasIcon isDismissible> | ||
| Danger | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Danger</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> |
22 changes: 12 additions & 10 deletions
22
packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
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,25 +1,27 @@ | ||
| <ToastBar>Message only</ToastBar> | ||
| <ToastBar> | ||
| <ToastBarMessage>Message only</ToastBarMessage> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar> | ||
| Message with action | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Message with action</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar> | ||
| When the text is long and reaches the maximum width limit, the action automatically wraps to the next line. | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar hasIcon> | ||
| Message with icon and action | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Message with icon and action</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar id="my-toast-variation-dismissible" isDismissible> | ||
| Dismissible message | ||
| <ToastBarMessage>Dismissible message</ToastBarMessage> | ||
| </ToastBar> | ||
|
|
||
| <ToastBar id="my-toast-variation-dismissible-with-icon-and-action" iconName="download" isDismissible> | ||
| Dismissible message with custom icon and action | ||
| <Link href="#" color="inverted" isUnderlined>Action</Link> | ||
| <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage> | ||
| <ToastBarLink href="#">Action</ToastBarLink> | ||
| </ToastBar> |
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
1 change: 1 addition & 0 deletions
1
packages/web-twig/src/Resources/twig-components/toastBarLink.twig
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 @@ | ||
| {% extends '@spirit/Toast/ToastBarLink.twig' %} |
1 change: 1 addition & 0 deletions
1
packages/web-twig/src/Resources/twig-components/toastBarMessage.twig
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 @@ | ||
| {% extends '@spirit/Toast/ToastBarMessage.twig' %} |