Feat/disable modal close prop

.github/workflows/design-library-deploy-storybook-dev.yml

@@ -57,7 +57,6 @@ jobs:
           app_location: "design-library/storybook-static"
           skip_app_build: true
           skip_api_build: true
-          skip_deploy_on_missing_secrets: true
 
   close_pull_request:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

design-library/src/components/BccModal/BccModal.stories.ts

@@ -47,7 +47,7 @@ const Template: StoryFn<typeof BccModal> = (args) => ({
 });
 
 /**
- * Control the content of the modal with the `title` prop and the `default` slot. Pass buttons to the `primaryAction` and `secondaryAction` slots. Set `closeButton` to `false` to hide the close button on desktops. The modal emits a `close` event when the user clicks the close button or closes the modal by clicking outside of it or pressing Escape.
+ * Control the content of the modal with the `title` prop and the `default` slot. Pass buttons to the `primaryAction` and `secondaryAction` slots. Set `closeButton` to `false` to hide the close button on desktops. The modal emits a `close` event when the user clicks the close button or closes the modal by clicking outside of it or pressing Escape, unless `closeOnOutsideClick` is set to false.
  */
 export const Example = Template.bind({});
 Example.args = {

design-library/src/components/BccModal/BccModal.vue

@@ -13,22 +13,30 @@ type Props = {
   open: boolean;
   title?: string;
   closeButton?: boolean;
+  closeOnOutsideClick?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   open: false,
   closeButton: true,
+  closeOnOutsideClick: true,
 });
 
 const emit = defineEmits(["close"]);
 
 const slots = useSlots();
 const showCloseButton = computed(() => props.closeButton && !slots.header);
+
+const handleClose = () => {
+  if (props.closeOnOutsideClick) {
+    emit("close");
+  }
+};
 </script>
 
 <template>
   <TransitionRoot as="template" :show="open">
-    <Dialog as="div" class="bcc-modal-overlay-wrapper" @close="emit('close')">
+    <Dialog as="div" class="bcc-modal-overlay-wrapper" @close="handleClose">
       <div class="flex h-[100dvh] w-[100dvw] items-center justify-center overflow-hidden">
         <TransitionChild
           as="div"