BccPagination

design-library/src/components/BccPagination/BccPagination.css

@@ -0,0 +1,61 @@
+@layer components {
+
+    .bcc-pagination {
+        @apply flex flex-row items-center justify-between
+    }
+
+    .bcc-pagination-left {
+        @apply flex flex-row-reverse items-center justify-between
+    }
+
+    .bcc-pagination-center {
+        @apply flex flex-row items-center justify-evenly
+    }
+
+    .bcc-pagination-rowsperpage-container {
+        @apply inline-flex flex-row items-center gap-2 text-secondary
+    }
+
+    .bcc-pagination-rowsperpage {
+        @apply w-[72px]
+    }
+
+    .bcc-pagination-button-container {
+        @apply inline-flex items-center 
+    }
+
+    .bcc-pagination-button {
+        @apply select-none inline-flex items-center tracking-wide border border-s-[0.5px] border-on-primary justify-center active:shadow-inner focus-visible:outline focus-visible:outline-2 focus-visible:outline-emphasis focus-visible:outline-offset-2;
+        @apply cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none;
+
+        /* Default base size */
+        @apply text-sm gap-x-2;
+
+        @apply px-3 py-1.5 w-[33px] h-[33px] bg-primary text-secondary hover:bg-secondary-hover;
+
+    }
+
+    .bcc-pagination-button-selected {
+        @apply bg-secondary font-semibold text-interactive;
+    }
+
+    .bcc-pagination-elipsis {
+        @apply select-none inline-flex items-center tracking-wide border border-s-[0.5px] border-on-primary justify-center;
+        @apply text-base leading-5 gap-x-2;
+        @apply px-3 py-1.5 w-[33px] h-[33px] bg-primary text-secondary;
+
+    }
+
+    .bcc-pagination-arrow-left {
+        @apply w-10 border rounded-l-md text-interactive;
+    }
+
+    .bcc-pagination-arrow-right {
+        @apply w-10 border-s-[0.5px] rounded-r-md text-interactive;
+    }
+
+    .bcc-pagination-button-icon { /* base size */
+        @apply w-4 h-4;
+    }
+
+}

design-library/src/components/BccPagination/BccPagination.spec.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BccPagination from "./BccPagination.vue";
+
+describe("BccPagination", () => {
+  it("renders the right amount of page numbers", async () => {
+    const wrapper = mount(BccPagination, {
+      props: {
+        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        rowsPerPage: 2,
+      },
+    });
+
+    expect(wrapper.emitted("update:paginatedItems")?.length).toEqual(1);
+    expect(wrapper.emitted("update:totalPages")![0]).toEqual([6]);
+  });
+  it("renders an ellipsis on both sides", async () => {
+    const wrapper = mount(BccPagination, {
+      props: {
+        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+        rowsPerPage: 1,
+        displayLeftEllipsis: true,
+        displayRightEllipsis: true,
+      },
+    });
+
+    await wrapper.find(".bcc-pagination-arrow-right").trigger("click");
+    await wrapper.find(".bcc-pagination-arrow-right").trigger("click");
+    await wrapper.find(".bcc-pagination-arrow-right").trigger("click");
+
+    expect(wrapper.findAll(".bcc-pagination-elipsis").at(0)).toBeTruthy();
+    expect(wrapper.findAll(".bcc-pagination-elipsis").at(1)).toBeTruthy();
+  });
+  it("updating the rowsPerPage updates the rendered page numbers", async () => {
+    const wrapper = mount(BccPagination, {
+      props: {
+        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+        rowsPerPage: 1,
+        rowsPerPageOptions: [1, 3, 5, 7, 9],
+      },
+    });
+
+    expect(wrapper.findAll(".bcc-pagination-button").at(4)?.html()).contains("16");
+
+    await wrapper.find(".bcc-select").setValue("3");
+
+    expect(wrapper.findAll(".bcc-pagination-button").at(4)?.html()).contains("6");
+
+    await wrapper.find(".bcc-select").setValue("5");
+
+    expect(wrapper.findAll(".bcc-pagination-button").at(4)?.html()).contains("4");
+
+    await wrapper.find(".bcc-select").setValue("7");
+
+    expect(wrapper.findAll(".bcc-pagination-button").at(3)?.html()).contains("3");
+
+    await wrapper.find(".bcc-select").setValue("9");
+
+    expect(wrapper.findAll(".bcc-pagination-button").at(2)?.html()).contains("2");
+  });
+
+  it("paginatedItems is displaying the right contents when switching page", async () => {
+    const wrapper = mount(BccPagination, {
+      props: {
+        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+        rowsPerPage: 3,
+      },
+    });
+
+    expect(wrapper.emitted("update:paginatedItems")![0]).toEqual([[1, 2, 3]]);
+
+    await wrapper.find(".bcc-pagination-arrow-right").trigger("click");
+
+    expect(wrapper.emitted("update:paginatedItems")![1]).toEqual([[4, 5, 6]]);
+  });
+});

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

