Merge branch 'danmh-settings-helper-modules' into 'master'

HAML & Vue settings block helper component

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/156006



Merged-by: Illya Klymov <iklymov@gitlab.com>
Approved-by: Rajan Mistry <rmistry@gitlab.com>
Approved-by: Lucas Charles <me@lucascharles.me>
Approved-by: Halil Coban <hcoban@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: danmh <dmizzi-harris@gitlab.com>

app/assets/javascripts/vue_shared/components/settings/settings_block.stories.js

@@ -9,8 +9,7 @@ const Template = (args, { argTypes }) => ({
   components: { SettingsBlock },
   props: Object.keys(argTypes),
   template: `
-  <settings-block v-bind="$props">
-    <template #title>Settings section title</template>
+  <settings-block v-bind="$props" title="Settings section title">
     <template #description>Settings section description</template>
     <template #default>
       <p>Content</p>

app/assets/javascripts/vue_shared/components/settings/settings_block.vue

@@ -7,6 +7,11 @@ import { __ } from '~/locale';
 export default {
   components: { GlButton, GlCollapse },
   props: {
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
     id: {
       type: String,
       required: false,
@@ -50,23 +55,24 @@ export default {
 
 <template>
   <section class="vue-settings-block">
-    <div class="gl-display-flex gl-justify-content-space-between gl-align-items-flex-start">
-      <div class="gl-flex-grow-1">
-        <h4
+    <div class="gl-flex gl-justify-between gl-items-start">
+      <div class="gl-grow">
+        <h2
           role="button"
           tabindex="-1"
-          class="gl-cursor-pointer gl-mt-0 gl-mb-3"
+          class="gl-heading-2 gl-cursor-pointer !gl-mb-2"
           :aria-expanded="ariaExpanded"
           :aria-controls="collapseId"
           @click="toggleExpanded"
         >
-          <slot name="title"></slot>
-        </h4>
+          <slot v-if="$scopedSlots.title" name="title"></slot>
+          <template v-else>{{ title }}</template>
+        </h2>
         <p class="gl-text-secondary gl-m-0"><slot name="description"></slot></p>
       </div>
-      <div class="gl-flex-shrink-0 gl-px-3">
+      <div class="gl-flex-shrink-0 gl-px-2">
         <gl-button
-          class="gl-min-w-12"
+          class="gl-min-w-12 gl-shrink-0"
           :aria-expanded="ariaExpanded"
           :aria-controls="collapseId"
           @click="toggleExpanded"
@@ -76,7 +82,8 @@ export default {
           </span>
           <span class="gl-sr-only">
             {{ toggleButtonText }}
-            <slot name="title"></slot>
+            <slot v-if="$scopedSlots.title" name="title"></slot>
+            <template v-else>{{ title }}</template>
           </span>
         </gl-button>
       </div>

app/components/layouts/settings_block_component.haml

+%section{ class: section_classes, id: js_id, data: (@id ? { testid: @id } : {}) }
+  .gl-flex.gl-justify-between.gl-items-start.gl-pt-5
+    .gl-grow
+      %h2{ class: title_classes }
+        = heading || @heading
+      %p.gl-text-secondary.gl-m-0
+        = description || @description
+    .gl-shrink-0.gl-px-2
+      = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-min-w-12 js-settings-toggle' }) do
+        = button_text
+  .settings-content
+    .gl-pt-5
+      = body

app/components/layouts/settings_block_component.rb

+# frozen_string_literal: true
+
+module Layouts
+  class SettingsBlockComponent < ViewComponent::Base
+    # @param [String] heading
+    # @param [String] description
+    # @param [String] id
+    # @param [Boolean] expanded
+    def initialize(heading, description: nil, id: nil, expanded: nil)
+      @heading = heading
+      @description = description
+      @id = id
+      @expanded = expanded
+    end
+
+    renders_one :heading
+    renders_one :description
+    renders_one :body
+
+    private
+
+    def section_classes
+      classes = %w[settings no-animate]
+      classes.push('expanded') if @expanded
+      classes.join(' ')
+    end
+
+    def title_classes
+      %w[gl-heading-2 gl-cursor-pointer !gl-mb-2 js-settings-toggle js-settings-toggle-trigger-only]
+    end
+
+    def button_text
+      @expanded ? _('Collapse') : _('Expand')
+    end
+
+    def js_id
+      @id ? "js-#{@id}" : nil
+    end
+  end
+end

spec/components/layouts/settings_block_component_spec.rb

+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe Layouts::SettingsBlockComponent, type: :component, feature_category: :shared do
+  let(:heading) { 'Settings block heading' }
+  let(:description) { 'Settings block description' }
+  let(:body) { 'Settings block content' }
+  let(:id) { 'settings-block-id' }
+
+  describe 'slots' do
+    it 'renders heading' do
+      render_inline described_class.new(heading)
+
+      expect(page).to have_css('h2.gl-heading-2', text: heading)
+    end
+
+    it 'renders description' do
+      render_inline described_class.new(heading, description: description)
+
+      expect(page).to have_css('.gl-text-secondary', text: description)
+    end
+
+    it 'renders description slot' do
+      render_inline described_class.new(heading) do |c|
+        c.with_description { description }
+      end
+
+      expect(page).to have_css('.gl-text-secondary', text: description)
+    end
+
+    it 'renders body slot' do
+      render_inline described_class.new(heading) do |c|
+        c.with_body { body }
+      end
+
+      expect(page).to have_css('.settings-content', text: body)
+    end
+
+    it 'renders ids' do
+      render_inline described_class.new(heading, id: id)
+
+      expect(page).to have_css('#js-settings-block-id')
+      expect(page).to have_css('[data-testid="settings-block-id"]')
+    end
+
+    it 'renders collapsed if not expanded' do
+      render_inline described_class.new(heading, expanded: nil)
+
+      expect(page).to have_css('.js-settings-toggle', text: 'Expand')
+    end
+
+    it 'renders expanded if expanded' do
+      render_inline described_class.new(heading, expanded: true)
+
+      expect(page).to have_css('.settings.expanded')
+      expect(page).to have_css('.js-settings-toggle', text: 'Collapse')
+    end
+  end
+end

spec/components/previews/layouts/settings_block_component_preview.rb

+# frozen_string_literal: true
+
+module Layouts
+  class SettingsBlockComponentPreview < ViewComponent::Preview
+    # @param heading text
+    # @param description text
+    # @param body text
+    # @param id text
+    def default(
+      heading: 'Settings block heading',
+      description: 'Settings block description',
+      body: 'Settings block content',
+      id: 'settings-block-id'
+    )
+      render(::Layouts::SettingsBlockComponent.new(heading, description: description, id: id, expanded: nil)) do |c|
+        c.with_description { description }
+        c.with_body { body }
+      end
+    end
+  end
+end