Skip to content

Commit

Permalink
Refactor(web): Change ID naming to kebab-case
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavelklibani
pavelklibani committed Jun 7, 2024
1 parent 3ce29cd commit 8bf2f18
Show file tree
Hide file tree
Showing 39 changed files with 647 additions and 623 deletions.
4 changes: 2 additions & 2 deletions packages/web/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ This provides the ability to stop the execution of an action before it starts.
Returning false from an event handler will also automatically call `preventDefault()`.

```javascript
var myModal = document.getElementById('myModal');
var myModal = document.getElementById('my-modal');

myModal.addEventListener('show.modal', function (event) {
if (!data) {
Expand All @@ -129,7 +129,7 @@ myModal.addEventListener('show.modal', function (event) {
#### Programmatic API

```javascript
var myModalEl = document.getElementById('myModal');
var myModalEl = document.getElementById('my-modal');

var modal = new Modal(myModalEl); // initialized with defaults
```
Expand Down
40 changes: 20 additions & 20 deletions packages/web/src/js/__tests__/Collapse.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('Collapse', () => {
it('should take care of element passed as a CSS selector', () => {
fixtureEl.innerHTML = `
<button data-spirit-toggle="collapse" data-spirit-target="CollapseExample0"></button>
<div id="CollapseExample0" class="Collapse">
<div id="collapse-example-0" class="Collapse">
<div class="Collapse__content">
test content
</div>
Expand All @@ -36,7 +36,7 @@ describe('Collapse', () => {
it('should toggle a collapse', async () => {
fixtureEl.innerHTML = `
<button data-spirit-toggle="collapse" data-spirit-target="CollapseExample0" aria-expanded="false"></button>
<div id="CollapseExample0" class="Collapse">
<div id="collapse-example-0" class="Collapse">
<div class="Collapse__content">
test content
</div>
Expand All @@ -61,15 +61,15 @@ describe('Collapse', () => {
it('should show a collapse', async () => {
fixtureEl.innerHTML = `
<button data-spirit-toggle="collapse" data-spirit-target="CollapseExample0" aria-expanded="false"></button>
<div id="CollapseExample0" class="Collapse">
<div id="collapse-example-0" class="Collapse">
<div class="Collapse__content">
test content
</div>
</div>
`;

const element = fixtureEl.querySelector('[data-spirit-toggle="collapse"]') as HTMLElement;
const target = fixtureEl.querySelector('#CollapseExample0') as HTMLElement;
const target = fixtureEl.querySelector('#collapse-example-0') as HTMLElement;
const collapse = new Collapse(element);

await collapse.show();
Expand All @@ -86,7 +86,7 @@ describe('Collapse', () => {
it('should hide a collapse', async () => {
fixtureEl.innerHTML = `
<button data-spirit-toggle="collapse" data-spirit-target="CollapseExample0" aria-expanded="true"></button>
<div id="CollapseExample0" class="Collapse">
<div id="collapse-example-0" class="Collapse">
<div class="Collapse__content">
test content
</div>
Expand All @@ -106,22 +106,22 @@ describe('Collapse', () => {
it('should toggle a collapse with parent', async () => {
fixtureEl.innerHTML = `
<section
id="accordionExample1"
id="accordion-example-1"
class="Accordion"
>
<article
id="accordionExample1_article_0"
id="accordion-example-1-article-0"
class="Accordion__item"
>
<h3
id="accordionExample1_article_0_header"
id="accordion-example-1-article-0-header"
class="Accordion__itemHeader"
>
<button
type="button"
class="Accordion__itemToggle"
data-spirit-toggle="collapse"
data-spirit-target="accordionExample1_article_0_collapse"
data-spirit-target="accordion-example1-article-0-collapse"
>
header
</button>
Expand All @@ -137,29 +137,29 @@ describe('Collapse', () => {
</span>
</h3>
<div
id="accordionExample1_article_0_collapse"
id="accordion-example-1-article-0-collapse"
class="Collapse"
data-spirit-parent="#accordionExample1"
aria-labelledby="accordionExample1_article_0_header"
data-spirit-parent="#accordion-example-1"
aria-labelledby="accordion-example1-article-0-header"
>
<div class="Collapse__content">
<div class="Accordion__content">content</div>
</div>
</div>
</article>
<article
id="accordionExample1_article_1"
id="accordion-example-1-article-1"
class="Accordion__item"
>
<h3
id="accordionExample1_article_1_header"
id="accordion-example-1-article-1-header"
class="Accordion__itemHeader"
>
<button
type="button"
class="Accordion__itemToggle"
data-spirit-toggle="collapse"
data-spirit-target="accordionExample1_article_1_collapse"
data-spirit-target="accordion-example-1-article-1-collapse"
aria-expanded="true"
>
header
Expand All @@ -176,10 +176,10 @@ describe('Collapse', () => {
</span>
</h3>
<div
id="accordionExample1_article_1_collapse"
id="accordion-example-1-article-1-collapse"
class="Collapse is-open"
data-spirit-parent="#accordionExample1"
aria-labelledby="accordionExample1_article_1_header"
aria-labelledby="accordion-example-1-article-1-header"
>
<div class="Collapse__content">
<div class="Accordion__content">content</div>
Expand All @@ -190,10 +190,10 @@ describe('Collapse', () => {
`;

const element0 = fixtureEl.querySelector(
'[data-spirit-target="accordionExample1_article_0_collapse"]',
'[data-spirit-target="accordion-example-1-article-0-collapse"]',
) as HTMLElement;
const target0 = fixtureEl.querySelector('#accordionExample1_article_0_collapse') as HTMLElement;
const target1 = fixtureEl.querySelector('#accordionExample1_article_1_collapse') as HTMLElement;
const target0 = fixtureEl.querySelector('#accordion-example-1-article-0-collapse') as HTMLElement;
const target1 = fixtureEl.querySelector('#accordion-example-1-article-1-collapse') as HTMLElement;
const collapse0 = new Collapse(element0);

expect(target0).toHaveClass('Collapse');
Expand Down
14 changes: 7 additions & 7 deletions packages/web/src/js/__tests__/Dropdown.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('Dropdown', () => {
>
toggle
</button>
<div class="Dropdown" id="DropdownDemo1">${childrenHtml}</div>
<div class="Dropdown" id="dropdown-demo-1">${childrenHtml}</div>
`;

const element = fixtureEl.querySelector('[data-spirit-toggle="dropdown"]') as HTMLElement;
Expand All @@ -45,11 +45,11 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = `
<button
data-spirit-toggle="dropdown"
data-spirit-target="#DropdownDemo1"
data-spirit-target="#dropdown-demo-1"
>
toggle
</button>
<div class="Dropdown" id="DropdownDemo1">${childrenHtml}</div>
<div class="Dropdown" id="dropdown-demo-1">${childrenHtml}</div>
`;

const toggleSpy = jest.spyOn(Dropdown.prototype, 'toggle');
Expand All @@ -71,11 +71,11 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = `
<button
data-spirit-toggle="dropdown"
data-spirit-target="#DropdownDemo1"
data-spirit-target="#dropdown-demo-1"
>
toggle
</button>
<div class="Dropdown" id="DropdownDemo1">${childrenHtml}</div>
<div class="Dropdown" id="dropdown-demo-1">${childrenHtml}</div>
`;

const element = fixtureEl.querySelector('[data-spirit-toggle="dropdown"]') as HTMLElement;
Expand All @@ -95,11 +95,11 @@ describe('Dropdown', () => {
fixtureEl.innerHTML = `
<button
data-spirit-toggle="dropdown"
data-spirit-target="#DropdownDemo1"
data-spirit-target="#dropdown-demo-1"
>
toggle
</button>
<div class="Dropdown" id="DropdownDemo1">${childrenHtml}</div>
<div class="Dropdown" id="dropdown-demo-1">${childrenHtml}</div>
`;

const element = fixtureEl.querySelector('[data-spirit-toggle="dropdown"]') as HTMLElement;
Expand Down
8 changes: 4 additions & 4 deletions packages/web/src/js/__tests__/FileUploader.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ describe('FileUploader', () => {
<label for="fileUploadMultiple" class="FileUploaderInput__label">Label</label>
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone"></div>
</div>
<h3 id="attachments-multipleFile" hidden>Attachments</h3>
<ul class="FileUploaderList" aria-labelledby="attachments-multipleFile" data-spirit-element="list"></ul>
<h3 id="attachments-multiple-file" hidden>Attachments</h3>
<ul class="FileUploaderList" aria-labelledby="attachments-multiple-file" data-spirit-element="list"></ul>
</div>
`;

Expand Down Expand Up @@ -83,8 +83,8 @@ describe('FileUploader', () => {
<label for="fileUploadMultiple" class="FileUploaderInput__label">Label</label>
<div class="FileUploaderInput__dropZone" data-spirit-element="dropZone"></div>
</div>
<h3 id="attachments-multipleFile" hidden>Attachments</h3>
<ul class="FileUploaderList" aria-labelledby="attachments-multipleFile" data-spirit-element="list"></ul>
<h3 id="attachments-multiple-file" hidden>Attachments</h3>
<ul class="FileUploaderList" aria-labelledby="attachments-multiple-file" data-spirit-element="list"></ul>
</div>
`;

Expand Down
22 changes: 11 additions & 11 deletions packages/web/src/js/__tests__/Offcanvas.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,12 +230,12 @@ describe('Offcanvas', () => {
describe('data-spirit-api', () => {
it('should not prevent event for input', async () => {
fixtureEl.innerHTML = [
'<input type="checkbox" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvasdiv1">',
'<dialog id="offcanvasdiv1" class="offcanvas"></dialog>',
'<input type="checkbox" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvas-div-1">',
'<dialog id="offcanvas-div-1" class="offcanvas"></dialog>',
].join('');

const target = fixtureEl.querySelector('input') as HTMLInputElement;
const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1') as HTMLElement;
const offCanvasEl = fixtureEl.querySelector('#offcanvas-div-1') as HTMLElement;

offCanvasEl.addEventListener('shown.offcanvas', () => {
expect(offCanvasEl).toHaveClass('show');
Expand All @@ -247,8 +247,8 @@ describe('Offcanvas', () => {

it('should not call toggle on disabled elements', () => {
fixtureEl.innerHTML = [
'<a href="#" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvasdiv1" class="disabled"></a>',
'<div id="offcanvasdiv1" class="offcanvas"></div>',
'<a href="#" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvas-div-1" class="disabled"></a>',
'<div id="offcanvas-div-1" class="offcanvas"></div>',
].join('');

const target = fixtureEl.querySelector('a') as HTMLElement;
Expand All @@ -262,14 +262,14 @@ describe('Offcanvas', () => {

it('should call hide first, if another offcanvas is open', async () => {
fixtureEl.innerHTML = [
'<button id="btn2" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvas2"></button>',
'<dialog id="offcanvas1" class="offcanvas"></dialog>',
'<dialog id="offcanvas2" class="offcanvas"></dialog>',
'<button id="btn-2" data-spirit-toggle="offcanvas" data-spirit-target="#offcanvas-2"></button>',
'<dialog id="offcanvas-1" class="offcanvas"></dialog>',
'<dialog id="offcanvas-2" class="offcanvas"></dialog>',
].join('');

const trigger2 = fixtureEl.querySelector('#btn2') as HTMLElement;
const offcanvasEl1 = document.querySelector('#offcanvas1') as HTMLElement;
const offcanvasEl2 = document.querySelector('#offcanvas2') as HTMLElement;
const trigger2 = fixtureEl.querySelector('#btn-2') as HTMLElement;
const offcanvasEl1 = document.querySelector('#offcanvas-1') as HTMLElement;
const offcanvasEl2 = document.querySelector('#offcanvas-2') as HTMLElement;
const offcanvas1 = new Offcanvas(offcanvasEl1);

offcanvasEl1.addEventListener('shown.offcanvas', () => {
Expand Down
Loading

0 comments on commit 8bf2f18

Please sign in to comment.