Refactor(web-twig): Change ID naming to kebab-case

lmc-eu · Jun 7, 2024 · d292b4b · d292b4b
1 parent 8bf2f18
commit d292b4b
Show file tree

Hide file tree

Showing 116 changed files with 374 additions and 377 deletions.
diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md
@@ -6,35 +6,35 @@ This is Twig implementation of the [Accordion][accordion] component.
 
 ```html
 <Accordion>
-  <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
+  <AccordionItem id="accordion-item-example-0">
+    <AccordionHeader id="accordion-item-example-0-header" for="accordion-item-example-0-content">
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
+    <AccordionContent id="accordion-item-example-0-content" labelledById="accordion-item-example-0-header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content">
+  <AccordionItem id="accordion-item-example-1">
+    <AccordionHeader id="accordion-item-example-1-header" for="accordion-item-example-1-content">
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header">
+    <AccordionContent id="accordion-item-example-1-content" labelledById="accordion-item-example-1-header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample2">
-    <AccordionHeader id="AccordionItemExample2Header" for="AccordionItemExample2Content">
+  <AccordionItem id="accordion-item-example-2">
+    <AccordionHeader id="accordion-item-example-2-header" for="accordion-item-example-2-content">
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample2Content" labelledById="AccordionItemExample2Header">
+    <AccordionContent id="accordion-item-example-2-content" labelledById="accordion-item-example-2-header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample3">
-    <AccordionHeader id="AccordionItemExample3Header" for="AccordionItemExample3Content">
+  <AccordionItem id="accordion-item-example-3">
+    <AccordionHeader id="accordion-item-example-3-header" for="accordion-item-example-3-content">
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample3Content" labelledById="AccordionItemExample3Header">
+    <AccordionContent id="accordion-item-example-3-content" labelledById="accordion-item-example-3-header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
@@ -46,19 +46,19 @@ This is Twig implementation of the [Accordion][accordion] component.
 
 ```html
 <Accordion>
-  <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
+  <AccordionItem id="accordion-item-example-0">
+    <AccordionHeader id="accordion-item-example-0-header" for="accordion-item-example-0-content">
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
+    <AccordionContent id="accordion-item-example-0-content" labelledById="accordion-item-example-0-header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content" isOpen>
+  <AccordionItem id="accordion-item-example-1">
+    <AccordionHeader id="accordion-item-example-1-header" for="accordion-item-example-1-content" isOpen>
       Accordion Header
     </AccordionHeader>
-    <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header" isOpen>
+    <AccordionContent id="accordion-item-example-1-content" labelledById="accordion-item-example-1-header" isOpen>
       Accordion Content
     </AccordionContent>
   </AccordionItem>
@@ -68,27 +68,27 @@ This is Twig implementation of the [Accordion][accordion] component.
 ## Usage with only one open item at a time
 
 ```html
-<Accordion id="AccordionExample">
-  <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
+<Accordion id="accordion-example">
+  <AccordionItem id="accordion-item-example-0">
+    <AccordionHeader id="accordion-item-example-0-header" for="accordion-item-example-0-content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent
-      id="AccordionItemExample0Content"
-      labelledById="AccordionItemExample0Header"
-      parent="AccordionExample"
+      id="accordion-item-example-0-content"
+      labelledById="accordion-item-example-0-header"
+      parent="accordion-example"
     >
       Accordion Content
     </AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content">
+  <AccordionItem id="accordion-item-example-1">
+    <AccordionHeader id="accordion-item-example-1-header" for="accordion-item-example-1-content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent
-      id="AccordionItemExample1Content"
-      labelledById="AccordionItemExample1Header"
-      parent="AccordionExample"
+      id="accordion-item-example-1-content"
+      labelledById="accordion-item-example-1-header"
+      parent="accordion-example"
     >
       Accordion Content
     </AccordionContent>
@@ -103,8 +103,8 @@ Header:
 
 ```html
 <AccordionHeader
-  id="AccordionItemExample1Header"
-  for="AccordionItemExample1Content"
+  id="accordion-item-example-1-header"
+  for="accordion-item-example-1-content"
   UNSAFE_slot="<span>my content</span>"
 >
   Accordion Item
@@ -123,8 +123,8 @@ rendered result into the slot:
 {% endset %}
 
 <AccordionHeader
-    id="AccordionItemExample1Header"
-    for="AccordionItemExample1Content"
+    id="accordion-item-example-1-header"
+    for="accordion-item-example-1-content"
     UNSAFE_slot={{ slotContent }}
 >
     Accordion Item
@@ -133,8 +133,8 @@ rendered result into the slot:
 {# This DOES NOT WORK #}
 
 <AccordionHeader
-    id="AccordionItemExample1Header"
-    for="AccordionItemExample1Content"
+    id="accordion-item-example-1-header"
+    for="accordion-item-example-1-content"
     UNSAFE_slot="<Pill color="selected">3</Pill>"
 >
     Accordion Item
@@ -145,7 +145,7 @@ rendered result into the slot:
 
 ```twig
 {% embed "@spirit/accordion.twig" with { props: {
-  id: 'AccordionExample',
+  id: 'accordion-example',
 } } %}
     {% block content %}
         {% embed "@spirit/accordionItem.twig" with { props: {
@@ -164,7 +164,7 @@ rendered result into the slot:
                 {% embed "@spirit/accordionContent.twig" with { props: {
                   id: 'AccordionItemExampleContent',
                   labelledById: 'AccordionItemExampleHeader',
-                  parent: 'AccordionExample',
+                  parent: 'accordion-example',
                   isOpen: true,
                 } } %}
                     {% block content %}

diff --git a/.../web-twig/src/Resources/components/Accordion/__tests__/__fixtures__/accordionDefault.twig b/.../web-twig/src/Resources/components/Accordion/__tests__/__fixtures__/accordionDefault.twig
@@ -1,27 +1,27 @@
-<Accordion id="AccordionExample">
-    <AccordionItem id="AccordionItemExample0">
+<Accordion id="accordion-example">
+    <AccordionItem id="accordion-item-example-0">
         <AccordionHeader
-            id="AccordionItemExample0Header"
-            for="AccordionItemExample0Content"
+            id="accordion-item-example-0-header"
+            for="AccordionItemExample-0Content"
             UNSAFE_slot="<span>my HTML content</span>"
         >
             Accordion Header
         </AccordionHeader>
-        <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header" parent="AccordionExample">
+        <AccordionContent id="accordion-item-example-0-content" labelledById="accordion-item-example-0-header" parent="AccordionExample">
             Accordion Content
         </AccordionContent>
     </AccordionItem>
-    <AccordionItem id="AccordionItemExample1">
+    <AccordionItem id="accordion-item-example-1">
         <AccordionHeader
-            id="AccordionItemExample1Header"
-            for="AccordionItemExample1Content"
+            id="accordion-item-example-1-header"
+            for="accordion-item-example-1-content"
             isOpen
         >
             Accordion Header
         </AccordionHeader>
         <AccordionContent
-            id="AccordionItemExample1Content"
-            labelledById="AccordionItemExample1Header"
+            id="accordion-item-example-1-content"
+            labelledById="accordion-item-example-1-header"
             parent="AccordionExample"
             isOpen
         >

diff --git a/...web-twig/src/Resources/components/Accordion/__tests__/__fixtures__/accordionStayOpen.twig b/...web-twig/src/Resources/components/Accordion/__tests__/__fixtures__/accordionStayOpen.twig
@@ -1,24 +1,24 @@
 <Accordion>
-    <AccordionItem id="AccordionItemExample0">
+    <AccordionItem id="accordion-item-example-0">
         <AccordionHeader
-            id="AccordionItemExample0Header"
-            for="AccordionItemExample0Content"
+            id="accordion-item-example-0-header"
+            for="accordion-item-example-0-content"
         >
             Accordion Header
         </AccordionHeader>
-        <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
+        <AccordionContent id="accordion-item-example-0-content" labelledById="accordion-item-example-0-header">
             Accordion Content
         </AccordionContent>
     </AccordionItem>
-    <AccordionItem id="AccordionItemExample1">
+    <AccordionItem id="accordion-item-example-1">
         <AccordionHeader
-            id="AccordionItemExample1Header"
-            for="AccordionItemExample1Content"
+            id="accordion-item-example-1-header"
+            for="accordion-item-example-1-content"
             isOpen
         >
             Accordion Header
         </AccordionHeader>
-        <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header" isOpen>
+        <AccordionContent id="accordion-item-example-1-content" labelledById="accordion-item-example-1-header" isOpen>
             Accordion Content
         </AccordionContent>
     </AccordionItem>

diff --git a/...rc/Resources/components/Accordion/__tests__/__snapshots__/accordionDefault.twig.snap.html b/...rc/Resources/components/Accordion/__tests__/__snapshots__/accordionDefault.twig.snap.html
@@ -5,17 +5,17 @@
     </title>
   </head>
   <body>
-    <section id="AccordionExample" class="Accordion">
-      <article id="AccordionItemExample0" class="Accordion__item">
-        <h3 id="AccordionItemExample0Header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="AccordionItemExample0Content" aria-expanded="false" aria-controls="AccordionItemExample0Content">Accordion
+    <section id="accordion-example" class="Accordion">
+      <article id="accordion-item-example-0" class="Accordion__item">
+        <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="AccordionItemExample-0Content" aria-expanded="false" aria-controls="AccordionItemExample-0Content">Accordion
           Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemSlot"><span>my HTML
           content</span></span> <span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
           <path d="M15.88 9.63479L12 13.5148L8.11998 9.63479C7.72998 9.24479 7.09998 9.24479 6.70998 9.63479C6.31998 10.0248 6.31998 10.6548 6.70998 11.0448L11.3 15.6348C11.69 16.0248 12.32 16.0248 12.71 15.6348L17.3 11.0448C17.69 10.6548 17.69 10.0248 17.3 9.63479C16.91 9.25479 16.27 9.24479 15.88 9.63479Z" fill="currentColor">
           </path></svg></span></span>
         </h3>
 
-        <div id="AccordionItemExample0Content" class="Collapse" aria-labelledby="AccordionItemExample0Header" data-spirit-parent="AccordionExample">
+        <div id="accordion-item-example-0-content" class="Collapse" aria-labelledby="accordion-item-example-0-header" data-spirit-parent="AccordionExample">
           <div class="Collapse__content">
             <div class="Accordion__content">
               Accordion Content
@@ -24,15 +24,14 @@ <h3 id="AccordionItemExample0Header" class="Accordion__itemHeader">
         </div>
       </article>
 
-      <article id="AccordionItemExample1" class="Accordion__item">
-        <h3 id="AccordionItemExample1Header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="AccordionItemExample1Content" aria-expanded="true" aria-controls="AccordionItemExample1Content">Accordion
-          Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+      <article id="accordion-item-example-1" class="Accordion__item">
+        <h3 id="accordion-item-example-1-header" class="Accordion__itemHeader">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-1-content" aria-expanded="true" aria-controls="accordion-item-example-1-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
           <use href="#e4d24000792e7660bc881b0a7e9ee481">
           </use></svg></span></span>
         </h3>
 
-        <div id="AccordionItemExample1Content" class="Collapse is-open" aria-labelledby="AccordionItemExample1Header" data-spirit-parent="AccordionExample">
+        <div id="accordion-item-example-1-content" class="Collapse is-open" aria-labelledby="accordion-item-example-1-header" data-spirit-parent="AccordionExample">
           <div class="Collapse__content">
             <div class="Accordion__content">
               Accordion Content

diff --git a/...c/Resources/components/Accordion/__tests__/__snapshots__/accordionStayOpen.twig.snap.html b/...c/Resources/components/Accordion/__tests__/__snapshots__/accordionStayOpen.twig.snap.html
@@ -6,15 +6,14 @@
   </head>
   <body>
     <section class="Accordion">
-      <article id="AccordionItemExample0" class="Accordion__item">
-        <h3 id="AccordionItemExample0Header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="AccordionItemExample0Content" aria-expanded="false" aria-controls="AccordionItemExample0Content">Accordion
-          Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
+      <article id="accordion-item-example-0" class="Accordion__item">
+        <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-0-content" aria-expanded="false" aria-controls="accordion-item-example-0-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
           <path d="M15.88 9.63479L12 13.5148L8.11998 9.63479C7.72998 9.24479 7.09998 9.24479 6.70998 9.63479C6.31998 10.0248 6.31998 10.6548 6.70998 11.0448L11.3 15.6348C11.69 16.0248 12.32 16.0248 12.71 15.6348L17.3 11.0448C17.69 10.6548 17.69 10.0248 17.3 9.63479C16.91 9.25479 16.27 9.24479 15.88 9.63479Z" fill="currentColor">
           </path></svg></span></span>
         </h3>
 
-        <div id="AccordionItemExample0Content" class="Collapse" aria-labelledby="AccordionItemExample0Header">
+        <div id="accordion-item-example-0-content" class="Collapse" aria-labelledby="accordion-item-example-0-header">
           <div class="Collapse__content">
             <div class="Accordion__content">
               Accordion Content
@@ -23,15 +22,14 @@ <h3 id="AccordionItemExample0Header" class="Accordion__itemHeader">
         </div>
       </article>
 
-      <article id="AccordionItemExample1" class="Accordion__item">
-        <h3 id="AccordionItemExample1Header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="AccordionItemExample1Content" aria-expanded="true" aria-controls="AccordionItemExample1Content">Accordion
-          Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
+      <article id="accordion-item-example-1" class="Accordion__item">
+        <h3 id="accordion-item-example-1-header" class="Accordion__itemHeader">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-1-content" aria-expanded="true" aria-controls="accordion-item-example-1-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
           <use href="#e4d24000792e7660bc881b0a7e9ee481">
           </use></svg></span></span>
         </h3>
 
-        <div id="AccordionItemExample1Content" class="Collapse is-open" aria-labelledby="AccordionItemExample1Header">
+        <div id="accordion-item-example-1-content" class="Collapse is-open" aria-labelledby="accordion-item-example-1-header">
           <div class="Collapse__content">
             <div class="Accordion__content">
               Accordion Content