Tab container beheer component

src/__tests__/OeTabContainer.cy.ts

@@ -0,0 +1,51 @@
+import { defineComponent, type Component } from 'vue';
+import OeTabContainer from '@/components/dumb/OeTabContainer.vue';
+import type { ITabView } from '@models/tab-container';
+
+describe('TabContainer', () => {
+  const TestComponent = defineComponent({
+    components: { OeTabContainer },
+    setup() {
+      const tabs: ITabView[] = [
+        {
+          id: 'algemeen',
+          label: 'Algemeen',
+          component: {} as Component,
+        },
+        {
+          id: 'zone',
+          label: 'Zone',
+          component: {} as Component,
+        },
+      ];
+
+      return { tabs };
+    },
+    template: `
+      <oe-tab-container :tabs="tabs">
+        <template #default="{ activeTab }">
+          <h2>Tab {{ activeTab.label }}</h2>
+        </template>
+      </oe-tab-container>
+      `,
+  });
+
+  beforeEach(() => {
+    cy.mount(TestComponent);
+  });
+
+  it('renders a tab container', () => {
+    cy.dataCy('tab-container').should('exist').should('have.class', 'tab-container');
+  });
+
+  it('renders a tab for each given tab', () => {
+    cy.mount(TestComponent).then(({ component }) => {
+      cy.dataCy('top-tabs')
+        .children()
+        .should('have.length', 2)
+        .each((tab, index) => {
+          expect(tab.text()).to.equal(`${component.tabs[index].label}`);
+        });
+    });
+  });
+});

src/components/dumb/OeTabContainer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="tab-container" data-cy="tab-container">
+    <div class="top-tabs" data-cy="top-tabs">
+      <a
+        v-for="item in props.tabs"
+        :key="item.id"
+        :data-cy="`top-tabs-${item.id}`"
+        class="top-tabs__item"
+        :class="{
+          active: item === activeTab,
+        }"
+        @click="select(item)"
+      >
+        <span class="top-tabs__item__name">{{ item.label }}</span>
+      </a>
+    </div>
+    <div data-cy="tab-content" class="tab-container__content">
+      <slot :active-tab="activeTab"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import type { ITabView, ITabContainerProps } from '@models/tab-container';
+
+const props = withDefaults(defineProps<ITabContainerProps>(), {
+  tabs: () => [],
+});
+
+const activeTab = shallowRef(props.tabs[0]);
+
+const select = (item: ITabView) => {
+  activeTab.value = item;
+};
+</script>
+
+<style lang="scss">
+@import 'pyoes/scss/pyoes-settings';
+
+.tab-container {
+  background-color: $white;
+  margin: 20px 20px 10px 20px;
+
+  &__content {
+    display: flex;
+    padding: 0.9375rem;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .top-tabs {
+    display: flex;
+    justify-content: center;
+    max-width: 100%;
+    padding: 0 0.9375rem;
+
+    a.top-tabs__item {
+      margin-left: 3px;
+      background-color: $primary-color;
+      color: $white;
+      font-family: 'Flanders Art Sans', Arial, sans-serif;
+      padding: 0.75rem 1.5rem;
+      font-size: 0.875em;
+      cursor: pointer;
+      text-decoration: none;
+
+      &:hover {
+        background-color: $dark-purple;
+      }
+
+      &.active {
+        background-color: $very-dark-purple;
+      }
+    }
+  }
+}
+</style>

src/components/dumb/index.ts

@@ -10,6 +10,7 @@ import OeContainer from './OeContainer.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeLoader from './OeLoader.vue';
+import OeTabContainer from './OeTabContainer.vue';
 import OeWizard from './OeWizard.vue';
 import SystemFields from './SystemFields.vue';
 
@@ -26,6 +27,7 @@ export {
   OeGrid,
   OeHeader,
   OeLoader,
+  OeTabContainer,
   OeWizard,
   SystemFields,
 };

src/models/index.ts

@@ -11,3 +11,4 @@ export * from './system-fields';
 export * from './grid';
 export * from './wizard';
 export * from './input-phone';
+export * from './tab-container';

src/models/tab-container.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'vue';
+
+export interface ITabView {
+  id: string;
+  label: string;
+  component: Component;
+}
+
+export interface ITabContainerProps {
+  tabs: ITabView[];
+}

src/stories/dumb-components/tab-container.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import OeTabContainer from '../../components/dumb/OeTabContainer.vue';
+import type { ITabView } from '../../models/tab-container';
+import type { Component } from 'vue';
+
+import '@/scss/main.scss';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta: Meta<typeof OeTabContainer> = {
+  title: 'Dumb components/TabContainer',
+  component: OeTabContainer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tabs: {
+      description: 'Tabs to show in the container.',
+      table: {
+        type: { summary: 'ITabView[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    default: {
+      description: 'Slot rendering the tab content.',
+      table: {
+        type: {
+          summary: 'Exposed prop',
+          detail: 'activeTab: current tab object',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OeTabContainer>;
+
+// export const Default: Story = {};
+export const Default: Story = {
+  render: () => ({
+    components: {
+      OeTabContainer,
+    },
+    setup() {
+      const tabs: ITabView[] = [
+        {
+          id: 'algemeen',
+          label: 'Algemeen',
+          component: {} as Component,
+        },
+        {
+          id: 'zone',
+          label: 'Zone',
+          component: {} as Component,
+        },
+      ];
+
+      return { tabs };
+    },
+    template: `
+    <oe-tab-container :tabs="tabs">
+      <template #default="{ activeTab }">
+        <h2>Tab {{ activeTab.label }}</h2>
+      </template>
+    </oe-tab-container>
+    `,
+  }),
+};