Feat(web-twig): Introduce fullWidthMode prop to Dropdown #DS-493

  * mark `breakpoint` prop as deprecated, will be removed in a next
    major version

packages/web-twig/README.md

@@ -125,6 +125,13 @@ or pure original implementation
 - [Tooltip](./src/Resources/components/Tooltip/README.md)
 
 if you want to extend these components, an example guide is [here](./docs/extendComponents.md).
-if you want to contribute, read guide [here](./docs/contribution.md).
+if you want to contribute, read the guide [here](./docs/contribution.md).
+
+## Deprecations
+
+This package uses the deprecation warnings for props, functions and components that will be removed or replaced in the next major release.
+Check your Symfony console or log to see if you are using any of the deprecated functionality.
+
+![Deprecations in Symfony's console](https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-symfony-console.png?raw=true)
 
 [spirit design system]: https://github.com/lmc-eu/spirit-design-system

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

@@ -2,6 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _class = props.class | default(null) -%}
 {%- set _breakpoint = props.breakpoint | default(null)  -%}
+{%- set _fullWidthMode = props.fullWidthMode | default(null)  -%}
 {%- set _elementType = props.elementType | default('div') -%}
 {%- set _isFullWidth = props.isFullWidth | default(false) | boolprop -%}
 {%- set _placement = props.placement | default('bottom-left') -%}
@@ -16,6 +17,7 @@
 
 {# Attributes #}
 {%- set _dataBreakpointAttr = _breakpoint ? 'data-breakpoint="' ~ _breakpoint ~ '"' : null -%}
+{%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-fullwidthmode="' ~ _fullWidthMode ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _placementClassNames = {
@@ -26,10 +28,16 @@
 } -%}
 {%- set _classNames = [ _rootClassName, _fullWidthClassName, _class ] | merge(_placementClassNames[_placement]) -%}
 
+{# Deprecations #}
+{% if _breakpoint %}
+    {% deprecated 'Dropdown: The "breakpoint" property is deprecated, use "fullWidthMode" instead.' %}
+{% endif %}
+
 <{{ _elementType }}
     {{ mainProps(props) }}
     {{ classProp(_classNames) }}
     {{ _dataBreakpointAttr | raw }}
+    {{ _dataFullWidthModeAttr | raw }}
 >
     {%- block content %}{% endblock -%}
 </{{ _elementType }}>

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

@@ -56,14 +56,15 @@ attributes to register trigger events.
 
 ### 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                   |
+| Prop name       | Type                                                     | Default       | Required | Description                                                                                 |
+| --------------- | -------------------------------------------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------- |
+| `id`            | `string`                                                 | -             | yes      | Dropdown ID                                                                                 |
+| `breakpoint`    | `string`                                                 | -             | no       | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Breakpoint level [tablet,desktop] |
+| `fullWidthMode` | `string`                                                 | -             | no       | Full-width mode [off,mobile-only,all]                                                       |
+| `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
 
@@ -85,3 +86,4 @@ or the width of the window is changed. There can be several triggers, the same r
 | `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
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations