From e67b9fbe0e8ee8fc5dc45cdd9d3faf7beeaa9f7c Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Mon, 15 Jul 2024 08:09:20 +0000
Subject: [PATCH] fix: lint

---
 components.d.ts                               |  1 +
 .../FiltersPanel/FiltersPanelSearch.vue       |  2 +-
 .../FiltersPanel/FiltersPanelSection.vue      |  2 +-
 .../FiltersPanelSectionFilterTitleToggler.vue |  2 +-
 .../FiltersPanel/FiltersPanelToggler.vue      |  2 +-
 src/components/PageSettings/PageSettings.vue  | 24 +++----
 .../PageSettings/PageSettingsEntry.vue        | 20 +++---
 .../PageSettings/PageSettingsSection.vue      | 62 ++++++++++---------
 .../PageSettings/PageSettingsSectionGroup.vue | 39 ++++++------
 .../PageSettings/PageSettingsTitle.vue        |  6 +-
 .../PageSettings/PageSettings.stories.js      |  8 ++-
 11 files changed, 87 insertions(+), 81 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 436f70c159..62ed978131 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -33,6 +33,7 @@ declare module 'vue' {
     BatchSearchTable: typeof import('./src/components/BatchSearchTable.vue')['default']
     BBadge: typeof import('bootstrap-vue-next')['BBadge']
     BButton: typeof import('bootstrap-vue-next')['BButton']
+    BCloseButton: typeof import('bootstrap-vue-next')['BCloseButton']
     BCol: typeof import('bootstrap-vue-next')['BCol']
     BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
     BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
diff --git a/src/components/FiltersPanel/FiltersPanelSearch.vue b/src/components/FiltersPanel/FiltersPanelSearch.vue
index 44305a7972..2c36d39d24 100644
--- a/src/components/FiltersPanel/FiltersPanelSearch.vue
+++ b/src/components/FiltersPanel/FiltersPanelSearch.vue
@@ -1,5 +1,5 @@
 <script setup>
-import SearchFormControl from '@/components/SearchFormControl.vue'
+import SearchFormControl from '@/components/SearchFormControl'
 
 defineProps({
   modelValue: {
diff --git a/src/components/FiltersPanel/FiltersPanelSection.vue b/src/components/FiltersPanel/FiltersPanelSection.vue
index 2c6d6b1c79..a7831d98ca 100644
--- a/src/components/FiltersPanel/FiltersPanelSection.vue
+++ b/src/components/FiltersPanel/FiltersPanelSection.vue
@@ -1,5 +1,5 @@
 <script setup>
-import FiltersPanelSectionTitle from '@/components/FiltersPanel/FiltersPanelSectionTitle.vue'
+import FiltersPanelSectionTitle from '@/components/FiltersPanel/FiltersPanelSectionTitle'
 
 defineProps({
   title: {
diff --git a/src/components/FiltersPanel/FiltersPanelSectionFilterTitleToggler.vue b/src/components/FiltersPanel/FiltersPanelSectionFilterTitleToggler.vue
index a4dda7a6fb..07e08cfb03 100644
--- a/src/components/FiltersPanel/FiltersPanelSectionFilterTitleToggler.vue
+++ b/src/components/FiltersPanel/FiltersPanelSectionFilterTitleToggler.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 
-import IconButton from '@/components/IconButton.vue'
+import IconButton from '@/components/IconButton'
 
 const props = defineProps({
   collapse: {
diff --git a/src/components/FiltersPanel/FiltersPanelToggler.vue b/src/components/FiltersPanel/FiltersPanelToggler.vue
index bb027800dd..327133072a 100644
--- a/src/components/FiltersPanel/FiltersPanelToggler.vue
+++ b/src/components/FiltersPanel/FiltersPanelToggler.vue
@@ -1,5 +1,5 @@
 <script setup>
-import IconButton from '@/components/IconButton.vue'
+import IconButton from '@/components/IconButton'
 
 const emit = defineEmits(['close'])
 </script>
diff --git a/src/components/PageSettings/PageSettings.vue b/src/components/PageSettings/PageSettings.vue
index 161a1270e4..1f1d095c55 100644
--- a/src/components/PageSettings/PageSettings.vue
+++ b/src/components/PageSettings/PageSettings.vue
@@ -1,28 +1,20 @@
 <template>
   <div class="page-settings">
-    <page-settings-title>{{title}}</page-settings-title>
-    <slot>
-    </slot>
+    <div class="d-flex justify-content-between align-items-baseline">
+      <page-settings-title class="pb-4">{{ title }}</page-settings-title>
+      <slot name="closeButton"> </slot>
+    </div>
+    <slot> </slot>
   </div>
 </template>
 
 <script setup>
-import PageSettingsTitle from "@/components/PageSettings/PageSettingsTitle.vue";
+import PageSettingsTitle from '@/components/PageSettings/PageSettingsTitle'
 
-const props = defineProps({
+defineProps({
   title: {
     type: String,
-    required:true
+    required: true
   }
 })
-
 </script>
-
-<style scoped lang="scss">
-.page-settings {
-  & &-title{
-    padding-bottom: 1em;
-  }
-}
-
-</style>
diff --git a/src/components/PageSettings/PageSettingsEntry.vue b/src/components/PageSettings/PageSettingsEntry.vue
index 59de19a434..6428cb6aed 100644
--- a/src/components/PageSettings/PageSettingsEntry.vue
+++ b/src/components/PageSettings/PageSettingsEntry.vue
@@ -1,16 +1,18 @@
 <template>
-  <span class="page-settings-entry d-inline-flex"><phosphor-icon v-if="icon" :name="icon" class="me-2"/>{{ text }}</span>
+  <span class="page-settings-entry d-inline-flex"
+    ><phosphor-icon v-if="icon" :name="icon" class="me-2" />{{ text }}</span
+  >
 </template>
 
 <script setup>
-import {PhosphorIcon} from "@icij/murmur-next";
+import { PhosphorIcon } from '@icij/murmur-next'
 
 defineOptions({
-  name:"PageSettingsEntry"
+  name: 'PageSettingsEntry'
 })
-const props = defineProps({
+defineProps({
   icon: {
-    type: String,
+    type: String
   },
   text: {
     type: String,
@@ -21,13 +23,13 @@ const props = defineProps({
     required: false
   }
 })
-
 </script>
 
 <style lang="scss">
-.page-settings-entry{
-  :checked + label, &-checked {
-    font-weight: bold
+.page-settings-entry {
+  :checked + label,
+  &-checked {
+    font-weight: bold;
   }
 }
 </style>
diff --git a/src/components/PageSettings/PageSettingsSection.vue b/src/components/PageSettings/PageSettingsSection.vue
index 978c4f1485..dbab78c2bd 100644
--- a/src/components/PageSettings/PageSettingsSection.vue
+++ b/src/components/PageSettings/PageSettingsSection.vue
@@ -1,13 +1,20 @@
 <template>
-  <page-settings-section-group :label="label" v-model="localOpen" class="page-settings-section">
-    <component :is="formGroup"
-               id="checkbox-group-1"
-               class="page-settings-section__input-group"
-               v-model="localValue"
-               :name="name"
-               stacked
+  <page-settings-section-group v-model="localOpen" :label="label" class="page-settings-section">
+    <component
+      :is="formGroup"
+      id="checkbox-group-1"
+      v-model="localValue"
+      class="page-settings-section__input-group"
+      :name="name"
+      stacked
     >
-      <component :is="formInput" v-for="(option,index) in options" :key="index" :value="option.value" class="page-settings-section__input-group__input">
+      <component
+        :is="formInput"
+        v-for="(option, index) in options"
+        :key="index"
+        :value="option.value"
+        class="page-settings-section__input-group__input"
+      >
         <page-settings-entry :text="option.text" :icon="option.icon" />
       </component>
     </component>
@@ -15,25 +22,25 @@
 </template>
 
 <script setup>
-import {computed} from "vue"
-import PageSettingsEntry from "@/components/PageSettings/PageSettingsEntry.vue";
-import PageSettingsSectionGroup from "@/components/PageSettings/PageSettingsSectionGroup.vue";
-import {BFormCheckbox, BFormCheckboxGroup, BFormRadio, BFormRadioGroup} from "bootstrap-vue-next";
+import { computed } from 'vue'
+import { BFormCheckbox, BFormCheckboxGroup, BFormRadio, BFormRadioGroup } from 'bootstrap-vue-next'
+
+import PageSettingsEntry from '@/components/PageSettings/PageSettingsEntry'
+import PageSettingsSectionGroup from '@/components/PageSettings/PageSettingsSectionGroup'
 defineOptions({
-  name:"PageSettingsSection"
+  name: 'PageSettingsSection'
 })
 
-const RADIO = "radio"
-const CHECKBOX = "checkbox"
+const RADIO = 'radio'
 const props = defineProps({
   label: {
     type: String,
-    required: true,
+    required: true
   },
   type: {
     type: String,
     required: true,
-    validator: (inputType) => [RADIO, CHECKBOX].includes(inputType)
+    validator: (inputType) => ['radio', 'checkbox'].includes(inputType)
   },
   name: {
     type: String,
@@ -43,15 +50,14 @@ const props = defineProps({
     type: Object,
     required: true
   }
-
 })
 const modelValue = defineModel({
   type: [String, Array],
-  default: () => [],
+  default: () => []
 })
-const open = defineModel('open',{
-  type:Boolean,
-  default: true,
+const open = defineModel('open', {
+  type: Boolean,
+  default: true
 })
 const formGroup = computed(() => {
   return props.type === RADIO ? BFormRadioGroup : BFormCheckboxGroup
@@ -68,21 +74,19 @@ const localValue = computed({
 const localOpen = computed({
   get: () => open.value,
   set: (newVal) => {
-    console.log("test",newVal)
+    console.log('test', newVal)
     open.value = newVal
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.page-settings{
-  &-section{
-    &__input-group{
-
-    margin-left: 1em !important;
+.page-settings {
+  &-section {
+    &__input-group {
+      margin-left: 1em !important;
     }
     margin-bottom: 1em !important;
   }
 }
-
 </style>
diff --git a/src/components/PageSettings/PageSettingsSectionGroup.vue b/src/components/PageSettings/PageSettingsSectionGroup.vue
index 8a546470ef..11945f2270 100644
--- a/src/components/PageSettings/PageSettingsSectionGroup.vue
+++ b/src/components/PageSettings/PageSettingsSectionGroup.vue
@@ -1,48 +1,49 @@
 <template>
-
   <b-form-group class="page-settings-group">
     <template #label>
-      <div class="page-settings-group__label d-flex"
-           aria-controls="page-settings-group-collapse"
-           :aria-expanded="modelValue ? 'true' : 'false'"
-           @click="toggleSection"><phosphor-icon class="d-inline-flex me-2" :name="caretIcon" />{{label}}</div>
+      <div
+        class="page-settings-group__label d-flex"
+        aria-controls="page-settings-group-collapse"
+        :aria-expanded="modelValue ? 'true' : 'false'"
+        @click="toggleSection"
+      >
+        <phosphor-icon class="d-inline-flex me-2" :name="caretIcon" />{{ label }}
+      </div>
     </template>
-    <b-collapse id="page-settings-group-collapse" v-model="modelValue" >
-      <slot v-bind="{open:modelValue}"></slot>
+    <b-collapse id="page-settings-group-collapse" v-model="modelValue">
+      <slot v-bind="{ open: modelValue }"></slot>
     </b-collapse>
   </b-form-group>
 </template>
 
 <script setup>
-import {computed, ref} from "vue";
-import {PhosphorIcon} from "@icij/murmur-next";
+import { computed } from 'vue'
+import { PhosphorIcon } from '@icij/murmur-next'
 defineOptions({
-  name:"PageSettingsSectionGroup"
+  name: 'PageSettingsSectionGroup'
 })
 
-const props = defineProps({
+defineProps({
   label: {
     type: String,
     default: 'Settings'
-  },
+  }
 })
 const modelValue = defineModel({
-  type:Boolean,
-  default:true
+  type: Boolean,
+  default: true
 })
 
-const caretIcon = computed(()=> modelValue.value?'caret-up':'caret-down')
+const caretIcon = computed(() => (modelValue.value ? 'caret-up' : 'caret-down'))
 
-function toggleSection(){
+function toggleSection() {
   modelValue.value = !modelValue.value
 }
-
 </script>
 <style lang="scss">
-.page-settings-group{
+.page-settings-group {
   &__label {
     cursor: pointer;
   }
 }
 </style>
-
diff --git a/src/components/PageSettings/PageSettingsTitle.vue b/src/components/PageSettings/PageSettingsTitle.vue
index 50e92af506..7cfa205b25 100644
--- a/src/components/PageSettings/PageSettingsTitle.vue
+++ b/src/components/PageSettings/PageSettingsTitle.vue
@@ -1,5 +1,5 @@
 <script setup>
-const props = defineProps({
+defineProps({
   title: {
     type: String
   }
@@ -7,9 +7,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2 class="page-settings-title">
+  <h3 class="page-settings-title">
     <slot>{{ title }}</slot>
-  </h2>
+  </h3>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/stories/components/PageSettings/PageSettings.stories.js b/src/stories/components/PageSettings/PageSettings.stories.js
index e532c2cb3a..ae435b8aca 100644
--- a/src/stories/components/PageSettings/PageSettings.stories.js
+++ b/src/stories/components/PageSettings/PageSettings.stories.js
@@ -1,18 +1,23 @@
 import PageSettings from '@/components/PageSettings/PageSettings.vue'
 import PageSettingsSection from '@/components/PageSettings/PageSettingsSection.vue'
+import {BCloseButton} from 'bootstrap-vue-next'
 
+import { fn } from '@storybook/test'
 export default {
   title: 'Components/PageSettings',
   tags: ['autodocs'],
   render: (args) => ({
     components: {
-      PageSettings,PageSettingsSection
+      PageSettings,PageSettingsSection,BCloseButton
     },
     setup: () => {
       return {args}
     },
     template: `
       <page-settings title="Page settings">
+        <template #closeButton>
+          <b-close-button class="d-inline-flex" @click="args.onCloseButtonClick"/>
+        </template>
         <page-settings-section
           v-model="args.example.modelValue"
           v-model:open="args.example.open"
@@ -137,5 +142,6 @@ export const Default = {
     title:"Page settings",
     example,
     sections,
+    onCloseButtonClick: fn()
   }
 }