Feat/disable modal close prop

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

@@ -1,72 +1,71 @@
-name: Deploy dev Storybook
+# name: Deploy dev Storybook
 
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-    paths:
-      - design-library/**
-      - .github/workflows/design-library-deploy-storybook-dev.yml
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
-    paths:
-      - design-library/**
-      - .github/workflows/design-library-deploy-storybook-dev.yml
+# on:
+#   workflow_dispatch:
+#   push:
+#     branches:
+#       - main
+#     paths:
+#       - design-library/**
+#       - .github/workflows/design-library-deploy-storybook-dev.yml
+#   pull_request:
+#     types: [opened, synchronize, reopened, closed]
+#     branches:
+#       - main
+#     paths:
+#       - design-library/**
+#       - .github/workflows/design-library-deploy-storybook-dev.yml
 
-jobs:
-  build_and_deploy:
-    if: github.event_name != 'pull_request' || (github.event_name == 'pull_request' && github.event.action != 'closed')
-    runs-on: ubuntu-latest
-    name: Build and Deploy
+# jobs:
+#   build_and_deploy:
+#     if: github.event_name != 'pull_request' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+#     runs-on: ubuntu-latest
+#     name: Build and Deploy
 
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v3
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 9
+#       - name: Setup pnpm
+#         uses: pnpm/action-setup@v2
+#         with:
+#           version: 9
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: design-library/.node-version
-          registry-url: "https://registry.npmjs.org"
-          cache: "pnpm"
-          cache-dependency-path: design-library/pnpm-lock.yaml
+#       - name: Setup Node.js
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version-file: design-library/.node-version
+#           registry-url: "https://registry.npmjs.org"
+#           cache: "pnpm"
+#           cache-dependency-path: design-library/pnpm-lock.yaml
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-        working-directory: design-library
+#       - name: Install dependencies
+#         run: pnpm install --frozen-lockfile
+#         working-directory: design-library
 
-      - name: Build Storybook
-        run: pnpm build-storybook
-        working-directory: design-library
+#       - name: Build Storybook
+#         run: pnpm build-storybook
+#         working-directory: design-library
 
-      - name: Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STORYBOOK_DEV_DEPLOY_TOKEN }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: "upload"
-          app_location: "design-library/storybook-static"
-          skip_app_build: true
-          skip_api_build: true
-          skip_deploy_on_missing_secrets: true
+#       - name: Deploy
+#         id: builddeploy
+#         uses: Azure/static-web-apps-deploy@v1
+#         with:
+#           azure_static_web_apps_api_token: ${{ secrets.AZURE_STORYBOOK_DEV_DEPLOY_TOKEN }}
+#           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+#           action: "upload"
+#           app_location: "design-library/storybook-static"
+#           skip_app_build: true
+#           skip_api_build: true
 
-  close_pull_request:
-    if: github.event_name == 'pull_request' && github.event.action == 'closed'
-    runs-on: ubuntu-latest
-    name: Remove PR deploy
-    steps:
-      - name: Close Pull Request
-        id: closepullrequest
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STORYBOOK_DEV_DEPLOY_TOKEN }}
-          action: "close"
+#   close_pull_request:
+#     if: github.event_name == 'pull_request' && github.event.action == 'closed'
+#     runs-on: ubuntu-latest
+#     name: Remove PR deploy
+#     steps:
+#       - name: Close Pull Request
+#         id: closepullrequest
+#         uses: Azure/static-web-apps-deploy@v1
+#         with:
+#           azure_static_web_apps_api_token: ${{ secrets.AZURE_STORYBOOK_DEV_DEPLOY_TOKEN }}
+#           action: "close"

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"