Feat(web-twig): Use the new Placement dictionary in Dropdown and `T…

…ooltip` #DS-923

packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig

@@ -7,22 +7,38 @@
 {# 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 -%}
 
 {# 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) }}

packages/web-twig/src/Resources/components/Dropdown/README.md

@@ -29,37 +29,19 @@ Advanced example usage with positioning:
 </DropdownWrapper>
 ```
 
-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 `<Button>` but it is necessary to add `data-spirit-toggle="dropdown"`, `data-spirit-target="<id>"`
 attributes to register trigger events.
 
 ## API
 
 ### Dropdown
 
-| Name            | Type                                                           | Default       | Required | Description                           |
-| --------------- | -------------------------------------------------------------- | ------------- | -------- | ------------------------------------- |
-| `elementType`   | `string`                                                       | `div`         | ✕        | HTML tag to render                    |
-| `fullWidthMode` | `string`                                                       | —             | ✕        | Full-width mode [off,mobile-only,all] |
-| `id`            | `string`                                                       | —             | ✔        | Dropdown ID                           |
-| `placement`     | [`bottom-left` \| `bottom-right` \| `top-left` \| `top-right`] | `bottom-left` | ✕        | Alignment of the component            |
+| Name            | Type                                         | Default       | Required | Description                           |
+| --------------- | -------------------------------------------- | ------------- | -------- | ------------------------------------- |
+| `elementType`   | `string`                                     | `div`         | ✕        | HTML tag to render                    |
+| `fullWidthMode` | `string`                                     | —             | ✕        | Full-width mode [off,mobile-only,all] |
+| `id`            | `string`                                     | —             | ✔        | Dropdown ID                           |
+| `placement`     | [Placement Dictionary][dictionary-placement] | `bottom-left` | ✕        | Placement of the dropdown             |
 
 You can add `data-*` or `aria-*` attributes to further extend the component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
@@ -104,4 +86,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/Dropdown/README.md#javascript
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
+[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

packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig

@@ -0,0 +1,11 @@
+<Dropdown>content</Dropdown>
+
+<!-- Render with all props -->
+<Dropdown
+    elementType="aside"
+    fullWidthMode="mobile-only"
+    id="my-dropdown"
+    placement="top-right"
+>
+    content
+</Dropdown>

packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdownWrapper.twig

@@ -0,0 +1 @@
+<DropdownWrapper>content</DropdownWrapper>

packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="Dropdown Dropdown--bottomLeft">
+      content
+    </div>
+    <!-- Render with all props -->
+
+    <aside id="my-dropdown" class="Dropdown Dropdown--topRight" data-spirit-fullwidthmode="mobile-only">
+      content
+    </aside>
+  </body>
+</html>

packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapperDefault.twig.snap.html → packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdownWrapper.twig.snap.html

@@ -6,7 +6,7 @@
   </head>
   <body>
     <div class="DropdownWrapper">
-      Content
+      content
     </div>
   </body>
 </html>

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

packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig

@@ -2,12 +2,16 @@
 
 {% block content %}
 
+    <DocsSection title="Placements">
+        {% include '@components/Tooltip/stories/TooltipPlacements.twig' %}
+    </DocsSection>
+
     <DocsSection title="Static Tooltip (No Interaction)" stackAlignment="stretch">
-        {% include '@components/Tooltip/stories/TooltipDefault.twig' %}
+        {% include '@components/Tooltip/stories/TooltipStatic.twig' %}
     </DocsSection>
 
     <DocsSection title="Tooltip on Hover (Pure CSS)">
-        {% include '@components/Tooltip/stories/TooltipPlacements.twig' %}
+        {% include '@components/Tooltip/stories/TooltipOnHover.twig' %}
     </DocsSection>
 
     <DocsSection title="Tooltip on Click (JavaScript)">

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')) -%}
 
 <div

packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltip.twig

@@ -0,0 +1,11 @@
+<Tooltip>Hello there!</Tooltip>
+
+<!-- Render with all props -->
+<Tooltip
+    closeLabel="Close tooltip"
+    id="my-tooltip"
+    isDismissible
+    placement="right-top"
+>
+    Hello there!
+</Tooltip>

packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig

@@ -0,0 +1 @@
+<TooltipWrapper>content</TooltipWrapper>

packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipDefault.twig.snap.html → packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html

@@ -5,10 +5,15 @@
     </title>
   </head>
   <body>
-    <div class="Tooltip Tooltip--right Tooltip--dismissible" id="my-tooltip">
+    <div class="Tooltip Tooltip--bottom">
+      Hello there!
+    </div>
+    <!-- Render with all props -->
+
+    <div class="Tooltip Tooltip--dismissible Tooltip--rightTop" id="my-tooltip">
       Hello there! <button type="button" class="Tooltip__close" data-spirit-dismiss="tooltip" aria-controls="my-tooltip" data-spirit-target="#my-tooltip" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
       <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
-      </path></svg> <span class="accessibility-hidden">Close</span></button>
+      </path></svg> <span class="accessibility-hidden">Close tooltip</span></button>
     </div>
   </body>
 </html>

packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipWrapper.twig.snap.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="TooltipWrapper">
+      content
+    </div>
+  </body>
+</html>