-
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 Dropdown component (refs #DS-395)
- Loading branch information
Showing
11 changed files
with
168 additions
and
0 deletions.
There are no files selected for viewing
35 changes: 35 additions & 0 deletions
35
packages/web-twig/src/Resources/components/Dropdown/Dropdown.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,35 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
| {%- set _class = props.class | default(null) -%} | ||
| {%- set _breakpoint = props.breakpoint -%} | ||
| {%- set _elementType = props.elementType | default('div') -%} | ||
| {%- set _isFullWidth = props.isFullWidth | default(false) | boolprop -%} | ||
| {%- set _placement = props.placement | default('bottom-left') -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%} | ||
| {%- set _fullWidthClassName = _isFullWidth ? _spiritClassPrefix ~ 'Dropdown--fullWidth' : null -%} | ||
| {%- set _topClassName = _spiritClassPrefix ~ 'Dropdown--top' -%} | ||
| {%- set _bottomClassName = _spiritClassPrefix ~ 'Dropdown--bottom' -%} | ||
| {%- set _rightClassName = _spiritClassPrefix ~ 'Dropdown--right' -%} | ||
| {%- set _leftClassName = _spiritClassPrefix ~ 'Dropdown--left' -%} | ||
|
|
||
| {# Attributes #} | ||
| {%- set _breakpointAttr = _breakpoint ? 'data-breakpoint=' ~ _breakpoint ~ '' : null -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _placementClassNames = { | ||
| 'bottom-left': [ _bottomClassName, _leftClassName ], | ||
| 'bottom-right': [ _bottomClassName, _rightClassName ], | ||
| 'top-left': [ _topClassName, _leftClassName ], | ||
| 'top-right': [ _topClassName, _rightClassName ] | ||
| } -%} | ||
| {%- set _classNames = [ _rootClassName, _fullWidthClassName, _class ] | merge(_placementClassNames[_placement]) -%} | ||
|
|
||
| <{{ _elementType }} | ||
| {{ mainProps(props) }} | ||
| {{ classProp(_classNames) }} | ||
| {{ _breakpointAttr }} | ||
| > | ||
| {%- block content %}{% endblock -%} | ||
| </{{ _elementType }}> |
17 changes: 17 additions & 0 deletions
17
packages/web-twig/src/Resources/components/Dropdown/DropdownWrapper.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,17 @@ | ||
| {# API #} | ||
| {%- set props = props | default([]) -%} | ||
| {%- set _class = props.class | default(null) -%} | ||
| {%- set _elementType = props.elementType | default('div') -%} | ||
|
|
||
| {# Class names #} | ||
| {%- set _rootClassName = _spiritClassPrefix ~ 'DropdownWrapper' -%} | ||
|
|
||
| {# Miscellaneous #} | ||
| {%- set _classNames = [ _rootClassName, _class ] -%} | ||
|
|
||
| <{{ _elementType }} | ||
| {{ mainProps(props) }} | ||
| {{ classProp(_classNames) }} | ||
| > | ||
| {%- block content %}{% endblock -%} | ||
| </{{ _elementType }}> |
87 changes: 87 additions & 0 deletions
87
packages/web-twig/src/Resources/components/Dropdown/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,87 @@ | ||
| # Dropdown | ||
|
|
||
| This is the Twig implementation of the [Dropdown] component. | ||
|
|
||
| Basic example usage: | ||
|
|
||
| ```twig | ||
| <DropdownWrapper> | ||
| <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button> | ||
| <Dropdown id="DropdownExample">Dropdown Content</Dropdown> | ||
| </DropdownWrapper> | ||
| ``` | ||
|
|
||
| Full width on mobile | ||
|
|
||
| ```twig | ||
| <DropdownWrapper> | ||
| <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button> | ||
| <Dropdown id="DropdownExample" isFullWidth breakpoint="tablet">Dropdown Content</Dropdown> | ||
| </DropdownWrapper> | ||
| ``` | ||
|
|
||
| Advanced example usage with positioning: | ||
|
|
||
| ```twig | ||
| <DropdownWrapper> | ||
| <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button> | ||
| <Dropdown elementType="span" id="DropdownExample" class="custom-dropdown-class" placement="top-right" isFullWidth>Dropdown Content</Dropdown> | ||
| </DropdownWrapper> | ||
| ``` | ||
|
|
||
| Without lexer: | ||
|
|
||
| ```twig | ||
| {% embed "@spirit/dropdownWrapper.twig" %} | ||
| {% block content %} | ||
| {% embed "@spirit/dropdown.twig" with { props: { | ||
| breakpoint: 'tablet', | ||
| class: 'dropdown-custom-class', | ||
| elementType: 'span', | ||
| isFullWidth: true, | ||
| placement: 'top-right' | ||
| }} %} | ||
| {% block content %} | ||
| Dropdown content | ||
| {% endblock %} | ||
| {% endembed %} | ||
| {% endblock %} | ||
| {% endembed %} | ||
| ``` | ||
|
|
||
| You can add any custom trigger like a `<Button>` but it is necessary to add `data-toggle="dropdown"`, `data-target="<id>"` | ||
| attributes to register trigger events. | ||
|
|
||
| ## API | ||
|
|
||
| ### Dropdown | ||
|
|
||
| | Prop name | Type | Default | Required | Description | | ||
| | ------------- | -------------------------------------------------------- | ------------- | -------- | -------------------------------------------- | | ||
| | `id` | `string` | - | yes | Dropdown ID | | ||
| | `breakpoint` | `string` | - | no | Breakpoint level [tablet,desktop] | | ||
| | `class` | `string` | `null` | no | Custom CSS class | | ||
| | `elementType` | `string` | `div` | no | HTML tag to render | | ||
| | `isFullWidth` | `boolean` | `false` | no | Whether is component displayed in full width | | ||
| | `placement` | [`bottom-left`, `bottom-right`, `top-left`, `top-right`] | `bottom-left` | no | Alignment of the component | | ||
|
|
||
| ### Trigger attributes | ||
|
|
||
| | Prop name | Type | Default | Required | Description | | ||
| | --------------- | -------- | ---------- | -------- | -------------------------- | | ||
| | `data-toggle` | `string` | `dropdown` | yes | Iterable selector | | ||
| | `data-target` | `string` | - | yes | Target selector | | ||
| | `aria-expanded` | `string` | - | no | Aria expanded state (auto) | | ||
| | `aria-controls` | `string` | - | no | Aria controls state (auto) | | ||
|
|
||
| Other necessary attributes are toggled automatically, like `aria-controls` and `aria-expanded` when the component is loaded | ||
| or the width of the window is changed. There can be several triggers, the same rules apply to each. | ||
|
|
||
| ### DropdownWrapper | ||
|
|
||
| | Prop name | Type | Default | Required | Description | | ||
| | ------------- | -------- | ------- | -------- | ------------------ | | ||
| | `class` | `string` | `null` | no | Custom CSS class | | ||
| | `elementType` | `string` | `div` | no | HTML tag to render | | ||
|
|
||
| [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown |
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/Dropdown/Dropdown.twig' %} |
1 change: 1 addition & 0 deletions
1
packages/web-twig/src/Resources/twig-components/dropdownWrapper.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/Dropdown/DropdownWrapper.twig' %} |
8 changes: 8 additions & 0 deletions
8
...sts/__snapshots__/ComponentsSnapshotTest__test with data set dropdownDefault.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,8 @@ | ||
| <html><body> | ||
| <div class="Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left">Content</div> | ||
| <div id="DropdownExample" class="Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left">Content</div> | ||
| <div id="DropdownExample2" class="Dropdown Dropdown--fullWidth custom-dropdown-class Dropdown--bottom Dropdown--left">Content</div> | ||
| <div id="DropdownExample3" data-breakpoint="tablet" class="Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left">Content</div> | ||
| <div id="DropdownExample4" class="Dropdown Dropdown--fullWidth Dropdown--bottom Dropdown--left">Content</div> | ||
| <div id="DropdownExample5" class="Dropdown Dropdown--fullWidth Dropdown--top Dropdown--right">Content</div> | ||
| </body></html> |
5 changes: 5 additions & 0 deletions
5
.../tests/__snapshots__/ComponentsSnapshotTest__test with data set dropdownFull.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,5 @@ | ||
| <html><body> | ||
| <div class="DropdownWrapper"> <button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false" class="Button Button--primary Button--medium" type="button">Open Dropdown</button> | ||
| <span id="DropdownExample" class="Dropdown Dropdown--fullWidth custom-dropdown-class Dropdown--top Dropdown--right">Dropdown Content</span> | ||
| </div> | ||
| </body></html> |
3 changes: 3 additions & 0 deletions
3
...napshots__/ComponentsSnapshotTest__test with data set dropdownWrapperDefault.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,3 @@ | ||
| <html><body> | ||
| <div class="DropdownWrapper">Content</div> | ||
| </body></html> |
6 changes: 6 additions & 0 deletions
6
packages/web-twig/tests/components-fixtures/dropdownDefault.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 @@ | ||
| <Dropdown>Content</Dropdown> | ||
| <Dropdown id="DropdownExample">Content</Dropdown> | ||
| <Dropdown id="DropdownExample2" class="custom-dropdown-class">Content</Dropdown> | ||
| <Dropdown id="DropdownExample3" breakpoint="tablet">Content</Dropdown> | ||
| <Dropdown id="DropdownExample4" isFullWidth>Content</Dropdown> | ||
| <Dropdown id="DropdownExample5" placement="top-right">Content</Dropdown> |
4 changes: 4 additions & 0 deletions
4
packages/web-twig/tests/components-fixtures/dropdownFull.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,4 @@ | ||
| <DropdownWrapper> | ||
| <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button> | ||
| <Dropdown elementType="span" id="DropdownExample" class="custom-dropdown-class" placement="top-right" isFullWidth>Dropdown Content</Dropdown> | ||
| </DropdownWrapper> |
1 change: 1 addition & 0 deletions
1
packages/web-twig/tests/components-fixtures/dropdownWrapperDefault.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 @@ | ||
| <DropdownWrapper>Content</DropdownWrapper> |