Feat(web-twig): Introduce alignment to Dropdown component #DS-1411

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

@@ -29,4 +29,8 @@
         {% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
     </DocsSection>
 
+    <DocsSection title="Alignment" stackAlignment="stretch">
+        {% include '@components/Dropdown/stories/DropdownAlignment.twig' %}
+    </DocsSection>
+
 {% endblock %}

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

@@ -1,13 +1,40 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _alignmentX = props.alignmentX | default(null) -%}
+{%- set _alignmentY = props.alignmentY | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+
+{%- set _alignmentXClasses = [] -%}
+{%- if _alignmentX is iterable and _alignmentX is not null -%}
+    {%- for breakpoint, breakpointValue in _alignmentX -%}
+        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
+        {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
+        {%- set _alignmentXClasses = _alignmentXClasses | merge([ _spiritClassPrefix ~ 'Dropdown' ~ infix ~ '--alignmentX' ~ breakpointValueCapitalized ]) -%}
+    {%- endfor -%}
+{%- elseif _alignmentX is not null -%}
+    {%- set _alignmentXCapitalized = _alignmentX[:1] | upper ~ _alignmentX[1:] -%}
+    {%- set _alignmentXClasses = [ _spiritClassPrefix ~ 'Dropdown--alignmentX' ~ _alignmentXCapitalized ] -%}
+{%- endif -%}
+
+{%- set _alignmentYClasses = [] -%}
+{%- if _alignmentY is iterable and _alignmentY is not null -%}
+    {%- for breakpoint, breakpointValue in _alignmentY -%}
+        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
+        {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
+        {%- set _alignmentYClasses = _alignmentYClasses | merge([ _spiritClassPrefix ~ 'Dropdown' ~ infix ~ '--alignmentY' ~ breakpointValueCapitalized ]) -%}
+    {%- endfor -%}
+{%- elseif _alignmentY is not null -%}
+    {%- set _alignmentYCapitalized = _alignmentY[:1] | upper ~ _alignmentY[1:] -%}
+    {%- set _alignmentYClasses = [ _spiritClassPrefix ~ 'Dropdown--alignmentY' ~ _alignmentYCapitalized ] -%}
+{%- endif -%}
+
+{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_alignmentXClasses, _alignmentYClasses) -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}

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

@@ -72,14 +72,37 @@ or the width of the window is changed. There can be several triggers, the same r
 
 ### Dropdown
 
-| Name          | Type     | Default | Required | Description        |
-| ------------- | -------- | ------- | -------- | ------------------ |
-| `elementType` | `string` | `div`   | ✕        | HTML tag to render |
+| Name          | Type                                                                  | Default | Required | Description                                                                                                                               |
+| ------------- | --------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `alignmentX`  | \[ [AlignmentXExtended dictionary][dictionary-alignment] \| `object`] | `null`  | ✕        | Apply vertical alignment to trigger, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }`   |
+| `alignmentY`  | \[ [AlignmentYExtended dictionary][dictionary-alignment] \| `object`] | `null`  | ✕        | Apply horizontal alignment to trigger, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` |
+| `elementType` | `string`                                                              | `div`   | ✕        | HTML tag to render                                                                                                                        |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 
+#### Alignment
+
+Dropdown supports the extended [Alignment Dictionary][dictionary-alignment] for alignment on both axis. To use it, set the
+specific prop to the `Dropdown` component, e.g. `<Dropdown alignmentX="right" />` or `<Dropdown alignmentY="stretch" />`. Adding
+any of these props will make the element display as `flex`.
+
+We also support responsive alignment props. To use them, set the prop as an object,
+e.g. `<Dropdown alignmentX="{{ { mobile: 'right', tablet: 'left', desktop: 'center' } }}" />`.
+
+ℹ️ This controls only the alignment inside the wrapping `Dropdown` element. And even with alignment, the popover will still be positioned
+at edge of the `Dropdown` element and on the place defined by the placement attribute.
+
+```twig
+<Dropdown alignmentX="{{ { mobile: 'right', tablet: 'left', desktop: 'center' } }}" alignmentY="center">
+  <button data-spirit-toggle="dropdown" data-spirit-target="#dropdown-alignment">Button as anchor</button>
+  <DropdownPopover id="dropdown-alignment">
+    <!-- ... -->
+  </DropdownPopover>
+</Dropdown>
+```
+
 ## JavaScript Plugin
 
 For full functionality, you need to provide Spirit JavaScript:
@@ -94,6 +117,7 @@ Or, feel free to write the controlling script yourself.
 
 👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
 
+[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#alignment
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md

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

@@ -1 +1,8 @@
 <Dropdown>content</Dropdown>
+
+<Dropdown
+    alignmentX="{{ { mobile: 'right', tablet: 'left', desktop: 'center' } }}"
+    alignmentY="center"
+>
+    content
+</Dropdown>

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

@@ -8,5 +8,9 @@
     <div class="Dropdown">
       content
     </div>
+
+    <div class="Dropdown Dropdown--alignmentXRight Dropdown--tablet--alignmentXLeft Dropdown--desktop--alignmentXCenter Dropdown--alignmentYCenter">
+      content
+    </div>
   </body>
 </html>

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

@@ -0,0 +1,21 @@
+<Grid cols="2">
+    <Dropdown
+        alignmentX="{{ { mobile: 'right', tablet: 'left', desktop: 'center' } }}"
+        alignmentY="center"
+    >
+        <Button
+            data-spirit-toggle="dropdown"
+            data-spirit-target="#dropdown-alignment"
+        >
+            Button as anchor
+        </Button>
+        <DropdownPopover id="dropdown-alignment">
+            <Item elementType="a" href="#" label="Action" />
+            <Item elementType="a" href="#" label="Another action" />
+            <Item elementType="a" href="#" label="Something else here" />
+        </DropdownPopover>
+    </Dropdown>
+    <div class="px-800 py-1700 bg-tertiary text-center">
+        This a big unrelated box
+    </div>
+</Grid>