Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1cf8b20

Browse files
author
Valentin Viennot
committed
modal handlers for all buttons
1 parentad0623f commit1cf8b20

File tree

3 files changed

+89
-8
lines changed

3 files changed

+89
-8
lines changed

‎components/CaModal/CaModal.spec.js‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('CaModal', () => {
1212
lettest=false;
1313
constwrapper=shallow(CaModal,{
1414
propsData:{
15-
confirmationHandler:()=>{
15+
primaryHandler:()=>{
1616
test=true;
1717
},
1818
},
@@ -21,4 +21,34 @@ describe('CaModal', () => {
2121
expect(test).toBe(true);
2222
});
2323
});
24+
25+
describe('when secondary button is clicked',()=>{
26+
test('call handler',()=>{
27+
lettest=false;
28+
constwrapper=shallow(CaModal,{
29+
propsData:{
30+
secondaryHandler:()=>{
31+
test=true;
32+
},
33+
},
34+
});
35+
wrapper.find('.bx--btn--secondary').trigger('click');
36+
expect(test).toBe(true);
37+
});
38+
});
39+
40+
describe('when close button is clicked',()=>{
41+
test('call handler',()=>{
42+
lettest=false;
43+
constwrapper=shallow(CaModal,{
44+
propsData:{
45+
closeHandler:()=>{
46+
test=true;
47+
},
48+
},
49+
});
50+
wrapper.find('.bx--modal-close').trigger('click');
51+
expect(test).toBe(true);
52+
});
53+
});
2454
});

‎components/CaModal/CaModal.vue‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@
1010
<divclass="bx--modal-header">
1111
<pclass="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
1212
<pclass="bx--modal-header__heading bx--type-beta">{{modalHeading}}</p>
13-
<buttonclass="bx--modal-close"type="button"data-modal-closearia-label="close modal">
13+
<button
14+
@click="closeHandler"
15+
class="bx--modal-close"
16+
type="button"
17+
data-modal-close
18+
aria-label="close modal"
19+
>
1420
<svg
1521
class="bx--modal-close__icon"
1622
width="10"
@@ -32,16 +38,17 @@
3238

3339
<divclass="bx--modal-footer">
3440
<button
41+
@click="secondaryHandler"
3542
class="bx--btn bx--btn--secondary"
3643
type="button"
3744
data-modal-close
38-
>{{primaryButtonText}}</button>
45+
>{{secondaryButtonText}}</button>
3946
<button
40-
@click="confirmationHandler"
47+
@click="primaryHandler"
4148
class="bx--btn bx--btn--primary"
4249
type="button"
4350
data-modal-primary-focus
44-
>{{secondaryButtonText}}</button>
51+
>{{primaryButtonText}}</button>
4552
</div>
4653
</div>
4754
</div>
@@ -77,7 +84,15 @@ export default {
7784
type:Boolean,
7885
default:false,
7986
},
80-
confirmationHandler: {
87+
closeHandler: {
88+
type:Function,
89+
default: ()=> {},
90+
},
91+
primaryHandler: {
92+
type:Function,
93+
default: ()=> {},
94+
},
95+
secondaryHandler: {
8196
type:Function,
8297
default: ()=> {},
8398
},

‎stories/modal.stories.js‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ storiesOf('Modal', module)
2626
</ca-modal>
2727
`,
2828
}))
29-
.add('Confirmation Handler',()=>({
29+
.add('Primary Handler',()=>({
3030
data:()=>({
3131
text:
3232
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.',
@@ -37,7 +37,43 @@ storiesOf('Modal', module)
3737
modalLabel="Optional label"
3838
primaryButtonText="Primary Button"
3939
secondaryButtonText="Secondary Button"
40-
:confirmationHandler="() => {text = 'confirmation clicked!'}"
40+
:primaryHandler="() => {text = 'Primary Button clicked!'}"
41+
show
42+
>
43+
<p>{{text}}</p>
44+
</ca-modal>
45+
`,
46+
}))
47+
.add('Secondary Handler',()=>({
48+
data:()=>({
49+
text:
50+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.',
51+
}),
52+
template:`
53+
<ca-modal
54+
modalHeading="Modal heading"
55+
modalLabel="Optional label"
56+
primaryButtonText="Primary Button"
57+
secondaryButtonText="Secondary Button"
58+
:secondaryHandler="() => {text = 'Secondary Button clicked!';}"
59+
show
60+
>
61+
<p>{{text}}</p>
62+
</ca-modal>
63+
`,
64+
}))
65+
.add('Close Handler',()=>({
66+
data:()=>({
67+
text:
68+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.',
69+
}),
70+
template:`
71+
<ca-modal
72+
modalHeading="Modal heading"
73+
modalLabel="Optional label"
74+
primaryButtonText="Primary Button"
75+
secondaryButtonText="Secondary Button"
76+
:closeHandler="() => {text = 'Close Button clicked!';}"
4177
show
4278
>
4379
<p>{{text}}</p>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp