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>