add BIMDataSafeZoneModal component

components.js

@@ -6,6 +6,7 @@ export { default as BIMDataColorSelector } from "./dist/js/BIMDataComponents/BIM
 export { default as BIMDataDropdownList } from "./dist/js/BIMDataComponents/BIMDataDropdownList.js";
 export { default as BIMDataDropdownMenu } from "./dist/js/BIMDataComponents/BIMDataDropdownMenu.js";
 export { default as BIMDataFileIcon } from "./dist/js/BIMDataComponents/BIMDataFileIcon.js";
+export { default as BIMDataGuidedTour } from "./dist/js/BIMDataComponents/BIMDataGuidedTour.js";
 export { default as BIMDataIcon } from "./dist/js/BIMDataComponents/BIMDataIcon.js";
 export { default as BIMDataIllustration } from "./dist/js/BIMDataComponents/BIMDataIllustration.js";
 export { default as BIMDataInput } from "./dist/js/BIMDataComponents/BIMDataInput.js";
@@ -15,6 +16,7 @@ export { default as BIMDataPaginatedList } from "./dist/js/BIMDataComponents/BIM
 export { default as BIMDataPieSpinner } from "./dist/js/BIMDataComponents/BIMDataPieSpinner.js";
 export { default as BIMDataRadio } from "./dist/js/BIMDataComponents/BIMDataRadio.js";
 export { default as BIMDataResponsiveGrid } from "./dist/js/BIMDataComponents/BIMDataResponsiveGrid.js";
+export { default as BIMDataSafeZoneModal } from "./dist/js/BIMDataComponents/BIMDataSafeZoneModal.js";
 export { default as BIMDataSearch } from "./dist/js/BIMDataComponents/BIMDataSearch.js";
 export { default as BIMDataSelect } from "./dist/js/BIMDataComponents/BIMDataSelect.js";
 export { default as BIMDataSpinner } from "./dist/js/BIMDataComponents/BIMDataSpinner.js";
@@ -25,4 +27,3 @@ export { default as BIMDataTextarea } from "./dist/js/BIMDataComponents/BIMDataT
 export { default as BIMDataTextbox } from "./dist/js/BIMDataComponents/BIMDataTextbox.js";
 export { default as BIMDataToggle } from "./dist/js/BIMDataComponents/BIMDataToggle.js";
 export { default as BIMDataTooltip } from "./dist/js/BIMDataComponents/BIMDataTooltip.js";
-export { default as BIMDataGuidedTour } from "./dist/js/BIMDataComponents/BIMDataGuidedTour.js";

rollup.config.js

