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

lmc-eu · Jun 9, 2024 · 58f614f · 58f614f
1 parent 1934685
commit 58f614f
Show file tree

Hide file tree

Showing 165 changed files with 439 additions and 423 deletions.
diff --git a/packages/web-react/DEPRECATIONS-v2.md b/packages/web-react/DEPRECATIONS-v2.md
@@ -40,7 +40,7 @@ Use:
 
 ```jsx
 <TooltipModern
-  id="TooltipModern"
+  id="tooltip-modern"
   // …
 >
   <TooltipTrigger>I have a tooltip!</TooltipTrigger>

diff --git a/packages/web-react/docs/stories/examples/FileUploaderWithImagePreview.stories.tsx b/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">

diff --git a/packages/web-react/docs/stories/examples/ModalStacked.stories.tsx b/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>

diff --git a/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx b/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>

diff --git a/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx b/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>

diff --git a/packages/web-react/docs/stories/examples/ModalWithDropdown.stories.tsx b/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>

diff --git a/packages/web-react/docs/stories/examples/ModalWithForm.stories.tsx b/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>

diff --git a/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx b/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">

diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md
@@ -32,19 +32,19 @@ const toggle = (id) => {
 
 ```javascript
 <Accordion open={openState} toggle={toggle}>
-  <AccordionItem id="AccordionItemExample0">
+  <AccordionItem id="accordion-item-example-0">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
+  <AccordionItem id="accordion-item-example-1">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample2">
+  <AccordionItem id="accordion-item-example-2">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample3">
+  <AccordionItem id="accordion-item-example-3">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
@@ -55,7 +55,7 @@ const toggle = (id) => {
 ### Default with opened on init
 
 ```
-const [openState, setOpenState] = useState<AccordionOpenStateType>(['AccordionItemExample1']);
+const [openState, setOpenState] = useState<AccordionOpenStateType>(['accordion-item-example-1']);
 ```
 
 ### Open only one at a time
@@ -78,11 +78,11 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 
 ```javascript
 <UncontrolledAccordion stayOpen>
-  <AccordionItem id="AccordionItemExample0">
+  <AccordionItem id="accordion-item-example-0">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
+  <AccordionItem id="accordion-item-example-1">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
@@ -92,12 +92,12 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 ### Uncontrolled Accordion with default open value (Stay open)
 
 ```javascript
-<UncontrolledAccordion defaultOpen={['AccordionItemExample1']} stayOpen>
-  <AccordionItem id="AccordionItemExample0">
+<UncontrolledAccordion defaultOpen={['accordion-item-example-1']} stayOpen>
+  <AccordionItem id="accordion-item-example-0">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
+  <AccordionItem id="accordion-item-example-1">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
@@ -108,11 +108,11 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 
 ```javascript
 <UncontrolledAccordion>
-  <AccordionItem id="AccordionItemExample0">
+  <AccordionItem id="accordion-item-example-0">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
+  <AccordionItem id="accordion-item-example-1">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
@@ -122,12 +122,12 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';
 ### Uncontrolled Accordion with open only one at a time and default open value
 
 ```javascript
-<UncontrolledAccordion defaultOpen="AccordionItemExample1">
-  <AccordionItem id="AccordionItemExample0">
+<UncontrolledAccordion defaultOpen="accordion-item-example-1">
+  <AccordionItem id="accordion-item-example-0">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>
-  <AccordionItem id="AccordionItemExample1">
+  <AccordionItem id="accordion-item-example-1">
     <AccordionHeader>Accordion Header</AccordionHeader>
     <AccordionContent>Accordion Content</AccordionContent>
   </AccordionItem>

diff --git a/packages/web-react/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/web-react/src/components/Accordion/__tests__/Accordion.test.tsx
@@ -12,7 +12,7 @@ describe('Accordion', () => {
   stylePropsTest((props: Record<string, unknown>) => {
     const toggle = () => null;
 
-    return <Accordion open={[]} toggle={toggle} {...props} id="AccordionExample" data-testid="test-accordion" />;
+    return <Accordion open={[]} toggle={toggle} {...props} id="accordion-example" data-testid="test-accordion" />;
   }, 'test-accordion');
 
   restPropsTest(Accordion, '.Accordion');

diff --git a/packages/web-react/src/components/Accordion/__tests__/AccordionContent.test.tsx b/packages/web-react/src/components/Accordion/__tests__/AccordionContent.test.tsx
@@ -12,7 +12,7 @@ describe('AccordionContent', () => {
 
   stylePropsTest(
     (props: Record<string, unknown>) => (
-      <AccordionItem id="AccordionItemExample">
+      <AccordionItem id="accordion-item-example">
         <AccordionContent {...props} data-testid="test-accordion-content" />
       </AccordionItem>
     ),

diff --git a/packages/web-react/src/components/Accordion/__tests__/AccordionHeader.test.tsx b/packages/web-react/src/components/Accordion/__tests__/AccordionHeader.test.tsx
@@ -12,7 +12,7 @@ describe('AccordionHeader', () => {
 
   stylePropsTest(
     (props: Record<string, unknown>) => (
-      <AccordionItem id="AccordionItemExample">
+      <AccordionItem id="accordion-item-example">
         <AccordionHeader {...props} data-testid="test-accordion-header" />
       </AccordionItem>
     ),

diff --git a/packages/web-react/src/components/Accordion/__tests__/AccordionItem.test.tsx b/packages/web-react/src/components/Accordion/__tests__/AccordionItem.test.tsx
@@ -14,15 +14,15 @@ describe('AccordionItem', () => {
 
   stylePropsTest(
     (props: Record<string, unknown>) => (
-      <AccordionItem {...props} id="AccordionItemExample" data-testid="test-accordion-item" />
+      <AccordionItem {...props} id="accordion-item-example" data-testid="test-accordion-item" />
     ),
     'test-accordion-item',
   );
 
   restPropsTest(AccordionItem, '.Accordion__item');
 
   it('should render text children', () => {
-    const dom = render(<AccordionItem id="AccordionItemExample">Hello World</AccordionItem>);
+    const dom = render(<AccordionItem id="accordion-item-example">Hello World</AccordionItem>);
     const element = dom.container.querySelector('.Accordion__item') as HTMLElement;
 
     expect(element.textContent).toBe('Hello World');
@@ -31,18 +31,18 @@ describe('AccordionItem', () => {
   it('accordion item should be opened', () => {
     const toggle = () => null;
     const dom = render(
-      <Accordion open={['AccordionItemExample1']} toggle={toggle}>
-        <AccordionItem id="AccordionItemExample1">
+      <Accordion open={['accordion-item-example-1']} toggle={toggle}>
+        <AccordionItem id="accordion-item-example-1">
           <AccordionHeader>header</AccordionHeader>
           <AccordionContent>content</AccordionContent>
         </AccordionItem>
-        <AccordionItem id="AccordionItemExample2">
+        <AccordionItem id="accordion-item-example-2">
           <AccordionHeader>header</AccordionHeader>
           <AccordionContent>content</AccordionContent>
         </AccordionItem>
       </Accordion>,
     );
-    const itemElement = dom.container.querySelector('#AccordionItemExample1') as HTMLElement;
+    const itemElement = dom.container.querySelector('#accordion-item-example-1') as HTMLElement;
     const triggerElement = itemElement.querySelector('button') as HTMLElement;
     const collapseElement = itemElement.querySelector('.Collapse') as HTMLElement;
 

diff --git a/packages/web-react/src/components/Accordion/__tests__/UncontrolledAccordion.test.tsx b/packages/web-react/src/components/Accordion/__tests__/UncontrolledAccordion.test.tsx
@@ -14,7 +14,7 @@ describe('UncontrolledAccordion', () => {
 
   stylePropsTest(
     (props: Record<string, unknown>) => (
-      <UncontrolledAccordion {...props} id="AccordionExample" data-testid="test-accordion" />
+      <UncontrolledAccordion {...props} id="accordion-example" data-testid="test-accordion" />
     ),
     'test-accordion',
   );
@@ -31,7 +31,7 @@ describe('UncontrolledAccordion', () => {
   it('should toggle an accordion', () => {
     const dom = render(
       <UncontrolledAccordion>
-        <AccordionItem id="AccordionItemExample">
+        <AccordionItem id="accordion-item-example">
           <AccordionHeader>Accordion Header</AccordionHeader>
           <AccordionContent>Accordion Content</AccordionContent>
         </AccordionItem>

diff --git a/packages/web-react/src/components/Accordion/demo/Accordion.tsx b/packages/web-react/src/components/Accordion/demo/Accordion.tsx
@@ -30,15 +30,15 @@ export const content = (
 );
 
 const Story = () => {
-  const [openState, setOpenState] = React.useState<AccordionOpenStateType>('AccordionItemExample1');
+  const [openState, setOpenState] = React.useState<AccordionOpenStateType>('AccordionItemExample-1');
 
   const toggle = (id: string) => {
     setOpenState(toggleValueByType(id, openState));
   };
 
   return (
     <Accordion open={openState} toggle={toggle}>
-      <AccordionItem id="AccordionItemExample0">
+      <AccordionItem id="accordion-item-example-0">
         <AccordionHeader
           slot={
             <>
@@ -51,15 +51,15 @@ const Story = () => {
         </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>