🤯 ID naming conventions across packages

apps/web-twig-demo/assets/scripts/toast-dynamic.ts

@@ -57,4 +57,4 @@ declare global {
 window.addDynamicToast = addDynamicToast;
 window.clearQueue = clearQueue;
 
-export default addDynamicToast;
+export default addDynamicToast;

apps/web-twig-demo/package.json

@@ -32,4 +32,4 @@
     "watch": "encore dev --watch",
     "build": "encore production --progress"
   }
-}
+}

apps/web-twig-demo/yarn.lock

@@ -4815,4 +4815,4 @@ yargs-parser@^21.0.0:
 yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
-  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==

configs/jest-config-spirit/package.json

@@ -30,4 +30,4 @@
     "jest-environment-node-single-context": "29.4.0",
     "resize-observer-polyfill": "^1.5.1"
   }
-}
+}

packages/form-validations/README.md

@@ -31,7 +31,7 @@ Or
 Now create a form:
 
 ```html
-<form id="form1">
+<form id="form-1">
   <label for="email">Email</label>
   <input type="email" id="email" required />
   <button>Subscribe</button>

packages/form-validations/index.html

@@ -50,7 +50,7 @@
     >
       <h2 class="docs-Heading">Real-World examples</h2>
 
-      <form id="form1" method="get" novalidate>
+      <form id="form-1" method="get" novalidate>
         <div class="Stack Stack--hasSpacing">
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="username" class="TextField__label TextField__label--required">Username</label>
@@ -69,8 +69,8 @@ <h2 class="docs-Heading">Real-World examples</h2>
             <input type="password" id="password" class="TextField__input" required data-spirit-required-message="Please choose a password" data-spirit-pattern= "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/" data-spirit-pattern-message="Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="retypepassword" class="TextField__label TextField__label--required">Retype password</label>
-            <input type="password" id="retypepassword" class="TextField__input" data-spirit-equals="#password" data-spirit-equals-message="Passwords don't match" />
+            <label for="retype-password" class="TextField__label TextField__label--required">Retype password</label>
+            <input type="password" id="retype-password" class="TextField__input" data-spirit-equals="#password" data-spirit-equals-message="Passwords don't match" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="email" class="TextField__label TextField__label--required">Email</label>
@@ -80,8 +80,8 @@ <h2 class="docs-Heading">Real-World examples</h2>
             <label for="phone" class="TextField__label">Phone</label>
             <input type="tel" id="phone" class="TextField__input" placeholder="+420 733 333 333" data-spirit-pattern="/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/" data-spirit-pattern-message="Invalid phone number" />
           </div>
-          <label for="checkboxfield1" class="CheckboxField" data-spirit-validate>
-            <input type="checkbox" id="checkboxfield1" name="checkboxfield1" class="CheckboxField__input" required />
+          <label for="checkbox-field-1" class="CheckboxField" data-spirit-validate>
+            <input type="checkbox" id="checkbox-field-1" name="checkboxfield1" class="CheckboxField__input" required />
             <span class="CheckboxField__text">
               <span class="CheckboxField__label CheckboxField__label--required">I accept the terms and conditions (required)</span>
             </span>
@@ -111,39 +111,39 @@ <h2 class="docs-Heading">Real-World examples</h2>
     >
       <h2 class="docs-Heading">Common Validations</h2>
 
-      <form id="form2" method="get" novalidate>
+      <form id="form-2" method="get" novalidate>
         <div class="Stack Stack--hasSpacing">
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="required" class="TextField__label TextField__label--required">Required TextField</label>
             <input type="text" id="required" class="TextField__input" required />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="emailCommon" class="TextField__label">TextField <code>type="email"</code>, not required</label>
-            <input type="email" id="emailCommon" class="TextField__input" />
+            <label for="email-common" class="TextField__label">TextField <code>type="email"</code>, not required</label>
+            <input type="email" id="email-common" class="TextField__input" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="minlength" class="TextField__label">TextField <code>minlength="2"</code></label>
-            <input type="text" id="minlength" class="TextField__input" minlength="2" />
+            <label for="min-length" class="TextField__label">TextField <code>minlength="2"</code></label>
+            <input type="text" id="min-length" class="TextField__input" minlength="2" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="number" class="TextField__label">TextField <code>type="number"</code>, not required</label>
             <input type="number" id="number" class="TextField__input" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="numbermin" class="TextField__label">TextField <code>type="number"</code>, <code>min="100"</code>, not required</label>
-            <input type="number" id="numbermin" class="TextField__input" min="100" />
+            <label for="number-min" class="TextField__label">TextField <code>type="number"</code>, <code>min="100"</code>, not required</label>
+            <input type="number" id="number-min" class="TextField__input" min="100" />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="numberMinRequired" class="TextField__label TextField__label--required">TextField <code>type="number"</code>, <code>min="100"</code>, required</label>
-            <input type="number" id="numberMinRequired" class="TextField__input" min="100" required />
+            <label for="number-min-required" class="TextField__label TextField__label--required">TextField <code>type="number"</code>, <code>min="100"</code>, required</label>
+            <input type="number" id="number-min-required" class="TextField__input" min="100" required />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="patternRequired" class="TextField__label TextField__label--required">TextField with <code>pattern="/^\d+\.\d{2}$/"</code> (match decimal with 2 points), required</label>
-            <input type="number" id="patternRequired" step="0.01" class="TextField__input" pattern="/^\d+\.\d{2}$/" required />
+            <label for="pattern-required" class="TextField__label TextField__label--required">TextField with <code>pattern="/^\d+\.\d{2}$/"</code> (match decimal with 2 points), required</label>
+            <input type="number" id="pattern-required" step="0.01" class="TextField__input" pattern="/^\d+\.\d{2}$/" required />
           </div>
           <div class="TextField TextField--fluid" data-spirit-validate>
-            <label for="patternCustomMessage" class="TextField__label TextField__label--required">TextField with same as above field, but with custom message</label>
-            <input type="number" id="patternCustomMessage" step="0.01" class="TextField__input" pattern="/^\d+\.\d{2}$/g" required data-spirit-pattern-message="The value must have 2 decimal points" />
+            <label for="pattern-custom-message" class="TextField__label TextField__label--required">TextField with same as above field, but with custom message</label>
+            <input type="number" id="pattern-custom-message" step="0.01" class="TextField__input" pattern="/^\d+\.\d{2}$/g" required data-spirit-pattern-message="The value must have 2 decimal points" />
           </div>
           <div>
             <button type="submit" class="Button Button--primary Button--medium Button--block">Submit</button>
@@ -171,7 +171,7 @@ <h2 class="docs-Heading">Common Validations</h2>
     >
       <h2 class="docs-Heading">Custom global validator</h2>
 
-      <form id="form3" method="get" novalidate>
+      <form id="form-3" method="get" novalidate>
         <div class="Stack Stack--hasSpacing">
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="custom-global-validator" class="TextField__label TextField__label--required">Required TextField, Range 10 - 30</label>
@@ -203,7 +203,7 @@ <h2 class="docs-Heading">Custom global validator</h2>
     >
       <h2 class="docs-Heading">Custom validator to a specific field</h2>
 
-      <form id="form4" method="get" novalidate>
+      <form id="form-4" method="get" novalidate>
         <div class="Stack Stack--hasSpacing">
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="custom-field-specific-validator" class="TextField__label TextField__label--required">Required TextField, First Letter Capitalized</label>
@@ -235,7 +235,7 @@ <h2 class="docs-Heading">Custom validator to a specific field</h2>
     >
       <h2 class="docs-Heading">Custom error messages</h2>
 
-      <form id="form5" method="get" novalidate>
+      <form id="form-5" method="get" novalidate>
         <div class="Stack Stack--hasSpacing">
           <div class="TextField TextField--fluid" data-spirit-validate>
             <label for="custom-errors-textfield" class="TextField__label TextField__label--required">Required TextField</label>

packages/form-validations/src/__tests__/FormValidations.test.ts

@@ -18,8 +18,8 @@ describe('FormValidations', () => {
             </select>
 
             <input id="checkbox" type="checkbox" name="future" required />
-            <input id="ch2" type="checkbox" name="future" required />
-            <input id="ch3" type="checkbox" name="future" required />
+            <input id="ch-2" type="checkbox" name="future" required />
+            <input id="ch-3" type="checkbox" name="future" required />
           </div>
         </form>
       </div>`;

