docs: removed 'document' references from stories

sbb-design-systems · Jan 17, 2024 · ccf7cf5 · ccf7cf5
1 parent 4404f40
commit ccf7cf5
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 35 deletions.
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.stories.ts b/src/components/checkbox/checkbox-group/checkbox-group.stories.ts
@@ -84,10 +84,10 @@ const childCheck = (event): void => {
     selectedCheckboxes.splice(selectedCheckboxes.indexOf(event.target.value), 1);
   }
   document
-    .getElementById('parent')
+    .getElementById('invariant-parent')
     ?.setAttribute('indeterminate', String(selectedCheckboxes.length === 1));
   document
-    .getElementById('parent')
+    .getElementById('invariant-parent')
     ?.setAttribute('checked', String(selectedCheckboxes.length === 2));
 };
 
@@ -97,8 +97,8 @@ const parentCheck = (event): void => {
   } else {
     selectedCheckboxes = [];
   }
-  document.getElementById('checkbox-1')?.setAttribute('checked', event.target.checked);
-  document.getElementById('checkbox-2')?.setAttribute('checked', event.target.checked);
+  document.getElementById('invariant-checkbox-1')?.setAttribute('checked', event.target.checked);
+  document.getElementById('invariant-checkbox-2')?.setAttribute('checked', event.target.checked);
 };
 
 const IndeterminateGroupTemplate = ({
@@ -114,7 +114,7 @@ const IndeterminateGroupTemplate = ({
   </div>
   <sbb-checkbox-group ${sbbSpread(args)} id="sbb-checkbox-group">
     <sbb-checkbox
-      id="parent"
+      id="invariant-parent"
       value="parent"
       ?checked=${false}
       ?indeterminate=${true}
@@ -125,7 +125,7 @@ const IndeterminateGroupTemplate = ({
       Parent checkbox
     </sbb-checkbox>
     <sbb-checkbox
-      id="checkbox-1"
+      id="invariant-checkbox-1"
       value="checkbox-1"
       ?checked=${true}
       @change=${(event) => childCheck(event)}
@@ -137,7 +137,7 @@ const IndeterminateGroupTemplate = ({
       ${label} option 1
     </sbb-checkbox>
     <sbb-checkbox
-      id="checkbox-2"
+      id="invariant-checkbox-2"
       value="checkbox-2"
       ?checked=${false}
       @change=${(event) => childCheck(event)}

diff --git a/src/components/file-selector/file-selector.stories.ts b/src/components/file-selector/file-selector.stories.ts
@@ -95,7 +95,7 @@ const TemplateWithError = (args): TemplateResult => {
       id="sbb-file-selector"
       @fileChanged=${(event) => {
         if (event.detail && event.detail.length > 0) {
-          document.getElementById('sbb-file-selector')!.append(sbbFormError);
+          event.target!.append(sbbFormError);
         } else {
           sbbFormError.remove();
         }

diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts
@@ -137,13 +137,14 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
         >
           <input
             id="sbb-form-field-input"
-            @keyup=${(event) => {
-              if ((event.currentTarget as HTMLInputElement).value !== '') {
+            @keyup=${(event: KeyboardEvent) => {
+              const input = event.currentTarget as HTMLInputElement;
+              if (input.value !== '') {
                 sbbFormError.remove();
-                document.getElementById('sbb-form-field-input')!.classList.remove(args.cssClass);
+                input.classList.remove(args.cssClass);
               } else {
-                document.getElementById('sbb-form-field')!.append(sbbFormError);
-                document.getElementById('sbb-form-field-input')!.classList.add(args.cssClass);
+                input.closest('#sbb-form-field')!.append(sbbFormError);
+                input.classList.add(args.cssClass);
               }
             }}
             class=${args.cssClass}
@@ -235,12 +236,13 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
           <select
             id="sbb-form-field-input"
             @change=${(event) => {
-              if ((event.currentTarget as HTMLSelectElement).value !== '') {
+              const select = event.currentTarget as HTMLSelectElement;
+              if (select.value !== '0') {
                 sbbFormError.remove();
-                document.getElementById('sbb-form-field-input').classList.remove(args.cssClass);
+                select.classList.remove(args.cssClass);
               } else {
-                document.getElementById('sbb-form-field').append(sbbFormError);
-                document.getElementById('sbb-form-field-input').classList.add(args.cssClass);
+                select.closest('#sbb-form-field')!.append(sbbFormError);
+                select.classList.add(args.cssClass);
               }
             }}
             class=${args.cssClass}

diff --git a/src/components/loading-indicator/loading-indicator.stories.ts b/src/components/loading-indicator/loading-indicator.stories.ts
@@ -26,16 +26,19 @@ const negativeBlockStyle: Args = {
   padding: '2rem',
 };
 
-const createLoadingIndicator = (args): void => {
+const createLoadingIndicator = (event, args): void => {
   const loader: SbbLoadingIndicatorElement = document.createElement('sbb-loading-indicator');
+  const container = (event.currentTarget as HTMLElement).parentElement.querySelector(
+    '.loader-container',
+  );
   loader.setAttribute('aria-label', 'Loading, please wait');
   loader.size = args['size'];
   loader.variant = args['variant'];
-  document.querySelector('.loader-container')!.append(loader);
+  container.append(loader);
   setTimeout(() => {
     const p = document.createElement('p');
     p.textContent = "Loading complete. Here's your data: . . . ";
-    document.querySelector('.loader-container')!.append(p);
+    container.append(p);
     loader.remove();
   }, 5000);
 };
@@ -50,7 +53,7 @@ const TemplateAccessibility = (args): TemplateResult => html`
   <div style=${styleMap(textBlockStyle)}>
     Turn on your screen-reader and click the button to make the loading indicator appear.
   </div>
-  <sbb-button data-testid="trigger" @click=${() => createLoadingIndicator(args)}>
+  <sbb-button data-testid="trigger" @click=${(event) => createLoadingIndicator(event, args)}>
     Show loader
   </sbb-button>
   <div class="loader-container" aria-live="polite"></div>

diff --git a/src/components/selection-panel/selection-panel.stories.ts b/src/components/selection-panel/selection-panel.stories.ts
@@ -368,14 +368,15 @@ const WithCheckboxesErrorMessageTemplate = ({
       orientation="vertical"
       horizontal-from="large"
       id="sbb-checkbox-group"
-      @change=${() => {
-        const hasChecked = Array.from(
-          document.getElementById('sbb-checkbox-group').querySelectorAll('sbb-checkbox'),
-        ).some((el) => el.checked);
+      @change=${(event: Event) => {
+        const checkboxGroup = event.currentTarget as HTMLElement;
+        const hasChecked = Array.from(checkboxGroup.querySelectorAll('sbb-checkbox')).some(
+          (el) => el.checked,
+        );
         if (hasChecked) {
           sbbFormError.remove();
         } else {
-          document.getElementById('sbb-checkbox-group').append(sbbFormError);
+          checkboxGroup.append(sbbFormError);
         }
       }}
     >
@@ -420,7 +421,7 @@ const WithRadiosErrorMessageTemplate = ({
         if (event.detail.value) {
           sbbFormError.remove();
         } else {
-          document.getElementById('sbb-radio-group').append(sbbFormError);
+          event.currentTarget.append(sbbFormError);
         }
       }}
     >

diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts
@@ -13,7 +13,7 @@ import '../icon';
 const changeEventHandler = (event): void => {
   const div = document.createElement('div');
   div.innerText = `current value is: ${event.target.value}. Min is: ${event.target.min}. Max is ${event.target.max}.`;
-  document.getElementById('container-value').prepend(div);
+  (event.currentTarget as HTMLElement).parentElement.querySelector('#container-value').prepend(div);
 };
 
 const TemplateSbbSlider = (args: Args): TemplateResult =>

diff --git a/src/components/tag/tag-group/tag-group.stories.ts b/src/components/tag/tag-group/tag-group.stories.ts
@@ -9,13 +9,16 @@ import { sbbSpread } from '../../core/dom';
 import readme from './readme.md?raw';
 import './tag-group';
 import '../tag';
+import type { SbbTagGroupElement } from './tag-group';
 
-const uncheckAllTag = (): void => {
-  document.getElementById('all').removeAttribute('checked');
+const uncheckAllTag = (event): void => {
+  const tagGroup = event.currentTarget.closest('sbb-tag-group') as SbbTagGroupElement;
+  tagGroup.querySelector('#all').removeAttribute('checked');
 };
 
-const uncheckTags = (): void => {
-  Array.from(document.querySelectorAll('sbb-tag'))
+const uncheckTags = (event): void => {
+  const tagGroup = event.currentTarget.closest('sbb-tag-group') as SbbTagGroupElement;
+  Array.from(tagGroup.querySelectorAll('sbb-tag'))
     .filter((e) => e.getAttribute('id') !== 'all' && !e.getAttribute('disabled'))
     .forEach((e) => e.removeAttribute('checked'));
 };
@@ -99,11 +102,11 @@ const ExclusiveTagGroupTemplate = ({ numberOfTagsInGroup, ...args }): TemplateRe
 
 const AllChoiceTagGroupTemplate = ({ numberOfTagsInGroup, ...args }): TemplateResult => html`
   <sbb-tag-group ${sbbSpread(args)}>
-    <sbb-tag id="all" @change=${() => uncheckTags()} value="All" checked> All </sbb-tag>
+    <sbb-tag id="all" @change=${(ev) => uncheckTags(ev)} value="All" checked> All </sbb-tag>
     ${repeat(
       new Array(numberOfTagsInGroup),
       (_e, i) => html`
-        <sbb-tag @change=${() => uncheckAllTag()} amount="123" value=${`Label ${i + 1}`}>
+        <sbb-tag @change=${(ev) => uncheckAllTag(ev)} amount="123" value=${`Label ${i + 1}`}>
           Label ${i + 1}
         </sbb-tag>
       `,

diff --git a/src/components/toast/toast.stories.ts b/src/components/toast/toast.stories.ts
@@ -94,7 +94,10 @@ const defaultArgs: Args = {
 };
 
 const toastTemplate = (args, action, contentLength = 's'): TemplateResult => html`
-  <sbb-button @click=${() => document.querySelector('sbb-toast').open()}>Show toast</sbb-button>
+  <sbb-button
+    @click=${(event) => event.currentTarget.parentElement.querySelector('sbb-toast').open()}
+    >Show toast</sbb-button
+  >
   <sbb-toast ${sbbSpread(args)} data-testid="sbb-toast">
     ${contentLength === 's'
       ? 'Lorem ipsum dolor'