@@ -168,6 +168,7 @@ function getSingleComponentConfigurations() {
     "BIMDataPieSpinner",
     "BIMDataRadio",
     "BIMDataResponsiveGrid",
+    "BIMDataSafeZoneModal",
     "BIMDataSearch",
     "BIMDataSelect",
     "BIMDataSpinner",

src/BIMDataComponents/BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="overlay flex items-center justify-center">
+    <div class="safe-zone" :style="{ width }">
+      <div
+        class="safe-zone__content flex flex-col items-center justify-center p-18"
+      >
+        <BIMDataIcon :name="iconName" size="l" fill color="high" />
+        <p><slot name="text"></slot></p>
+      </div>
+      <div class="safe-zone__actions flex items-center p-x-18">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BIMDataIcon from "../BIMDataIcon/BIMDataIcon.vue";
+
+export default {
+  components: {
+    BIMDataIcon,
+  },
+  props: {
+    iconName: {
+      type: String,
+      default: "warning",
+    },
+    width: {
+      type: String,
+      default: "350px",
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataSafeZoneModal.scss"></style>

src/BIMDataComponents/BIMDataSafeZoneModal/_BIMDataSafeZoneModal.scss

@@ -0,0 +1,39 @@
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: var(--color-primary);
+    opacity: 0.9;
+  }
+
+  .safe-zone {
+    z-index: 1;
+
+    &__content {
+      background-color: var(--color-white);
+      font-size: 1.2rem;
+      text-align: center;
+      color: var(--color-high);
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    &__actions {
+      height: 75px;
+      justify-content: space-evenly;
+      background-color: var(--color-silver-light);
+      border-top: 1px solid var(--color-silver);
+    }
+  }
+}

src/store.js

@@ -6,17 +6,15 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     "Getting started": {
-      text:
-        "Learn how to quickly get started with our component library to build expressive, consistent UI at BIMData.",
+      text: "Learn how to quickly get started with our component library to build expressive, consistent UI at BIMData.",
       path: "getting-started",
       img: require("./web/assets/img/icon-getting_stated.svg"),
       children: [
         {
           title: "Designers",
           img: require("./web/assets/img/icon-designers.svg"),
           path: "designers",
-          text:
-            "Collection of tools and resources you need to start designing with the BIMData design system.",
+          text: "Collection of tools and resources you need to start designing with the BIMData design system.",
           btn: "Get design kit",
         },
         {
@@ -36,8 +34,7 @@ export default new Vuex.Store({
       ],
     },
     "Guidelines & Utilities": {
-      text:
-        "How BIMData looks: guidelines for colors, spacing, typography, ...",
+      text: "How BIMData looks: guidelines for colors, spacing, typography, ...",
       img: require("./web/assets/img/icon-guidelines.svg"),
       path: "guidelines-utilities",
       children: [
@@ -73,40 +70,35 @@ export default new Vuex.Store({
           title: "Markup & Style",
           img: require("./web/assets/img/icon-markup.svg"),
           path: "markup",
-          text:
-            "How to name your classes to respect the structure already in place.",
+          text: "How to name your classes to respect the structure already in place.",
           btn: "View markup",
         },
         {
           title: "Spacing",
           img: require("./web/assets/img/icon-spacing.svg"),
           path: "spacing",
-          text:
-            "Adjust whitespace by applying spacing, margin, padding helpers.",
+          text: "Adjust whitespace by applying spacing, margin, padding helpers.",
           btn: "View spacing",
         },
         {
           title: "Typography",
           img: require("./web/assets/img/icon-typo.svg"),
           path: "typography",
-          text:
-            "Indispensable for defining visual identity and organizing content.",
+          text: "Indispensable for defining visual identity and organizing content.",
           btn: "View typography",
         },
       ],
     },
     Components: {
-      text:
-        "We developed a VueJS UI library that contains a set of components and demos for building interactive user interfaces.",
+      text: "We developed a VueJS UI library that contains a set of components and demos for building interactive user interfaces.",
       img: require("./web/assets/img/icon-components.svg"),
       path: "components",
       children: [
         {
           title: "Buttons",
           img: require("./web/assets/img/icon-buttons.svg"),
           path: "buttons",
-          text:
-            "Buttons are used to trigger actions based on a user's interaction.",
+          text: "Buttons are used to trigger actions based on a user's interaction.",
           btn: "View buttons",
         },
         {
@@ -120,16 +112,14 @@ export default new Vuex.Store({
           title: "Checkbox",
           img: require("./web/assets/img/icon-checkbox.svg"),
           path: "checkbox",
-          text:
-            "Checkboxes are used to enables users to pick multiple options from a group.",
+          text: "Checkboxes are used to enables users to pick multiple options from a group.",
           btn: "View checkbox",
         },
         {
           title: "ColorSelector",
           img: require("./web/assets/img/icon-color_selector.svg"),
           path: "colorselector",
-          text:
-            "Color Selector component allows the user to pick from a set of predefined swatches colors.",
+          text: "Color Selector component allows the user to pick from a set of predefined swatches colors.",
           btn: "View color selector",
         },
         {
@@ -171,32 +161,28 @@ export default new Vuex.Store({
           title: "Input",
           img: require("./web/assets/img/icon-input.svg"),
           path: "input",
-          text:
-            "Inputs are used for enabled a user to interact and input data.",
+          text: "Inputs are used for enabled a user to interact and input data.",
           btn: "View input",
         },
         {
           title: "Loaders",
           img: require("./web/assets/img/icon-loader.svg"),
           path: "loaders",
-          text:
-            "Loaders are used to notify a user that data or page is being retrieved.",
+          text: "Loaders are used to notify a user that data or page is being retrieved.",
           btn: "View loaders",
         },
         {
           title: "Pagination",
           img: require("./web/assets/img/icon-pagination.svg"),
           path: "pagination",
-          text:
-            "Pagination is used to lets users navigate through large collections of items.",
+          text: "Pagination is used to lets users navigate through large collections of items.",
           btn: "View pagination",
         },
         {
           title: "Radio",
           img: require("./web/assets/img/icon-radio.svg"),
           path: "radio",
-          text:
-            "Radio buttons enables a user to make a single selection from a group of options.",
+          text: "Radio buttons enables a user to make a single selection from a group of options.",
           btn: "View radio",
         },
         {
@@ -206,36 +192,39 @@ export default new Vuex.Store({
           text: "Display a list of item with a responsive layout",
           btn: "View responsive grid",
         },
+        {
+          title: "SafeZoneModal",
+          img: require("./web/assets/img/icon-safe_zone_modal.svg"),
+          path: "safe-zone-modal",
+          text: "",
+          btn: "View safe zone modal",
+        },
         {
           title: "Search",
           img: require("./web/assets/img/icon-search.svg"),
           path: "search",
-          text:
-            "Search enables users to specify a word or a phrase to find relevant content.",
+          text: "Search enables users to specify a word or a phrase to find relevant content.",
           btn: "View search",
         },
         {
           title: "Select",
           img: require("./web/assets/img/icon-select.svg"),
           path: "select",
-          text:
-            "Select (dropdown) is used to enabled a user to select a single item from a list of options.",
+          text: "Select (dropdown) is used to enabled a user to select a single item from a list of options.",
           btn: "View select",
         },
         {
           title: "Table",
           img: require("./web/assets/img/icon-table.svg"),
           path: "table",
-          text:
-            "Table is a component used for displaying your formatted content.",
+          text: "Table is a component used for displaying your formatted content.",
           btn: "View table",
         },
         {
           title: "Tabs",
           img: require("./web/assets/img/icon-tabs.svg"),
           path: "tabs",
-          text:
-            "Tabs component provide a nice interface to switch between different views",
+          text: "Tabs component provide a nice interface to switch between different views",
           btn: "View tabs",
         },
         {
@@ -263,8 +252,7 @@ export default new Vuex.Store({
           title: "Toggles",
           img: require("./web/assets/img/icon-toggle.svg"),
           path: "toggle",
-          text:
-            "Toggles are On/Off switches. They allow users to choose between two mutually exclusive options.",
+          text: "Toggles are On/Off switches. They allow users to choose between two mutually exclusive options.",
           btn: "View toggle",
         },
         {

src/web/router/router.js

@@ -34,6 +34,7 @@ import Loaders from "../views/Components/Loaders/Loaders.vue";
 import Pagination from "../views/Components/Pagination/Pagination.vue";
 import Radio from "../views/Components/Radio/Radio.vue";
 import ResponsiveGrid from "../views/Components/ResponsiveGrid/ResponsiveGrid.vue";
+import SafeZoneModal from "../views/Components/SafeZoneModal/SafeZoneModal.vue";
 import Search from "../views/Components/Search/Search.vue";
 import Select from "../views/Components/Select/Select.vue";
 import Table from "../views/Components/Table/Table.vue";
@@ -207,6 +208,11 @@ const routes = [
         name: "responsive-grid",
         component: ResponsiveGrid,
       },
+      {
+        path: "safe-zone-modal",
+        name: "safe-zone-modal",
+        component: SafeZoneModal,
+      },
       {
         path: "search",
         name: "search",