BREAKING CHANGE(web-twig): Remove old Modal and rename ModalComposed …

…to Modal #DS-616

Also remove ModalFooter alignment deprecation.

 ## Migration Guide

1. **Discontinue the old `Modal` component:** The old `Modal`
component has been entirely removed and is no longer available
for use.

2. **Adopt the new `Modal` in place of `ModalComposed`:** The
`ModalComposed` component has been renamed to `Modal`. Thus,
replace all instances of `ModalComposed` in your codebase with
`Modal`.

3. **Update Component Tags:** Make sure to modify the component
tags in your codebase as outlined below:

   - `<ModalComposed …>` → `<Modal …>`
   - `<ModalComposedBody …>` → `<ModalBody …>`
   - `<ModalComposedDialog …>` → `<ModalDialog …>`
   - `<ModalComposedFooter …>` → `<ModalFooter …>`
   - `<ModalComposedHeader …>` → `<ModalHeader …>`

4. **Rename `ModalFooter` Align prop:** Instead of `align` use `alignmentX`.

   - `<ModalFooter align="left" …>` → `<ModalFooter alignmentX="left" …>`

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

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

@@ -14,7 +14,4 @@
 {# Modal Stacked #}
 {% include '@components/Modal/stories/ModalStacking.twig' %}
 
-{# Modal Simple #}
-{% include '@components/Modal/stories/ModalSimple.twig' %}
-
 {% endblock %}

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

@@ -1,50 +1,26 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _closeLabel = props.closeLabel | default('Close') -%}
 {%- set _id = props.id -%}
+{%- set _titleId = props.titleId | default(null) -%}
 
 {# Class names #}
-{%- set _bodyClassName = _spiritClassPrefix ~ 'Modal__body' -%}
-{%- set _contentClassName = _spiritClassPrefix ~ 'Modal__content' -%}
-{%- set _dialogClassName = _spiritClassPrefix ~ 'Modal__dialog' -%}
-{%- set _headerClassName = _spiritClassPrefix ~ 'Modal__header' -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Modal' -%}
 
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
+{%- set _ariaLabelledbyAttr = _id ? 'aria-labelledby="' ~ _titleId | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 
-{# Deprecations #}
-{% deprecated 'Modal: The "Modal" component is deprecated, it will be replaced by implementation of "ModalComposed".' %}
-
 <dialog
     {{ mainProps(_mainPropsWithoutId) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     {{ _idAttr | raw }}
+    {{ _ariaLabelledbyAttr | raw }}
 >
-    <div class="{{ _contentClassName }}">
-        <div class="{{ _dialogClassName }}">
-            <div class="{{ _headerClassName }}">
-                <Button
-                aria-controls="{{ _id }}"
-                aria-expanded="false"
-                color="tertiary"
-                data-dismiss="modal"
-                data-target="{{ '#' ~ _id }}"
-                isSquare
-            >
-                <Icon name="close" aria-hidden="true" />
-                <span class="accessibility-hidden">{{ _closeLabel }}</span>
-            </Button>
-            </div>
-            <div class="{{ _bodyClassName }}">
-                {% block content %}{% endblock %}
-            </div>
-        </div>
-    </div>
+    {% block content %}{% endblock %}
 </dialog>

packages/web-twig/src/Resources/components/Modal/ModalFooter.twig

@@ -1,23 +1,17 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _align = props.align | default(null) -%}
 {%- set _alignmentX = props.alignmentX | default('right') -%}
 {%- set _description = props.description | default(null) -%}
 
 {# Class names #}
 {%- set _actionsClassName = _spiritClassPrefix ~ 'ModalFooter__actions' -%}
 {%- set _descriptionClassName = _spiritClassPrefix ~ 'ModalFooter__description' -%}
-{%- set _rootAlignClassName = _spiritClassPrefix ~ 'ModalFooter--' ~ (_align ? _align : _alignmentX) -%}
+{%- set _rootAlignmentXClassName = _spiritClassPrefix ~ 'ModalFooter--' ~ _alignmentX -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'ModalFooter' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _rootAlignClassName, _styleProps.className ] -%}
-
-{# Deprecations #}
-{% if _align %}
-    {% deprecated 'ModalFooter: The "align" property is deprecated, use "alignmentX" instead.' %}
-{% endif %}
+{%- set _classNames = [ _rootClassName, _rootAlignmentXClassName, _styleProps.className ] -%}
 
 <footer
     {{ mainProps(props) }}