Merge branch '321512-support-slide-animation-settings-block' into 'master'

Add support to animate slide for settings-block component

See merge request gitlab-org/gitlab!54305

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

@@ -5,6 +5,11 @@ import { __ } from '~/locale';
 export default {
   components: { GlButton },
   props: {
+    slideAnimated: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
     defaultExpanded: {
       type: Boolean,
       default: false,
@@ -28,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <section class="settings no-animate" :class="{ expanded }">
+  <section class="settings" :class="{ 'no-animate': !slideAnimated, expanded }">
     <div class="settings-header">
       <h4><slot name="title"></slot></h4>
       <gl-button @click="sectionExpanded = !sectionExpanded">

spec/frontend/vue_shared/components/settings/__snapshots__/settings_block_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Settings Block renders the correct markup 1`] = `
 <section
-  class="settings no-animate"
+  class="settings"
 >
   <div
     class="settings-header"

spec/frontend/vue_shared/components/settings/settings_block_spec.js

@@ -50,6 +50,27 @@ describe('Settings Block', () => {
     expect(findDescriptionSlot().exists()).toBe(true);
   });
 
+  describe('slide animation behaviour', () => {
+    it('is animated by default', () => {
+      mountComponent();
+
+      expect(wrapper.classes('no-animate')).toBe(false);
+    });
+
+    it.each`
+      slideAnimated | noAnimatedClass
+      ${true}       | ${false}
+      ${false}      | ${true}
+    `(
+      'sets the correct state when slideAnimated is $slideAnimated',
+      ({ slideAnimated, noAnimatedClass }) => {
+        mountComponent({ slideAnimated });
+
+        expect(wrapper.classes('no-animate')).toBe(noAnimatedClass);
+      },
+    );
+  });
+
   describe('expanded behaviour', () => {
     it('is collapsed by default', () => {
       mountComponent();