Feat(web-twig): ModalHeader hide close button prop DS-1063

- New prop for ModalHeader to hide the close button - New prop for disable escape key to close the modal - Added new demo with those new props
lmc-eu · Jul 9, 2024 · 4ffd63d · 4ffd63d
1 parent ebb878c
commit 4ffd63d
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 25 deletions.
diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig b/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig
@@ -60,4 +60,8 @@
         {% include '@components/Modal/stories/ModalDisabledBackdropClick.twig' %}
     </DocsSection>
 
+    <DocsSection title="Hidden Close Button and Disabled Escape Key">
+        {% include '@components/Modal/stories/ModalHiddenCloseButton.twig' %}
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.twig b/packages/web-twig/src/Resources/components/Modal/Modal.twig
@@ -4,6 +4,7 @@
 {%- set _id = props.id -%}
 {%- set _titleId = props.titleId | default(null) -%}
 {%- set _closeOnBackdropClick = props.closeOnBackdropClick ?? true -%}
+{%- set _closeOnEscapeKeyDown = props.closeOnEscapeKeyDown ?? true -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Modal' -%}
@@ -13,8 +14,9 @@
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 {%- set _ariaLabelledbyAttr = _titleId ? 'aria-labelledby="' ~ _titleId | escape('html_attr') ~ '"' : null -%}
 {%- set _closeOnBackdropClickString = _closeOnBackdropClick ? 'true' : 'false' -%}
-{%- set _dataBackdropCloseDisabledAttr =
-    _closeOnBackdropClick ? null : 'data-spirit-close-on-backdrop-click="' ~ _closeOnBackdropClickString | escape('html_attr') ~ '"' -%}
+{%- set _closeOnEscapeKeyDownString = _closeOnEscapeKeyDown ? 'true' : 'false' -%}
+{%- set _dataBackdropCloseDisabledAttr = _closeOnBackdropClick ? null : 'data-spirit-close-on-backdrop-click="' ~ _closeOnBackdropClickString | escape('html_attr') ~ '"' -%}
+{%- set _dataEscapeKeyDownAttr = _closeOnEscapeKeyDown ? null : 'data-spirit-close-on-escape-key-down="' ~ _closeOnEscapeKeyDownString | escape('html_attr') ~ '"' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -28,6 +30,7 @@
     {{ _idAttr | raw }}
     {{ _ariaLabelledbyAttr | raw }}
     {{ _dataBackdropCloseDisabledAttr | raw }}
+    {{ _dataEscapeKeyDownAttr | raw }}
 >
     {% block content %}{% endblock %}
 </dialog>
diff --git a/packages/web-twig/src/Resources/components/Modal/ModalHeader.twig b/packages/web-twig/src/Resources/components/Modal/ModalHeader.twig
@@ -2,6 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _closeLabel = props.closeLabel | default('Close') -%}
 {%- set _enableDismiss = props.enableDismiss ?? true -%}
+{%- set _hasCloseButton = props.hasCloseButton ?? true -%}
 {%- set _modalId = props.modalId -%}
 {%- set _titleId = props.titleId | default(null) -%}
 
@@ -29,15 +30,17 @@
             {% block content %}{% endblock %}
         </h2>
     {% endif %}
-    <Button
-        aria-controls="{{ _modalId }}"
-        aria-expanded="false"
-        color="tertiary"
-        data-spirit-dismiss="{{ _enableDismiss ? 'modal' : null }}"
-        data-spirit-target="{{ _enableDismiss ? '#' ~ _modalId : null }}"
-        isSquare
-    >
-        <Icon name="close" />
-        <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
-    </Button>
+    {% if _hasCloseButton is same as(true) %}
+        <Button
+            aria-controls="{{ _modalId }}"
+            aria-expanded="false"
+            color="tertiary"
+            data-spirit-dismiss="{{ _enableDismiss ? 'modal' : null }}"
+            data-spirit-target="{{ _enableDismiss ? '#' ~ _modalId : null }}"
+            isSquare
+        >
+            <Icon name="close" />
+            <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
+        </Button>
+    {% endif %}
 </header>
diff --git a/packages/web-twig/src/Resources/components/Modal/README.md b/packages/web-twig/src/Resources/components/Modal/README.md
@@ -43,12 +43,13 @@ Example:
 
 ### API
 
-| Name                   | Type                                          | Default  | Required | Description                                           |
-| ---------------------- | --------------------------------------------- | -------- | -------- | ----------------------------------------------------- |
-| `alignmentY`           | [AlignmentY dictionary][dictionary-alignment] | `center` | ✕        | Vertical alignment of modal                           |
-| `closeOnBackdropClick` | `bool`                                        | `true`   | ✕        | Whether the modal will close when backdrop is clicked |
-| `id`                   | `string`                                      | —        | ✓        | Modal ID                                              |
-| `titleId`              | `string`                                      | `null`   | ✕        | ID of the title inside ModalHeader                    |
+| Name                   | Type                                          | Default  | Required | Description                                             |
+| ---------------------- | --------------------------------------------- | -------- | -------- | ------------------------------------------------------- |
+| `alignmentY`           | [AlignmentY dictionary][dictionary-alignment] | `center` | ✕        | Vertical alignment of modal                             |
+| `closeOnBackdropClick` | `bool`                                        | `true`   | ✕        | Whether the modal will close when backdrop is clicked   |
+| `closeOnEscapeKeyDown` | `bool`                                        | `true`   | ✕        | Whether the modal will close when escape key is pressed |
+| `id`                   | `string`                                      | —        | ✓        | Modal ID                                                |
+| `titleId`              | `string`                                      | `null`   | ✕        | ID of the title inside ModalHeader                      |
 
 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]
@@ -158,14 +159,30 @@ using the `aria-label` attribute on `<Modal>` component:
 </Modal>
 ```
 
+### Hidden Close Button
+
+To render the `ModalHeader` component without the close button set the `hasCloseButton` prop to false.
+
+```twig
+<Modal id="modal-example">
+  <ModalDialog>
+    <ModalHeader modalId="modal-example" hasCloseButton={false} />
+    <ModalBody>
+      …
+    </ModalBody>
+  </ModalDialog>
+</Modal>
+```
+
 ### API
 
-| Name            | Type     | Default | Required | Description             |
-| --------------- | -------- | ------- | -------- | ----------------------- |
-| `closeLabel`    | `string` | `Close` | ✕        | Custom close label      |
-| `enableDismiss` | `bool`   | `true`  | ✕        | Enable JS Modal dismiss |
-| `modalId`       | `string` | —       | ✓        | Modal ID                |
-| `titleId`       | `string` | `null`  | ✕        | ID of the title         |
+| Name             | Type     | Default | Required | Description                      |
+| ---------------- | -------- | ------- | -------- | -------------------------------- |
+| `closeLabel`     | `string` | `Close` | ✕        | Custom close label               |
+| `enableDismiss`  | `bool`   | `true`  | ✕        | Enable JS Modal dismiss          |
+| `hasCloseButton` | `bool`   | `true`  | ✕        | Whether close button is rendered |
+| `modalId`        | `string` | —       | ✓        | Modal ID                         |
+| `titleId`        | `string` | `null`  | ✕        | ID of the title                  |
 
 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]

diff --git a/packages/web-twig/src/Resources/components/Modal/__tests__/__fixtures__/modalDefault.twig b/packages/web-twig/src/Resources/components/Modal/__tests__/__fixtures__/modalDefault.twig
@@ -51,6 +51,23 @@
     </ModalDialog>
 </Modal>
 
+<!-- Do not render with close button -->
+<Modal id="modal-example-hide-close-button" aria-label="Modal Title">
+    <ModalDialog isScrollable height="100px" maxHeight="200px">
+        <ModalHeader modalId="modal-example-hide-close-button" hasCloseButton={ false }>
+            Title of the Modal
+        </ModalHeader>
+        <ModalBody>
+            <p>Modal Body</p>
+        </ModalBody>
+        <ModalFooter>
+            <Button color="primary">
+                Submit
+            </Button>
+        </ModalFooter>
+    </ModalDialog>
+</Modal>
+
 <!-- Render with all props -->
 <Modal alignmentY="top" id="modal-example-all" titleId="modal-example-all-title">
     <ModalDialog

diff --git a/...b-twig/src/Resources/components/Modal/__tests__/__snapshots__/modalDefault.twig.snap.html b/...b-twig/src/Resources/components/Modal/__tests__/__snapshots__/modalDefault.twig.snap.html
@@ -79,6 +79,29 @@ <h2 class="ModalHeader__title" id="modal-example-title">
         </footer>
       </article>
     </dialog>
+    <!-- Do not render with close button -->
+
+    <dialog aria-label="Modal Title" class="Modal Modal--center" id="modal-example-hide-close-button">
+      <article class="ModalDialog ModalDialog--scrollable" style="--modal-dialog-max-height: 200px;--modal-dialog-height: 100px;">
+        <header class="ModalHeader">
+          <h2 class="ModalHeader__title">
+            Title of the Modal
+          </h2>
+        </header>
+
+        <div class="ModalBody">
+          <p>
+            Modal Body
+          </p>
+        </div>
+
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button class="Button Button--primary Button--medium" type="button">Submit</button>
+          </div>
+        </footer>
+      </article>
+    </dialog>
     <!-- Render with all props -->
 
     <dialog class="Modal Modal--top" id="modal-example-all" aria-labelledby="modal-example-all-title">

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
@@ -0,0 +1,33 @@
+<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button">
+    Open Modal
+</Button>
+
+<Modal id="example-hidden-close-button" titleId="example-hidden-close-button-title" closeOnBackdropClick={ false } closeOnEscapeKeyDown={ false }>
+    <ModalDialog>
+        <ModalHeader modalId="example-hidden-close-button" titleId="example-hidden-close-button-title" hasCloseButton={ false }>
+            Modal Title
+        </ModalHeader>
+        <ModalBody>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                provident unde. Eveniet, iste, molestiae?
+            </p>
+        </ModalBody>
+        <ModalFooter>
+            <Button
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-hidden-close-button"
+            >
+                Primary action
+            </Button>
+            <Button
+                color="secondary"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-hidden-close-button"
+            >
+                Secondary action
+            </Button>
+        </ModalFooter>
+    </ModalDialog>
+</Modal>