Docs(web-twig): Use dash instead of underscore for id and name at…

…tribute values in `Modal` docs
lmc-eu · Jan 9, 2024 · 05b5803 · 05b5803
1 parent c5ff3bc
commit 05b5803
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -1,10 +1,10 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example_basic">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-basic">
     Open Modal
 </Button>
 
-<Modal id="example_basic" titleId="example_basic_title">
+<Modal id="example-basic" titleId="example-basic-title">
     <ModalDialog>
-        <ModalHeader modalId="example_basic" titleId="example_basic_title">
+        <ModalHeader modalId="example-basic" titleId="example-basic-title">
             Modal Title
         </ModalHeader>
         <ModalBody>
@@ -19,24 +19,24 @@
             <!-- Footer alignment demo: start -->
             <script>
                 const setFooterAlignment = (event) => {
-                    const footerElement = document.querySelector('#example_basic .ModalFooter');
+                    const footerElement = document.querySelector('#example-basic .ModalFooter');
 
                     footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
                     footerElement.classList.add(`ModalFooter--${event.target.value}`);
                 };
 
                 const toggleExpandOnMobile = () => {
-                    document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
+                    document.querySelector('#example-basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
                 };
             </script>
             <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
                 <div>Footer alignment (from tablet up):</div>
-                <Radio id="footer_alignment_left" UNSAFE_className="mr-600" label="Left" value="left" name="footer_alignment" autocomplete="off" />
-                <Radio id="footer_alignment_center" UNSAFE_className="mr-600" label="Center" value="center" name="footer_alignment" autocomplete="off" />
-                <Radio id="footer_alignment_right" UNSAFE_className="mr-600" label="Right" value="right" name="footer_alignment" autocomplete="off" isChecked />
+                <Radio id="footer-alignment-left" UNSAFE_className="mr-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-right" UNSAFE_className="mr-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
             </form>
             <form class="d-tablet-none">
-                <Checkbox id="expand_on_mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile()" autocomplete="off" isChecked />
+                <Checkbox id="expand-on-mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile()" autocomplete="off" isChecked />
             </form>
             <!-- Footer alignment demo: end -->
             <!-- Content: end -->
@@ -45,28 +45,28 @@
         <ModalFooter description="Optional description">
             <Button
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_basic"
+                data-spirit-target="#example-basic"
             >
                 Primary action
             </Button>
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_basic"
+                data-spirit-target="#example-basic"
             >
                 Secondary action
             </Button>
         </ModalFooter>
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example_form">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-form">
     Open Modal with a Form
 </Button>
 
-<Modal id="example_form" titleId="example_form_title">
+<Modal id="example-form" titleId="example-form-title">
     <ModalDialog elementType="form" method="dialog">
-        <ModalHeader modalId="example_form" titleId="example_form_title">
+        <ModalHeader modalId="example-form" titleId="example-form-title">
             Modal with a Form
         </ModalHeader>
         <ModalBody>
@@ -86,19 +86,19 @@
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_form"
+                data-spirit-target="#example-form"
             >
                 Secondary action
             </Button>
         </ModalFooter>
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example_custom_height">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-custom-height">
     Open Modal with Custom Height
 </Button>
 
-<Modal id="example_custom_height" titleId="example_custom_height_title">
+<Modal id="example-custom-height" titleId="example-custom-height-title">
     <ModalDialog
         elementType="form"
         isExpandedOnMobile={ false }
@@ -107,7 +107,7 @@
         preferredHeightOnMobile="400px"
         preferredHeightFromTabletUp="500px"
     >
-        <ModalHeader modalId="example_custom_height" titleId="example_custom_height_title">
+        <ModalHeader modalId="example-custom-height" titleId="example-custom-height-title">
             Modal with Custom Height
         </ModalHeader>
         <ModalBody>
@@ -133,7 +133,7 @@
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_custom_height"
+                data-spirit-target="#example-custom-height"
             >
                 Secondary action
             </Button>

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig
@@ -1,10 +1,10 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example_disabled_backdrop_click">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-disabled-backdrop-click">
     Open Modal
 </Button>
 
-<Modal id="example_disabled_backdrop_click" titleId="example_disabled_backdrop_click_title" closeOnBackdropClick={ false }>
+<Modal id="example-disabled-backdrop-click" titleId="example-disabled-backdrop-click-title" closeOnBackdropClick={ false }>
     <ModalDialog>
-        <ModalHeader modalId="example_disabled_backdrop_click" titleId="example_disabled_backdrop_click_title">
+        <ModalHeader modalId="example-disabled-backdrop-click" titleId="example-disabled-backdrop-click-title">
             Modal Title
         </ModalHeader>
         <ModalBody>
@@ -17,14 +17,14 @@
         <ModalFooter>
             <Button
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_disabled_backdrop_click"
+                data-spirit-target="#example-disabled-backdrop-click"
             >
                 Primary action
             </Button>
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_disabled_backdrop_click"
+                data-spirit-target="#example-disabled-backdrop-click"
             >
                 Secondary action
             </Button>

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig
@@ -1,10 +1,10 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example_long_content">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-long-content">
     Open Modal with Long Content
 </Button>
 
-<Modal id="example_long_content" titleId="example_long_content_title">
+<Modal id="example-long-content" titleId="example-long-content-title">
     <ModalDialog>
-        <ModalHeader modalId="example_long_content" titleId="example_long_content_title">
+        <ModalHeader modalId="example-long-content" titleId="example-long-content-title">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
         </ModalHeader>
         <ModalBody>
@@ -56,28 +56,28 @@
         <ModalFooter>
             <Button
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_long_content"
+                data-spirit-target="#example-long-content"
             >
                 Primary action
             </Button>
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_long_content"
+                data-spirit-target="#example-long-content"
             >
                 Secondary action
             </Button>
         </ModalFooter>
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example_scroll_view">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-scroll-view">
     Open Modal with ScrollView
 </Button>
 
-<Modal id="example_scroll_view" titleId="example_scroll_view_title">
+<Modal id="example-scroll-view" titleId="example-scroll-view-title">
     <ModalDialog>
-        <ModalHeader modalId="example_scroll_view" titleId="example_scroll_view_title">
+        <ModalHeader modalId="example-scroll-view" titleId="example-scroll-view-title">
             Modal with ScrollView
         </ModalHeader>
         <ScrollView data-spirit-toggle="scrollView" overflowDecorators="both">
@@ -131,14 +131,14 @@
         <ModalFooter>
             <Button
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_scroll_view"
+                data-spirit-target="#example-scroll-view"
             >
                 Primary action
             </Button>
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_scroll_view"
+                data-spirit-target="#example-scroll-view"
             >
                 Secondary action
             </Button>

diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
@@ -1,10 +1,10 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example_stacking_parent">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent">
     Open Modal
 </Button>
 
-<Modal id="example_stacking_parent" titleId="example_stacking_parent_title">
+<Modal id="example-stacking-parent" titleId="example-stacking-parent-title">
     <ModalDialog>
-        <ModalHeader modalId="example_stacking_parent" titleId="example_stacking_parent_title">
+        <ModalHeader modalId="example-stacking-parent" titleId="example-stacking-parent-title">
             Modal Title
         </ModalHeader>
         <ModalBody>
@@ -19,16 +19,16 @@
 
         </ModalBody>
         <ModalFooter>
-            <Button data-spirit-toggle="modal" data-spirit-target="#example_stacking_nested">
+            <Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-nested">
                 Open stacked dialog
             </Button>
         </ModalFooter>
     </ModalDialog>
 </Modal>
 
-<Modal id="example_stacking_nested" titleId="example_stacking_nested_title">
+<Modal id="example-stacking-nested" titleId="example-stacking-nested-title">
     <ModalDialog>
-        <ModalHeader modalId="example_stacking_nested" titleId="example_stacking_nested_title">
+        <ModalHeader modalId="example-stacking-nested" titleId="example-stacking-nested-title">
             Stacked Modal Title
         </ModalHeader>
         <ModalBody>
@@ -58,7 +58,7 @@
             <Button
                 color="secondary"
                 data-spirit-dismiss="modal"
-                data-spirit-target="#example_stacking_nested"
+                data-spirit-target="#example-stacking-nested"
             >
                 Secondary action
             </Button>