Adds shared SettingsSection helper component

What does this MR do and why?

Adds reusable SettingsSection component

This lets us migrate all those loose .settings-section integrations in various settings pages.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
before after

How to set up and validate locally

  1. Migrates Admin settings: Appearance as an example page, see http://gdk.test:3000/admin/application_settings/appearance

Usage

HAML: http://gdk.test:3000/rails/lookbook/inspect/layouts/settings_section/default

= render ::Layouts::SettingsSectionComponent.new(_('Settings section heading')) do |c|
  - c.with_description do
    = _('Settings section description')
  - c.with_body do
    = _('Settings section content')

Vue: http://localhost:9002/?path=/story/vue-shared-settings-settings-section--default

<script>
  import SettingsSection from '~/vue_shared/components/settings_section.vue';
</script>

<template>
  <settings-section heading="Settings section heading">
    <template #description>
      <!-- Description slot -->
    </template>

    <!-- Body slot -->
  </settings-section>
</template>

Related to #457239 (closed)

Edited by Sascha Eggenberger

Merge request reports

Loading