Commit f3136e25 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo Committed by Phil Hughes

Add confirm modal stories to vue shared

parent 980005f6
/* eslint-disable @gitlab/require-i18n-strings */
import ConfirmDanger from './confirm_danger.vue';
export default {
component: ConfirmDanger,
title: 'vue_shared/components/modals/confirm_danger_modal',
};
const Template = (args, { argTypes }) => ({
components: { ConfirmDanger },
props: Object.keys(argTypes),
template: '<confirm-danger v-bind="$props" />',
provide: {
confirmDangerMessage: 'You require more Vespene Gas',
},
});
export const Default = Template.bind({});
Default.args = {
phrase: 'You must construct additional pylons',
buttonText: 'Confirm button text',
};
export const Disabled = Template.bind({});
Disabled.args = {
...Default.args,
disabled: true,
};
<script>
import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
import {
CONFIRM_DANGER_MODAL_BUTTON,
CONFIRM_DANGER_MODAL_TITLE,
CONFIRM_DANGER_PHRASE_TEXT,
CONFIRM_DANGER_WARNING,
CONFIRM_DANGER_MODAL_ERROR,
} from './constants';
export default {
name: 'ConfirmDangerModal',
components: {
GlAlert,
GlModal,
GlFormGroup,
GlFormInput,
......@@ -38,8 +40,8 @@ export default {
},
computed: {
isValid() {
return (
this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase)
return Boolean(
this.confirmationPhrase.length && this.equalString(this.confirmationPhrase, this.phrase),
);
},
actionPrimary() {
......@@ -59,6 +61,7 @@ export default {
CONFIRM_DANGER_MODAL_TITLE,
CONFIRM_DANGER_WARNING,
CONFIRM_DANGER_PHRASE_TEXT,
CONFIRM_DANGER_MODAL_ERROR,
},
};
</script>
......@@ -71,9 +74,15 @@ export default {
:action-primary="actionPrimary"
@primary="$emit('confirm')"
>
<p v-if="confirmDangerMessage" class="text-danger" data-testid="confirm-danger-message">
<gl-alert
v-if="confirmDangerMessage"
variant="danger"
data-testid="confirm-danger-message"
:dismissible="false"
class="gl-mb-4"
>
{{ confirmDangerMessage }}
</p>
</gl-alert>
<p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p>
<p data-testid="confirm-danger-phrase">
<gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT">
......@@ -82,8 +91,13 @@ export default {
</template>
</gl-sprintf>
</p>
<gl-form-group class="form-control" :state="isValid">
<gl-form-input v-model="confirmationPhrase" data-testid="confirm-danger-input" type="text" />
<gl-form-group :state="isValid" :invalid-feedback="$options.i18n.CONFIRM_DANGER_MODAL_ERROR">
<gl-form-input
v-model="confirmationPhrase"
class="form-control"
data-testid="confirm-danger-input"
type="text"
/>
</gl-form-group>
</gl-modal>
</template>
......@@ -2,6 +2,7 @@ import { __ } from '~/locale';
export const CONFIRM_DANGER_MODAL_ID = 'confirm-danger-modal';
export const CONFIRM_DANGER_MODAL_TITLE = __('Confirmation required');
export const CONFIRM_DANGER_MODAL_ERROR = __('Confirmation required');
export const CONFIRM_DANGER_MODAL_BUTTON = __('Confirm');
export const CONFIRM_DANGER_WARNING = __(
'This action can lead to data loss. To prevent accidental actions we ask you to confirm your intention.',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment