diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/settings/settings_block.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/settings/settings_block.vue | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/settings/settings_block.vue b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue new file mode 100644 index 00000000000..31094b985a2 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/settings/settings_block.vue @@ -0,0 +1,45 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { GlButton }, + props: { + defaultExpanded: { + type: Boolean, + default: false, + required: false, + }, + }, + data() { + return { + sectionExpanded: false, + }; + }, + computed: { + expanded() { + return this.defaultExpanded || this.sectionExpanded; + }, + toggleText() { + return this.expanded ? __('Collapse') : __('Expand'); + }, + }, +}; +</script> + +<template> + <section class="settings no-animate" :class="{ expanded }"> + <div class="settings-header"> + <h4><slot name="title"></slot></h4> + <gl-button @click="sectionExpanded = !sectionExpanded"> + {{ toggleText }} + </gl-button> + <p> + <slot name="description"></slot> + </p> + </div> + <div class="settings-content"> + <slot></slot> + </div> + </section> +</template> |