@@ -0,0 +1,184 @@
+import BccPagination from "./BccPagination.vue";
+import BccTable from "../BccTable/BccTable.vue";
+import BccButton from "../BccButton/BccButton.vue";
+import BccBadge from "../BccBadge/BccBadge.vue";
+import { ChevronRightIcon } from "@bcc-code/icons-vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+  title: "Other/BccPagination",
+  component: BccPagination,
+  argTypes: {
+    align: {
+      options: ["left", "center", "right"],
+      control: { type: "radio" },
+    },
+  },
+} as Meta<typeof BccPagination>;
+
+const Template: StoryFn<typeof BccPagination> = (args) => ({
+  components: { BccPagination, BccTable, BccButton, BccBadge },
+  setup() {
+    const paginatedItems = ref(args.items);
+
+    const columns = ref([
+      {
+        text: "Year group",
+        key: "year_group",
+      },
+      {
+        text: "Name",
+        key: "name",
+      },
+      {
+        text: "Status",
+        key: "status",
+      },
+      {
+        text: "Progress",
+        key: "progress.amount",
+      },
+      {
+        text: "Actions",
+        key: "actions",
+        sortable: false,
+      },
+    ]);
+
+    return { args, paginatedItems, columns, ChevronRightIcon };
+  },
+  template: `
+    <BccTable :items="paginatedItems" :columns="columns">
+    <template #item.status="{ item }">
+        <BccBadge :context="item.status.context">{{ item.status.text }}</BccBadge>
+      </template>
+      <template #item.actions="{ item }">
+        <BccButton variant="tertiary" size="sm" :padding="false" :icon="ChevronRightIcon" iconRight>Evaluation</BccButton>
+      </template>
+    </BccTable>
+    <BccPagination :items="args.items" :align="args.align" :displayRowsPerPage="args.displayRowsPerPage" :displayLeftEllipsis="args.displayLeftEllipsis" :displayRightEllipsis="args.displayRightEllipsis" :rowsPerPageOptions="args.rowsPerPageOptions" :rowsPerPage="args.rowsPerPage" :maxButtonsDisplayed="args.maxButtonsDisplayed" v-model:paginatedItems="paginatedItems" />
+  `,
+});
+
+export const Example = Template.bind({});
+Example.args = {
+  rowsPerPageOptions: [1, 2, 4, 6],
+  rowsPerPage: 4,
+  align: "right",
+  maxButtonsDisplayed: 3,
+  displayLeftEllipsis: true,
+  displayRightEllipsis: true,
+  displayRowsPerPage: true,
+  items: [
+    {
+      id: 1,
+      year_group: "23/24",
+      name: "Ola Nordmann",
+      status: { text: "On Track", context: "success" },
+      progress: {
+        amount: 2,
+      },
+    },
+    {
+      id: 2,
+      year_group: "22/23",
+      name: "Johan Oscar",
+      status: { text: "Finished", context: "info" },
+      progress: {
+        amount: 25,
+      },
+    },
+    {
+      id: 3,
+      year_group: "22/23",
+      name: "Ada Lovelace",
+      status: { text: "Behind Schedule", context: "warning" },
+      progress: {
+        amount: 15,
+      },
+    },
+    {
+      id: 4,
+      year_group: "23/24",
+      name: "Firmus Piett",
+      status: { text: "On Track", context: "success" },
+      progress: {
+        amount: 15,
+      },
+    },
+    {
+      id: 5,
+      year_group: "22/23",
+      name: "John Pork",
+      status: { text: "On Track", context: "warning" },
+      progress: {
+        amount: 45,
+      },
+    },
+    {
+      id: 6,
+      year_group: "23/24",
+      name: "John Doe",
+      status: { text: "Behind Schedule", context: "info" },
+      progress: {
+        amount: 80,
+      },
+    },
+    {
+      id: 7,
+      year_group: "22/23",
+      name: "G Man",
+      status: { text: "Finished", context: "sucess" },
+      progress: {
+        amount: 100,
+      },
+    },
+    {
+      id: 8,
+      year_group: "23/24",
+      name: "Jane Doe",
+      status: { text: "Finished", context: "info" },
+      progress: {
+        amount: 37,
+      },
+    },
+    {
+      id: 9,
+      year_group: "23/24",
+      name: "Daphne Bennet",
+      status: { text: "Behind Schedule", context: "warning" },
+      progress: {
+        amount: 45,
+      },
+    },
+    {
+      id: 10,
+      year_group: "22/24",
+      name: "Lorem Ipsum",
+      status: { text: "On Track", context: "warning" },
+      progress: {
+        amount: 10,
+      },
+    },
+    {
+      id: 11,
+      year_group: "22/23",
+      name: "Nathaniel B",
+      status: { text: "On Track", context: "sucess" },
+      progress: {
+        amount: 95,
+      },
+    },
+    {
+      id: 12,
+      year_group: "22/23",
+      name: "Nathaniel T",
+      status: { text: "On Track", context: "sucess" },
+      progress: {
+        amount: 20,
+      },
+    },
+  ],
+};