feat(web-core): add UiCheckboxGroup component (#8094)

@xen-orchestra/lite/src/stories/web-core/ui/checkbox-group/ui-checkbox-group.story.vue

@@ -0,0 +1,30 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('accent').required().enum('info', 'warning', 'danger').preset('info').widget(),
+      prop('label').str().widget().preset('Label'),
+      prop('info').str().widget().preset('message'),
+      prop('vertical').bool().widget(),
+      slot().help('Meant to receive a list of checkboxes component'),
+      slot('label').help('Meant to receive a label UiLabel component or another component'),
+      slot('info').help('Meant to receive a message info or UiInfo component or another component'),
+    ]"
+  >
+    <UiCheckboxGroup v-bind="properties">
+      <UiCheckbox v-for="(label, index) in labels" v-bind="properties" :key="index">
+        {{ label }}
+      </UiCheckbox>
+    </UiCheckboxGroup>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, slot } from '@/libs/story/story-param'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiCheckboxGroup from '@core/components/ui/checkbox-group/UiCheckboxGroup.vue'
+import { ref } from 'vue'
+
+const labels = ref(['Label 1', 'Label 2', 'Label 3'])
+</script>

@xen-orchestra/web-core/lib/components/ui/checkbox-group/UiCheckboxGroup.vue

@@ -0,0 +1,57 @@
+<!-- v1 -->
+<template>
+  <div class="ui-checkbox-group">
+    <slot v-if="slots.label || label !== undefined" name="label">
+      <UiLabel :accent="labelAccent">
+        {{ label }}
+      </UiLabel>
+    </slot>
+    <div class="group" :class="{ vertical }">
+      <slot />
+    </div>
+    <slot v-if="slots.info || info !== undefined" name="info">
+      <UiInfo :accent>
+        {{ info }}
+      </UiInfo>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  accent: 'info' | 'warning' | 'danger'
+  label?: string
+  info?: string
+  vertical?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  label?(): any
+  info?(): any
+}>()
+
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+</script>
+
+<style scoped lang="postcss">
+.ui-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .group {
+    display: flex;
+    gap: 6.4rem;
+
+    &.vertical {
+      flex-direction: column;
+      gap: 0.8rem;
+    }
+  }
+}
+</style>