-
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): Introduce Modal component
- Loading branch information
Showing
7 changed files
with
145 additions
and
0 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
47 changes: 47 additions & 0 deletions
47
packages/web-twig/src/Resources/components/Modal/Modal.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,47 @@ | ||
| {# API #} | ||
| {%- set _class = props.class | default(null) -%} | ||
| {%- set _closeLabel = props.closeLabel | default('Close') -%} | ||
| {%- set _id = props.id -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _bodyClassName = _spiritClassPrefix ~ 'Modal__body' -%} | ||
| {%- set _closeClassName = _spiritClassPrefix ~ 'Modal__close' -%} | ||
| {%- set _contentClassName = _spiritClassPrefix ~ 'Modal__content' -%} | ||
| {%- set _dialogClassName = _spiritClassPrefix ~ 'Modal__dialog' -%} | ||
| {%- set _headerClassName = _spiritClassPrefix ~ 'Modal__header' -%} | ||
| {%- set _rootClassName = _spiritClassPrefix ~ 'Modal' -%} | ||
|
|
||
| {# Attributes #} | ||
| {%- set _idAttr = _id ? 'id=' ~ _id ~ '' : null -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _classNames = [ _rootClassName, _class ] -%} | ||
| {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%} | ||
|
|
||
| <dialog | ||
| {{ mainProps(_mainPropsWithoutId) }} | ||
| {{ classProp(_classNames) }} | ||
| {{ _idAttr }} | ||
| data-component="modal" | ||
| > | ||
| <div class="{{ _contentClassName }}"> | ||
| <div class="{{ _dialogClassName }}"> | ||
| <div class="{{ _headerClassName }}"> | ||
| <Button | ||
| aria-controls="{{ _id }}" | ||
| aria-expanded="false" | ||
| color="tertiary" | ||
| data-dismiss="modal" | ||
| data-target="{{ '#' ~ _id }}" | ||
| isSquare | ||
| > | ||
| <span class="{{ _closeClassName }}" aria-hidden="true"></span> | ||
| <span class="accessibility-hidden">{{ _closeLabel }}</span> | ||
| </Button> | ||
| </div> | ||
| <div class="{{ _bodyClassName }}"> | ||
| {% block content %}{% endblock %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </dialog> |
59 changes: 59 additions & 0 deletions
59
packages/web-twig/src/Resources/components/Modal/README.md
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,59 @@ | ||
| # Modal | ||
|
|
||
| This is Twig implementation of the [Modal] component. | ||
|
|
||
| Basic example usage: | ||
|
|
||
| ```html | ||
| <button | ||
| type="button" | ||
| data-toggle="modal" | ||
| data-target="#modal-example" | ||
| aria-controls="modal-example" | ||
| aria-expanded="false" | ||
| > | ||
| Open Modal | ||
| </button> | ||
| <Modal id="modal-example" /> | ||
| ``` | ||
|
|
||
| Advanced example usage: | ||
|
|
||
| ```html | ||
| <button | ||
| type="button" | ||
| data-toggle="modal" | ||
| data-target="#modal-example" | ||
| aria-controls="modal-example" | ||
| aria-expanded="false" | ||
| > | ||
| Open Modal | ||
| </button> | ||
| <Modal id="modal-example" closeLabel="Dismiss" /> | ||
| ``` | ||
|
|
||
| Without lexer: | ||
|
|
||
| ```twig | ||
| {% embed "@spirit/modal.twig" with { props: { | ||
| id: 'modal-example', | ||
| }} %} | ||
| {% block content %} | ||
| Modal content | ||
| {% endblock %} | ||
| {% endembed %} | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| | Prop name | Type | Default | Required | Description | | ||
| | ------------ | -------- | ------- | -------- | ------------------ | | ||
| | `class` | `string` | `null` | no | Custom CSS class | | ||
| | `closeLabel` | `string` | `Close` | no | Custom close label | | ||
| | `id` | `string` | — | yes | Modal ID | | ||
|
|
||
| On top of the API options, you can add `data-*` or `aria-*` attributes to | ||
| further extend component's descriptiveness and accessibility. These attributes | ||
| will be passed to the topmost HTML element of the component. | ||
|
|
||
| [modal]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Modal |
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/Modal/Modal.twig' %} |
30 changes: 30 additions & 0 deletions
30
.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html
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,30 @@ | ||
| <html><body> | ||
| <dialog class="Modal" id="modal-example" data-component="modal"> | ||
| <div class="Modal__content"> | ||
| <div class="Modal__dialog"> | ||
| <div class="Modal__header"> | ||
| <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--square" type="button"> <span class="Modal__close" aria-hidden="true"></span> | ||
| <span class="accessibility-hidden">Close</span> | ||
| </button> | ||
| </div> | ||
| <div class="Modal__body"> | ||
| Modal content | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </dialog> | ||
| <dialog class="Modal" id="modal-example-dismiss" data-component="modal"> | ||
| <div class="Modal__content"> | ||
| <div class="Modal__dialog"> | ||
| <div class="Modal__header"> | ||
| <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--square" type="button"> <span class="Modal__close" aria-hidden="true"></span> | ||
| <span class="accessibility-hidden">Dismiss</span> | ||
| </button> | ||
| </div> | ||
| <div class="Modal__body"> | ||
| Modal content | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </dialog> | ||
| </body></html> |
6 changes: 6 additions & 0 deletions
6
packages/web-twig/tests/components-fixtures/modalDefault.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,6 @@ | ||
| <Modal id="modal-example"> | ||
| Modal content | ||
| </Modal> | ||
| <Modal id="modal-example-dismiss" closeLabel="Dismiss"> | ||
| Modal content | ||
| </Modal> |