From eae000d40be8b56f127b627732ff7edfdbbb7308 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 10 Oct 2023 18:05:34 +0200 Subject: [PATCH] Feat(web-twig): Use the new Placement dictionary in `Dropdown` and `Tooltip` #DS-923 --- .../components/Dropdown/Dropdown.twig | 28 ++++- .../Resources/components/Dropdown/README.md | 31 ++---- .../__tests__/__fixtures__/dropdown.twig | 11 ++ .../__fixtures__/dropdownDefault.twig | 5 - .../__tests__/__fixtures__/dropdownFull.twig | 4 - .../__fixtures__/dropdownWrapper.twig | 1 + .../__fixtures__/dropdownWrapperDefault.twig | 1 - .../__snapshots__/dropdown.twig.snap.html | 17 +++ .../dropdownDefault.twig.snap.html | 28 ----- .../__snapshots__/dropdownFull.twig.snap.html | 13 --- ...ap.html => dropdownWrapper.twig.snap.html} | 2 +- .../Resources/components/Tooltip/README.md | 13 ++- .../components/Tooltip/Tooltip.stories.twig | 8 +- .../Resources/components/Tooltip/Tooltip.twig | 29 ++++- .../__tests__/__fixtures__/tooltip.twig | 11 ++ .../__fixtures__/tooltipDefault.twig | 1 - .../__fixtures__/tooltipDefaultPure.twig | 9 -- .../__fixtures__/tooltipWrapper.twig | 1 + ....twig.snap.html => tooltip.twig.snap.html} | 9 +- .../tooltipDefaultPure.twig.snap.html | 14 --- .../tooltipWrapper.twig.snap.html | 12 ++ .../Tooltip/stories/TooltipOnHover.twig | 51 +++++++++ .../Tooltip/stories/TooltipPlacements.twig | 104 +++++++++--------- ...TooltipDefault.twig => TooltipStatic.twig} | 0 24 files changed, 234 insertions(+), 169 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig delete mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownDefault.twig delete mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownFull.twig create mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapper.twig delete mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapperDefault.twig create mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html delete mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownDefault.twig.snap.html delete mode 100644 packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownFull.twig.snap.html rename packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/{dropdownWrapperDefault.twig.snap.html => dropdownWrapper.twig.snap.html} (92%) create mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltip.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefault.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefaultPure.twig create mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig rename packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/{tooltipDefault.twig.snap.html => tooltip.twig.snap.html} (76%) delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefaultPure.twig.snap.html create mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipWrapper.twig.snap.html create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig rename packages/web-twig/src/Resources/components/Tooltip/stories/{TooltipDefault.twig => TooltipStatic.twig} (100%) diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig index 4e2ced41f9..3db25d2b01 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig +++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig @@ -7,9 +7,17 @@ {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%} {%- set _topClassName = _spiritClassPrefix ~ 'Dropdown--top' -%} +{%- set _topLeftClassName = _spiritClassPrefix ~ 'Dropdown--topLeft' -%} +{%- set _topRightClassName = _spiritClassPrefix ~ 'Dropdown--topRight' -%} {%- set _bottomClassName = _spiritClassPrefix ~ 'Dropdown--bottom' -%} -{%- set _rightClassName = _spiritClassPrefix ~ 'Dropdown--right' -%} +{%- set _bottomLeftClassName = _spiritClassPrefix ~ 'Dropdown--bottomLeft' -%} +{%- set _bottomRightClassName = _spiritClassPrefix ~ 'Dropdown--bottomRight' -%} {%- set _leftClassName = _spiritClassPrefix ~ 'Dropdown--left' -%} +{%- set _leftTopClassName = _spiritClassPrefix ~ 'Dropdown--leftTop' -%} +{%- set _leftBottomClassName = _spiritClassPrefix ~ 'Dropdown--leftBottom' -%} +{%- set _rightClassName = _spiritClassPrefix ~ 'Dropdown--right' -%} +{%- set _rightTopClassName = _spiritClassPrefix ~ 'Dropdown--rightTop' -%} +{%- set _rightBottomClassName = _spiritClassPrefix ~ 'Dropdown--rightBottom' -%} {# Attributes #} {%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-spirit-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%} @@ -17,12 +25,20 @@ {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} {%- set _placementClassNames = { - 'bottom-left': [ _bottomClassName, _leftClassName ], - 'bottom-right': [ _bottomClassName, _rightClassName ], - 'top-left': [ _topClassName, _leftClassName ], - 'top-right': [ _topClassName, _rightClassName ] + 'top': _topClassName, + 'top-left': _topLeftClassName, + 'top-right': _topRightClassName, + 'bottom': _bottomClassName, + 'bottom-left': _bottomLeftClassName, + 'bottom-right': _bottomRightClassName, + 'left': _leftClassName, + 'left-top': _leftTopClassName, + 'left-bottom': _leftBottomClassName, + 'right': _rightClassName, + 'right-top': _rightTopClassName, + 'right-bottom': _rightBottomClassName, } -%} -{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_placementClassNames[_placement]) -%} +{%- set _classNames = [ _rootClassName, _placementClassNames[_placement], _styleProps.className ] -%} <{{ _elementType }} {{ mainProps(props) }} diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md index 134769599d..d42f1269fc 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/README.md +++ b/packages/web-twig/src/Resources/components/Dropdown/README.md @@ -29,24 +29,6 @@ Advanced example usage with positioning: ``` -Without lexer: - -```twig -{% embed "@spirit/dropdownWrapper.twig" %} - {% block content %} - {% embed "@spirit/dropdown.twig" with { props: { - elementType: 'span', - fullWidthMode: 'mobile-only', - placement: 'top-right' - }} %} - {% block content %} - Dropdown content - {% endblock %} - {% endembed %} - {% endblock %} -{% endembed %} -``` - You can add any custom trigger like a ` - Dropdown Content - diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapper.twig b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapper.twig new file mode 100644 index 0000000000..97d60f2b1f --- /dev/null +++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapper.twig @@ -0,0 +1 @@ +content diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapperDefault.twig b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapperDefault.twig deleted file mode 100644 index c76025896a..0000000000 --- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapperDefault.twig +++ /dev/null @@ -1 +0,0 @@ -Content diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html new file mode 100644 index 0000000000..0fa6de21a5 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html @@ -0,0 +1,17 @@ + + + + + + + +
+ content +
+ + + + + diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownDefault.twig.snap.html deleted file mode 100644 index d68568562f..0000000000 --- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownDefault.twig.snap.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - -
- Content -
- -
- Content -
- -
- Content -
- -
- Content -
- -
- Content -
- - diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownFull.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownFull.twig.snap.html deleted file mode 100644 index 06718def96..0000000000 --- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownFull.twig.snap.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - -
- - Dropdown Content -
- - diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapperDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapper.twig.snap.html similarity index 92% rename from packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapperDefault.twig.snap.html rename to packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapper.twig.snap.html index 306589c854..d682d5b4e6 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapperDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapper.twig.snap.html @@ -6,7 +6,7 @@
- Content + content
diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md index 6be8967edf..421ad6795b 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/README.md +++ b/packages/web-twig/src/Resources/components/Tooltip/README.md @@ -58,12 +58,12 @@ best positioning approach for your use case. ### Tooltip -| Name | Type | Default | Required | Description | -| --------------- | ---------------------------------------- | -------- | -------- | ------------------------ | -| `closeLabel` | `string` | `Close` | ✕ | Close label | -| `id` | `string` | `null` | ✕ | Optional tooltip ID | -| `isDismissible` | `bool` | `false` | ✕ | Make tooltip dismissible | -| `placement` | [`top` \| `bottom` \| `left` \| `right`] | `bottom` | ✕ | Tooltip placement | +| Name | Type | Default | Required | Description | +| --------------- | -------------------------------------------- | -------- | -------- | ------------------------ | +| `closeLabel` | `string` | `Close` | ✕ | Close label | +| `id` | `string` | `null` | ✕ | Optional tooltip ID | +| `isDismissible` | `bool` | `false` | ✕ | Make tooltip dismissible | +| `placement` | [Placement Dictionary][dictionary-placement] | `bottom` | ✕ | Tooltip placement | On top of the API options, you can add `data-*` or `aria-*` attributes to further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, @@ -93,4 +93,5 @@ Or, feel free to write the controlling script yourself. [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tooltip/README.md#javascript-api [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md [tooltip]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tooltip +[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig index 457df29f95..73b02a34b3 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig @@ -2,12 +2,16 @@ {% block content %} + + {% include '@components/Tooltip/stories/TooltipPlacements.twig' %} + + - {% include '@components/Tooltip/stories/TooltipDefault.twig' %} + {% include '@components/Tooltip/stories/TooltipStatic.twig' %} - {% include '@components/Tooltip/stories/TooltipPlacements.twig' %} + {% include '@components/Tooltip/stories/TooltipOnHover.twig' %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig index ef3a805935..cd5bb75687 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig @@ -10,7 +10,18 @@ {%- set _closeClassName = _spiritClassPrefix ~ 'Tooltip__close' -%} {%- set _rootClassName = _spiritClassPrefix ~ 'Tooltip' -%} {%- set _rootDismissibleClassName = _isDismissible == 'true' ? _spiritClassPrefix ~ 'Tooltip--dismissible' : null -%} -{%- set _rootPlacementClassName = _spiritClassPrefix ~ 'Tooltip--' ~ _placement -%} +{%- set _topClassName = _spiritClassPrefix ~ 'Tooltip--top' -%} +{%- set _topLeftClassName = _spiritClassPrefix ~ 'Tooltip--topLeft' -%} +{%- set _topRightClassName = _spiritClassPrefix ~ 'Tooltip--topRight' -%} +{%- set _bottomClassName = _spiritClassPrefix ~ 'Tooltip--bottom' -%} +{%- set _bottomLeftClassName = _spiritClassPrefix ~ 'Tooltip--bottomLeft' -%} +{%- set _bottomRightClassName = _spiritClassPrefix ~ 'Tooltip--bottomRight' -%} +{%- set _leftClassName = _spiritClassPrefix ~ 'Tooltip--left' -%} +{%- set _leftTopClassName = _spiritClassPrefix ~ 'Tooltip--leftTop' -%} +{%- set _leftBottomClassName = _spiritClassPrefix ~ 'Tooltip--leftBottom' -%} +{%- set _rightClassName = _spiritClassPrefix ~ 'Tooltip--right' -%} +{%- set _rightTopClassName = _spiritClassPrefix ~ 'Tooltip--rightTop' -%} +{%- set _rightBottomClassName = _spiritClassPrefix ~ 'Tooltip--rightBottom' -%} {# Attributes #} {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%} @@ -19,7 +30,21 @@ {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} -{%- set _classNames = [ _rootClassName, _rootPlacementClassName, _rootDismissibleClassName, _styleProps.className ] -%} +{%- set _placementClassNames = { + 'top': _topClassName, + 'top-left': _topLeftClassName, + 'top-right': _topRightClassName, + 'bottom': _bottomClassName, + 'bottom-left': _bottomLeftClassName, + 'bottom-right': _bottomRightClassName, + 'left': _leftClassName, + 'left-top': _leftTopClassName, + 'left-bottom': _leftBottomClassName, + 'right': _rightClassName, + 'right-top': _rightTopClassName, + 'right-bottom': _rightBottomClassName, +} -%} +{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _placementClassNames[_placement], _styleProps.className ] -%} {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
Hello there! + + + + Hello there! + diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefault.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefault.twig deleted file mode 100644 index d3732afe32..0000000000 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefault.twig +++ /dev/null @@ -1 +0,0 @@ -Hello there! diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefaultPure.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefaultPure.twig deleted file mode 100644 index 8efcb11fb4..0000000000 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipDefaultPure.twig +++ /dev/null @@ -1,9 +0,0 @@ -{% embed "@spirit/tooltip.twig" with { props: { - id: 'my-tooltip', - isDismissible: true, - placement: 'right' -}} %} - {% block content %} - Hello there! - {% endblock %} -{% endembed %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig new file mode 100644 index 0000000000..7c30ac47a8 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig @@ -0,0 +1 @@ +content diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html similarity index 76% rename from packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefault.twig.snap.html rename to packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html index 12e37aefa6..ed5610bf8f 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html @@ -5,10 +5,15 @@ -
+
+ Hello there! +
+ + +
Hello there! + Close tooltip
diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefaultPure.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefaultPure.twig.snap.html deleted file mode 100644 index 12e37aefa6..0000000000 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefaultPure.twig.snap.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - -
- Hello there! -
- - diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipWrapper.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipWrapper.twig.snap.html new file mode 100644 index 0000000000..b0d42cbde1 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipWrapper.twig.snap.html @@ -0,0 +1,12 @@ + + + + + + + +
+ content +
+ + diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig new file mode 100644 index 0000000000..15e948d3af --- /dev/null +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig @@ -0,0 +1,51 @@ + + + Tooltip on top + + + Hello there! + + + + + + Tooltip on right + + + Hello there! + + + + + + Tooltip on bottom + + + Hello there! + + + + + + Tooltip on left + + + Hello there! + + diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig index 15e948d3af..e4d1850c89 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig @@ -1,51 +1,53 @@ - - - Tooltip on top - - - Hello there! - - - - - - Tooltip on right - - - Hello there! - - - - - - Tooltip on bottom - - - Hello there! - - - - - - Tooltip on left - - - Hello there! - - +
+ +
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + Click the dots! + Hello! + + +
+ +
+ + diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDefault.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipStatic.twig similarity index 100% rename from packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDefault.twig rename to packages/web-twig/src/Resources/components/Tooltip/stories/TooltipStatic.twig