Skip to content

Commit e001527

Browse files
juliodialpadjuliodialpad
committed
test on popover
Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>
1 parent fe0ccea commit e001527

File tree

11 files changed

+134
-174
lines changed

11 files changed

+134
-174
lines changed

‎packages/dialtone-vue2/common/mixins/sr_only_close_button.js‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,5 @@ export default {
1111
type: Boolean,
1212
default: false,
1313
},
14-
15-
/**
16-
* Label for the visually hidden close button
17-
* Required if visuallyHiddenClose is set to `true`
18-
*/
19-
visuallyHiddenCloseLabel: {
20-
type: String,
21-
default: null,
22-
},
23-
},
24-
25-
watch: {
26-
$props: {
27-
immediate: true,
28-
deep: true,
29-
handler () {
30-
this.validateVisuallyHiddenCloseProps();
31-
},
32-
},
33-
},
34-
35-
computed: {
36-
showVisuallyHiddenClose () {
37-
return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;
38-
},
39-
},
40-
41-
methods: {
42-
validateVisuallyHiddenCloseProps () {
43-
if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {
44-
console.error(`If visuallyHiddenClose prop is true, the component includes
45-
a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
46-
}
47-
},
4814
},
4915
};

‎packages/dialtone-vue2/common/sr_only_close_button.vue‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
id="sr-only-close-button"
44
data-qa="dt-sr-only-close-button"
55
class="d-vi-visible-sr"
6-
:aria-label="visuallyHiddenCloseLabel"
6+
v-bind="$ta('CLOSE_BUTTON')"
77
@click="close"
88
@keydown.space.prevent.stop="close"
99
>
@@ -14,6 +14,8 @@
1414
<script>
1515
import { DtIconClose } from '@dialpad/dialtone-icons/vue2';
1616
import { DtButton } from '@/components/button';
17+
import { useI18N } from '@dialpad/i18n-vue2';
18+
const { $ta } = useI18N();
1719
1820
export default {
1921
name: 'SrOnlyCloseButton',
@@ -22,20 +24,11 @@ export default {
2224
DtButton,
2325
},
2426
25-
props: {
26-
/**
27-
* Label for the visually hidden close button
28-
* Required if visuallyHiddenClose is set to `true`
29-
*/
30-
visuallyHiddenCloseLabel: {
31-
type: String,
32-
default: null,
33-
},
34-
},
35-
3627
emits: ['close'],
3728
3829
methods: {
30+
$ta,
31+
3932
close () {
4033
this.$emit('close');
4134
},

‎packages/dialtone-vue2/components/popover/popover.test.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -163,24 +163,6 @@ describe('DtPopover Tests', () => {
163163

164164
expect(buttonExists).toBe(true);
165165
});
166-
167-
describe('When visuallyHiddenCloseLabel is null', () => {
168-
it('should raise a validation error', async () => {
169-
let consoleErrorSpy;
170-
171-
consoleErrorSpy = vi.spyOn(console, 'error').mockClear();
172-
173-
await wrapper.setProps({ visuallyHiddenCloseLabel: null });
174-
175-
const message = `If visuallyHiddenClose prop is true, the component includes
176-
a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`;
177-
178-
expect(consoleErrorSpy).toHaveBeenCalledWith(message);
179-
180-
consoleErrorSpy = null;
181-
console.error.mockRestore();
182-
});
183-
});
184166
});
185167
});
186168

‎packages/dialtone-vue2/components/popover/popover.vue‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
:content-class="headerClass"
6969
type="header"
7070
:show-close-button="showCloseButton"
71-
:close-button-props="closeButtonProps"
7271
@close="closePopover"
7372
>
7473
<template #content>
@@ -110,8 +109,7 @@
110109
</template>
111110
</popover-header-footer>
112111
<sr-only-close-button
113-
v-if="showVisuallyHiddenClose"
114-
:visually-hidden-close-label="visuallyHiddenCloseLabel"
112+
v-if="visuallyHiddenClose"
115113
@close="closePopover"
116114
/>
117115
</dt-lazy-show>
@@ -230,15 +228,6 @@ export default {
230228
default: null,
231229
},
232230
233-
/**
234-
* A set of props to be passed into the popover's header close button.
235-
* Requires an 'ariaLabel' property, when the header popover is visible
236-
*/
237-
closeButtonProps: {
238-
type: Object,
239-
default: () => ({}),
240-
},
241-
242231
/**
243232
* Padding size class for the popover content.
244233
* @values none, small, medium, large

‎packages/dialtone-vue2/components/popover/popover_default.story.vue‎

Lines changed: 115 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,124 @@
11
<template>
2-
<dt-popover
3-
:id="$attrs.id"
4-
:key="uniqueKey"
5-
:open.sync="isOpen"
6-
:placement="$attrs.placement"
7-
:content-class="$attrs.contentClass"
8-
:fallback-placements="$attrs.fallbackPlacements"
9-
:padding="$attrs.padding"
10-
:hide-on-click="$attrs.hideOnClick"
11-
:role="$attrs.role"
12-
:element-type="$attrs.elementType"
13-
:transition="$attrs.transition"
14-
:aria-labelledby="$attrs.ariaLabelledby"
15-
:aria-label="$attrs.ariaLabel"
16-
:offset="$attrs.offset"
17-
:modal="$attrs.modal"
18-
:initial-focus-element="$attrs.initialFocusElement"
19-
:content-width="$attrs.contentWidth"
20-
:show-close-button="$attrs.showCloseButton"
21-
:header-class="$attrs.headerClass"
22-
:footer-class="$attrs.footerClass"
23-
:max-height="$attrs.maxHeight"
24-
:max-width="$attrs.maxWidth"
25-
:tether="$attrs.tether"
26-
:sticky="$attrs.sticky"
27-
:open-with-arrow-keys="$attrs.openWithArrowKeys"
28-
:visually-hidden-close="$attrs.visuallyHiddenClose"
29-
:visually-hidden-close-label="$attrs.visuallyHiddenCloseLabel"
30-
:append-to="$attrs.appendTo"
31-
@opened="$attrs.onOpened"
32-
>
33-
<template
34-
slot="anchor"
35-
slot-scope="{ attrs }"
2+
<div>
3+
<dt-popover
4+
:id="$attrs.id"
5+
:key="uniqueKey"
6+
:open.sync="isOpen"
7+
:placement="$attrs.placement"
8+
:content-class="$attrs.contentClass"
9+
:fallback-placements="$attrs.fallbackPlacements"
10+
:padding="$attrs.padding"
11+
:hide-on-click="$attrs.hideOnClick"
12+
:role="$attrs.role"
13+
:element-type="$attrs.elementType"
14+
:transition="$attrs.transition"
15+
:aria-labelledby="$attrs.ariaLabelledby"
16+
:aria-label="$attrs.ariaLabel"
17+
:offset="$attrs.offset"
18+
:modal="$attrs.modal"
19+
:initial-focus-element="$attrs.initialFocusElement"
20+
:content-width="$attrs.contentWidth"
21+
:show-close-button="$attrs.showCloseButton"
22+
:header-class="$attrs.headerClass"
23+
:footer-class="$attrs.footerClass"
24+
:max-height="$attrs.maxHeight"
25+
:max-width="$attrs.maxWidth"
26+
:tether="$attrs.tether"
27+
:sticky="$attrs.sticky"
28+
:open-with-arrow-keys="$attrs.openWithArrowKeys"
29+
:visually-hidden-close="$attrs.visuallyHiddenClose"
30+
:append-to="$attrs.appendTo"
31+
@opened="$attrs.onOpened"
3632
>
33+
<template
34+
slot="anchor"
35+
slot-scope="{ attrs }"
36+
>
37+
<dt-button
38+
v-bind="attrs"
39+
>
40+
{{ $t('CLICK_TO_OPEN') }}
41+
</dt-button>
42+
</template>
43+
<template
44+
slot="content"
45+
slot-scope="{ close }"
46+
>
47+
<div>
48+
<span
49+
v-if="$attrs.content"
50+
v-html="$attrs.content"
51+
/>
52+
<template v-else>
53+
<p class="d-mb4">
54+
I will be displayed in the popover!
55+
</p>
56+
<dt-button
57+
id="content-close"
58+
@click="close"
59+
>
60+
{{ $t('CLICK_TO_CLOSE') }}
61+
</dt-button>
62+
</template>
63+
</div>
64+
</template>
65+
<template
66+
v-if="$attrs.headerContent"
67+
slot="headerContent"
68+
>
69+
<span v-html="$attrs.headerContent" />
70+
</template>
71+
<template
72+
v-if="$attrs.footerContent"
73+
slot="footerContent"
74+
>
75+
<span v-html="$attrs.footerContent" />
76+
</template>
77+
</dt-popover>
78+
79+
<dt-stack
80+
direction="row"
81+
gap="300"
82+
class="d-ps-absolute d-b4 d-r4"
83+
>
84+
<span>{{ $t('SET_LANGUAGE') }}: </span>
3785
<dt-button
38-
v-bind="attrs"
86+
size="xs"
87+
importance="outlined"
88+
@click="setLocale('en-US')"
3989
>
40-
Click to open
90+
{{ $t('ENGLISH') }}
4191
</dt-button>
42-
</template>
43-
<template
44-
slot="content"
45-
slot-scope="{ close }"
46-
>
47-
<div>
48-
<span
49-
v-if="$attrs.content"
50-
v-html="$attrs.content"
51-
/>
52-
<template v-else>
53-
<p class="d-mb4">
54-
I will be displayed in the popover!
55-
</p>
56-
<dt-button
57-
id="content-close"
58-
@click="close"
59-
>
60-
Click to close
61-
</dt-button>
62-
</template>
63-
</div>
64-
</template>
65-
<template
66-
v-if="$attrs.headerContent"
67-
slot="headerContent"
68-
>
69-
<span v-html="$attrs.headerContent" />
70-
</template>
71-
<template
72-
v-if="$attrs.footerContent"
73-
slot="footerContent"
74-
>
75-
<span v-html="$attrs.footerContent" />
76-
</template>
77-
</dt-popover>
92+
<dt-button
93+
size="xs"
94+
importance="outlined"
95+
@click="setLocale('es-LA')"
96+
>
97+
{{ $t('SPANISH') }}
98+
</dt-button>
99+
<dt-button
100+
size="xs"
101+
importance="outlined"
102+
@click="setLocale('dp-DP')"
103+
>
104+
{{ $t('DIALPADISTAN') }}
105+
</dt-button>
106+
</dt-stack>
107+
</div>
78108
</template>
79109

80110
<script>
81111
import { DtPopover } from './';
82-
import { DtButton } from '../button';
112+
import { DtButton } from '@/components/button';
113+
import { DtStack } from '@/components/stack';
83114
import { getUniqueString } from '@/common/utils';
115+
import { useI18N } from '@dialpad/i18n-vue2';
116+
const { $t, setI18N } = useI18N();
84117
85118
export default {
86119
name: 'PopoverDefaultStory',
87120
components: {
121+
DtStack,
88122
DtPopover,
89123
DtButton,
90124
},
@@ -106,5 +140,13 @@ export default {
106140
this.isOpen = open;
107141
},
108142
},
143+
144+
methods: {
145+
$t,
146+
147+
async setLocale (locale) {
148+
await setI18N({ preferredLocale: locale });
149+
},
150+
},
109151
};
110152
</script>

‎packages/dialtone-vue2/components/popover/popover_header_footer.vue‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
importance="outlined"
2929
kind="muted"
3030
circle
31-
v-bind="closeButtonProps"
31+
v-bind="$ta('CLOSE_BUTTON', { component: 'popover' })"
3232
@click="$emit('close')"
3333
>
3434
<template #icon>
@@ -43,6 +43,8 @@
4343
<script>
4444
import { DtButton } from '@/components/button';
4545
import { DtIconClose } from '@dialpad/dialtone-icons/vue2';
46+
import { useI18N } from '@dialpad/i18n-vue2';
47+
const { $ta } = useI18N();
4648
4749
export default {
4850
name: 'PopoverHeaderFooter',
@@ -76,15 +78,6 @@ export default {
7678
type: Boolean,
7779
default: false,
7880
},
79-
80-
/**
81-
* A set of props to be passed into the popover's header close button.
82-
* Requires an 'ariaLabel' property.
83-
*/
84-
closeButtonProps: {
85-
type: Object,
86-
default: () => {},
87-
},
8881
},
8982
9083
emits: [
@@ -98,6 +91,8 @@ export default {
9891
],
9992
10093
methods: {
94+
$ta,
95+
10196
focusCloseButton () {
10297
const closeButton = this.$refs['popover__close-button']?.$el;
10398
closeButton?.focus();

0 commit comments

Comments
 (0)