packages/web-react/DEPRECATIONS-v2.md

@@ -40,7 +40,7 @@ Use:
 
 ```jsx
 <TooltipModern
-  id="TooltipModern"
+  id="tooltip-modern"
   // …
 >
   <TooltipTrigger>I have a tooltip!</TooltipTrigger>

packages/web-react/docs/stories/examples/FileUploaderWithImagePreview.stories.tsx

@@ -62,15 +62,15 @@ export const FileUploaderWithModalImagePreview = (args) => {
     <>
       <FileUploader
         {...args}
-        id="fileUploaderExample"
+        id="file-uploader-example"
         onDismiss={onDismiss}
         fileQueue={fileQueue}
         addToQueue={imagePreview}
         clearQueue={clearQueue}
         updateQueue={updateQueue}
       >
         <FileUploaderInput
-          id="fileUploaderExampleInput"
+          id="file-uploader-example-input"
           name="attachments"
           label="Label"
           linkText="Upload your file(s)"
@@ -83,14 +83,14 @@ export const FileUploaderWithModalImagePreview = (args) => {
           accept=".png,image/jpeg"
         />
         <FileUploaderList
-          id="fileUploaderExampleList"
+          id="file-uploader-example-list"
           label="Attachments"
           inputName="attachments"
           attachmentComponent={attachmentComponent}
           hasImagePreview
         />
       </FileUploader>
-      <Modal id="ModalExample" isOpen={isModalOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isModalOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalBody>
             <div className="pt-400 pt-tablet-600">

packages/web-react/docs/stories/examples/ModalStacked.stories.tsx

@@ -24,7 +24,7 @@ export const ModalStacked = () => {
       <Button onClick={toggleStackedModal} aria-expanded={isStackedOpen} aria-controls="ModalStacked">
         {isStackedOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalChild" isOpen={isChildOpen} onClose={handleChildClose}>
+      <Modal id="modal-child" isOpen={isChildOpen} onClose={handleChildClose}>
         <ModalDialog>
           <ModalHeader>Child Modal</ModalHeader>
           <ModalBody>
@@ -41,7 +41,7 @@ export const ModalStacked = () => {
           </ModalFooter>
         </ModalDialog>
       </Modal>
-      <Modal id="ModalStacked" isOpen={isStackedOpen} onClose={handleStackedClose}>
+      <Modal id="modal-stacked" isOpen={isStackedOpen} onClose={handleStackedClose}>
         <ModalDialog>
           <ModalHeader>Modal</ModalHeader>
           <ModalBody>

packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx

@@ -28,27 +28,27 @@ export const ModalWithAccordion = () => {
 
   return (
     <>
-      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
+      <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="modal-example">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalHeader>Modal With Accordion</ModalHeader>
           <ModalBody>
-            <UncontrolledAccordion id="AccordionExample" defaultOpen="AccordionItemExample1">
-              <AccordionItem id="AccordionItemExample0">
+            <UncontrolledAccordion id="accordion-example" defaultOpen="accordion-item-example-1">
+              <AccordionItem id="accordion-item-example-0">
                 <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #0</AccordionHeader>
                 <AccordionContent>{content}</AccordionContent>
               </AccordionItem>
-              <AccordionItem id="AccordionItemExample1">
+              <AccordionItem id="accordion-item-example-1">
                 <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
                 <AccordionContent>{content}</AccordionContent>
               </AccordionItem>
-              <AccordionItem id="AccordionItemExample2">
+              <AccordionItem id="accordion-item-example-2">
                 <AccordionHeader>Accordion Header #2</AccordionHeader>
                 <AccordionContent>{content}</AccordionContent>
               </AccordionItem>
-              <AccordionItem id="AccordionItemExample3">
+              <AccordionItem id="accordion-item-example-3">
                 <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
                 <AccordionContent>{content}</AccordionContent>
               </AccordionItem>

packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx

@@ -21,11 +21,13 @@ export const ModalWithCollapse = () => {
       <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalHeader />
           <ModalBody>
-            <UncontrolledCollapse renderTrigger={CollapseTrigger}>{content}</UncontrolledCollapse>
+            <UncontrolledCollapse id="uncontrolled-collapse" renderTrigger={CollapseTrigger}>
+              {content}
+            </UncontrolledCollapse>
           </ModalBody>
         </ModalDialog>
       </Modal>

packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx

@@ -29,7 +29,7 @@ export const ModalWithDropdown = () => {
       <Button onClick={toggleModal} aria-expanded={isModalOpen} aria-controls="ModalExample">
         {isModalOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalExample" isOpen={isModalOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isModalOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalHeader />
           <ModalBody>

packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx

@@ -33,26 +33,26 @@ export const ModalWithForm = () => {
       <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalHeader>Modal with Form </ModalHeader>
           <ModalBody>
             <form method="get" action="#">
               <Stack hasSpacing>
-                <TextField label="Name" />
-                <Select label="Choose your allegiance">
+                <TextField id="name" label="Name" />
+                <Select id="allegiance" label="Choose your allegiance">
                   <option value="" selected disabled>
                     Order
                   </option>
                   <option value="1">Jedi</option>
                   <option value="2">Sith</option>
                 </Select>
-                <Checkbox label="Inform the User?" />
-                <FieldGroup label="Do it?">
+                <Checkbox id="inform-user" label="Inform the User?" />
+                <FieldGroup id="now-or-never" label="Do it?">
                   <Radio label="Now" id="now" name="do-it" />
                   <Radio label="Never" id="never" name="do-it" />
                 </FieldGroup>
-                <TextArea />
+                <TextArea id="textarea" />
                 <Button type="submit">Send</Button>
               </Stack>
             </form>

packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx

@@ -19,7 +19,7 @@ export const ModalWithScrollView = () => {
       <Button onClick={toggleModal} aria-expanded={isOpen} aria-controls="ModalExample">
         {isOpen ? 'Close' : 'Open'} Modal
       </Button>
-      <Modal id="ModalExample" isOpen={isOpen} onClose={handleClose}>
+      <Modal id="modal-example" isOpen={isOpen} onClose={handleClose}>
         <ModalDialog>
           <ModalHeader>Modal with ScrollView </ModalHeader>
           <ScrollView overflowDecorators="both">