Merge pull request #180 from OnroerendErfgoed/develop

release 0.15.0
OnroerendErfgoed · Nov 23, 2023 · 65f80cb · 65f80cb
2 parents e796c1a + 1f111f1
commit 65f80cb
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "main": "./dist/vue-components.umd.js",
   "module": "./dist/vue-components.es.js",
   "typings": "./dist/src/main.d.ts",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",

diff --git a/src/__tests__/OeContainer.cy.ts b/src/__tests__/OeContainer.cy.ts
@@ -12,7 +12,7 @@ describe('Container', () => {
       });
       cy.mount(TestComponent);
 
-      cy.dataCy('container-content').invoke('text').should('equal', 'Container content');
+      cy.dataCy('oe-container-content').invoke('text').should('equal', 'Container content');
     });
 
     it('renders the given slot content with html', () => {
@@ -22,7 +22,7 @@ describe('Container', () => {
       });
       cy.mount(TestComponentHtml);
 
-      cy.dataCy('container-content').invoke('html').should('equal', '<button>My button</button>');
+      cy.dataCy('oe-container-content').invoke('html').should('equal', '<button>My button</button>');
     });
 
     it("doesn't render tabs", () => {
@@ -47,7 +47,7 @@ describe('Container', () => {
 
     it('renders the content in a scrollable container', () => {
       cy.dataCy('hidden-content').should('not.be.visible');
-      cy.dataCy('container-content').scrollTo('bottom');
+      cy.dataCy('oe-container-content').scrollTo('bottom');
       cy.dataCy('hidden-content').should('be.visible');
     });
   });

diff --git a/src/components/dumb/OeContainer.vue b/src/components/dumb/OeContainer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div data-cy="container-content" class="container__content">
+  <div class="oe-container">
+    <div data-cy="oe-container-content" class="oe-container__content">
       <slot></slot>
     </div>
     <div v-if="props.tabs.length" class="bottom-tabs" data-cy="bottom-tabs">
@@ -52,7 +52,7 @@ const close = (item: ITab) => {
 <style lang="scss">
 @import 'pyoes/scss/base-variables';
 
-.container {
+.oe-container {
   background-color: $white;
   margin: 20px 20px 10px 20px;
   display: flex;
@@ -78,6 +78,7 @@ const close = (item: ITab) => {
     .vl-action-group button:last-child {
       margin-right: -1px;
     }
+
     .vl-pill__close {
       border-radius: 0 0 0.4rem 0;
     }
@@ -96,9 +97,11 @@ const close = (item: ITab) => {
         scale: 1.1;
         background-color: $primary-color;
         color: $white;
+
         .vl-pill__close {
           color: $white;
           border-top: none;
+
           &:hover:not([disabled]) {
             color: $dark-purple;
           }

diff --git a/src/components/dumb/OeLoader.vue b/src/components/dumb/OeLoader.vue
@@ -1,23 +1,31 @@
 <template>
-  <DefineTemplate>
-    <div
-      class="spinner-content"
-      :class="{
-        'spinner-content--inline': props.modInline,
-        'spinner-content--small': props.modInline && props.modSmall,
-        'spinner-content--large': props.modInline && props.modLarge,
-        'spinner-content--xlarge': props.modInline && props.modXLarge,
-      }"
-    >
-      <font-awesome-icon class="spinner" :icon="['fas', 'spinner']" spin-pulse />
-    </div>
-  </DefineTemplate>
+  <div>
+    <DefineTemplate>
+      <div
+        class="spinner-content"
+        :class="{
+          'spinner-content--inline': props.modInline,
+          'spinner-content--small': props.modInline && props.modSmall,
+          'spinner-content--large': props.modInline && props.modLarge,
+          'spinner-content--xlarge': props.modInline && props.modXLarge,
+        }"
+      >
+        <font-awesome-icon class="spinner" :icon="['fas', 'spinner']" spin-pulse />
+      </div>
+    </DefineTemplate>
 
-  <ReuseTemplate v-if="props.modInline" />
+    <ReuseTemplate v-if="props.modInline" />
 
-  <div v-else class="spinner-container">
-    <div class="spinner-overlay">
-      <ReuseTemplate />
+    <div v-else class="spinner-container">
+      <div class="spinner-overlay">
+        <ReuseTemplate />
+        <div v-if="props.title" class="title">
+          {{ props.title }}
+          <div v-if="props.subTitle" class="title__sub">
+            {{ props.subTitle }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -27,10 +35,19 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { createReusableTemplate } from '@vueuse/core';
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
-const props = defineProps<{ modInline?: boolean; modSmall?: boolean; modLarge?: boolean; modXLarge?: boolean }>();
+const props = defineProps<{
+  modInline?: boolean;
+  modSmall?: boolean;
+  modLarge?: boolean;
+  modXLarge?: boolean;
+  title?: string;
+  subTitle?: string;
+}>();
 </script>
 
 <style lang="scss" scoped>
+@import 'pyoes/scss/base-variables';
+
 .spinner-container div {
   z-index: 1001;
 }
@@ -51,7 +68,7 @@ const props = defineProps<{ modInline?: boolean; modSmall?: boolean; modLarge?:
   width: 100px;
   height: 100px;
   margin: auto;
-  background: rgb(117, 63, 127);
+  background: $dark-purple;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -72,7 +89,7 @@ const props = defineProps<{ modInline?: boolean; modSmall?: boolean; modLarge?:
     box-shadow: none;
     width: 18px;
     height: 18px;
-    background: rgb(117, 63, 127);
+    background: $dark-purple;
     position: relative;
     display: inline-block;
     top: 0;
@@ -116,4 +133,20 @@ const props = defineProps<{ modInline?: boolean; modSmall?: boolean; modLarge?:
     }
   }
 }
+
+.title {
+  margin-top: 100px;
+  text-align: center;
+  color: $dark-purple;
+  font-weight: 600;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: fixed;
+
+  .title__sub {
+    font-weight: 400;
+    position: relative;
+  }
+}
 </style>
diff --git a/src/scss/_override-variables.scss b/src/scss/_override-variables.scss
@@ -100,22 +100,31 @@ $vl-icon-font-location: '@govflanders/vl-ui-design-system-style/assets/font/icon
   color: $primary-color;
 }
 
-// vl-tabs
-.vl-tabs__wrapper {
-  display: flex;
-  justify-content: center;
-}
-.vl-tab__pane {
-  outline: none;
-  overflow-x: hidden;
-}
-.vl-tabs {
-  .vl-tab {
-    color: $mid-purple;
+// oe-container vl-tabs
+.oe-tabs {
+  .vl-tabs__wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  .vl-tab__pane {
     outline: none;
+    overflow-x: hidden;
+  }
+
+  .vl-tabs__toggle,
+  .vl-tabs {
+    left: 0 !important;
+  }
 
-    &--active {
-      color: $dark-purple;
+  .vl-tabs {
+    .vl-tab {
+      color: $mid-purple;
+      outline: none;
+
+      &--active {
+        color: $dark-purple;
+      }
     }
   }
 }

diff --git a/src/stories/dumb-components/loader.stories.ts b/src/stories/dumb-components/loader.stories.ts
@@ -26,7 +26,24 @@ export const Default: Story = {
       OeLoader,
       VlButton,
     },
-    template: `<oe-loader />`,
+    template: `<oe-loader/>`,
+  }),
+};
+
+export const LoaderWithMessage: Story = {
+  parameters: {
+    docs: {
+      story: {
+        height: '400px',
+      },
+    },
+  },
+  render: () => ({
+    components: {
+      OeLoader,
+      VlButton,
+    },
+    template: `<oe-loader title="Gegevens opvragen" sub-title="een moment geduld alstublieft"/>`,
   }),
 };