-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into issue-2437/table-tabbing-in-edit-mode
- Loading branch information
Showing
10 changed files
with
622 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
import { newE2EPage } from '@stencil/core/testing'; | ||
|
||
describe('modus-utility-panel', () => { | ||
it('renders', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<modus-utility-panel></modus-utility-panel>'); | ||
|
||
const element = await page.find('modus-utility-panel'); | ||
expect(element).toHaveClass('hydrated'); | ||
}); | ||
|
||
it('renders changes to expanded prop', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
|
||
const element = await page.find('modus-utility-panel >>> .utility-panel'); | ||
expect(element).toHaveClass('open'); | ||
}); | ||
|
||
it('renders changes to pushContent prop', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
component.setProperty('targetContent', '#content'); | ||
component.setProperty('pushContent', true); | ||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete | ||
|
||
const content = await page.find('#content'); | ||
const computedStyle = await content.getComputedStyle(); | ||
expect(computedStyle['marginRight']).toEqual('312px'); | ||
|
||
component.setProperty('expanded', false); | ||
await page.waitForChanges(); | ||
await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete | ||
|
||
const updatedStyle = await content.getComputedStyle(); | ||
expect(updatedStyle['marginRight']).toEqual('0px'); | ||
}); | ||
|
||
it('emits panelOpened event', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
const openedEvent = await page.spyOnEvent('panelOpened'); | ||
|
||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
|
||
expect(openedEvent).toHaveReceivedEvent(); | ||
}); | ||
|
||
it('emits panelClosed event', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
const closedEvent = await page.spyOnEvent('panelClosed'); | ||
|
||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
component.setProperty('expanded', false); | ||
await page.waitForChanges(); | ||
|
||
expect(closedEvent).toHaveReceivedEvent(); | ||
}); | ||
|
||
it('adjusts content margin when expanded with pushContent true', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
component.setProperty('targetContent', '#content'); | ||
component.setProperty('pushContent', true); | ||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete | ||
|
||
const content = await page.find('#content'); | ||
const computedStyle = await content.getComputedStyle(); | ||
expect(computedStyle['marginRight']).toEqual('312px'); | ||
}); | ||
|
||
it('adjusts content margin when collapsed with pushContent true', async () => { | ||
const page = await newE2EPage(); | ||
await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>'); | ||
|
||
const component = await page.find('modus-utility-panel'); | ||
component.setProperty('targetContent', '#content'); | ||
component.setProperty('pushContent', true); | ||
component.setProperty('expanded', true); | ||
await page.waitForChanges(); | ||
|
||
component.setProperty('expanded', false); | ||
await page.waitForChanges(); | ||
await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete | ||
|
||
const content = await page.find('#content'); | ||
const computedStyle = await content.getComputedStyle(); | ||
expect(computedStyle['marginRight']).toEqual('0px'); | ||
}); | ||
}); |
52 changes: 52 additions & 0 deletions
52
stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
@import './modus-utility-panel.vars'; | ||
|
||
.utility-panel { | ||
background-color: $modus-utility-panel-bg; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | ||
color: $modus-utility-panel-color; | ||
height: 100%; | ||
position: absolute; | ||
right: -324px; | ||
top: 0; | ||
transition: right 0.3s ease-out; | ||
width: 312px; | ||
|
||
&.open { | ||
right: 0; | ||
transition: right 0.3s ease-out; | ||
} | ||
|
||
.overlay { | ||
height: 100%; | ||
position: absolute; | ||
right: 0; | ||
top: 0; | ||
width: 100%; | ||
} | ||
|
||
.panel-content { | ||
display: flex; | ||
flex-direction: column; | ||
height: 100%; | ||
|
||
.panel-header, | ||
.panel-footer { | ||
align-items: center; | ||
display: flex; | ||
height: 50px; | ||
padding: 0 1rem; | ||
} | ||
|
||
.panel-body { | ||
flex: 1; | ||
overflow: auto; | ||
padding: 1rem; | ||
} | ||
|
||
hr { | ||
border: none; | ||
border-top: 1px solid #ccc; | ||
margin: 0; | ||
} | ||
} | ||
} |
70 changes: 70 additions & 0 deletions
70
stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { newSpecPage } from '@stencil/core/testing'; | ||
import { ModusUtilityPanel } from './modus-utility-panel'; | ||
|
||
describe('modus-utility-panel', () => { | ||
it('renders', async () => { | ||
const { root } = await newSpecPage({ | ||
components: [ModusUtilityPanel], | ||
html: '<modus-utility-panel></modus-utility-panel>', | ||
}); | ||
expect(root).toEqualHtml(` | ||
<modus-utility-panel> | ||
<mock:shadow-root> | ||
<div class="overlay utility-panel"> | ||
<div class="panel-content"> | ||
<div aria-labelledby="body" class="panel-body"> | ||
<slot name="body"></slot> | ||
</div> | ||
</div> | ||
</div> | ||
</mock:shadow-root> | ||
</modus-utility-panel> | ||
`); | ||
}); | ||
|
||
it('renders changes to expanded prop', async () => { | ||
const { root } = await newSpecPage({ | ||
components: [ModusUtilityPanel], | ||
html: '<modus-utility-panel expanded="true"></modus-utility-panel>', | ||
}); | ||
|
||
expect(root).toEqualHtml(` | ||
<modus-utility-panel expanded="true"> | ||
<mock:shadow-root> | ||
<div class="open overlay utility-panel"> | ||
<div class="panel-content"> | ||
<div aria-labelledby="body" class="panel-body"> | ||
<slot name="body"></slot> | ||
</div> | ||
</div> | ||
</div> | ||
</mock:shadow-root> | ||
</modus-utility-panel> | ||
`); | ||
}); | ||
|
||
it('renders changes to pushContent prop', async () => { | ||
const { root } = await newSpecPage({ | ||
components: [ModusUtilityPanel], | ||
html: '<modus-utility-panel expanded="true" push-content="true"></modus-utility-panel>', | ||
}); | ||
|
||
root.targetContent = '#content'; | ||
root.pushContent = true; | ||
root.expanded = true; | ||
|
||
expect(root).toEqualHtml(` | ||
<modus-utility-panel expanded="true" push-content="true"> | ||
<mock:shadow-root> | ||
<div class="open utility-panel"> | ||
<div class="panel-content"> | ||
<div aria-labelledby="body" class="panel-body"> | ||
<slot name="body"></slot> | ||
</div> | ||
</div> | ||
</div> | ||
</mock:shadow-root> | ||
</modus-utility-panel> | ||
`); | ||
}); | ||
}); |
Oops, something went wrong.